consumer semantic tokens: defining in code

[sashafirsov]

AC:

• source level theme definition
• support for generic theme interface
• implementation of theme with interface
• theme source editor with validations and visual hints like colors or click-through navigation

Parent story #16

[sashafirsov]

🤔 Dev notes.

3 options: TypeScript, CSS, .tokens.json

TypeScript

Allows to create the type definition as ConsumerSemanticTheme interface, theme object is an instance of type.
The integrity would be supported on TS compiler level, documentation generated by JsDocs or Decorators

CSS

The theme is defined as set of mixins - classes, the hierarchy defined by class nesting.

Final CSS is generated from source one and comprise the mixins and css variables.

The theme .tokens.json is generated from the source CSS.

.tokens.json

is edited say by Design Tokens Figma plugin or by Amazon Style Dictionary

[sashafirsov]

Native CSS theme support

CSS color-scheme allows to enforce the theme for particular element

:root { color-scheme: light dark; }
header, footer { color-scheme: only dark; }
main { color-scheme: light dark;  }

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

/* OR */
@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

use the light-dark() function to set the foreground and background colors.

To style elements based on color scheme preferences, use the prefers-color-scheme media query.

---

Color dimming by hsl

color: hsl(from #0000FF h s calc(l + 20))