Skip to content

Add Token theme support

If we need support for themes, use [data-theme=dark] for styling
See https://bradfrost.com/blog/post/creating-themeable-design-systems/
Should also support prefers-color-scheme but may be overridden by the application.

Will probably have the same for compact mode. But for the first version we go for default size only.

Sizes should not be relative other than for fonts/line-heights (have checked with Eivind).

:root,
[data-theme="light"] {
  --sds-color-base-background-light: #f8f8f8;
  --sds-color-base-background-dark: #0e0033;
  --sds-color-typography-dark-primary: #0b0132;
  --sds-color-typography-dark-secondary: #0b013299;
}
[data-theme="dark"] {
  --sds-color-base-background-light: #f8f8f8;
  --sds-color-base-background-dark: #0e0033;
  --sds-color-typography-dark-primary: #0b0132;
  --sds-color-typography-dark-secondary: #0b013299;
}

@media (prefers-color-scheme: light) {
  :root {
    --sds-color-base-background-light: #f8f8f8;
    --sds-color-base-background-dark: #0e0033;
    --sds-color-typography-dark-primary: #0b0132;
    --sds-color-typography-dark-secondary: #0b013299;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --sds-color-base-background-light: #f8f8f8;
    --sds-color-base-background-dark: #0e0033;
    --sds-color-typography-dark-primary: #0b0132;
    --sds-color-typography-dark-secondary: #0b013299;
  }
}
:root,
[data-theme-density="default"] {
  --sds-size-base-xxs: 4px;
  --sds-size-base-xxs1: 6px;
}
[data-theme-density="compact"] {
  --sds-size-base-xxs: 8px;
  --sds-size-base-xxs1: 12px;
}
Edited by Kristoffer Nordström