variable_data.ts

The variable vocabulary: which variants each style-variable family has, and the fitted values its ladder steps through.

Variant lists name the steps (space_variants, numeric_scale_variants); the tables beside them hold what those steps are worth, keyed by variant and unitless - the emitters in variables.ts add the unit and any calc() wrapper, so one table serves both the CSS and anything that wants the numbers. A step the CSS derives from a knob instead (the font sizes above md) keeps its default value here as the numeric twin, which the CSS never reads. Colors are the exception: their values are derived rather than fitted per step, and live in ramps.ts.

view source

Declarations
#

66 declarations

alpha_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {alpha_variants} from '@fuzdev/fuz_css/variable_data.js';

AlphaVariant
#

BORDER_RADII
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl" | "xs3" | "xs2", number>>

type Readonly<Record<BorderRadiusVariant, number>>

import {BORDER_RADII} from '@fuzdev/fuz_css/variable_data.js';

Border radii in rem, before the --radius_scale multiplier.

border_radius_variants
#

variable_data.ts view source

readonly ["xs3", "xs2", "xs", "sm", "md", "lg", "xl"] import {border_radius_variants} from '@fuzdev/fuz_css/variable_data.js';

border_width_variants
#

variable_data.ts view source

readonly [1, 2, 3, 4, 5, 6, 7, 8, 9] import {border_width_variants} from '@fuzdev/fuz_css/variable_data.js';

BorderRadiusVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl" | "xs3" | "xs2"

type "lg" | "md" | "sm" | "xs" | "xl" | "xs3" | "xs2"

import type {BorderRadiusVariant} from '@fuzdev/fuz_css/variable_data.js';

BorderWidthVariant
#

variable_data.ts view source

6 | 1 | 3 | 5 | 7 | 4 | 2 | 8 | 9

type 6 | 1 | 3 | 5 | 7 | 4 | 2 | 8 | 9

import type {BorderWidthVariant} from '@fuzdev/fuz_css/variable_data.js';

color_scheme_variants
#

ColorSchemeVariant
#

variable_data.ts view source

"dark" | "light"

type "dark" | "light"

import type {ColorSchemeVariant} from '@fuzdev/fuz_css/variable_data.js';

darken_lighten_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {darken_lighten_variants} from '@fuzdev/fuz_css/variable_data.js';

DarkenLightenVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

type "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

import type {DarkenLightenVariant} from '@fuzdev/fuz_css/variable_data.js';

distance_variants
#

variable_data.ts view source

readonly ["xs", "sm", "md", "lg", "xl"] import {distance_variants} from '@fuzdev/fuz_css/variable_data.js';

DISTANCES
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl", number>>

type Readonly<Record<DistanceVariant, number>>

import {DISTANCES} from '@fuzdev/fuz_css/variable_data.js';

Layout distances in px - breakpoint-ish widths, insensitive to font size.

DistanceVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl"

type "lg" | "md" | "sm" | "xs" | "xl"

import type {DistanceVariant} from '@fuzdev/fuz_css/variable_data.js';

duration_variants
#

DURATIONS
#

variable_data.ts view source

Readonly<Record<6 | 1 | 3 | 5 | 4 | 2, number>>

type Readonly<Record<DurationVariant, number>>

import {DURATIONS} from '@fuzdev/fuz_css/variable_data.js';

Transition durations in seconds, from a UI beat to a slow ambient sweep.

DurationVariant
#

variable_data.ts view source

6 | 1 | 3 | 5 | 4 | 2

type 6 | 1 | 3 | 5 | 4 | 2

import type {DurationVariant} from '@fuzdev/fuz_css/variable_data.js';

font_family_variants
#

variable_data.ts view source

readonly ["font_family_sans", "font_family_serif", "font_family_mono"] import {font_family_variants} from '@fuzdev/fuz_css/variable_data.js';

font_size_names
#

font_size_variants
#

variable_data.ts view source

readonly ["xs", "sm", "md", "lg", "xl", "xl2", "xl3", "xl4", "xl5", "xl6", "xl7", "xl8", "xl9"] import {font_size_variants} from '@fuzdev/fuz_css/variable_data.js';

FONT_SIZES
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9", number>>

type Readonly<Record<SizeVariant, number>>

import {FONT_SIZES} from '@fuzdev/fuz_css/variable_data.js';

Font sizes in rem. md and the steps below it are fitted literals the CSS emits. The steps above md are md * TYPE_SCALE_RATIO ** n rounded to two places - the numeric twin of the CSS defaults, which derive from --type_scale_ratio and never read these values - kept for anything that wants the default numbers, and pinned to the formula by the tests.

FontFamilyVariant
#

variable_data.ts view source

"font_family_sans" | "font_family_serif" | "font_family_mono"

type "font_family_sans" | "font_family_serif" | "font_family_mono"

import type {FontFamilyVariant} from '@fuzdev/fuz_css/variable_data.js';

format_palette_gloss
#

variable_data.ts view source

