Funkwhale design system

Stylesheet: ~/ui/fw.css implements raw tokens, CSS sanitization and basic document rules, as well as design system classes and custom attributes for frontend, website and ui-docs.
Custom themes: can override fw.css rules. See Theming
Classes: qualitative choices (color-destructive-solid, shape-pill).
Custom ui- attributes: quantification (ui-block-size="48").
Custom properties: --color-100, --color-foreground-950, --block-size-80, ...
Types: ~/ui/generated/fw.ts exports fw class object (color, font, layout, align, padding, shape)
Attribute helpers: ~/ui/attributes.ts exports WithAttributes<ClassObject, UiAttributes> type utility for Ui component props and handles semantic Aria/HTML props with the toHtml<ElementName> utility.
Context: ~/ui/context.ts provides/injects contextual properties for inheriting through logical hierarchy.

Funkwhale design system ​