Use theme design token CSS custom properties for dark mode variants

Description

Requires theme design tokens in GitLab for CSS custom properties gitlab-ui#2365 (closed)

Use design tokens to generate CSS custom properties for theme colors. This should remove extra SCSS output from gitlab-theme-super-sidebar mixin, reducing CSS shipped to users. The CSS custom properties should allow for each theme to override values.

Using CSS custom properties should also allow for dark mode theme colors to override values

Pseudo code

theme_red.scss

@import '@gitlab/ui/dist/tokens/scss/tokens';

body {
  &.ui-red {
    --theme-color-lightest: var(--theme-red-50);
    --theme-color-light: var(--theme-red-200);
    --theme-color: var(--theme-red-900);
    --theme-color-darkest: var(--theme-red-900);
  }
}

dark_mode_overrides.scss

@import '@gitlab/ui/dist/tokens/scss/tokens.dark';

Possible steps:

1. Add theme color design tokens gitlab-ui!3627 (merged)
2. Use CSS custom properties for themes
   1. Import CSS custom properties from theme tokens
   2. Use local CSS custom properties for super sidebar themes
   3. Override CSS custom properties for each theme
   4. Remove gitlab-theme-super-sidebar mixin
3. Add dark mode values for theme design tokens
4. (extension) Add semantic design tokens for super sidebar themes