(letter: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j"): string import {format_palette_gloss} from '@fuzdev/fuz_css/variable_data.js';

Formats a letter's gloss for display: the color name plus the default intent binding where one exists, e.g. blue · default accent. Shared by display surfaces so the phrasing can't drift.

letter

returns

string

icon_size_variants
#

variable_data.ts view source

readonly ["xs", "sm", "md", "lg", "xl", "xl2", "xl3"] import {icon_size_variants} from '@fuzdev/fuz_css/variable_data.js';

ICON_SIZES
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3", number>>

type Readonly<Record<IconSizeVariant, number>>

import {ICON_SIZES} from '@fuzdev/fuz_css/variable_data.js';

Icon sizes in px, stepping up by roughly the golden ratio and rounded to the nearest pixel. Deliberately insensitive to font size, hence px rather than rem.

IconSizeVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3"

type "lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3"

import type {IconSizeVariant} from '@fuzdev/fuz_css/variable_data.js';

intensity_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {intensity_variants} from '@fuzdev/fuz_css/variable_data.js';

IntensityVariant
#

intent_variants
#

variable_data.ts view source

readonly ["accent", "positive", "negative", "caution", "info"] import {intent_variants} from '@fuzdev/fuz_css/variable_data.js';

IntentVariant
#

variable_data.ts view source

"accent" | "positive" | "negative" | "caution" | "info"

type "accent" | "positive" | "negative" | "caution" | "info"

import type {IntentVariant} from '@fuzdev/fuz_css/variable_data.js';

The semantic color intents that derive full scales through the shared ramps. The neutral is also an intent (--hue_neutral) but is absent here because its scales are shade_* and text_* rather than a neutral_00 through neutral_100 family.

line_height_names
#

line_height_variants
#

variable_data.ts view source

readonly ["xs", "sm", "md", "lg", "xl"] import {line_height_variants} from '@fuzdev/fuz_css/variable_data.js';

LINE_HEIGHTS
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl", number>>

type Readonly<Record<LineHeightVariant, number>>

import {LINE_HEIGHTS} from '@fuzdev/fuz_css/variable_data.js';

Line heights, unitless so they scale with the font size.

LineHeightVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl"

type "lg" | "md" | "sm" | "xs" | "xl"

import type {LineHeightVariant} from '@fuzdev/fuz_css/variable_data.js';

numeric_scale_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {numeric_scale_variants} from '@fuzdev/fuz_css/variable_data.js';

numeric_scale_with_extremes
#

variable_data.ts view source

readonly ["min", "00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100", "max"] import {numeric_scale_with_extremes} from '@fuzdev/fuz_css/variable_data.js';

NumericScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

type "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

import type {NumericScaleVariant} from '@fuzdev/fuz_css/variable_data.js';

The standard numeric scale used across multiple variable families. Provides 13 steps from 00 (surface/subtle) to 100 (contrast/bold).

NumericScaleWithExtremesVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

type "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

import type {NumericScaleWithExtremesVariant} from '@fuzdev/fuz_css/variable_data.js';

Numeric scale with min/max extremes for scales that need untinted endpoints. Used by text and shade scales where min/max represent pure black/white values.

outline_width_variants
#

OutlineWidthVariant
#

variable_data.ts view source

"focus" | "active"

type "focus" | "active"

import type {OutlineWidthVariant} from '@fuzdev/fuz_css/variable_data.js';

OVERLAY_ALPHAS
#

variable_data.ts view source

Readonly<Record<"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100", Readonly<{ hex: string; percent: string; }>>>

type Readonly<Record<NumericScaleVariant, Readonly<{ hex: string; percent: string; }>>>

import {OVERLAY_ALPHAS} from '@fuzdev/fuz_css/variable_data.js';

The perceptual alpha curve the darken_*/lighten_* overlays share: the hex alpha byte each stop renders with, and the percentage it works out to.

palette_glosses
#

variable_data.ts view source

Record<"a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j", { color: string; binding?: "accent" | "positive" | "negative" | "caution" | "info" | "neutral" | undefined; }>

type Record<PaletteVariant, { color: string; binding?: "accent" | "positive" | "negative" | "caution" | "info" | "neutral" | undefined; }>

import {palette_glosses} from '@fuzdev/fuz_css/variable_data.js';

Letter glosses: each palette slot's default color plus its default intent binding where one exists. Display data for docs and the theme editor - themes recolor the slots, so these describe the defaults, not promises. The neutral binds like an intent (--hue_neutral: var(--hue_f)) despite being absent from intent_variants.

palette_variants
#

variable_data.ts view source

readonly ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] import {palette_variants} from '@fuzdev/fuz_css/variable_data.js';

PaletteVariant
#

variable_data.ts view source

"a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j"

type "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j"

import type {PaletteVariant} from '@fuzdev/fuz_css/variable_data.js';

shade_scale_variants
#

variable_data.ts view source

readonly ["min", "00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100", "max"] import {shade_scale_variants} from '@fuzdev/fuz_css/variable_data.js';

shade_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {shade_variants} from '@fuzdev/fuz_css/variable_data.js';

ShadeScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

type NumericScaleWithExtremesVariant

import type {ShadeScaleVariant} from '@fuzdev/fuz_css/variable_data.js';

