Refactor themes

[planktonic]

Right now themes provide a text and background color, and other components “attach” their colors to each theme as they need.

This system doesn’t scale well now that we have several components that use themes. Each theme gets larger, and is populated with component-specific design tokens. this also makes it difficult to know where to find the configuration of a component.

Proposal:

• Each theme will specify a range of semantically-named colors, selected from the global color palette e.g. --bs-theme-color-dark, --bs-theme-background-color-base, bs-theme-interactive-color-light
• each component can then use those colors instead of the colors in the global color palette. Using that component in an element with a different theme will switch the component colors automatically, without configuration on the component level
• utility classes should also apply theme colors instead of colors direct from the palette e.g. .u-bg-theme-background-dark. Changing the theme will then automatically change the colors
• In future, implementing a dark and/or high-contrast mode will then be a case of changing the theme variables, with no need to edit the components individually.

Example:

(Pseudocode, not checked that this as we want it works yet. Colors are randomly chosen)

:root {
  --bs-color-grayscale-dark-4: #252430;
  --bs-color-grayscale-white: #fff;
  --bs-color-positive-dark-2: #00663f;
  --bs-color-positive-light-4: #d9fff0;
}

:root,
[data-theme="default"] {
  --bs-theme-color: var(--bs-color-grayscale-dark-4);
  --bs-theme-background-color: var(--bs-color-grayscale-white);
  --bs-theme-interactive-color: var(--bs-color-brand-1-dark-1);
  --bs-theme-interactive-dark: var(--bs-color-brand-1-dark-2);
  --bs-theme-shadow-color: var(--bs-color-brand-1-dark-1-rgb);
}

[data-theme="positive"] {
  --bs-theme-color: var(--bs-color-positive-dark-2);
  --bs-theme-background-color: var(--bs-color-positive-light-4);
  --bs-theme-interactive-color: var(--bs-color-positive-light-4);
  --bs-theme-shadow-color: var(--bs-color-positive-light-4-rgb);
}

:root {
  --bs-a-button-color: var(--theme-background-color);
  --bs-a-button-background-color: var(--theme-interactive-color);
  --bs-a-button-border-color: var(--theme-interactive-color);

  --bs-a-button-color-hover: var(--theme-background-color);
  --bs-a-button-background-color-hover: var(--theme-interactive-color-dark);
  --bs-a-button-border-color-hover: var(--theme-interactive-color-dark);
}

/* design-tokens/shadows.scss */

$shadows: (
  'theme':
    shadow.generate(
      $color: rgba(var(custom-property.name('theme', 'shadow')), 0.075),
      $offset: var(custom-property.name('size', 's6')),
      $blur-radius: var(custom-property.name('size', 's3')),
    ),
  'theme-center':
    shadow.generate(
      $color: rgba(var(custom-property.name('theme', 'shadow')), 0.075),
      $offset: 0rem,
      $blur-radius: var(custom-property.name('size', 's3')),
    )
);