@virtahealth/substrate-styles v0.2.4

Substrate Styles

Cross-platform styling properties and UI theme generation.

Visual Primitives

Visual primitives are constants that define fundamental visual language attributes like color, spacing, typography and size. These can be composed to create a theme.

👀 View primitives ➞

Themes

Themes are the mapping of visual primitives to UI components like text, buttons, inputs, etc. A theme provides all the visual properties necessary to style new and existing UI components. Multiple alternate themes can be created, unified by shared primitives.

👀 View themes ➞

Universal Format

All Substrate primitives and styles are encoded in YAML, transformed into multiple formats and syntaxes with Theo, and exported for consumption by any Virta app or website.

When built, styles are emitted to ./dist in these formats:

• ES6 Modules
• CSS Modules
• JSON
• TypeScript Definitions (.d.ts)

Custom Themes

Substrate exports a set of base styles that constitute a base theme. Custom themes can be created from the base theme by using overrides, either locally in a project's style assignments or, in special cases, a custom theme exported from Substrate.