Full shade scale including min/max extremes for untinted surfaces.

ShadeVariant
#

shadow_alpha_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {shadow_alpha_variants} from '@fuzdev/fuz_css/variable_data.js';

SHADOW_ALPHAS
#

variable_data.ts view source

Readonly<Record<"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100", Readonly<{ light: number; dark: number; }>>>

type Readonly<Record<NumericScaleVariant, Readonly<{ light: number; dark: number; }>>>

import {SHADOW_ALPHAS} from '@fuzdev/fuz_css/variable_data.js';

Shadow alphas in %, per color scheme, before the --shadow_alpha_scale multiplier. A perceptually-uniform curve - small gaps at the low end where subtle changes are perceptible, large at the high end - boosted at the low end in dark mode, where shadows read weakly against dark backgrounds.

SHADOW_GEOMETRY
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl", Readonly<{ offset: number; blur: number; spread: number; }>>>

type Readonly<Record<ShadowSizeVariant, Readonly<{ offset: number; blur: number; spread: number; }>>>

import {SHADOW_GEOMETRY} from '@fuzdev/fuz_css/variable_data.js';

Shadow geometry per size in px. The directional variants sign the offset, and the inset pair signs it the other way, so top always names the lit edge; see shadow_variant_prefixes for the six shapes each size emits.

shadow_semantic_values
#

variable_data.ts view source

readonly ["umbra", "highlight", "glow", "shroud"] import {shadow_semantic_values} from '@fuzdev/fuz_css/variable_data.js';

shadow_size_variants
#

variable_data.ts view source

readonly ["xs", "sm", "md", "lg", "xl"] import {shadow_size_variants} from '@fuzdev/fuz_css/variable_data.js';

shadow_variant_prefixes
#

variable_data.ts view source

readonly ["shadow_", "shadow_top_", "shadow_bottom_", "shadow_inset_", "shadow_inset_top_", "shadow_inset_bottom_"] import {shadow_variant_prefixes} from '@fuzdev/fuz_css/variable_data.js';

ShadowAlphaVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

type "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100"

import type {ShadowAlphaVariant} from '@fuzdev/fuz_css/variable_data.js';

ShadowSemanticValue
#

variable_data.ts view source

"umbra" | "highlight" | "glow" | "shroud"

type "umbra" | "highlight" | "glow" | "shroud"

import type {ShadowSemanticValue} from '@fuzdev/fuz_css/variable_data.js';

ShadowSizeVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl"

type "lg" | "md" | "sm" | "xs" | "xl"

import type {ShadowSizeVariant} from '@fuzdev/fuz_css/variable_data.js';

SizeVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9"

type "lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9"

import type {SizeVariant} from '@fuzdev/fuz_css/variable_data.js';

SPACE_SIZES
#

variable_data.ts view source

Readonly<Record<"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9" | "xs5" | "xs4" | "xs3" | "xs2" | "xl10" | "xl11" | "xl12" | "xl13" | "xl14" | "xl15", number>>

type Readonly<Record<SpaceVariant, number>>

import {SPACE_SIZES} from '@fuzdev/fuz_css/variable_data.js';

Spaces in rem, before the --space_scale multiplier.

space_variants
#

variable_data.ts view source

readonly ["xs5", "xs4", "xs3", "xs2", "xs", "sm", "md", "lg", "xl", "xl2", "xl3", "xl4", "xl5", "xl6", "xl7", "xl8", "xl9", "xl10", "xl11", "xl12", "xl13", "xl14", "xl15"] import {space_variants} from '@fuzdev/fuz_css/variable_data.js';

SpaceVariant
#

variable_data.ts view source

"lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9" | "xs5" | "xs4" | "xs3" | "xs2" | "xl10" | "xl11" | "xl12" | "xl13" | "xl14" | "xl15"

type "lg" | "md" | "sm" | "xs" | "xl" | "xl2" | "xl3" | "xl4" | "xl5" | "xl6" | "xl7" | "xl8" | "xl9" | "xs5" | "xs4" | "xs3" | "xs2" | "xl10" | "xl11" | "xl12" | "xl13" | "xl14" | "xl15"

import type {SpaceVariant} from '@fuzdev/fuz_css/variable_data.js';

text_scale_variants
#

variable_data.ts view source

readonly ["min", "00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100", "max"] import {text_scale_variants} from '@fuzdev/fuz_css/variable_data.js';

text_variants
#

variable_data.ts view source

readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {text_variants} from '@fuzdev/fuz_css/variable_data.js';

TextScaleVariant
#

variable_data.ts view source

"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" | "min" | "max"

type NumericScaleWithExtremesVariant

import type {TextScaleVariant} from '@fuzdev/fuz_css/variable_data.js';

Full text scale including min/max extremes for knockout text.

TextVariant
#

TYPE_SCALE_RATIO
#

variable_data.ts view source

1.272 import {TYPE_SCALE_RATIO} from '@fuzdev/fuz_css/variable_data.js';

The default ratio between font size steps above md, roughly sqrt(golden ratio). In CSS it is the --type_scale_ratio knob those steps derive from.

Imported by
#