✨ Add css variables through Master CSS to get better DX

[mockingjet]

Description

Master CSS is expected to be the best design system tool for some developers (at least me). And CSS variables play an important role to build tokens and switch themes. It would be nice if you provide js-functions to add/modify css variables. It can also combine language service to get autocompletion when coding class="$var:value". With typescript's help, provide an generic interface to define css tokens like

interface CssVarScheme {
    primary: string;
    secondary?: string;
}

Style.defineCssVars<CssVarScheme>({
    light: { 
        primary: '...',
        secondary: '...',
    },
    dark: { 
        secondary: '...',
    }, // property 'primary' is missing
    anotherTheme: {
        primary: '...',
        warning: '...' // 'warning' doesn't exist in type 'CssVarScheme'
    },
})

And speaking of Style.extend api, It is not so distinct. Maybe use Style.defineSomething like above can be more straightforward and provide better DX with typescript.

Style.defineValues({
    width: { ... },
    heiight: { ... } // property 'heiight' doesnt exist
})

Style.defineColorSchemes(['light', 'dark', 'anotherTheme', 123 // type '123' is not assignable to parameter of type 'String' ])

[1aron]

@mockingjet I'm currently not that satisfied with Master CSS' custom API either, so we expect to redesign the API in 2.0 ( AOT complication ). The structure you propose is quite concise. 🤩

[itsezc]

This could become a part of the "Themes" spec! As it goes hand in hand with how tokens can be defined.

[1aron]

#79 Available in 2.0 Beta! 🥳