{ axis: KnobAxis; title: string; }[] import {knob_axes} from '@fuzdev/fuz_css/knobs.js'; The theme-space axes in editor display order, with display titles.
knobs.ts
The theme knob catalog: typed metadata for the style variables that themes are expected to turn, keyed by variable name.
This is a side catalog over variables.ts — StyleVariable stays the authored and rendered value form, and the catalog adds the metadata that value form can't carry: what kind of value a knob takes (which widget edits it), which axis of the theme space it moves, how much leverage it has (its control size in the editor), and which tier of the two-tier theme policy it belongs to. Defaults and light/dark slots are not duplicated here — join against default_variables by name.
The catalog deliberately covers only the knob tier, not all ~490 variables:
derived ramp stops, color stops, and most site hooks are the escape-hatch
tier and stay out. A few catalog entries are hooks (hook: true) consumed
by style.css with fallbacks rather than declared variables — they exist
here so themes can set them without tripping the no-invented-variables
check.
Declarations #
9 declarations
knob_axes #
knob_axes
KnobAxis #
KnobAxis
KnobAxis import type {KnobAxis} from '@fuzdev/fuz_css/knobs.js'; The axis of the theme-space taxonomy a knob moves.
KnobKind #
KnobKind
KnobKind import type {KnobKind} from '@fuzdev/fuz_css/knobs.js'; The value kind of a knob, determining the editor widget and how the value
validates. text is the unenriched fallback kind.
KnobLeverage #
KnobLeverage
KnobLeverage import type {KnobLeverage} from '@fuzdev/fuz_css/knobs.js'; Leverage tier: how much of the system a knob reshapes, which the editor
renders as control size (lg headline knobs down to sm escape hatches).
KnobTier #
KnobTier
KnobTier import type {KnobTier} from '@fuzdev/fuz_css/knobs.js'; The two-tier theme policy: semantic-tier knobs (intent bindings + levers) are safe for registry themes; palette-tier knobs (the letter hues) mark a theme as an exemplar.
theme_knob_by_name #
theme_knob_by_name
Map<string, ThemeKnob> import {theme_knob_by_name} from '@fuzdev/fuz_css/knobs.js'; The catalog indexed by variable name.
theme_knob_hook_names #
theme_knob_hook_names
Set<string> import {theme_knob_hook_names} from '@fuzdev/fuz_css/knobs.js'; Names of hook knobs — consumed by style.css via fallbacks, not declared in default_variables. Theme validation unions these with the declared variable names.
theme_knobs #
theme_knobs
ThemeKnob[] import {theme_knobs} from '@fuzdev/fuz_css/knobs.js'; The theme knobs in editor display order: by axis, high leverage first, with the palette tier last within the color axis.
ThemeKnob #
ThemeKnob
ThemeKnob import type {ThemeKnob} from '@fuzdev/fuz_css/knobs.js'; name
type StyleVariableName
kind
type KnobKind
axis
type KnobAxis
leverage
type KnobLeverage
tier
type KnobTier
range?
The safe envelope for scalar kinds — editor sliders clamp to it, while direct numeric entry may exceed it knowingly.
type [number, number]
step?
type number
values?
Allowed values for the enum kind.
type Array<string>
hook?
True for knobs consumed by style.css via var() fallbacks instead of
being declared in default_variables (e.g. heading_font_weight, whose
per-tier fallbacks flatten when set).
type boolean
bindable?
True for hue knobs whose default is a palette-letter binding
(var(--hue_X)) — the intent and neutral hues. Editors render these as
a letter picker with a custom-angle escape, and edits may write either a
binding or a literal angle.
type boolean