zidanetheme/css-vars
import { … } from 'zidane-ui'ui/src/theme/css-vars.ts
Functions#
contrastToCssVarsFunction#
Contrast control → the three variables the CSS contrast layer consumes.
level 100 → identity.
level <100 → text is faded toward the background (base < 100%).
level >100 → text is pushed toward pure white / black (boost > 0%).
Borders take a quarter of the boost so raising contrast sharpens text without turning every hairline into a wall.
function contrastToCssVars(level: number, appearance: Appearance): CssVarMapParameters
| Name | Type | Description |
|---|---|---|
| level | number | The contrast setting in percent, clamped to 50..200. 100 changes nothing. |
| appearance | Appearance | The palette appearance, which picks white or black as the target text is pushed toward. |
Returns
depthToCssVarsFunction#
Contrast → depth. Past 150 the surfaces go FLAT: no light, no shadows,
hairlines at full border strength, so separation is all line and no
atmosphere. Below 100 the ladder compresses toward the canvas along with
the text (--zg-depth-mix).
function depthToCssVars(level: number, surfaces: SurfaceLadder): CssVarMapParameters
| Name | Type | Description |
|---|---|---|
| level | number | The contrast setting in percent, clamped to 50..200. Above 150 the surfaces go flat. |
| surfaces | SurfaceLadder | The surface ladder to take the shadows and sheen from. |
Returns
paletteToCssVarsFunction#
Turns a resolved palette into --zg-* custom properties: surfaces, lines, text, accent,
status colours, dots, sphere, depth inputs, diff and chip colours. Pure, with no DOM.
function paletteToCssVars(p: ResolvedPalette): CssVarMapParameters
| Name | Type | Description |
|---|---|---|
| p | ResolvedPalette | The resolved palette. |
Returns
CssVarMapThe custom properties to write onto :root or into a stylesheet.
Types#
CssVarMapType#
A map of --zg-* custom property names to their CSS values.
type CssVarMap = Record<`--zg-${string}`, string>