readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {alpha_variants} from '@fuzdev/fuz_css/variable_data.js'; 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.
66 declarations
readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {alpha_variants} from '@fuzdev/fuz_css/variable_data.js'; "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" type NumericScaleVariant
import type {AlphaVariant} from '@fuzdev/fuz_css/variable_data.js'; 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.
readonly ["xs3", "xs2", "xs", "sm", "md", "lg", "xl"] import {border_radius_variants} from '@fuzdev/fuz_css/variable_data.js'; readonly [1, 2, 3, 4, 5, 6, 7, 8, 9] import {border_width_variants} from '@fuzdev/fuz_css/variable_data.js'; "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'; 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'; readonly ["light", "dark"] import {color_scheme_variants} from '@fuzdev/fuz_css/variable_data.js'; "dark" | "light" type "dark" | "light"
import type {ColorSchemeVariant} from '@fuzdev/fuz_css/variable_data.js'; 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'; "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'; readonly ["xs", "sm", "md", "lg", "xl"] import {distance_variants} from '@fuzdev/fuz_css/variable_data.js'; 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.
"lg" | "md" | "sm" | "xs" | "xl" type "lg" | "md" | "sm" | "xs" | "xl"
import type {DistanceVariant} from '@fuzdev/fuz_css/variable_data.js'; readonly [1, 2, 3, 4, 5, 6] import {duration_variants} from '@fuzdev/fuz_css/variable_data.js'; 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.
6 | 1 | 3 | 5 | 4 | 2 type 6 | 1 | 3 | 5 | 4 | 2
import type {DurationVariant} from '@fuzdev/fuz_css/variable_data.js'; readonly ["font_family_sans", "font_family_serif", "font_family_mono"] import {font_family_variants} from '@fuzdev/fuz_css/variable_data.js'; string[] import {font_size_names} from '@fuzdev/fuz_css/variable_data.js'; 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'; 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.
"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'; (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.
letterstring readonly ["xs", "sm", "md", "lg", "xl", "xl2", "xl3"] import {icon_size_variants} from '@fuzdev/fuz_css/variable_data.js'; 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.
"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'; readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {intensity_variants} from '@fuzdev/fuz_css/variable_data.js'; "00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" type NumericScaleVariant
import type {IntensityVariant} from '@fuzdev/fuz_css/variable_data.js'; readonly ["accent", "positive", "negative", "caution", "info"] import {intent_variants} from '@fuzdev/fuz_css/variable_data.js'; "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.
string[] import {line_height_names} from '@fuzdev/fuz_css/variable_data.js'; readonly ["xs", "sm", "md", "lg", "xl"] import {line_height_variants} from '@fuzdev/fuz_css/variable_data.js'; 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.
"lg" | "md" | "sm" | "xs" | "xl" type "lg" | "md" | "sm" | "xs" | "xl"
import type {LineHeightVariant} from '@fuzdev/fuz_css/variable_data.js'; 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'; 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'; "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).
"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.
readonly ["focus", "active"] import {outline_width_variants} from '@fuzdev/fuz_css/variable_data.js'; "focus" | "active" type "focus" | "active"
import type {OutlineWidthVariant} from '@fuzdev/fuz_css/variable_data.js'; 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.
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.
readonly ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"] import {palette_variants} from '@fuzdev/fuz_css/variable_data.js'; "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'; 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'; readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {shade_variants} from '@fuzdev/fuz_css/variable_data.js'; "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.
"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" type NumericScaleVariant
import type {ShadeVariant} from '@fuzdev/fuz_css/variable_data.js'; 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'; 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.
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.
readonly ["umbra", "highlight", "glow", "shroud"] import {shadow_semantic_values} from '@fuzdev/fuz_css/variable_data.js'; readonly ["xs", "sm", "md", "lg", "xl"] import {shadow_size_variants} from '@fuzdev/fuz_css/variable_data.js'; 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'; "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'; "umbra" | "highlight" | "glow" | "shroud" type "umbra" | "highlight" | "glow" | "shroud"
import type {ShadowSemanticValue} from '@fuzdev/fuz_css/variable_data.js'; "lg" | "md" | "sm" | "xs" | "xl" type "lg" | "md" | "sm" | "xs" | "xl"
import type {ShadowSizeVariant} from '@fuzdev/fuz_css/variable_data.js'; "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'; 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.
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'; "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'; 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'; readonly ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "95", "100"] import {text_variants} from '@fuzdev/fuz_css/variable_data.js'; "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.
"00" | "05" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90" | "95" | "100" type NumericScaleVariant
import type {TextVariant} from '@fuzdev/fuz_css/variable_data.js'; 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.