# theme/css-vars (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/theme/css-vars.ts](https://github.com/Tahul/zidane/blob/main/ui/src/theme/css-vars.ts).

## Functions

### `contrastToCssVars`

Function.

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.

```ts
function contrastToCssVars(level: number, appearance: Appearance): CssVarMap
```

**Parameters**

- `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** `CssVarMap`

Source: [ui/src/theme/css-vars.ts:151](https://github.com/Tahul/zidane/blob/main/ui/src/theme/css-vars.ts#L151)

### `depthToCssVars`

Function.

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`).

```ts
function depthToCssVars(level: number, surfaces: SurfaceLadder): CssVarMap
```

**Parameters**

- `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** `CssVarMap`

Source: [ui/src/theme/css-vars.ts:174](https://github.com/Tahul/zidane/blob/main/ui/src/theme/css-vars.ts#L174)

### `paletteToCssVars`

Function.

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.

```ts
function paletteToCssVars(p: ResolvedPalette): CssVarMap
```

**Parameters**

- `p` (`ResolvedPalette`): The resolved palette.

**Returns** `CssVarMap`: The custom properties to write onto `:root` or into a stylesheet.

Source: [ui/src/theme/css-vars.ts:47](https://github.com/Tahul/zidane/blob/main/ui/src/theme/css-vars.ts#L47)

## Types

### `CssVarMap`

Type.

A map of `--zg-*` custom property names to their CSS values.

```ts
type CssVarMap = Record<`--zg-${string}`, string>
```

Source: [ui/src/theme/css-vars.ts:38](https://github.com/Tahul/zidane/blob/main/ui/src/theme/css-vars.ts#L38)