variables #
Style variables, or just "variables" in Moss, are CSS custom properties that can be grouped into a theme. Each variable can have values for light and/or dark color-schemes . They're design tokens with an API.
The goal of the variables system is to provide runtime theming that's efficient and ergnomic for both developers and end-users. Variables can be composed in multiple ways:
- by CSS classes, both utility and component
- by other variables, both in calculations and to add useful semantics (e.g.
button_fill_hover
defaults tofg_2
but can be themed independently) - in JS like the Svelte components in Fuz
Variables also provide an interface that's generally secure for user-generated content, if you're into that kind of thing.
The result is a flexible system that aligns with modern CSS to deliver high-capability UX and DX with minimal overhead.
export interface Theme {
name: string;
variables: Style_Variable[];
}
export interface Style_Variable {
name: string;
light?: string;
dark?: string;
summary?: string;
}