design system: Convert to CSS variables

[alcpereira]

Description

To change any spacing/color/etc, it's currently needed to go into the component themselves. With the introduction of the templates/themes, the only viable way would be to have CSS variables.

Note: This might be broken down into several PRs/Issues.

Example:

.bubble {
  border: 1px solid var(--light-grey);
}

should become

.bubble {
  border: var(--bubble-border);
}

with

:root {
  /* Main colors first*/
  --color-700: rgb(94, 90, 94);

  --bubble-border: 1px solid var(--color-700);
}

(Color variables naming will change with this issue)

Acceptance criteria

• [ ] Every hardcoded values that could be part of a design system (borders, gaps, padding, colors, etc.. almost everything minus the alignments like flex) should be converted to CSS variables

[flufynarwhal]

I can work on this starting on Monday.