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 to fg_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;
}