UI kit reference

theme/stylesheet

import { … } from 'zidane-ui'ui/src/theme/stylesheet.ts

Functions#

Every var the app writes for one theme at one contrast level.

TypeScript

function themeCssVars(theme: string | Theme, contrast?: number): CssVarMap

Parameters
Name	Type	Default	Description
theme	`string \| Theme`		A built-in theme's id (an unknown id throws), or a `Theme` of your own, derived the same way as the built-in ones.
contrast?	`number`	`100`	The contrast setting in percent. Defaults to 100.

CssVarMap

:root.dark { … } :root.light { … }. The class must be set before first paint (an inline script reading the stored / OS preference).

TypeScript

function themeStylesheet(
  options?: { contrast?: number; dark?: string | Theme; light?: string | Theme },
): string

Parameters
Name	Type	Default	Description
options?	`{ contrast?: number; dark?: string \| Theme; light?: string \| Theme }`	`{}`	`dark` and `light` are the themes for each appearance: a built-in theme's id or a `Theme` of your own (defaults `'default'` and `'light'`), and `contrast` is the contrast setting in percent (default 100).

string

The CSS text.