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