Research a technologies for theming with static typing

[vitonsky]

Currently we use too complex theming approach. To update theme, user must do:

• Override a design tokens in YML file
• Install a tools for compile a tokens to CSS files like https://github.com/bem/themekit and compile CSS files with themes
• Import CSS files and set CSS class with theme on root element that contains a themed elements

The problems

• Complexity are high, just to update colors we have to override YML files and recompile themes
• User may make a typos in YML files and CSS property will not match in runtime
• User have to know how a YML structure will be compiled to CSS properties. CSS properties names may be confused

The potential solutions

CSS in JS way

https://github.com/vanilla-extract-css/vanilla-extract project uses this approach to define styles

// styles.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10
});

We could try to use the same approach with createTheme builder, to generate a CSS properties names and theme class name.

Let's imagine that vars.color.brand will return --optionalProjectPrefix-color-brand or var(--optionalProjectPrefix-color-brand). Now we can bind a values defined in TS files to a values in CSS theme, because CSS properties names generates automatically and in case we will try use non defined values, a TypeScript compiller may catch us and generate error.

To use this approach we have to provide JS variables into CSS, so we have to use any CSS-in-JS library. We could use a https://github.com/callstack/linaria with zero runtime. We also may generate theme class with this tool.

The problem with derived styles

Not clear how to create derived styles for UI components.

We may want to have a button with a background color based on accent color but with changed HUE. How to implement it?

• We need access to a accent color, then change value of this color. How to do it?