[ { "description": "Color system (HSL components) — the reference design: warm hue-60 neutral spine, a NEUTRAL INK primary (v32, gh#1220), 和色/wa-iro semantics. The neutral spine still carries SmartHR's values and says so per line. The GoDX identity colour is a preset now, not a default: `@godxjp/ui/themes/godx.css` (emerald-teal #008066 since gh#1345). #fdfdfb warm off-white", "name": "--background", "tier": "foundation", "value": "60 33% 99%" }, { "description": "#23221e SmartHR TEXT_BLACK", "name": "--foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "── THE TRANSLUCENCY AXIS, SEPARATE FROM THE COLOUR AXIS (gh#901) ────────────────────────── A surface role says WHAT COLOUR; these say HOW OPAQUE. They are two different questions and conflating them is what made a translucent theme unable to have a polarity. Measured before this existed: the glass theme carried 184 declarations, and 50 of them were a role restated for no reason but to append an alpha — the card role set to a bare white at 12%. Restating the COLOUR is what shadows the library's own `.dark` block, because a declaration on the theme's scope beats an inherited value from `:root` whatever the specificity. So a theme that wanted frosted panes lost dark mode, and had to hand-author a second polarity it should never have owned. Of the 139 tokens only that theme declared, 109 are `initial` in their tier and DERIVE at the call site — they would all have followed the polarity for free if the roles had. With the alpha split out, a theme sets `--card-alpha: 12%` and never touches `--card`, so `--card` goes on flipping light/dark from the block below and every derived token follows. A ROLE MUST THEREFORE NOT CARRY ITS OWN ALPHA any more: `hsl(var(--card) / var(--card-alpha))` with a role that already carries one reads as two slashes — invalid at computed-value time, and the surface silently keeps the colour it had. That is this repo's documented number-one silent failure, and it is why the alpha has a home of its own now.", "name": "--card-alpha", "tier": "foundation", "value": "100%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--popover-alpha", "tier": "foundation", "value": "100%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--input-alpha", "tier": "foundation", "value": "100%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--secondary-hover-alpha", "tier": "foundation", "value": "100%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--secondary-active-alpha", "tier": "foundation", "value": "100%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--card", "tier": "foundation", "value": "60 33% 99%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--card-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--popover", "tier": "foundation", "value": "60 33% 99%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--popover-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "NEUTRAL INK (v32 decision A1, gh#1220) — ≈ zinc-900 #18181b. A neutral fits any brand and is one token to override; a blue default would itself be a brand choice. Near-white label on it: 17.4:1. The GoDX violet #7A00FF moved to `themes/godx.css`. Guarded by src/tokens/__tests__/neutral-primary-1220.test.ts.", "name": "--primary", "tier": "foundation", "value": "240 6% 10%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--primary-foreground", "tier": "foundation", "value": "60 33% 99%" }, { "description": "#f4f3f0", "name": "--secondary", "tier": "foundation", "value": "45 15% 95%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--secondary-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--muted", "tier": "foundation", "value": "45 15% 95%" }, { "description": "39% chứ không phải 42%. Ở 42% chữ mờ chỉ đạt 4,63 trên chính --muted, tức SÁT SÀN 4,5, nên bất kỳ bề mặt nào đậm hơn nền trang một chút cũng đẩy nó xuống dưới chuẩn: 4,23 trên --accent, 4,28 trên nền alert tô destructive 5%, 4,47 trên nền warning. Ba lỗi tương phản riêng biệt đã được báo về đều quy về đúng một con số này. Ở 39% mọi bề mặt đó đạt từ 4,75 trở lên, tức có biên thật thay vì vừa đủ.", "name": "--muted-foreground", "tier": "foundation", "value": "44 5% 39%" }, { "description": "#ebe9e5", "name": "--accent", "tier": "foundation", "value": "40 13% 91%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--accent-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "茜 #b7282e", "name": "--destructive", "tier": "foundation", "value": "357 64% 44%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--destructive-foreground", "tier": "foundation", "value": "60 33% 99%" }, { "description": "DECORATIVE CHROME — antd's `colorBorderSecondary`, not its `colorBorder`. antd ships TWO neutral border tiers and uses them for different things: `colorBorder` (`darken(#fff, 15)` → #d9d9d9) is the edge that IS a control — Input, Select, the outline Button — and `colorBorderSecondary` (`darken(#fff, 6)` → #f0f0f0) is chrome: the Tabs hairline, Card edges, Table cell rules, Divider. This token is the SECOND of those. The first is `--input` below, which is held to WCAG 2.2 SC 1.4.11's 3:1 and therefore sits far darker than antd's — a deliberate, measured deviation recorded there. It shipped at 83%, a 16-point gap from the ground, which is antd's CONTROL value (15 points) being used for everything antd paints with the split value — so every hairline, card edge and table rule in the system was one tier too dark. Reported from a screenshot of the Tabs line strip: \"ant design đường xám mờ hơn mà\". 93% is antd's own proportion — its secondary sits at 6/15 = 40% of the control tier's gap, and 40% of our 16 points is 6.4 → 92.6%, rounded onto the scale. Measured: 1.15:1 on --background where antd's #f0f0f0 on #fff is 1.14:1. NOT a contrast regression to defend: a divider is decorative, nothing about it is \"required to identify a component or its state\", so 1.4.11 does not reach it — and the JP-dense table grid reads better for it. `check:contrast`'s rail pass measures one-sided borders of 3px or more, so a 1px hairline was never in its sample either way. #eeedec — antd colorBorderSecondary tier", "name": "--border", "tier": "foundation", "value": "30 7% 93%" }, { "description": "CONTROL BOUNDARY role — deliberately NOT the same value as --border (gh#315). The two roles answer different questions and are held to different bars: · --border is DECORATIVE chrome — table rules, card edges, section dividers. WCAG 2.2 SC 1.4.11 does not reach it (nothing about a divider is \"required to identify a component or its state\"), and darkening it would make the JP-dense table grid roar. It stays exactly where it is. · --input is the boundary that IS the control — the 1px edge of Input, Textarea, Select, the outline Button, TagInput, the composite date field, the topbar search. `--input` also fills the Switch's unchecked track. A text field here has NO fill of its own (`background: hsl(var(--background))`) and NO shadow to speak of, so that edge is the only thing that says \"you may type here\". That is squarely SC 1.4.11's 3:1 minimum. They shipped sharing `30 7% 83%`, which measured 1.46:1 on --background/--card — the one live WCAG failure a full DXS Platform sweep turned up. The modern refresh uses 51% lightness: the previous 53% passed the translucent hovered row but fell below 3:1 on the full --accent ground. The boundary test now includes that ground in both themes. Guarded by src/tokens/__tests__/input-boundary-contrast.test.ts. #8b8279 — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11)", "name": "--input", "tier": "foundation", "value": "30 7% 51%" }, { "description": "STATUS FILLS AND THE INK THAT RIDES ON THEM. The FILLS are the palette and they do not move: 若竹, 山吹, 群青, 朱 are named colours, every solid success/attention surface in every consumer is one of them, and a chip that changes hue on upgrade is a different design. What moved is the INK, and only where it failed to be readable (gh#643). Measured from these very tokens (src/tokens/__tests__/status-fill-contrast.test.ts, and confirmed in Chromium by `check:frame-axe` on /isolate/foundation-colors at 320/375/1440): role fill WAS near-white ink dark ink (48 8% 13%) success #68be8d 2.19:1 ✗ 7.08:1 ✓ attention #eb6101 3.32:1 ✗ 4.68:1 ✓ warning #f8b500 1.74:1 ✗ 8.91:1 ✓ (already dark — the precedent) primary #18181b 17.45:1 ✓ (the GoDX preset #008066: 4.86:1) destructive … 6.10:1 ✓ info #4c6cb3 5.00:1 ✓ Two of the eight light-theme fills carried an ink their own lightness cannot support, and the package already knew the answer twice over: --warning-foreground has always been this same near-black on the equally pale 山吹, and the DARK theme flips --success-foreground / --attention-foreground to 48 9% 9% for exactly this reason. The light block was the outlier. REJECTED — darkening 若竹 and 朱 so the near-white ink clears 4.5:1. A fill needs luminance ≤ 0.183 for that; 若竹 sits at 0.422, so \"keep the white text\" means a different green, not a darker one. That is the palette change this deliberately is not. 若竹 #68be8d", "name": "--success", "tier": "foundation", "value": "146 40% 58%" }, { "description": "7.08:1 on the fill — near-white was 2.19:1 (gh#643)", "name": "--success-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "山吹 #f8b500", "name": "--warning", "tier": "foundation", "value": "44 100% 49%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--warning-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "群青 #4c6cb3", "name": "--info", "tier": "foundation", "value": "221 40% 50%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--info-foreground", "tier": "foundation", "value": "60 33% 99%" }, { "description": "朱 #eb6101", "name": "--attention", "tier": "foundation", "value": "25 99% 46%" }, { "description": "4.68:1 on the fill — near-white was 3.32:1 (gh#643)", "name": "--attention-foreground", "tier": "foundation", "value": "48 8% 13%" }, { "description": "IDENTITY role — the PRODUCT MARK colour (Logo `tone=\"success\"`, its wordmark, the email brand capsule). Neutral ink by default since v32 (gh#1220); the GoDX preset (`themes/godx.css`) sets it back to the violet of identity v2.3. It is deliberately distinct from two neighbours it keeps being confused with: · from --primary — a service re-theming its action colour must never recolour the mark. They hold the SAME VALUE by default and are still separate declarations; `brand-identity-role.test.ts` asserts on the DECLARATION, not the value, that this one never reads `var(--primary)` (gh#250). · from --success — 若竹 #68be8d is the STATUS green (badges, progress, \"saved\" text) and stays exactly as it is. The mark borrowed it once, rendering the identity at #69bf8e — ΔE76 ≈ 17.5 from the identity of the day, a plainly wrong brand colour (gh#250/#214). If the identity moves again, THIS COMMENT MOVES WITH IT. There is no Tailwind `bg-brand` utility on purpose: `--color-brand` is already taken by --text-brand, so identity surfaces read `hsl(var(--brand))` directly in component CSS. neutral ink. Same value as --primary by default, NOT an alias of it: re-theming the action colour must still leave the identity alone, which is what brand-identity-role.test.ts checks on the DECLARATION rather than the value.", "name": "--brand", "tier": "foundation", "value": "240 6% 10%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--brand-foreground", "tier": "foundation", "value": "60 33% 99%" }, { "description": "Extended text hierarchy (beyond --foreground / --muted-foreground) — themeable per service. Roles primitives bake in today: caption/meta, disabled, inline link, brand numerals. lighter than muted-foreground — captions / meta", "name": "--text-tertiary", "tier": "foundation", "value": "44 5% 55%" }, { "description": "disabled control text", "name": "--text-disabled", "tier": "foundation", "value": "40 6% 68%" }, { "description": "Status TEXT colours — darker than the fill roles so small coloured text (a StatCard delta, an outline status badge label) clears WCAG AA 4.5:1 on white. The fill roles (--success/--warning/ --info) stay the brighter wa-iro for badges/bars; only TEXT reads these via text-*-strong. deep 若竹 — AA green text on white", "name": "--text-success", "tier": "foundation", "value": "152 84% 22%" }, { "description": "dark 山吹 amber — yellow can never pass as text", "name": "--text-warning", "tier": "foundation", "value": "36 100% 28%" }, { "description": "deep 群青 — AA blue text on white", "name": "--text-info", "tier": "foundation", "value": "221 70% 38%" }, { "description": "deep 茜 — AA red text on white", "name": "--text-error", "tier": "foundation", "value": "357 75% 38%" }, { "description": "Status MARK colours — the third tier, and the one whose absence shipped a defect. A tone can be painted three ways and each has its own contrast contract: FILL (--success/--warning/…) a solid chip or bar, judged against the label ON it. TEXT (--text-success/…) small coloured type, 4.5:1 against the surface behind it. MARK (these) a thin shape that CARRIES MEANING with nothing written on it — a Card accent rail, a DataTable row rail. WCAG 1.4.11 puts those at 3:1 against their own surface. The rails were reading the FILL tier, and two of them were effectively invisible. Measured in Chromium on the light card, before this tier existed: warning 1.74:1 · success 2.18:1 (both below the 3:1 non-text floor) primary 5.04 · info 4.97 · attention 3.32 · destructive 6.10 `check:contrast` was green throughout: its non-text pass only measures elements 24×24px or smaller, and a rail is 6px wide by the full height of a card, so it never qualified. These resolve THROUGH the text tier rather than restating its numbers, so a theme retunes one place and both tiers follow — and because a mark's floor (3:1) is looser than text's (4.5:1), anything legible as text is legible as a mark by construction. `attention` has no text-tier entry and its fill already clears the floor in both themes (3.32 / 6.75), so it stays on the fill. Raw HSL components, not a finished colour: callers wash them at an alpha. KNOBS, NOT BINDINGS (the gh#687 freeze rule). These read `var(--text-*)` at their CALL SITES, not here. Written here as `--mark-primary: var(--text-primary)` they computed ONCE at `:root` and every descendant inherited that answer — measured: a `[data-tenant]` setting `--text-primary: 140 80% 25%` kept `--mark-primary` at `268 100% 34.5%` and painted a VIOLET rail on a green brand. The guard did not catch it because its role list never covered the text tier. Set any of these to pin a mark independently of its text role.", "name": "--mark-primary", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--mark-success", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--mark-warning", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--mark-info", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--mark-destructive", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--mark-attention", "tier": "foundation", "value": "initial" }, { "description": "Status SURFACE colours — the FOURTH tier, and the one a brand could not express at all (gh#866). The three tiers above are all INK. A tone is also painted as a pale GROUND that content sits on — an Alert's tint, a status Badge's chip, a toned DataTable row, a toast, a ChatBubble, a toned overlay header, an EmptyState medallion. Every one of those DERIVED that ground from the tone's own fill or text colour through an alpha (`--alert-bg-alpha`, `bg-success/10`, `--table-row-tone-wash-alpha`, `--chat-bubble-tone-background-alpha`, 0.12 …). DERIVATION TIES THE GROUND'S HUE TO THE INK, AND A BRAND'S PAIR IS NOT A DERIVATION. The Caimono kit that opened the issue specifies eight colours, four inks and four INDEPENDENTLY CHOSEN grounds: `--success #126342` with `--success-soft #E8F5EF`. #E8F5EF is not #126342 at any alpha — it is a separately chosen mint. The only move the system offered was to lighten the success TEXT until its 5% wash matched the mint, i.e. damage the ink's contrast to fix the colour of the ground. `--card-background` could STORE one such colour on a scope, but nothing consumed it: Badge, Alert, the row tone and the other five each derived their own. FINISHED COLOURS, NOT HSL COMPONENTS — the one place this tier differs from the three above. A brand hands over `#E8F5EF`, and every fallback these replace is already a composited colour (`hsl(var(--success) / 0.05)`, a `color-mix()` into `--popover`), so the call sites read `var(--surface-success, )` with no `hsl()` wrapper. Same shape as `--surface-recessed` / `--badge-tint-surface`, which are also finished colours. KNOBS, NOT BINDINGS (the gh#687 freeze rule), for the same reason `--mark-*` above are: a `:root` binding substitutes on `` and a scoped `[data-tenant]` below it would inherit root's answer. `initial` here, formula at the call site — see `status-surface-role-866.test.ts` for the consumer list the rule is measured against. ONLY THE FOUR STATUSES. `primary` and `attention` are tones a surface may carry too, but they are not what a brand ships a \"soft\" pair for, and inventing two more roles nobody asked for is how a vocabulary stops being learnable. They stay derived, deliberately. NOT A BORDER ROLE EITHER. `--alert-border-alpha` and `--chat-bubble-tone-border-alpha` keep deriving their edge from the ink: the kit supplies no border colours, and a brand that wants one already has the per-component alpha.", "name": "--surface-success", "tier": "foundation", "value": "initial" }, { "description": "default = 0.12 at the call site", "name": "--surface-success-alpha", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--surface-warning", "tier": "foundation", "value": "initial" }, { "description": "default = 0.12 at the call site", "name": "--surface-warning-alpha", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--surface-info", "tier": "foundation", "value": "initial" }, { "description": "default = 0.12 at the call site", "name": "--surface-info-alpha", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--surface-destructive", "tier": "foundation", "value": "initial" }, { "description": "default = 0.05 at the call site", "name": "--surface-destructive-alpha", "tier": "foundation", "value": "initial" }, { "description": "Interaction ramp — hover / active steps. The BRAND steps (--primary-* and --destructive-*) live in the DERIVED tier: they hang off the seeds above and are held to a 4.5:1 floor against their own label by __tests__/interactive-fill-contrast.test.ts. See src/tokens/derived.css. The NEUTRAL steps stay HERE, because they are not derivable the same way: the conventional derivation for a neutral interaction state is a translucent alpha fill (`rgba(0,0,0,0.06)`), which has no opaque equivalent to compute — so an opaque `--secondary-hover` has to be authored.", "name": "--secondary-hover", "tier": "foundation", "value": "45 15% 91%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--secondary-active", "tier": "foundation", "value": "45 15% 88%" }, { "description": "和色 (wa-iro) — traditional Japanese accent palette for charts, tags, decoration. Decorative hex (NOT semantic): never remap a wa-iro to a semantic role beyond the five canonical mappings used above. 藍 indigo", "name": "--wa-ai", "tier": "foundation", "value": "#165e83" }, { "description": "群青 ultramarine", "name": "--wa-gunjo", "tier": "foundation", "value": "#4c6cb3" }, { "description": "瑠璃 lapis", "name": "--wa-ruri", "tier": "foundation", "value": "#1e50a2" }, { "description": "紺 navy", "name": "--wa-kon", "tier": "foundation", "value": "#223a70" }, { "description": "若竹 young bamboo", "name": "--wa-wakatake", "tier": "foundation", "value": "#68be8d" }, { "description": "萌葱 spring green", "name": "--wa-moegi", "tier": "foundation", "value": "#006e54" }, { "description": "山吹 mountain yellow", "name": "--wa-yamabuki", "tier": "foundation", "value": "#f8b500" }, { "description": "朱 vermilion", "name": "--wa-shu", "tier": "foundation", "value": "#eb6101" }, { "description": "茜 madder", "name": "--wa-akane", "tier": "foundation", "value": "#b7282e" }, { "description": "臙脂 cochineal", "name": "--wa-enji", "tier": "foundation", "value": "#b94047" }, { "description": "桜 cherry (soft bg)", "name": "--wa-sakura", "tier": "foundation", "value": "#fef4f4" }, { "description": "墨 warm ink", "name": "--wa-sumi", "tier": "foundation", "value": "#595857" }, { "description": "鼠 mouse-grey", "name": "--wa-nezu", "tier": "foundation", "value": "#949495" }, { "description": "Chart accents are neutral decorative primitives, not business semantics. gh#873 — `--chart-3` (山吹 yamabuki) measured 1.78:1 as a rendered 2px LINE stroke on --card (rgb(253,253,252)): 59% of the WCAG 2.2 SC 1.4.11 non-text floor (3:1). It is not stroke-only: `chartColor()` (chart-frame.tsx) hands the same raw hex to Bar's `fill` and Pie's `Cell fill` at FULL opacity, so \"keep it out of the stroke rotation\" would still leave two chart types failing — a bar or a slice IS the graphical object, same floor as a line. The one place the palette is genuinely a fill with a different argument is Area's *band* (chart-cartesian.tsx), which composites at `--chart-area-fill-alpha` (0.2) UNDER the line that carries the value (chart-layout.css's own comment) — that pixel is not this token's raw hex and is not what this fix is measured against. Same hue (43.79°) and saturation (100%) held, lightness alone dropped 48.63% → 34.35% — light 1.78:1 → 3.50:1, dark 9.01:1 → 4.58:1 (was already comfortable; stays comfortable). Measured on the RENDERED stroke/fill in Chromium, not the token value — a token-value probe on this exact palette silently returns 15.46:1 for every member by failing to resolve the custom property, which is how the prior pass on gh#865 got a plausible-looking number that meant nothing. `--chart-2` and `--chart-4` clear 3:1 here (6.14:1 / 6.15:1) but NOT against the dark `--card` (2.61:1 / 2.61:1 — a different ground, not the same measurement re-run); their fix is a dark-theme-only override below, so the light values — and their tie to --wa-moegi / the --destructive hex — are untouched. `--chart-1` (3.47:1), `--chart-5` (3.19:1) and `--chart-6` (3.31/4.85:1) clear the floor in both themes and are left alone (surgical: fix what measured under, not what merely has a thin margin). See src/components/charts/__tests__/ chart-palette-contrast-873.test.tsx for the regression test derived from this stylesheet.", "name": "--chart-1", "tier": "foundation", "value": "#0077c7" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-2", "tier": "foundation", "value": "#006e54" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-3", "tier": "foundation", "value": "#af8000" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-4", "tier": "foundation", "value": "#b7282e" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-5", "tier": "foundation", "value": "#4c6cb3" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-6", "tier": "foundation", "value": "#eb6101" }, { "description": "Sequential heat ramp — HeatmapChart (gh#1330). ONE hue (the --chart-1 blue, 204°) stepped by lightness alone, so the order of the steps survives every colour-vision deficiency: CVD shifts hue, and a single-hue ramp carries its meaning in luminance, which protan/deutan/tritan vision all keep. Relative luminance falls monotonically 0.805 → 0.541 → 0.330 → 0.173 → 0.064; against the light --card that is 1.21 / 1.74 / 2.72 / 4.62 / 9.03:1, each step ≥1.45:1 from the last. Step 1 is deliberately quiet (it is \"low\", not \"absent\"): an EMPTY cell is told apart by its dashed outline and its text, never by this fill. A service retunes the whole ramp here.", "name": "--chart-heat-1", "tier": "foundation", "value": "#d6ebf8" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-heat-2", "tier": "foundation", "value": "#94c9ec" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-heat-3", "tier": "foundation", "value": "#4ea3dc" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-heat-4", "tier": "foundation", "value": "#0077c7" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--chart-heat-5", "tier": "foundation", "value": "#004a7f" }, { "description": "Disabled affordance opacity — single knob (was referenced but undefined → silent failure).", "name": "--disabled-opacity", "tier": "foundation", "value": "0.5" }, { "description": "6px base × scaling; override to retheme every radius step", "name": "--radius", "tier": "foundation", "value": "calc(0.375rem * var(--scaling))" }, { "description": "φ — radii scale by the golden ratio (steps derive in @theme)", "name": "--radius-ratio", "tier": "foundation", "value": "1.618" }, { "description": "fully-round: switch / radio / slider / pill badges (NOT --radius-derived)", "name": "--radius-pill", "tier": "foundation", "value": "9999px" }, { "description": "squared corners: table cells, flush inputs", "name": "--radius-sharp", "tier": "foundation", "value": "0" }, { "description": "Elevation ramp. `--shadow-color` is the single brand-tint hook (space-separated RGB channels): a service can set e.g. `--shadow-color: 12 26 49` (navy) to tint the WHOLE ramp at once. These own `--shadow-md` too, so dropdown/popover/nav no longer borrow Tailwind's foreign gray-black.", "name": "--shadow-color", "tier": "foundation", "value": "0 0 0" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-xs", "tier": "foundation", "value": "0 1px 1px 0 rgb(var(--shadow-color) / 0.04)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-sm", "tier": "foundation", "value": "0 1px 2px 0 rgb(var(--shadow-color) / 0.05)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-md", "tier": "foundation", "value": "0 6px 16px -4px rgb(var(--shadow-color) / 0.08), 0 1px 3px 0 rgb(var(--shadow-color) / 0.08)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-lg", "tier": "foundation", "value": "0 12px 28px -6px rgb(var(--shadow-color) / 0.1), 0 2px 6px -2px rgb(var(--shadow-color) / 0.08)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-xl", "tier": "foundation", "value": "0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--shadow-2xl", "tier": "foundation", "value": "0 25px 50px -12px rgb(var(--shadow-color) / 0.25)" }, { "description": "Brand GLOW — an opt-in coloured halo for the primary CTA (and any surface that opts in). Quiet by default (cardinal rule #44): a zero-size transparent shadow, which is invalid as a bare `none` inside a comma shadow list but valid as `0 0 0 0 transparent`. A service turns it on by overriding the whole value once, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)` — the CTA then carries a brand glow with no component change.", "name": "--shadow-glow", "tier": "foundation", "value": "0 0 0 0 transparent" }, { "description": "The colour and the composed gradient default at the call site (.ui-brand-glow): composed here they froze on the root's primary, so a nested [data-tenant] glow stayed the root hue. default = var(--primary)", "name": "--brand-glow-color", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--brand-glow-alpha", "tier": "foundation", "value": "0.18" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--brand-glow-size", "tier": "foundation", "value": "60% 50%" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--brand-glow-position", "tier": "foundation", "value": "50% 0%" }, { "description": "default = the radial halo composed in layout.css", "name": "--brand-glow", "tier": "foundation", "value": "initial" }, { "description": "── THE SWITCH ─────────────────────────────────────────────────────────────────────────── `--focus-outline` is ONE 0/1 flag, and every painted focus length below multiplies by it: --focus-ring-width: calc(var(--focus-ring-weight) * var(--focus-outline)) — so setting it to 0 zeroes the whole indicator at once. There is deliberately no parallel mechanism: one multiplier is the only shape in which a kill switch cannot be routed around by a per-component rebind. IT SHIPS ON, as of gh#544 — it used to ship off, and that reversal is the point of this note. The old default was a real product decision: the indicator had been reported as intrusive and the owner accepted the cost, which was that this library did not satisfy WCAG 2.2 SC 2.4.7 Focus Visible (AA) and so could carry no JIS X 8341-3:2016 AA statement. What changed is not the principle but two measurements. FIRST, what the default actually produced. Counting `data-focus-outline` across the four real consumers of this package: `ql` sets it (3 files); `godx-task`, `godx-chat` and the platform app set it NOWHERE. Three of four products shipped with no keyboard-focus indicator at all — not chosen, because the switch is only discoverable by reading this file. SECOND, what the ON state now costs. It is the HAIRLINE field indicator described below, not the 3px outline the original complaint was about. The thing being turned on is no longer the thing that was turned off. The escape hatch is the same shape it always was, one attribute, now pointing the other way: (or AppProvider's equivalent) `data-focus-outline=\"on\"` still works and still means on, so every consumer that already set it is untouched. Every painted length below multiplies by `--focus-outline`, so with the switch off the outline resolves to `0px`, the halo's spread resolves to `0px`, and `--focus-field-shadow` is `none`. The `:focus-visible` selectors themselves stay exactly where they are: only the paint goes. ── THE ON WEIGHT ────────────────────────────────────────────────────── The modern default is a 2px mark with 2px offset. Hue remains --ring for at least 3:1 contrast on supported surfaces; navigation keeps its inset. Consumers can retune the two thickness knobs or use the existing opt-out. 1 = on, 0 = off", "name": "--focus-outline", "tier": "foundation", "value": "1" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--focus-outline-weight", "tier": "foundation", "value": "var(--stroke-md)" }, { "description": "default = var(--focus-ring-color, var(--ring)), resolved at the focused element — a `:root` binding froze on the root's --ring, so a nested tenant scope never re-tinted the outline (gh#687; docs/TOKENS.md, the freeze rule)", "name": "--focus-outline-color", "tier": "foundation", "value": "initial" }, { "description": "the field halo spread", "name": "--control-outline-width", "tier": "foundation", "value": "calc(var(--stroke-md) * var(--focus-outline))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--focus-outline-offset", "tier": "foundation", "value": "2px" }, { "description": "FOCUS RING — the two global knobs for the keyboard-focus affordance (WCAG 2.4.7 / 2.4.11). `--focus-ring-color` is the themeable hue (HSL components, defaults to --ring) and `--focus-ring-width` the standard thickness; override either ONCE — even scoped under a `[data-tenant]` — to retint or resize EVERY focus ring. `--focus-ring-color` is declared `initial` (NOT `var(--ring)`): a :root binding to a role var would freeze at the :root --ring and a scoped [data-tenant] override of --ring alone would never reach it. Every :focus-visible rule reads it with the live-role fallback `hsl(var(--focus-ring-color, var(--ring)))`, so the default re-resolves at the element that paints the ring while an explicit override still wins. default = the live --ring role", "name": "--focus-ring-color", "tier": "foundation", "value": "initial" }, { "description": "The painted thickness, and the point every path passes through. `--focus-ring-weight` is the public knob a component or a service retunes; multiplying by the switch is what guarantees that a rebind cannot bring the mark back while the switch is off.", "name": "--focus-ring-weight", "tier": "foundation", "value": "var(--focus-outline-weight, var(--stroke-hairline))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--focus-ring-width", "tier": "foundation", "value": "calc(var(--focus-ring-weight) * var(--focus-outline))" }, { "description": "Alpha of the ring fill. Exists so a component that needs a SOFTER ring (a filled toggle, tinted shell chrome) tunes one knob instead of writing its own `hsl(... / 0.35)` — which is how four incompatible ring shapes appeared before the single-source rule in styles/focus-ring.css.", "name": "--focus-ring-opacity", "tier": "foundation", "value": "1" }, { "description": "THE FIELD HALO — `--control-outline`, split into the parts this repo composes with. All three READ the derived tier rather than declaring a number of their own: the width is `--control-outline-width`, and the colour and the alpha are the two halves of one rgba(). They stay named `--focus-ring-glow-*` because that is the public knob a service already themes through; what changed is where their DEFAULTS come from. This block once hard-coded 0.12 light / 0.3 dark, eyeballed — close to, but not, the values the tier now commits to: 0.11 and 0.29 for the seeds this library actually ships, with the halo hue rgb(109,0,228) rather than the primary itself. The halo is DECORATION and must never be asked to carry the a11y contract: measured against this palette, a primary tint over the page reads 1.23:1 at the shipped 0.11 and does not reach WCAG 2.2 SC 1.4.11's 3:1 until alpha 0.53 light / 0.85 dark — past the point where it is a halo at all. What carries the state on a field is the recoloured 1px border, and that only once `data-focus-outline=\"on\"` is set — see the switch above and docs/DESIGN-AUTHORITY.md.", "name": "--focus-ring-glow-width", "tier": "foundation", "value": "var(--control-outline-width)" }, { "description": "`initial`, NOT `var(--control-outline)`: the halo colour derives from `--primary` (gh#678), and a `:root` binding would freeze on the root's primary — a tenant scope below `` would keep the package violet halo. Default = the live `--control-outline`, resolved in styles/focus-ring.css.", "name": "--focus-ring-glow-color", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--focus-ring-glow-alpha", "tier": "foundation", "value": "var(--control-outline-alpha)" }, { "description": "THE WHOLE FIELD HALO AS ONE TOKEN — the field's focus shadow, and the single seam the switch moves. Composing the shadow LIST here rather than in the rule is what keeps the two positions of the switch from becoming two focus languages: styles/focus-ring.css reads `box-shadow: var(--focus-field-shadow)` once and knows nothing about which position is active. `none` is the OFF value, and it is `none` rather than a zero-spread shadow on purpose: a literal `0 0 0 0 transparent` would still REPLACE the control's resting `--control-shadow`, so a switched-off focus would quietly flatten every input on the page. The PAINTING value is `initial` here and composed in styles/focus-ring.css, at the focused element: the list carries a colour, and a colour composed on `:root` is the root's colour forever — a scoped `--primary` never reached the halo, and neither did the `[aria-invalid]` rebind of `--focus-ring-glow-color` (gh#678; docs/TOKENS.md, the freeze rule). Default = `0 0 0 var(--focus-ring-glow-width) hsl(var(--focus-ring-glow-color, ) / var(--focus-ring-glow-alpha))`. `none` (the OFF position) still wins over it.", "name": "--focus-field-shadow", "tier": "foundation", "value": "initial" }, { "description": "Gap between element and ring, for the OUTLINE form only (a star, a dot, a heading anchor — marks where a radius-hugging shadow would touch the glyph). The shadow form ignores it by construction.", "name": "--focus-ring-offset", "tier": "foundation", "value": "var(--focus-outline-offset)" }, { "description": "Opt-in for individual clipped focus carriers, never inherited from containers.", "name": "--focus-ring-inset-offset", "tier": "foundation", "value": "calc(-1 * (var(--focus-ring-width) + var(--focus-outline-offset)))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--focus-ring-contained-offset", "tier": "foundation", "value": "initial" }, { "description": "Ring headroom for clipped chrome (`overflow-clip-margin` on the topbar family, gh#291). MUST stay a plain length consumed via a bare var(): Chromium rejects any calc() in overflow-clip-margin at parse time (even calc(2 * 2px)), silently dropping the declaration to 0. Value = max ring paint (3px open/focus) + rounding immunity: at 4px a flush-edge ring had only 1px of slack, which device-pixel rounding on non-retina (dpr 1) displays or fractional browser zoom could consume, shaving the ring's outer edge. 8px keeps ≥5px of slack under any rounding regime.", "name": "--focus-ring-clip-margin", "tier": "foundation", "value": "8px" }, { "description": "Keyboard-scroll regions use an inset brand mark by default. Both the region weight and the global focus switch remain configurable.", "name": "--region-focus-ring-width", "tier": "foundation", "value": "var(--focus-ring-weight)" }, { "description": "default = hsl(var(--focus-ring-color, var(--ring)))", "name": "--region-focus-ring-color", "tier": "foundation", "value": "initial" }, { "description": "GRADIENTS — opt-in decorative fills exposed at the token layer so a service can paint a hero banner, a brand wash, or a radial brand glow purely by configuring tokens (cardinal rule #45). All default to a transparent no-op so nothing renders until a theme opts in; a surface that supports a gradient reads one of these as its background-image. Examples a service might set: --gradient-brand: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); --gradient-hero: linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--background))); --gradient-glow: radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent);", "name": "--gradient-brand", "tier": "foundation", "value": "none" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--gradient-hero", "tier": "foundation", "value": "none" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--gradient-glow", "tier": "foundation", "value": "none" }, { "description": "Sans stack — FONT-AGNOSTIC by default. The library ships NO hardcoded brand face here: `--font-sans-base` is a pure system stack so godx renders cleanly with zero font setup. Consumers supply their own faces (next/font, @fontsource, self-host) and set the tokens — never edit the library. Two ways to theme fonts, both token-only (no [lang] selectors to write): 1. One face everywhere → override `--font-sans-base`. 2. Per-language faces → set the per-lang SLOT tokens; styles/base.css wires each `[lang]` to read its slot with `--font-sans-base` as the fallback: --font-sans-ja (lang=\"ja\") --font-sans-ko (lang=\"ko\") --font-sans-vi (lang=\"vi\") --font-sans-zh-hans (lang=\"zh\" | \"zh-Hans\" | \"zh-CN\") --font-sans-zh-hant (lang=\"zh-Hant\" | \"zh-TW\") e.g. `--font-sans-ja: \"Noto Sans JP\", var(--font-sans-base);` The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base` (and `--font-sans-vi`) with the DXS bundle — \"Noto Sans JP\" primary, \"M PLUS 2\" as its fallback — so the all-in-one entry is zero-config. That fill also lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER `styles/base`, or the system stack below silently wins (issue #210).", "name": "--font-sans-base", "tier": "foundation", "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, system-ui, sans-serif" }, { "description": "The five per-language SLOTS, DECLARED — `initial`, which is the guaranteed-invalid value, so `var(--font-sans-ja, var(--font-sans-base))` in styles/base.css falls back exactly as it did when they were undeclared. Nothing about the cascade changes; what changes is that they are now VISIBLE. Declared nowhere, they existed only as prose in the comment above and in docs/CUSTOMER-THEMING.md, so every tool that reads this tier — the agent catalog, the MCP token list, any audit that enumerates the theme surface — reported a public theming knob as not existing (gh#862). A token nobody can look up is a token nobody has.", "name": "--font-sans-ja", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-sans-ko", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-sans-vi", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-sans-zh-hans", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-sans-zh-hant", "tier": "foundation", "value": "initial" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-family-sans", "tier": "foundation", "value": "var(--font-sans-base)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-family-mono", "tier": "foundation", "value": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }, { "description": "Dual-font split (opt-in) — many brand designs pair a DISPLAY face for headings with a separate BODY face (e.g. Source Sans 3 display + Inter body). Both default to --font-family-sans, so a single-font system is unchanged; a service overrides one or both. Headings read --font-family-display, body reads --font-family-body (wired in styles/index.css @layer base).", "name": "--font-family-display", "tier": "foundation", "value": "var(--font-family-sans)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-family-body", "tier": "foundation", "value": "var(--font-family-sans)" }, { "description": "── Type scale — GOLDEN-RATIO modular scale (Ant/Tailwind model). ONE base + ONE ratio; every step is base × ratioⁿ, so the whole scale stays in golden proportion. `--font-size-ratio` is φ^¼ (the golden ratio's quarter-step ≈ 1.1227) — a TRUE golden ratio yet dense enough that headings stay small (h1≈20, h2≈18; pure φ=1.618 would be marketing-size). Internal apps get the 14px DEFAULT with ZERO config; a customer overrides `--font-size-base` (and optionally `--font-size-ratio`) and the entire scale rescales in golden proportion. 14px — THE base (= ). The single knob; override to retheme.", "name": "--font-size-base", "tier": "foundation", "value": "0.875rem" }, { "description": "φ^¼ — golden-ratio step (φ=1.618, φ^¼ keeps the dense scale small)", "name": "--font-size-ratio", "tier": "foundation", "value": "1.1227" }, { "description": "── EVERY DERIVED STEP IS AN `initial` KNOB, NOT A VALUE (gh#834) ────────────────────────── A custom property substitutes its `var()`s AT THE ELEMENT THAT DECLARES IT. Written here as `--font-size-5xl: var(--font-size-display)`, the step computed ONCE, on ``, and a scope below it that re-declared the seed only inherited the answer root had already given. Measured in Chromium before this change, with `[data-tenant] { --font-size-base: 24px; --font-size-display: 80px }`: `text-base` moved 14 → 24px and EVERY OTHER STEP DID NOT MOVE AT ALL — text-2xs 11.11, xs 12.47, sm 14, lg 17.65, xl 19.81, 2xl 22.24, 3xl 32.96, 4xl 42.19, 5xl 54, h1 19.81, h2 17.65, h3 14, h4 12.47. `docs/showcase/futurelastic-web.tsx` carried a comment reading \"80px hero via text-5xl\"; it painted 54. That is not a display-ramp bug, it is the tier's shape, and `docs/CUSTOMER-THEMING.md` sells the opposite in two places at once: level 1 calls `--font-size-base` a seed, and level 3 says the same token may be set \"under `[data-tenant]` / `.dark` / any subtree\". So the ramp takes the shape docs/TOKENS.md already prescribes for role-mirror knobs — the knob is `initial` (a real, catalogued, guaranteed-invalid declaration: there is no value to freeze) and THE FORMULA MOVES TO THE CALL SITE as the `var()` fallback, where it re-resolves at the painting element under any scope. An explicit override of a step still wins, because a set knob is not invalid and the fallback never fires. CONSEQUENCE, AND IT IS NOT OPTIONAL: every reader must carry the fallback. A bare `var(--font-size-xs)` now resolves to NOTHING — silent and total, the same failure gh#664's call-site test was written for. `check:frame-token-scope` (REACH) is the gate that measures it on a real element; the formulas below are the canonical text every reader repeats. Each formula reads ONLY the un-derived knobs (`--font-size-base`, `--font-size-ratio`, `--font-size-display`, `--font-size-display-ratio`). `xl` and `2xl` used to chain through `lg` and `xl`; an `initial` knob cannot be chained through, so they are flattened to `base × ratioⁿ`. Left-associative and therefore bit-identical to the nested form — re-measured at 19.8116px and 22.2425px, unchanged. = calc(base / ratio / ratio) — ratio⁻² ≈ 11px", "name": "--font-size-2xs", "tier": "foundation", "value": "initial" }, { "description": "= calc(base / ratio) — ratio⁻¹ ≈ 12.5px", "name": "--font-size-xs", "tier": "foundation", "value": "initial" }, { "description": "= var(--font-size-base) — 14px body (alias of base)", "name": "--font-size-sm", "tier": "foundation", "value": "initial" }, { "description": "= calc(base * ratio * ratio) — ratio² ≈ 17.6px", "name": "--font-size-lg", "tier": "foundation", "value": "initial" }, { "description": "= calc(base * ratio * ratio * ratio) — ratio³ ≈ 19.8px", "name": "--font-size-xl", "tier": "foundation", "value": "initial" }, { "description": "= calc(base * ratio * ratio * ratio * ratio) — ratio⁴ ≈ 22.3px", "name": "--font-size-2xl", "tier": "foundation", "value": "initial" }, { "description": "FLUID, and that is a deliberate change to what a display step MEANS (gh#836). The ramp shipped as a fixed 54px, so `text-5xl` was 54px at 1440 AND at 320. Measured with a 99-character headline: 6 lines at 1280, 10 at 375, **12 at 320** — a phone hero five screens tall. Both website showcases had already written their own `clamp()` for exactly this, and the package itself knows the answer for exactly one caller, privately, in `--centered-shell-landing-heading-size-compact`. gh#836 offered two roads. Widening `size` to the responsive object `Flex direction` takes is the larger API and leaves every consumer to restate the same three breakpoints; making the ramp fluid is the smaller diff and the larger commitment, because it changes what an existing size means. This takes the second, and the reason it is safe to take HERE is that the display steps were unreachable from any public API until 28.8.0 — there is no admin screen whose headline moves, because nothing could reach these tokens to use them. 2rem (32px) at the 320px floor to 3.375rem (54px) at 1280 and above, on viewport width. The upper bound is exactly the previous fixed value, so a desktop hero is unchanged to the pixel; only the small end moves. The derived 3xl/4xl steps divide this, so they narrow with it and the ratio between the three is preserved at every width. A `clamp()` on `vw` is the one place this library accepts a viewport unit: it is the axis the defect lives on, and the alternative is the page-local `clamp()` both showcases wrote — which, written a third time, would have become folklore. `--font-size-display` remains the single knob: a service that wants a fixed display size sets it to a length and the clamp is gone. 32px → 54px — the display knob", "name": "--font-size-display", "tier": "foundation", "value": "clamp(2rem, 1.5rem + 2.5vw, 3.375rem)" }, { "description": "bolder step than the body φ^¼ — marketing wants more contrast", "name": "--font-size-display-ratio", "tier": "foundation", "value": "1.28" }, { "description": "`initial` knobs, formula at the call site — see the block above for why. = calc(display / dratio / dratio) — ≈ 33px feature heading", "name": "--font-size-3xl", "tier": "foundation", "value": "initial" }, { "description": "= calc(display / dratio) — ≈ 42px section", "name": "--font-size-4xl", "tier": "foundation", "value": "initial" }, { "description": "= var(--font-size-display) — 54px hero", "name": "--font-size-5xl", "tier": "foundation", "value": "initial" }, { "description": "Headings — also golden-derived, and `initial` for the same reason. h1=ratio³, h2=ratio²; h3/h4/h5 reuse body steps (single source), so their call-site default CHAINS through the body step rather than re-spelling it: `var(--heading-h4, var(--font-size-xs, ))` keeps \"h4 IS the xs step\" true through a scoped `--font-size-xs` as well as a scoped base. = calc(base * ratio * ratio * ratio) — ≈ 20px", "name": "--heading-h1", "tier": "foundation", "value": "initial" }, { "description": "= calc(base * ratio * ratio) — ≈ 18px", "name": "--heading-h2", "tier": "foundation", "value": "initial" }, { "description": "= var(--font-size-base) — 14px", "name": "--heading-h3", "tier": "foundation", "value": "initial" }, { "description": "= the --font-size-xs step — ≈ 12.5px", "name": "--heading-h4", "tier": "foundation", "value": "initial" }, { "description": "h5 exists for antd's `Typography.Title level={5}`; `Heading` still stops at 4. It takes the next step DOWN the same scale rather than a new number — see TitleLevelProp.", "name": "--font-weight-normal", "tier": "foundation", "value": "400" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-weight-medium", "tier": "foundation", "value": "500" }, { "description": "the reference design uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is forbidden (ambiguous between 500 and 700) — the legacy \"semibold\" token collapses to medium so any remaining reference renders at 500. `bold` is the 700 emphasis weight.", "name": "--font-weight-semibold", "tier": "foundation", "value": "500" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--font-weight-bold", "tier": "foundation", "value": "700" }, { "description": "Display/black weight — OPT-IN for marketing display type (hero/CTA). The enterprise system caps at 700 (簡素 restraint); this is only reached via the .font-display-weight utility / a service setting it on a display surface, so admin text is unchanged.", "name": "--font-weight-black", "tier": "foundation", "value": "800" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--line-height-tight", "tier": "foundation", "value": "1.25" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--line-height-normal", "tier": "foundation", "value": "1.5" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--line-height-body", "tier": "foundation", "value": "1.7" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--letter-spacing-tight", "tier": "foundation", "value": "0" }, { "description": "── SCALING — the one global density knob (Radix Themes model). A single dimensionless multiplier on every SIZE token (spacing grid, control / table / checkbox / switch heights, radius), so the whole UI rescales in proportion from one place. `1` = the design baseline. The `density` axis sets named presets (compact .92 · default 1 · comfortable 1.08); AppProvider's `scaling` prop sets any value continuously. Type has its OWN base+ratio (--font-size-base) and is NOT scaled here — fontSize stays an orthogonal axis. Touch targets (--touch-target-min) are also exempt (a11y minimum).", "name": "--scaling", "tier": "foundation", "value": "1" }, { "description": "Minimum interactive target on the block axis — WCAG 2.2 SC 2.5.8 (24x24 AA). The --scaling comment above already named this token as the one size that must NOT ride the multiplier, but nothing ever defined it, so the exemption described a token that did not exist. It is a legal floor, not a design measure: shrinking it with a compact density would make the UI fail the success criterion at exactly the density where targets are already hardest to hit. Literal on purpose — scale-exempt, like the note says. scale-exempt: WCAG 2.2 SC 2.5.8 AA floor, must not ride --scaling", "name": "--touch-target-min", "tier": "foundation", "value": "1.5rem" }, { "description": "Raw spacing scale — the 4px grid, scaled. Everything that derives from --space-* (padding, gaps, --phi-unit, semantic spacing, chrome) inherits the scaling automatically; this is the single highest-leverage scaling point.", "name": "--space-0", "tier": "foundation", "value": "0" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-1", "tier": "foundation", "value": "calc(0.25rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-2", "tier": "foundation", "value": "calc(0.5rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-3", "tier": "foundation", "value": "calc(0.75rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-4", "tier": "foundation", "value": "calc(1rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-5", "tier": "foundation", "value": "calc(1.25rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-6", "tier": "foundation", "value": "calc(1.5rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-8", "tier": "foundation", "value": "calc(2rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-10", "tier": "foundation", "value": "calc(2.5rem * var(--scaling))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--space-12", "tier": "foundation", "value": "calc(3rem * var(--scaling))" }, { "description": "THE DISPLAY END OF THE SCALE (gh#831). The grid used to stop at 48px, which is the ceiling of an admin screen and the floor of a marketing section — so two unrelated website showcases each typed `padding-block: 5rem` because there was no step to reach for. These two are Carbon `$spacing-11` and `$spacing-12` exactly (docs/DESIGN-AUTHORITY.md names Carbon as the authority for spacing, and carbon-scale-alignment.test.ts enforces it), so the scale grows TOWARD its authority rather than away from it, and both stay on the 4px grid. Named `n = px / 4` like every step above them. Re-declared in `.ui-scale-fixed` below and in styles/density.css — a --scaling-derived step that is not re-declared in both FREEZES at :root (docs/TOKENS.md). 80px — Carbon spacing-11", "name": "--space-20", "tier": "foundation", "value": "calc(5rem * var(--scaling))" }, { "description": "96px — Carbon spacing-12", "name": "--space-24", "tier": "foundation", "value": "calc(6rem * var(--scaling))" }, { "description": "── ICON SIZE — the geometric axis that had a vocabulary but no name (gh#326). 28 component tokens were declaring raw numbers, and between them they only ever used NINE values. The scale was already there; nobody had written it down. These nine names ARE that list — naming an existing vocabulary, not inventing a new one. A FIXED LIST, NOT A RATIO. Unlike --font-size-* there is no `base * ratio^n` here, and that is deliberate: 14/16 = 0.875 but 20/16 = 1.25, so no single ratio generates these steps. Type can sit between pixels because hinting and antialiasing carry it; a 1px-stroke glyph cannot — half a pixel of icon is a blurred icon. So every step is a whole pixel at the 16px root, and a service retunes a STEP rather than a ratio. NOT SCALED HERE. --scaling is applied by the tokens that opt IN (`calc(var(--icon-size-md) * var(--scaling))`, as --control-icon-size does), so the scale itself stays the crisp whole-pixel list. Density is a per-token decision, not a property of the vocabulary. TIER 1 / TIER 2 — where the boundary sits. These nine steps are tier 1: the value appears in more than one place, so it earns a name and a service retunes it once. A value that appears in exactly ONE place (the 6px status dot) is tier 2 and does NOT belong on the scale — set that component's own `--*-icon-size` / `--*-glyph-size` token at the call site instead (`style={{ \"--menu-icon-size\": \"6px\" }}` or a `[data-…]`-scoped rule in the app theme). An inline custom property wins by inheritance proximity, so tier 2 needs no `!important`, no `:root` override and no fork. Every icon rule in src/styles reads its token through `var()` with no literal fallback, which is what keeps that route open — see docs/TOKENS.md. 10px", "name": "--icon-size-2xs", "tier": "foundation", "value": "0.625rem" }, { "description": "12px", "name": "--icon-size-xs", "tier": "foundation", "value": "0.75rem" }, { "description": "14px", "name": "--icon-size-sm", "tier": "foundation", "value": "0.875rem" }, { "description": "16px — the default icon step", "name": "--icon-size-md", "tier": "foundation", "value": "1rem" }, { "description": "20px", "name": "--icon-size-lg", "tier": "foundation", "value": "1.25rem" }, { "description": "24px", "name": "--icon-size-xl", "tier": "foundation", "value": "1.5rem" }, { "description": "36px", "name": "--icon-size-2xl", "tier": "foundation", "value": "2.25rem" }, { "description": "40px", "name": "--icon-size-3xl", "tier": "foundation", "value": "2.5rem" }, { "description": "48px", "name": "--icon-size-4xl", "tier": "foundation", "value": "3rem" }, { "description": "── STROKE — the thickness of a painted LINE (gh#324, the second axis to be named). gh#324 measured `width` at 91% raw and called it the worst axis in the system. It is not one axis. Three unrelated concerns wear the `-width` suffix: the thickness of a drawn line, the measure of a container (a dialog, a reading column, a sidebar), and the content width of a field (how wide a locale picker must be to hold its longest label). Only the FIRST is a vocabulary — see the verdict recorded in `scripts/token-scale-bypass-rules.mjs`. The vocabulary was already there and repeats hard: SIX values across ~20 tokens spanning borders, focus rings, accent rails, selected-state markers and presence strokes. Naming it is what lets a service retune line weight once — a hi-dpi theme that wants 1.5px hairlines, or a high-contrast theme that wants every emphasis stroke at 3px — instead of hunting 20 tokens. PIXELS, NOT REM, AND DELIBERATELY SO. A stroke is a DEVICE line: its job is to read as one crisp rule at any type size, so it must not grow when the root font-size does. Every token that moves onto this scale was already `px` for that reason; a `rem` thickness (`--slider-track-height: 0.375rem`) is a different decision and stays where it is. NOT SCALED. `--scaling` is a DENSITY knob — it tightens the spacing rhythm, and a 1px divider that became 0.92px under compact density would blur, not tighten. No token on this axis multiplies by it today and none should. `--stroke-hairline` sits BELOW `--stroke-sm` rather than being called `xs`, because 1px is not really a step: it is the device hairline, the one thickness a service retunes the EXISTENCE of rather than the value (cardinal rule #44). The scale-bypass guard exempts a bare `1px` for the same reason. Naming it anyway gives the retune-the-value route to the themes that want it. TIER 2 — a thickness that appears in exactly one place does not belong here. Set that component's own `--*-border-width` / `--*-ring-width` token at the call site or in the app theme; every stroke rule in src/styles reads its token through `var()`. every resting border, divider and rule", "name": "--stroke-hairline", "tier": "foundation", "value": "1px" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--stroke-sm", "tier": "foundation", "value": "1.5px" }, { "description": "the emphasis stroke — focus rings, selected markers", "name": "--stroke-md", "tier": "foundation", "value": "2px" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--stroke-lg", "tier": "foundation", "value": "3px" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--stroke-xl", "tier": "foundation", "value": "4px" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--stroke-2xl", "tier": "foundation", "value": "6px" }, { "description": "── BACKDROP BLUR — the optical depth of a translucent surface (gh#837). The fourth axis to be named, and it was named because a token shipped with nothing legal to feed it. `--topbar-backdrop-blur-size` arrived in 28.8.0 so the glass bar two showcases had hand-written became a framework knob — and then the marketing page found that the only values available were a raw literal, another component's private knob (`--app-launcher-launchpad-backdrop-blur-size`), or a token from the WRONG AXIS. It borrowed `--space-2` and said so at the call site, which is honest and is not a solution. Borrowing spacing here is the same category error `check:token-scale-bypass` and the icon tier (gh#328) already police: `--space-*` is `calc( * var(--scaling))`, so a blur taken from it moves whenever density is retuned, along an axis nobody chose. NOT `--scaling`-MULTIPLIED, unlike spacing and unlike the control tier. A backdrop blur is an OPTICAL effect — how far the material scatters what is behind it — not a measurement of layout. Compact density means more information per screen; it does not mean thinner glass. Tailwind's own `blur-*` scale is fixed for the same reason, as are Material 3's scrim treatments and Apple HIG's materials, none of which scale with content density. Three steps, from the two real call sites: 8px is the bar (measured on the marketing page), 16px is the launchpad's full-page scrim, and 4px is the step below for a surface that wants to separate without obscuring. TIER 2 applies as everywhere else: a blur used in exactly one place sets that component's own `--*-backdrop-blur-size` at the call site.", "name": "--blur-sm", "tier": "foundation", "value": "4px" }, { "description": "the glass bar — translucent chrome over scrolling content", "name": "--blur-md", "tier": "foundation", "value": "8px" }, { "description": "a full-page scrim, where the content behind must stop competing", "name": "--blur-lg", "tier": "foundation", "value": "16px" }, { "description": "THE SATURATE COMPANION — ONE knob for every frosted surface in the system, not one per surface, and it is deliberate (gh#880). `blur()` averages what is behind it, and the mean of any real screen is a mid grey. That is not a stylistic observation: it is why the first glassmorphism attempt produced \"grey mush\" on every pane. Pushing chroma back up after the blur is what a physical frosted pane does — it scatters direction, not colour — and the published recipe is one number, `blur(12px) saturate(160%)` (docs/GLASSMORPHISM-STANDARD.md §1). WHY ONE AND NOT TEN. Saturation is a property of the MATERIAL, not a per-component design decision. The standard's per-surface differences are the fill ALPHA (a dropdown needs the most opaque fill, a drawer the next) and the blur SIZE — both of which stay per-surface here. Ten saturate knobs would be ten ways for the panes to drift out of step, and \"the card is glass and the thing inside it is not\" is the exact defect gh#880 was opened about. `--app-launcher-launchpad-backdrop-color-saturate` stays as the ONE documented exception: a full-viewport scrim is a different quantity of material from a 7-line menu, and it is the only surface for which that has been measured. IT IS READ WITH A CALL-SITE DEFAULT OF 160%, NOT AS A BARE `var()`. Every `backdrop-filter` below is written `blur(var(--x-backdrop-blur-size)) saturate(var(--surface-backdrop-saturate, 160%))`, so a theme that sets only a blur size still gets the saturate — asking for glass can never accidentally ask for fog. With NO blur size set the whole declaration is invalid-at-computed-value-time and `backdrop-filter` keeps its own initial `none`, which is what keeps every surface byte-identical by default. default = 160%, resolved at every call site", "name": "--surface-backdrop-saturate", "tier": "foundation", "value": "initial" }, { "description": "── BAND HEIGHT — the vertical extent of a horizontal band that content is centred in (gh#324, the third axis to be named). Same split as `width`: `height` is TWO concerns wearing one suffix. A control, a table row, a menu item, a sidebar nav row and the app-shell top bar are all the same decision — how tall is the band this content sits in — and they share ONE vocabulary of seven values, each of which is declared by two to five tokens. A chart plot's height, a transfer pane's min-height and a select popover's max-height are the OTHER concern: container measures, chosen per surface, with almost no repeated value between them. Those are tier 2 and stay literal. gh#324's fourth case is the whole argument: `PageContainer`'s chrome band had no height token while `AppShell`'s bar did, so nothing could be aligned to it. The two were never conceived as members of one axis, because the axis had no name. WHY THIS IS NOT `--control-height-*`. The control tier is a RUNTIME LADDER: `--control-height` multiplies by `--scaling`, `-sm`/`-lg`/`-xs` step off it, and `@media (pointer: coarse)` lifts the whole ladder to the 44px tap floor. This scale is the STATIC vocabulary that the ladder is anchored on — `--control-height-default: var(--band-height-md)` — exactly as `--font-size-base` anchors the type scale. Do NOT point a band token at `--control-height-*` to \"reuse a step\": that silently enrols it in density AND in the coarse-pointer growth, which is a geometry change, not a rename. `--table-row-height-default` is `var(--band-height-md)` and NOT `var(--control-height-default)` for precisely that reason. NOT SCALED HERE, for the gh#328 reason: whether a band breathes with density is a per-token decision made long ago. `--control-height` opts in (`calc(… * var(--scaling))`); `--app-shell-bar-height` deliberately does not. Baking `--scaling` into the scale would flip every one of them at once. 24px", "name": "--band-height-xs", "tier": "foundation", "value": "1.5rem" }, { "description": "28px", "name": "--band-height-sm", "tier": "foundation", "value": "1.75rem" }, { "description": "32px — the default control/row band", "name": "--band-height-md", "tier": "foundation", "value": "2rem" }, { "description": "36px", "name": "--band-height-lg", "tier": "foundation", "value": "2.25rem" }, { "description": "44px — the WCAG 2.2 AA touch floor (rule #24)", "name": "--band-height-xl", "tier": "foundation", "value": "2.75rem" }, { "description": "48px", "name": "--band-height-2xl", "tier": "foundation", "value": "3rem" }, { "description": "56px", "name": "--band-height-3xl", "tier": "foundation", "value": "3.5rem" }, { "description": "Golden ratio scale", "name": "--ratio-phi", "tier": "foundation", "value": "1.6180339887" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-unit", "tier": "foundation", "value": "var(--space-4)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-n2", "tier": "foundation", "value": "calc(var(--phi-unit) / var(--ratio-phi) / var(--ratio-phi))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-n1", "tier": "foundation", "value": "calc(var(--phi-unit) / var(--ratio-phi))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-0", "tier": "foundation", "value": "var(--phi-unit)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-p1", "tier": "foundation", "value": "calc(var(--phi-unit) * var(--ratio-phi))" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--phi-p2", "tier": "foundation", "value": "calc(var(--phi-p1) * var(--ratio-phi))" }, { "description": "Motion — the primitive tier for animation, so enter/transition timing reads a token instead of a literal 0.5s / cubic-bezier(...) / translateY(10px) (cardinal rule #2). the reference design keeps motion LOW: short durations, a calm decelerate curve, a small reveal shift. Consumers honour prefers-reduced-motion at the call site.", "name": "--duration-fast", "tier": "foundation", "value": "120ms" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--duration-base", "tier": "foundation", "value": "180ms" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--duration-slow", "tier": "foundation", "value": "320ms" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--ease-standard", "tier": "foundation", "value": "cubic-bezier(0.2, 0, 0, 1)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--ease-emphasized", "tier": "foundation", "value": "cubic-bezier(0.32, 0.72, 0, 1)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--ease-decelerate", "tier": "foundation", "value": "cubic-bezier(0, 0, 0, 1)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--ease-accelerate", "tier": "foundation", "value": "cubic-bezier(0.3, 0, 1, 1)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--reveal-distance", "tier": "foundation", "value": "10px" }, { "description": "One step of the Reveal stagger ladder — `` waits n × this before entering, so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay.", "name": "--reveal-stagger-step", "tier": "foundation", "value": "60ms" }, { "description": "AMBIENT/LOOPING motion (gh#313) — the cycle member of the motion tier. `--duration-fast|base| slow` time a TRANSITION (something moves from A to B and stops); a loop needs an INTERVAL, so every ambient affordance in the product breathes at one rate. `Activity` reads these; the remaining Activity knobs (geometry / colour) live in tokens/components/activity.css. NOTE these two are Activity-scoped but live HERE, beside `--reveal-*`, because the motion tier is where timing belongs and because component-token names must carry a geometry/colour property word (`check-token-tiers`) — there is none for a duration.", "name": "--duration-loop", "tier": "foundation", "value": "1400ms" }, { "description": "Per-component override (#45): a service tunes its typing rhythm without moving every loop.", "name": "--activity-interval", "tier": "foundation", "value": "var(--duration-loop)" }, { "description": "Offset between the three `dots` marks — the loop counterpart to `--reveal-stagger-step`, named to match. In RTL the dots reverse with the row, so the cascade follows the reading direction with no extra rule.", "name": "--activity-stagger-step", "tier": "foundation", "value": "160ms" }, { "description": "How long a toast stays before it dismisses itself (gh#1253). In the MOTION tier, like `--activity-interval`: a component-token name has no property word for a duration. Sonner takes `duration` as a JS number, so `Toaster` reads this ONCE on mount with getComputedStyle — from its ThemeScope host when it has one, else `` — and accepts `ms` or `s`. A theme override applies to toasts raised after the Toaster mounts; a per-call `duration` or the Toaster's own `duration` prop still wins. 4000ms is Sonner's own default.", "name": "--toast-duration", "tier": "foundation", "value": "4000ms" }, { "description": "MARQUEE — the TRAVERSAL member of the loop family, and deliberately NOT `--duration-loop`. `--duration-loop` is 1400ms because it times a BREATH: a dot rising and falling, a bar sweeping a small box. A marquee's cycle is a distance being crossed, two orders of magnitude longer, and the two are not the same knob — binding them would mean a service that calms its typing indicator to 2s also whips its logo wall across the screen twice a second. Same tier, same naming, separate value. It is a duration PER SCREENFUL, not per cycle: the component measures one copy of the content and sets `--marquee-cycle-scale` to (copy width ÷ viewport width), so the duration of one lap is `interval × scale` and the PACE is the same whether the track carries one item or forty. A per-cycle duration would make forty logos forty times faster than one, which is how every pure-CSS marquee behaves and why none of them survive real content. 20s per screenful ≈ 60px/s at 1200px — the resting pace a logo wall reads at. The two ordinals are the `speed` prop's `slow` and `fast`; they are tokens rather than multipliers in the stylesheet so a theme can retune the ladder, not just its middle rung.", "name": "--marquee-interval", "tier": "foundation", "value": "20s" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--marquee-interval-slow", "tier": "foundation", "value": "calc(var(--marquee-interval) * 2)" }, { "description": "Foundation tokens: color, typography, raw spacing, ratio, radius, shadow.", "name": "--marquee-interval-fast", "tier": "foundation", "value": "calc(var(--marquee-interval) / 2)" }, { "description": "── THE PRIMARY FAMILY — knobs, `initial`; defaults resolve at the call site (see above). ──", "name": "--primary-hover", "tier": "semantic", "value": "initial" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-active", "tier": "semantic", "value": "initial" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-border", "tier": "semantic", "value": "initial" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--control-outline", "tier": "semantic", "value": "initial" }, { "description": "AT THE ENDS OF THE RAMP THE STEP TURNS AROUND (v32, gh#1220). A seed darker than 12% L has no room below it: the neutral ink (240 6% 10%) stepped to 1.6% for hover and 0% for pressed, 1.16:1 from rest, which reads as no hover at all. Below 12% L hover goes UP 9.6 and pressed UP 4.8 (ink: 19.6% / 14.8%). The bound is 12, not 20, and the up-steps are small, because a light label must stay AA: the worst hue (green, highest luminance per L) peaks at 21.6% L, still ≥ 6:1 under white — at 20 / +15.5 the dense sweep measured #004400 pressed at 4.06:1. The mirror case: above 94% L (the dark theme's near-white ink, 98%) hover ran into 100% (1.04:1), so both lighten steps turn DOWN (92.2% / 86.4% for the ink). Mid-ramp seeds (the GoDX violet, 50% and 86.9%) take exactly the old steps. Brand INKS (`--text-*`) keep their own formula below: an ink sits on a light surface and must step away from it, whatever the fill does.", "name": "--primary-hover-darken-channels", "tier": "semantic", "value": "h s calc(l - 8.4 + 18 * clamp(0, (12 - l) * 1000, 1))" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-active-darken-channels", "tier": "semantic", "value": "h s calc(l - 15.5 + 20.3 * clamp(0, (12 - l) * 1000, 1))" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-hover-lighten-channels", "tier": "semantic", "value": "h s calc(l + 5.8 - 11.6 * clamp(0, (l - 94) * 1000, 1))" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-active-lighten-channels", "tier": "semantic", "value": "h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1) - 5.8 * clamp(0, (l - 94) * 1000, 1))" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-hover-channels", "tier": "semantic", "value": "var(--primary-hover-darken-channels)" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--primary-active-channels", "tier": "semantic", "value": "var(--primary-active-darken-channels)" }, { "description": "the hue a focus outline paints on a control that has no boundary of its own (#a66de3 on our seed)", "name": "--primary-border-channels", "tier": "semantic", "value": "h calc(s * 0.68) calc(l + 16)" }, { "description": "the focus halo on a field (rgb(109,0,228) on our seed)", "name": "--control-outline-channels", "tier": "semantic", "value": "h s calc(l - 5.3)" }, { "description": "the alpha half of that halo", "name": "--control-outline-alpha", "tier": "semantic", "value": "0.11" }, { "description": "── THE BRAND TEXT FAMILY — the same shape, for the same reason (gh#664). ── `--text-link` and `--text-brand` are RAMP STEPS off the action colour, not independent inks: identity v2.3 puts the link one step below the action bg (#6400D4), which is exactly where `--primary-hover` lands. They were authored as literals, and that is how `--text-link` spent a release on the pre-v2.3 BLUE after the seed moved to violet — the miss gh#648 found in this tier, one tier up, and invisible to that issue's hue lock because the lock only guards `--primary-*`. Declared as knobs, the step follows the seed and cannot be left behind. `--text-primary` is the PRESSED step of the same ramp, and the MARK tier hangs off it. It was held back once on the belief that `--mark-primary` could not follow, because that token is contracted to a RAW `H S% L%` triple washed at an alpha and CSS relative colour yields a colour only inside `hsl()`. Measured in Chrome, that reasoning was wrong: the alpha goes after the slash INSIDE the same `hsl()`, so a call site writes `hsl(var(--mark-primary, var(--text-primary, from hsl(var(--primary)) …)) / .2)` and every level still overrides. The mark tier follows with it.", "name": "--text-link", "tier": "semantic", "value": "initial" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--text-brand", "tier": "semantic", "value": "initial" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--text-primary", "tier": "semantic", "value": "initial" }, { "description": "Light: one step DOWN the ramp from the action colour — the same step `--primary-hover` takes, so the link sits where identity v2.3 puts it and moves when the seed does.", "name": "--text-link-channels", "tier": "semantic", "value": "h s calc(l - 8.4)" }, { "description": "DERIVED COLOUR — the interaction states that hang off the authored seeds.", "name": "--text-brand-channels", "tier": "semantic", "value": "h s calc(l - 8.4)" }, { "description": "The pressed ink is two steps down — identity v2.3 action.primary.pressed (#5200B0).", "name": "--text-primary-channels", "tier": "semantic", "value": "h s calc(l - 15.5)" }, { "description": "#c44b4d", "name": "--destructive-hover", "tier": "semantic", "value": "359 50.6% 53.1%" }, { "description": "#911923", "name": "--destructive-active", "tier": "semantic", "value": "355 70.6% 33.3%" }, { "description": "the same halo on an invalid field rgba(166,22,11,0.09)", "name": "--control-outline-error", "tier": "semantic", "value": "4.3 87.6% 34.7%" }, { "description": "the alpha half of that halo", "name": "--control-outline-error-alpha", "tier": "semantic", "value": "0.09" }, { "description": "There is no separate focus COLOUR: a focused field's border simply becomes the primary. Declared as a REFERENCE rather than a copied triple, so retinting the seed retints the focus mark with it — which is the entire point of a derived tier. Declared in BOTH blocks, not inherited from `:root`: a var() binding made once at `:root` would freeze on the light `--primary` if `.dark` ever lands on an element below `` (docs/TOKENS.md, the freeze rule). The same rule means a `--primary` scoped BELOW `` does not reach `--ring`: `--ring` is a public role read as `hsl(var(--ring))` all over consumer CSS, so it cannot become an `initial` knob — a nested scope sets `--ring` itself (docs/CUSTOMER-THEMING.md §Multi-tenant).", "name": "--ring", "tier": "semantic", "value": "var(--primary)" }, { "description": "Semantic spacing — ONE coherent 4px grid (Tailwind/Material/Ant standard). All steps reference the linear `--space-*` scale (NOT the golden φ scale — golden ratio is for modular SIZE scales like type/radius, not the spacing grid; mixing the two left an incoherent density rhythm). The φ tokens remain available as an optional golden-layout utility, just not the spacing baseline. 32px — page gutter", "name": "--space-page-x", "tier": "semantic", "value": "var(--space-8)" }, { "description": "32px", "name": "--space-page-y", "tier": "semantic", "value": "var(--space-8)" }, { "description": "16px", "name": "--space-section", "tier": "semantic", "value": "var(--space-4)" }, { "description": "THE MARKETING BAND RHYTHM (gh#831). `--space-section` is the gap BETWEEN the blocks of one admin page; these two are the block-axis padding of a full-bleed marketing BAND and of the hero band that opens the page. Named `--space-section-*` and not `--space-band-*` on purpose: `band` already means \"the vertical extent of a control/row\" in this repo (`--band-height-*`, rule #24) and a second meaning for the same word is the drift check:prop-vocabulary exists to stop. They read the linear `--space-*` grid for the reason stated four lines above — the φ ladder is not the spacing generator here, and 80/96px are Carbon `$spacing-11`/`$spacing-12` (docs/DESIGN-AUTHORITY.md). Re-declared in styles/density.css: both alias a --scaling-derived step, so a descendant density scope that did not re-derive them would FREEZE at :root. 80px — band padding-block", "name": "--space-section-band", "tier": "semantic", "value": "var(--space-20)" }, { "description": "96px — hero band padding-block", "name": "--space-section-hero", "tier": "semantic", "value": "var(--space-24)" }, { "description": "4px", "name": "--space-stack-xs", "tier": "semantic", "value": "var(--space-1)" }, { "description": "8px", "name": "--space-stack-sm", "tier": "semantic", "value": "var(--space-2)" }, { "description": "16px", "name": "--space-stack-md", "tier": "semantic", "value": "var(--space-4)" }, { "description": "24px", "name": "--space-stack-lg", "tier": "semantic", "value": "var(--space-6)" }, { "description": "40px", "name": "--space-stack-xl", "tier": "semantic", "value": "var(--space-10)" }, { "description": "4px", "name": "--space-inline-xs", "tier": "semantic", "value": "var(--space-1)" }, { "description": "8px", "name": "--space-inline-sm", "tier": "semantic", "value": "var(--space-2)" }, { "description": "12px", "name": "--space-inline-md", "tier": "semantic", "value": "var(--space-3)" }, { "description": "16px", "name": "--space-inline-lg", "tier": "semantic", "value": "var(--space-4)" }, { "description": "THE INLINE AXIS OWES AN `xl` TOO (gh#835). It had one — at `foundation.css` inside `.ui-scale-fixed`, and NOWHERE else — so `--space-inline-xl` computed to EMPTY on `` and on every ancestor of an ordinary component. `Flex direction=\"row\" gap=\"xl\"` therefore painted `gap: normal` outside the chrome bands that happen to carry that class: a documented member of the controlled `GapProp` vocabulary handing back the browser's initial value. Measured in Chromium before this line: row xs/sm/md/lg = 4/8/12/16px and xl = `normal`. `--space-6` (24px) and not `--space-10` (40px), the block axis's xl: the inline scale is tighter than the block scale at every other step (4 · 8 · 12 · 16 against 4 · 8 · 16 · 24), because a wide gap across a row cuts the reading line while a wide gap down a column separates blocks. Same value as the `.ui-scale-fixed` declaration, which keeps its own copy for the same reason every other step there does — that band does not scale with density. 24px", "name": "--space-inline-xl", "tier": "semantic", "value": "var(--space-6)" }, { "description": "OVERLAY STACKING — one system-level layer for every portaled surface (rule #44/#45). Tooltip, Popover, Select, DropdownMenu and Sheet all hard-coded `z-50` independently, so a host app that mounts @godxjp/ui under its own stacking context (a sticky masthead, a third-party chat widget) had to fight five separate literals. Stacking is a SYSTEM decision, not a per-primitive one: a service raises every overlay together by setting this once.", "name": "--overlay-z-index", "tier": "semantic", "value": "50" }, { "description": "PINNED-IN-FLOW STACKING — the layer an element takes while it is stuck to the scrollport but still part of the document: `Affix`, the sticky `Anchor` rail, a sticky table header, a sticky form footer. It is the same argument as `--overlay-z-index` one layer down, and it is here for the same reason: `table-layout.css`, `data-display-layout.css` and `control.css` each reached for a bare `z-index: 20` independently, so a host app that mounts this package under its own stacking context had to fight each of them separately. Between page content and every portaled surface, on purpose: a pinned bar must cover the rows scrolling under it, and must never cover the dialog, the dropdown or the toast.", "name": "--sticky-z-index", "tier": "semantic", "value": "20" }, { "description": "Master-detail geometry. Consumers choose a semantic rail preset; they never author grid tracks. 300px", "name": "--master-detail-rail-compact", "tier": "semantic", "value": "18.75rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--master-detail-rail-narrow", "tier": "semantic", "value": "12rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--master-detail-rail-wide", "tier": "semantic", "value": "24rem" }, { "description": "320px", "name": "--master-detail-rail-standard", "tier": "semantic", "value": "20rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--master-detail-gap", "tier": "semantic", "value": "var(--space-stack-md)" }, { "description": "The collapse threshold: MasterDetail keeps its two-track split while the composition's OWN inline size is at least this wide, and stacks (master then detail) below it. A service theme retunes it once globally; the `collapseBelow` prop overrides it per instance (rule #45). This is a real knob — the layout reads it through the flex-basis threshold, NOT a media query, precisely so a `var()` can drive it (see src/styles/layout.css · .ui-master-detail). 640px — the `sm` step", "name": "--master-detail-collapse-below", "tier": "semantic", "value": "40rem" }, { "description": "SplitPane main ↔ aside gap (gh#1310, rule #45), split and stacked. Default = --space-stack-md, resolved at the call site so a density scope that re-derives the step still reaches it; a service sets the column step it reads between panes, e.g. var(--space-inline-xl).", "name": "--split-pane-gap", "tier": "semantic", "value": "initial" }, { "description": "Bounded master viewport (gh#231). OPT-IN, chosen by the semantic `masterViewport` prop — `auto` (the default) applies NO bound, so every existing composition is unchanged. A real collection can be thousands of pixels tall; when the layout stacks, that pushes the detail far below the fold. The presets cap the collection's BLOCK size and scroll it inside the region instead. Sized as a whole number of nominal collection rows (2.5rem ≈ a compact list row) so a service theme retunes them in the same semantic unit the design grid uses. 320px — about 8 nominal rows", "name": "--master-detail-master-viewport-compact", "tier": "semantic", "value": "20rem" }, { "description": "448px — about 11 nominal rows", "name": "--master-detail-master-viewport-standard", "tier": "semantic", "value": "28rem" }, { "description": "Focus-ring room INSIDE the bounded region: an overflow container clips both axes, so without an inset the ring of a row at the edge would be cut off (WCAG 2.4.11/2.4.13). Doubles as the scroll-padding so a row scrolled into view never sits flush against the clip edge. 4px", "name": "--master-detail-master-viewport-inset", "tier": "semantic", "value": "var(--space-1)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--space-page-active-x", "tier": "semantic", "value": "var(--space-page-x)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--space-page-active-y", "tier": "semantic", "value": "var(--space-page-y)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--space-section-active", "tier": "semantic", "value": "var(--space-section)" }, { "description": "16px mobile page gutter", "name": "--space-page-compact-x", "tier": "semantic", "value": "var(--space-4)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--space-page-compact-y", "tier": "semantic", "value": "var(--space-4)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--space-section-compact", "tier": "semantic", "value": "var(--space-4)" }, { "description": "Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet, Drawer, AppShell mobile nav). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay. HOW IT REACHES AN OVERLAY (gh#215 — it previously reached NOTHING): each surface declares its own knob `initial` and resolves a SHARE of this colour at the call site, `var(--dialog-overlay-background, color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent))`. That keeps the calibrated per-surface depth — a slide-in Sheet washes the page more lightly (40%) than a modal Dialog (60%) — while ONE override here retints every backdrop. Per docs/TOKENS.md the knobs must stay `initial`: a `:root` binding would freeze and a scoped `[data-tenant]`/`.dark` override of this token would never reach the overlay. Overlays are portaled, so a tenant scope must also sit on the portal container (see docs/CUSTOMER-THEMING.md).", "name": "--overlay-background", "tier": "semantic", "value": "rgb(0 0 0 / 0.4)" }, { "description": "RECESSED SURFACE role (gh#399) — \"the ground a card sits on\", one step BEHIND `--card`. It is a ROLE, not a derivation: the two themes order their surfaces differently, so no single expression is correct on both. Light puts `--muted` (95%) behind `--card` (99%); dark puts it (18%) in FRONT of `--card` (12%), so the shipped `hsl(var(--muted) / 0.4)` composited to rgb(35,33,30) against a rgb(33,32,28) card — the page read 1.015:1 LIGHTER than the cards on it, i.e. the elevation inverted. No alpha fixes that: the mix runs from `--background` (correct) toward `--muted` (wrong), so anything above ~0.33 crosses the card. Each theme therefore states its own ground below. Light keeps the exact shipped composite (1.036:1 behind the card); dark takes the page `--background`, which measures 1.089:1 — matching the light theme's separation instead of inverting it.", "name": "--surface-recessed", "tier": "semantic", "value": "hsl(var(--muted) / 0.4)" }, { "description": "Block-end inset of the page footer band; symmetric with its block-start rhythm.", "name": "--page-footer-pad-block-end", "tier": "semantic", "value": "var(--space-stack-md)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-header-divider", "tier": "semantic", "value": "none" }, { "description": "The widest share of the header row the actions (`extra`) keep on ONE row before they wrap (gh#1025); the title keeps the rest. `initial` — default 60% at the call site.", "name": "--page-header-extra-max-measure", "tier": "semantic", "value": "initial" }, { "description": "PageContainer `toolbar` — the fixed chrome band between the header and the (scrolling) body. ALL THREE knobs are quiet by default (rule #44): background — `transparent`, i.e. the band shows the page ground exactly as it did before the knob existed. It is bound at `:root` and NOT `initial`, unlike the divider below, because the default is a plain CSS keyword rather than another role token: there is nothing for a scoped [data-tenant]/.dark override to re-resolve, so the `initial` + call-site-fallback dance would buy nothing and only hide the default from anyone reading this file. A service that wants the band to read as its own surface — the design that asked for this knob puts a chat channel's workflow rail on the card ground — sets `--page-toolbar-background: hsl(var(--card));` ONCE in its theme. Never `className=\"bg-card\"` at the call site: that is hand-laid page chrome, it paints only under `variant=\"flush\"` gutters correctly by accident, and it cannot be re-themed per tenant. pad-block — `initial`; the call site falls back to the container's `--page-band-gap` (`var(--page-toolbar-pad-block, var(--page-band-gap))`), which is scoped on `.ui-page-container` and so cannot be bound here. The band's BOX sits FLUSH against the header above and the body below (src/styles/layout.css cancels the container's gap from the band itself — a painted, ruled band floating in a void divides nothing), and this inset gives the band's CONTENT the page's band rhythm back: a plain filter strip sits one band gap from the header and from the body, the same as any other band. At the old `0px` default a transparent strip touched both surfaces, 0px (gh#1323). A service that paints or rules the band sets a tighter inset HERE (`--page-toolbar-pad-block: var(--space-2)`) instead of padding the strip at the call site; `0px` restores the flush strip. divider — declared `initial` so the CALL SITE can fall back to --page-header-divider (`var(--page-toolbar-divider, var(--page-header-divider))`). One theme declaration therefore rules the whole page chrome consistently, and a scoped [data-tenant]/.dark override of the header divider still reaches the band — a `:root` binding would freeze it at the :root value (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"). Set `--page-toolbar-divider: none` to silence just this band.", "name": "--page-toolbar-background", "tier": "semantic", "value": "transparent" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-toolbar-pad-block", "tier": "semantic", "value": "initial" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-toolbar-divider", "tier": "semantic", "value": "initial" }, { "description": "Top rule of the PageContainer `footer` — the third page chrome band, brought onto the same contract as the header and the toolbar (its rule used to be a hard literal in layout.css, so a page could not turn it off at all). Declared `initial` like the toolbar's, so the CALL SITE resolves it as `var(--page-footer-divider, 1px solid hsl(var(--border)))` and a scoped [data-tenant]/.dark override still reaches it (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"). It is the ONE chrome knob whose default is a RULE rather than silence, and deliberately so: `footer` is the shared slot a form's Save/Cancel bar lands in, where the line separating the actions from the page content is the behaviour every existing page already depends on. The old literal is the fallback verbatim, so unset is byte-identical. A page whose footer content already carries its own frame — a chat composer is a bordered Card — silences the duplicate with `--page-footer-divider: none`.", "name": "--page-footer-divider", "tier": "semantic", "value": "initial" }, { "description": "Bottom inset of the page header, sized so title→body distance (this pad + the --space-section-active container gap) EQUALS the page's top padding — the title band reads vertically balanced (24 above / 24 below by default), instead of the old fixed 16px pad that left 24 above vs 32 below. A page that passes a `toolbar` measures title→BAND instead (this pad alone, the gap being cancelled): the band is chrome attached to the header, not the next section down.", "name": "--page-header-pad-bottom", "tier": "semantic", "value": "calc(var(--space-page-active-y) - var(--space-section-active))" }, { "description": "Inline measure of the header `extra` region while the page header is in `responsive-inline` arrangement (gh#231). Below the 640px step the default arrangement drops `extra` onto its own full-width line under the subtitle; `headerLayout=\"responsive-inline\"` keeps it beside the title band at this measure instead, so a single compact control (a search field, one primary action) stays on the title row at 390px. Unused by the default arrangement, so no existing page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. 176px", "name": "--page-header-extra-measure", "tier": "semantic", "value": "11rem" }, { "description": "Gap between the page title and its status/meta band (PageContainer `status`, godxjp-ui#255), and between the band's own items. One knob aligns the badge row to a service's grid; a page that never passes `status` reads neither the token nor the wrapping row.", "name": "--page-header-status-gap", "tier": "semantic", "value": "var(--space-inline-sm)" }, { "description": "PageContainer `headerLoading` placeholders (gh#255). The title/subtitle elements wear the shared `.ui-skeleton-block` skin, so they need only a MEASURE and a block size — a service retunes the pending band's proportions here instead of per page. 224px", "name": "--page-title-placeholder-measure", "tier": "semantic", "value": "14rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-title-placeholder-block-size", "tier": "semantic", "value": "1.5em" }, { "description": "352px", "name": "--page-subtitle-placeholder-measure", "tier": "semantic", "value": "22rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-subtitle-placeholder-block-size", "tier": "semantic", "value": "1.25em" }, { "description": "Bounded page MEASURE (gh#245 / gh#247) — the shared inline cap applied to the page HEADER and BODY together, so the header `extra` action ends on the same edge as the body surface (the `variant=\"narrow\"` complaint: it caps only `.ui-page-body`, leaving the header action out at the page edge). Selected by the semantic `measure` prop; `measure=\"default\"` reads NEITHER token, so an existing page is untouched. These are OUTER measures: the page gutters (--space-page-active-x, 24px each side by default) live INSIDE the cap, so the VISIBLE surface is the measure minus both gutters: narrow 42rem = 672px → 624px visible surface (the historical variant=\"narrow\" body width) medium 48rem = 768px → 720px visible surface (the canonical readable/feed measure) Below the cap nothing binds, so a 390px viewport stays fluid at the 16px compact gutter (358px surface). A service theme retunes both in ONE place; never a page-local max-width. 672px outer → 624px surface", "name": "--page-measure-narrow", "tier": "semantic", "value": "42rem" }, { "description": "768px outer → 720px surface", "name": "--page-measure-medium", "tier": "semantic", "value": "48rem" }, { "description": "THE MARKETING MEASURE (gh#831). A landing page is not a reading column: two unrelated website showcases each hand-wrote a shell cap (1200px and 1140px) because the widest name here was `medium` at 768px. 72rem sits between the two measured values and is a step the industry already ships (Tailwind `--container-6xl`); the wide-container cluster runs 1136–1320px (Radix Container 4 = 1136, Primer/Tailwind = 1280, Bootstrap = 1320). No `PageContainer` branch reads it yet (the website-components roadmap, §5.9), so today this is the VOCABULARY a marketing composition caps its own shell with, as `--gradient-hero` is. 1152px outer → 1104px surface", "name": "--page-measure-wide", "tier": "semantic", "value": "72rem" }, { "description": "Responsive page typography is independent from density. Density changes information spacing; these tokens change only page chrome so mobile keeps readable body text and touch targets.", "name": "--page-title-font-size", "tier": "semantic", "value": "var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-title-font-size-compact", "tier": "semantic", "value": "var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-subtitle-font-size", "tier": "semantic", "value": "var(--font-size-base)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-subtitle-font-size-compact", "tier": "semantic", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "PageContainer `headerScale=\"chrome\"` — the title step for a page whose top row IS CHROME rather than a document title: a chat channel name, a mail subject line, an IDE tab. It is a SEPARATE knob from the two above on purpose: those are ONE document title at two viewport sizes (a responsive step), while this is a different KIND of page and holds at every width. `--heading-h3` (= --font-size-base, 14px) is the body step, which is the point — the row reads as a label ON the surface, not as the page's headline, and the header band collapses from the measured 61px to ~40px once it stops carrying a 20px h1. Quiet by default: a page that never passes `headerScale` never reads this token (rule #44).", "name": "--page-title-font-size-chrome", "tier": "semantic", "value": "var(--heading-h3, var(--font-size-base))" }, { "description": "PageContainer `headerScale=\"display\"` (gh#1160) — an ARTICLE's headline (a Notion / note.com page). The 4xl display step, which already scales with the viewport through `--font-size-display`'s clamp (≈25px on a phone → 42px wide), so one knob covers phone and desktop and the compact step below does not apply. CJK titles need more leading than Latin ones at this size: 1.4, not the tight 1.25 a short Latin headline gets. `initial` with the formula at the call site: it reads `--font-size-display`, a seed a consumer may re-scope, and a :root formula would compute once on (docs/TOKENS.md · \"Role-mirror knobs MUST be initial\"). = the 4xl display step, resolved at the call site", "name": "--page-title-font-size-display", "tier": "semantic", "value": "initial" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-title-line-height-display", "tier": "semantic", "value": "1.4" }, { "description": "The page icon above the title (gh#1160): emoji or glyph, and how far it rides up over a banner cover's bottom edge.", "name": "--page-icon-size", "tier": "semantic", "value": "var(--icon-size-4xl)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-icon-cover-overlap", "tier": "semantic", "value": "calc(var(--page-icon-size) * 0.6)" }, { "description": "PageCover (gh#1160). A banner's height scales with the viewport between a phone floor and a desktop ceiling — one knob per step, no media query; an eyecatch keeps note.com's ~1.91:1.", "name": "--page-cover-block-size-md", "tier": "semantic", "value": "clamp(8rem, 24vw, 15rem)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-cover-block-size-lg", "tier": "semantic", "value": "clamp(10rem, 32vw, 20rem)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--page-cover-eyecatch-aspect-ratio", "tier": "semantic", "value": "1.91" }, { "description": "default = var(--card-radius) at the call site (gh#888)", "name": "--page-cover-radius", "tier": "semantic", "value": "initial" }, { "description": "The SUBTITLE step of the same fact. Measured against the reference chat screen, the chrome title and the chrome subtitle were rendering at the SAME step (both --font-size-base), which is not a hierarchy — a channel name and the channel's purpose line read as one undifferentiated block. The design puts the purpose line two steps down (`Text size=\"2xs\"`), and the size is what carries the LINE BOX: at 14px/1.7 the subtitle line is 23.8px tall, at 11px/1.7 it is 18.9px, so the whole header band loses ~5px it was spending on a caption. `--font-size-2xs` (ratio⁻², ≈11px) is that step, and it is the same golden scale the title step reads — never a literal. Quiet by default: a page that never passes `headerScale` never resolves it (#44).", "name": "--page-subtitle-font-size-chrome", "tier": "semantic", "value": "var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )" }, { "description": "The page's TOP inset under `headerScale=\"chrome\"`, the second half of the same fact: chrome sits on the frame's edge. A document page opens with --space-page-active-y (24px, 16px below the 720px step) because a title needs air above it; a chat channel head, a mail subject bar or an IDE tab strip is the frame itself, and 24px of margin above it reads as a page floating inside its own shell — measured on a consumer chat screen as 24px lost off the top of the transcript viewport, against a design whose channel head starts at y=0. 0 is therefore the quiet default (rule #44), and it is a knob rather than a literal so a service whose grid wants its chrome inset (`--page-pad-block-start-chrome: var(--space-2)`) retunes it once instead of forking the page shell. Read ONLY when the prop is passed, so no document page resolves it.", "name": "--page-pad-block-start-chrome", "tier": "semantic", "value": "0px" }, { "description": "The BAND HEIGHT of the same fact (gh#331). A document header is content-height by definition — a title is as tall as the title is. A chrome band is the opposite: it is furniture, and furniture has a height that things centre INTO. `AppShell` has had `--app-shell-bar-height` for exactly that since it shipped; `PageContainer` had no equivalent, so a `headerScale=\"chrome\"` band's vertical centre drifted with its own copy — measured in Chromium on /isolate/layout-page-container, 42.02px with an `extra` control and 40.38px without, i.e. the centre moves 0.8px for a change of content and there is no value a service can aim at. WHO OWNS THE BAND-HEIGHT AXIS (the question gh#331 defers to gh#330). `--app-shell-bar-height` does: it is the system's one declared chrome-band height, and `--centered-shell-bar-height` already reads it. A service that wants its page chrome to sit on the shell bar's band writes ONE line — `--page-header-min-block-size-chrome: var(--app-shell-bar-height)` — and the two bands are on one axis for good. It is NOT that value by DEFAULT, and the reason is not timidity: a `PageContainer` with a chrome header is not necessarily inside an `AppShell` (the canonical chat composition renders one inside a bordered region, a SplitPane pane, a Card), and a band that is not trying to line up with a bar has no business inheriting that bar's height. `auto` is the quiet state (rule #44): no floor, content-height, byte-identical to every page rendered before this token existed — document AND chrome. A MIN, never a fixed height: a taller `extra` (an `lg` control, a wrapped JA/VI channel name) must still fit rather than overflow its own band. The header centres its content in whatever band it ends up with — see `justify-content` in styles/layout.css — so raising this knob centres, it does not top-pack. The header's own `--page-header-pad-bottom` lives INSIDE the band (border-box); under the canonical chrome composition (`variant=\"ghost\"`) that pad is 0 and the centring is exact.", "name": "--page-header-min-block-size-chrome", "tier": "semantic", "value": "auto" }, { "description": "Section \"chrome\" padding — the SHARED inset for header / body / footer of every overlay-ish surface (Dialog · Sheet · Drawer · Card). One global knob: a service sets these once instead of per-component. Vertical is tightened (16 vs the old 24) and density-aware (see density.css); horizontal stays 24 (Ant standard). Per-component tokens (--sheet-pad-*, --dialog-space-inset…) default to these and only override when a surface genuinely needs to differ. 24px — horizontal inset", "name": "--space-chrome-x", "tier": "semantic", "value": "var(--space-6)" }, { "description": "16px — vertical inset (header/footer/body)", "name": "--space-chrome-y", "tier": "semantic", "value": "var(--space-4)" }, { "description": "gap between header ↔ body ↔ footer", "name": "--space-chrome-gap", "tier": "semantic", "value": "var(--space-stack-sm)" }, { "description": "The ONE vertical gap between a field's LABEL and its CONTENT — same everywhere a label sits above a control or a value (FormField, Descriptions, Form, any label-above stack). Single source so the whole system stays in sync (gh feedback: Descriptions was ~0px while FormField was 8px). 8px", "name": "--field-label-gap", "tier": "semantic", "value": "var(--space-2)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-control-height", "tier": "semantic", "value": "var(--control-height-default)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-section-gap", "tier": "semantic", "value": "var(--space-stack-md)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-toolbar-padding-y", "tier": "semantic", "value": "0px" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-search-measure", "tier": "semantic", "value": "20rem" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-table-row-height", "tier": "semantic", "value": "var(--table-row-height-default)" }, { "description": "Layout primitive tokens: page, section, stack, inline.", "name": "--admin-collection-table-cell-padding-y", "tier": "semantic", "value": "var(--space-1)" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--color-card", "tier": "semantic", "value": "hsl(var(--card) / var(--card-alpha, 100%))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--color-popover", "tier": "semantic", "value": "hsl(var(--popover) / var(--popover-alpha, 100%))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--color-input", "tier": "semantic", "value": "hsl(var(--input) / var(--input-alpha, 100%))" }, { "description": "Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px).", "name": "--radius-xs", "tier": "semantic", "value": "calc( var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio) )" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--radius-sm", "tier": "semantic", "value": "calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--radius-md", "tier": "semantic", "value": "calc(var(--radius) / var(--radius-ratio))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--radius-lg", "tier": "semantic", "value": "var(--radius)" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--radius-xl", "tier": "semantic", "value": "calc(var(--radius) * var(--radius-ratio))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--radius-2xl", "tier": "semantic", "value": "calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--color-secondary-hover", "tier": "semantic", "value": "hsl(var(--secondary-hover) / var(--secondary-hover-alpha, 100%))" }, { "description": "───────────────────────────────────────────────────────────────────────── FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base element styles.", "name": "--color-secondary-active", "tier": "semantic", "value": "hsl(var(--secondary-active) / var(--secondary-active-alpha, 100%))" }, { "description": "Gap between actions. Tight on purpose — the strip is a cluster, not a row of page buttons.", "name": "--actions-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Inset of the `filled` / `outlined` forms. `borderless` drops both to zero.", "name": "--actions-padding-block", "tier": "component", "value": "var(--space-1)" }, { "description": "Actions component tokens — the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button's own `size=\"icon-sm\"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).", "name": "--actions-padding-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "gh#888 — φ tier freezes at :root; default = var(--radius)", "name": "--actions-radius", "tier": "component", "value": "initial" }, { "description": "Chrome of the two bounded variants. Role-mirror knobs (docs/TOKENS.md): `initial` so each documented default resolves at the CALL SITE. Default filled ground = hsl(var(--muted)) Default outlined stroke = var(--stroke-hairline) solid hsl(var(--border))", "name": "--actions-filled-background", "tier": "component", "value": "initial" }, { "description": "Actions component tokens — the strip of actions under an assistant message (Ant Design X `Actions`). Every action is a `Button`, so NOTHING here sets a control height: that comes from the `--control-height` tier through Button's own `size=\"icon-sm\"` step, and restating it would re-derive a tier that drifts from the buttons beside it (`pnpm check:control-sizing`).", "name": "--actions-outlined-border", "tier": "component", "value": "initial" }, { "description": "`fadeIn` / `fadeInLeft` — the distance the strip travels along the inline axis. The DURATION is deliberately not a knob here. Timing belongs to the motion tier, for the same reason `src/tokens/components/activity.css` records: `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration, and a service retunes arrival motion once through `--duration-base` rather than per component. The animation reads that token directly, and drops to nothing under `prefers-reduced-motion`.", "name": "--actions-fade-offset-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Mark geometry. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore `--font-size-base` and the density axis) instead of pinning a px diameter per size step.", "name": "--activity-mark-size", "tier": "component", "value": "0.25em" }, { "description": "Travel of one `dots` step — the loop counterpart to `--reveal-distance`, named to match. It is ALSO the height the mark row reserves, so the indicator appearing under a composer never shifts the row.", "name": "--activity-mark-offset", "tier": "component", "value": "0.25em" }, { "description": "Resting opacity of a dot at the bottom of its cycle. Never 0: a dot that vanishes reads as a rendering bug at the trough, and the reduced-motion resting state must stay fully legible.", "name": "--activity-mark-rest-alpha", "tier": "component", "value": "0.35" }, { "description": "The single `pulse` mark — a breathing dot (live / recording), bigger than one `dots` dot because it carries the whole affordance alone.", "name": "--activity-pulse-mark-size", "tier": "component", "value": "0.5em" }, { "description": "Mark-to-mark and mark-to-label gap.", "name": "--activity-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Root size ladder — the mark is `em`-based, so this ONE value scales the whole indicator. Steps mirror the `Text` size the label is rendered at, so mark and label stay optically paired (`--font-size-sm` IS `--font-size-base`; the ladder skips the alias).", "name": "--activity-font-size-xs", "tier": "component", "value": "var( --font-size-2xs, calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio)) )" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-font-size-sm", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-font-size-md", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-font-size-lg", "tier": "component", "value": "var( --font-size-lg, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )" }, { "description": "Indeterminate `bar` (syncing). Width is an inline measure, not a fill: the bar sits beside a label in a row, so `100%` would eat the label's space.", "name": "--activity-bar-width", "tier": "component", "value": "4rem" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-bar-radius", "tier": "component", "value": "var(--radius-pill)" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-bar-segment-width", "tier": "component", "value": "40%" }, { "description": "ACTIVITY — the ambient/looping motion primitive (gh#313). The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while something is happening elsewhere (someone typing, a sync in flight, a response streaming, a recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme retunes the whole ambient feel in one place instead of forking a `@keyframes`. TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow` and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour and alpha — everything the shape rule DOES cover — live here. Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.", "name": "--activity-bar-track-alpha", "tier": "component", "value": "0.2" }, { "description": "scale-exempt: an em thickness that must track the label beside it, not a fixed band step", "name": "--activity-bar-height", "tier": "component", "value": "0.25em" }, { "description": "Mark colour. ROLE-MIRROR KNOB ⇒ declared `initial` here with the role default at the CALL SITE (`hsl(var(--activity-color, var(--muted-foreground)))` in styles/motion.css). Written as `--activity-color: var(--muted-foreground)` it would freeze at the `:root` role value and a scoped `[data-tenant]` / `.dark` override of `--muted-foreground` would never reach it. @see docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\". Documented default: --activity-color = var(--muted-foreground) (tone=\"muted\").", "name": "--activity-color", "tier": "component", "value": "initial" }, { "description": "Distance from the scrollport's BLOCK-START edge at which an Affix pins, and the distance it sits at once pinned. Ant Design `offsetTop`, whose default is `0`; ported as that default.", "name": "--affix-inset-block-start", "tier": "component", "value": "0px" }, { "description": "The same, from the BLOCK-END edge — the sticky form footer rather than the sticky header. Ant Design `offsetBottom` has no default at all, because in antd the PRESENCE of the prop is what selects bottom pinning. That selection is still the prop's here; this is only the length it pins at.", "name": "--affix-inset-block-end", "tier": "component", "value": "0px" }, { "description": "Thickness of the ink rail — its inline size in a vertical anchor, its block size in a horizontal one. A hairline by default, matching the list's own leading rule.", "name": "--anchor-ink-width", "tier": "component", "value": "2px" }, { "description": "Paint of the ink rail, and of the active row's label. `initial` + a call-site fallback, NOT `var(--primary)` here, because `--primary` is exactly the role a tenant re-scopes: a `[data-tenant] { --primary: … }` would override the role and never reach a knob that had already frozen against `:root`'s copy of it, so the rail would keep the default brand's colour under the tenant's. docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\", and src/tokens/__tests__/tenant-scope-freeze-687.test.ts is the guard. Documented default: `hsl(var(--primary))`.", "name": "--anchor-ink-color", "tier": "component", "value": "initial" }, { "description": "Paint of the rail's TRACK — the full-length rule the ink slides along. Same freeze rule, same shape. Documented default: `hsl(var(--border))`.", "name": "--anchor-track-color", "tier": "component", "value": "initial" }, { "description": "Vertical rhythm of one row: the block padding above and below a label. The row's HEIGHT is this plus the label's own line box, deliberately — an anchor row is a line of running text, not a control, so it must not be pinned to the `--control-height` tier (which is also re-scoped by AuthShell, and would freeze if mirrored).", "name": "--anchor-item-padding-block", "tier": "component", "value": "var(--space-1)" }, { "description": "Inline distance from the rail to the label.", "name": "--anchor-item-padding-inline", "tier": "component", "value": "var(--space-3)" }, { "description": "Extra inline indent applied to a NESTED row — antd's one level of `items[].children`.", "name": "--anchor-nested-padding-inline", "tier": "component", "value": "var(--space-4)" }, { "description": "Gap between rows on the HORIZONTAL axis. The vertical axis has none: its rows sit flush so the ink rail reads as one continuous rule.", "name": "--anchor-gap", "tier": "component", "value": "var(--space-inline-lg)" }, { "description": "Gap between cards in the list. Ant X: `marginXS` = 8px.", "name": "--attachments-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "THE CARD BOX. Ant X's file card is a fixed 268x68 chip: wide enough for a name plus one line of description, short enough that a row of them reads as a tray and not as a list. Both axes are fixed there and fixed here — the block size is what the `+` tile and the `scrollY` one-row viewport are measured against, so it has three readers, not one. Ant X `width: 268`", "name": "--attachments-card-size", "tier": "component", "value": "16.75rem" }, { "description": "Ant X `cardHeight` = 14 * 1.5714 * 2 + 12 + 12 = 68", "name": "--attachments-card-block-size", "tier": "component", "value": "4.25rem" }, { "description": "gh#888 — φ tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 ≡ --radius", "name": "--attachments-card-radius", "tier": "component", "value": "initial" }, { "description": "Ant X `marginSM` — glyph to name", "name": "--attachments-card-gap", "tier": "component", "value": "var(--space-3)" }, { "description": "THE PLACEHOLDER — the whole control while the list is empty, and the drop target. Ant X `token.padding` = 16", "name": "--attachments-placeholder-space-inset", "tier": "component", "value": "var(--space-4)" }, { "description": "gh#888 — φ tier freezes at :root; `initial`, default = var(--radius). Ant X `token.borderRadius` = 6 ≡ --radius", "name": "--attachments-placeholder-radius", "tier": "component", "value": "initial" }, { "description": "Ant X's placeholder mark is `fontSizeHeading2` = 30px, which is not a step of this repo's nine-value icon scale (gh#326) and whose neighbours are 24 and 36. It stays on the step the frozen table in `src/tokens/__tests__/icon-size-scale.test.ts` already records for it — the same mark Upload's dropzone draws, which is the surface a reader meets this one beside.", "name": "--attachments-placeholder-icon-size", "tier": "component", "value": "var(--icon-size-3xl)" }, { "description": "Attachments — Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer — and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.", "name": "--attachments-placeholder-title-font-size", "tier": "component", "value": "var(--font-size-base)" }, { "description": "Attachments — Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer — and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.", "name": "--attachments-placeholder-description-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Attachments — Ant Design X chat-surface file collection. Ant X retunes this through `styles={{ list, placeholder, upload, … }}`. Here every length and tint is a named knob (rules #44/#45) so a service sets the rail once in theme.css. EVERY KNOB BELOW IS READ BY A RULE IN `src/styles/data-entry-layout.css` (gh#855). It was not always so: all twelve of these resolved, were generated into the MCP catalog, were described to every consumer — and nothing anywhere read one of them, because the component had no stylesheet at all. The defaults are Ant X's own numbers, taken from `@ant-design/x@2.9.0` (`es/attachments/style/index.js` + `es/file-card/style/index.js`) rather than invented, and mapped onto this repo's scales; `docs/DESIGN-AUTHORITY.md` carries the divergences.", "name": "--attachments-placeholder-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "The scrim the drop layer paints over the whole control while a file is dragged across it. Role-mirror knob, so `initial` and the role resolved at the CALL SITE (docs/TOKENS.md) — a `[data-tenant]`/`.dark` scope that re-seeds `--background` must reach this. Documented default = `color-mix(in srgb, hsl(var(--background)) 85%, transparent)`, which is Ant X's `colorBgPlaceholderHover` (`colorBgContainer` at alpha .85).", "name": "--attachments-drop-overlay-background", "tier": "component", "value": "initial" }, { "description": "The ✕ at the end of a card's row. Ant X draws it at `fontSizeLG` = 16; it stays at the 14px step the frozen icon table records, which is also `--upload-remove-icon-size`. Two remove affordances in one group drawing two different sizes is the defect, not the saving.", "name": "--attachments-remove-icon-size", "tier": "component", "value": "var(--upload-remove-icon-size)" }, { "description": "Badge component tokens.", "name": "--badge-space-gap", "tier": "component", "value": "var(--space-inline-xs)" }, { "description": "Badge component tokens.", "name": "--badge-space-x", "tier": "component", "value": "var(--space-2)" }, { "description": "Badge component tokens.", "name": "--badge-space-y", "tier": "component", "value": "var(--space-1)" }, { "description": "Corner of the chip (gh#404). Default = the historical literal `--radius-md`, so nothing moves; it exists so a NESTING context can restate it through the cascade (a Badge inside a bordered Button squares down to --radius-sm) and a call site can restate it back. gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--badge-radius", "tier": "component", "value": "initial" }, { "description": "Badge component tokens.", "name": "--badge-font-size", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "Companion to --badge-font-size (gh#260). The cva's old `text-xs` utility also set line-height via Tailwind's default `--text-xs--line-height: calc(1 / 0.75)` (the theme remaps --text-xs but never that companion). Same unitless ratio here keeps the default badge pixel-identical now that badge-layout.css owns the type metrics.", "name": "--badge-line-height", "tier": "component", "value": "calc(1 / 0.75)" }, { "description": "Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no token at all, so a service could only resize it with `!important` or a forked stylesheet — the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing moves. Matches --badge-font-size's step by design: the glyph reads as a character in the label's run, so the two retune together. Deliberately NOT --scaling-multiplied — the literal it replaces did not track density.", "name": "--badge-icon-size", "tier": "component", "value": "var(--icon-size-xs)" }, { "description": "Removable chip (antd Tag closable) — × affix inside the pill.", "name": "--badge-space-x-removable", "tier": "component", "value": "var(--space-1)" }, { "description": "Badge component tokens.", "name": "--badge-remove-offset-inline-end", "tier": "component", "value": "calc(-1 * var(--space-1))" }, { "description": "Badge component tokens.", "name": "--badge-remove-icon-size", "tier": "component", "value": "var(--badge-icon-size)" }, { "description": "Badge component tokens.", "name": "--badge-remove-rest-alpha", "tier": "component", "value": "0.7" }, { "description": "Badge component tokens.", "name": "--badge-remove-hover-alpha", "tier": "component", "value": "1" }, { "description": "DATA COLOUR (`color` prop) — the entity's own colour, not a semantic tone. A caller colour is DATA: a project administrator picks it for a status, an issue type, a tag, a label. Solid, no foreground clears WCAG AA for every colour they can pick — near-black and white measure equal at luminance 0.2029, where both land on 4.15:1, under the 4.5 that badge-sized text needs, and a real picker can produce that. So the GROUND moves instead: the colour is washed into the surface and the label stays the surface's own foreground, which makes the ratio a function of these two knobs rather than of the colour somebody chose. The fill is where the label sits, so it is quiet; the edge carries no text, so it is free to be four times as saturated — it is what keeps a pale tint from dissolving into the surface, and where the colour still says WHICH status at a glance. At these defaults the worst case across the sRGB cube measures 8.52:1 (both themes), against 4.15 for a solid chip.", "name": "--badge-tint-fill", "tier": "component", "value": "18%" }, { "description": "Badge component tokens.", "name": "--badge-tint-edge", "tier": "component", "value": "45%" }, { "description": "`initial`, NOT `hsl(var(--card))` — the :root freeze rule (docs/TOKEN-RESOLUTION.md §3). Bound here, `var(--card)` substitutes against the ROOT's card once, so a `.dark` REGION below root moved `--card` and the chip kept the light one. Measured: in a `.dark` region the scope reported `--card: 48 8% 12%` while the chip still painted `color(srgb 0.9933 0.9933 0.9867)` — a white chip in a dark panel. `.dark` on `` was always right, which is why it survived: the freeze only shows where the scope sits BELOW the binding. Same shape as gh#848 and gh#866; found by `scripts/explain-token.mjs`. The formula now lives at the call site in badge-layout.css, where the scope is in effect.", "name": "--badge-tint-surface", "tier": "component", "value": "initial" }, { "description": "Badge component tokens.", "name": "--badge-tint-foreground", "tier": "component", "value": "initial" }, { "description": "`initial` FOR THE SAME REASON, and getting this wrong once is how I learned to measure twice: the first fix moved `--badge-tint-surface` to the call site but left this one bound here as `var(--badge-tint-surface, hsl(var(--card)))`. That still substitutes at :root, so in a `.dark` region the chip mixed the LIGHT card into the dark surface and painted `color(srgb 0.285…)` where `.dark` on `` painted `0.1296` — a fix that moved the defect instead of removing it, and one a screenshot would have called correct. The whole chain is now resolved at the call site. The old warning still holds — an UNSET custom property makes color-mix() invalid at computed-value time and drops the background AND the border — which is exactly why every read below carries the full fallback rather than relying on this declaration.", "name": "--badge-color", "tier": "component", "value": "initial" }, { "description": "Square corners — a strip spans its container edge-to-edge, so it carries no radius.", "name": "--banner-radius", "tier": "component", "value": "0" }, { "description": "The strip keeps a single hairline block-end rule (tone-coloured via the alert border rules); inline/block-start edges are open so it reads as part of the frame. default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--banner-border-width", "tier": "component", "value": "initial" }, { "description": "Strip inset. Block is denser than the inline Alert card; inline defaults to the page gutter so banner text aligns with page content under AppShell/PageContainer.", "name": "--banner-space-inset-block", "tier": "component", "value": "var(--space-3)" }, { "description": "Banner — the full-bleed attention strip ( = Alert variant=\"banner\"). Colour stays with the alert tone rules; these tokens own ONLY the strip geometry, so a service retunes the banner once here instead of forking alert-layout.css (rule #45 — every service-tunable constant gets a knob).", "name": "--banner-space-inset-inline", "tier": "component", "value": "var(--space-page-active-x, var(--space-6))" }, { "description": "A leading RAIL, not a frame: an aside inside prose reads as an annotation of the column it sits in, and four borders make it a card that interrupts the column.", "name": "--callout-rail-width", "tier": "component", "value": "var(--space-1)" }, { "description": "Squared off against the rail; the trailing corners still follow the alert radius. `initial`, not `var(--alert-radius)` — a :root binding freezes (gh#888); default resolves at the call site. Default = var(--alert-radius).", "name": "--callout-radius", "tier": "component", "value": "initial" }, { "description": "Prose insets. Block matches the paragraph rhythm around it rather than the denser banner strip; inline leaves room for the rail without shifting the text.", "name": "--callout-space-inset-block", "tier": "component", "value": "var(--space-3)" }, { "description": "Callout — the in-prose aside ( = Alert variant=\"callout\"). Colour stays with the alert tone rules; these tokens own ONLY the aside geometry, so a service retunes every callout once here instead of forking alert-layout.css (rule #45 — every service-tunable constant gets a knob).", "name": "--callout-space-inset-inline", "tier": "component", "value": "var(--space-4)" }, { "description": "Block margin — a callout separates from the paragraphs it sits between.", "name": "--callout-space-stack", "tier": "component", "value": "var(--space-4)" }, { "description": "Horizontal inset of every slot (header / content / footer) + the resting top/bottom shell padding. This is the column the title, body and footer all align to.", "name": "--card-space-inset", "tier": "component", "value": "var(--space-section-active)" }, { "description": "BLOCK-axis (top/bottom) shell padding of the slotted card rhythm — a plain header's top, a `solo` body's top, and the terminal slot's bottom (gh#232). Split off --card-space-inset so a shell (AuthShell compact) can retune the card's height WITHOUT moving the inline column. Declared `initial` — NOT `var(--card-space-inset)` — so the default resolves at the CALL SITE: a :root binding would freeze at the :root inset and `[data-density=\"tight\"|\"cozy\"]` (which override --card-space-inset on the card element) would stop reaching it. See docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\" — the same call-site rule applies to derived knobs. default = var(--card-space-inset)", "name": "--card-space-shell-y", "tier": "component", "value": "initial" }, { "description": "Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y.", "name": "--card-space-header-y", "tier": "component", "value": "var(--space-stack-sm)" }, { "description": "Gap between the header and the body, and the body's own top padding — the breathing room under a title before content begins.", "name": "--card-space-body-y", "tier": "component", "value": "var(--space-6)" }, { "description": "Symmetric block padding for a SOLO content slot, so a composed shell can tune block and inline spacing independently without targeting CardContent. Declared `initial` for the SAME reason as --card-space-shell-y above: written as `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying [data-density=\"tight\"|\"cozy\"] (which override --card-space-inset ON THE CARD) would keep the :root value. The default now resolves at the call site through the chain solo-y → shell-y → inset, so a solo body follows the general block knob when only that is set, and an explicit solo-y still wins. default = var(--card-space-shell-y, var(--card-space-inset))", "name": "--card-space-solo-y", "tier": "component", "value": "initial" }, { "description": "Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y.", "name": "--card-space-footer-y", "tier": "component", "value": "var(--space-stack-sm)" }, { "description": "DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY top+bottom — distinct from a plain header that flows into the body (top inset, no bottom). One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes the band density here instead of forking per-slot CSS.", "name": "--card-space-divided-y", "tier": "component", "value": "var(--card-space-header-y)" }, { "description": "Vertical gap between stacked items WITHIN a slot (e.g. title ↕ description in the header).", "name": "--card-space-gap", "tier": "component", "value": "var(--space-stack-xs)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-title-font-size", "tier": "component", "value": "calc(var(--font-size-base) * var(--font-size-ratio))" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-title-line-height", "tier": "component", "value": "var(--line-height-tight)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-title-font-weight", "tier": "component", "value": "var(--font-weight-semibold)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-description-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-description-line-height", "tier": "component", "value": "var(--line-height-normal)" }, { "description": "Card fill + edge — opt-in knobs that DEFAULT to the live --card / --border roles. Declared `initial` (not `var(--card)`) so the default re-resolves at the call site under a scoped theme: a :root binding to a role var freezes at the :root value and a scoped `[data-tenant]` override of the role never reaches it (see docs/STANDARDS-vocabulary-tokens.md · \"role-mirror knobs\"). A service still overrides the knob directly (--card-background: …) to win over the role default. default = hsl(var(--card))", "name": "--card-background", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--border))", "name": "--card-border", "tier": "component", "value": "initial" }, { "description": "Banded-header fill — role-tintable (rule #45): a service points this at any role, e.g. --card-header-background: var(--primary), and tunes --card-header-background-alpha for the wash strength. Default = the live --muted role (resolved at the call site). default = hsl(var(--muted))", "name": "--card-header-background", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-header-background-alpha", "tier": "component", "value": "0.55" }, { "description": "Banded-header divider — tokenised (rule #44) so a service theme can make it dashed / heavier / none without forking CSS. Pair with --card-header-background-alpha: 0 for a quiet borderless-band header. Default = 1px solid hsl(var(--card-border)) (resolved at the call site).", "name": "--card-header-border-bottom", "tier": "component", "value": "initial" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) * var(--radius-ratio))", "name": "--card-radius", "tier": "component", "value": "initial" }, { "description": "Flat resting cards: the hairline defines the surface; elevation is reserved for overlays. Set --card-shadow to a shadow value for opt-in elevation, or to initial to restore the live --shadow-sm fallback at the call site (including scoped shadow ramps).", "name": "--card-shadow", "tier": "component", "value": "none" }, { "description": "Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the surface box-shadow so a service can wash every card with the global glow, e.g. --card-glow: var(--shadow-glow), with no markup change.", "name": "--card-glow", "tier": "component", "value": "0 0 0 0 transparent" }, { "description": "`hoverable` (antd `hoverable`) — the elevation a pointer-interactive card steps UP to on hover. One step above the resting `--card-shadow` on the same ramp, so a service that has already flattened or lifted every card keeps a proportional lift instead of a fixed one.", "name": "--card-hover-shadow", "tier": "component", "value": "var(--shadow-md)" }, { "description": "Fill tint — subtle role wash over the card background (default transparent = invisible). Painted as an overlay so a service sets --card-tint: hsl(var(--primary) / 0.04) once.", "name": "--card-tint", "tier": "component", "value": "transparent" }, { "description": "THE OTHER END OF THE TINT, AND ITS DIRECTION (gh#880 item 6). The wash used to be painted `linear-gradient(var(--card-tint), var(--card-tint))` — the same variable twice — which is a flat overlay wearing a gradient's clothes. A service that wanted a genuine two-colour wash had one value slot for two colours, so `--card-tint: A, B` expanded to `linear-gradient(A, B, A, B)`: a hard split, not a ramp. A glass card's rim highlight is a diagonal two-stop ramp (docs/GLASSMORPHISM-STANDARD.md §1), so this is the difference between \"a card can be glass\" and \"a card can be tinted\". BOTH ARE `initial` WITH THEIR DEFAULT AT THE CALL SITE, so the default value is the live `--card-tint` of whatever scope the card is in, not the one frozen at ``, and the resting card paints `linear-gradient(to bottom, transparent, transparent)` exactly as before. default = var(--card-tint) — a single-colour wash stays flat", "name": "--card-tint-end", "tier": "component", "value": "initial" }, { "description": "default = `to bottom`, the direction the two-stop form already had", "name": "--card-tint-angle", "tier": "component", "value": "initial" }, { "description": "GLASS (gh#880 item 1) — `initial`, i.e. OFF, and the default must stay `initial` rather than `0px`. An element with a `backdrop-filter` becomes the containing block for its fixed descendants (the trap `src/styles/shell-layout.css` documents on the app-launcher scrim and `src/components/layout/affix.tsx` documents for Affix), and `blur(0px)` still promotes the box to a backdrop root. Unset, the whole declaration at `.ui-card` is invalid-at-computed-value-time and `backdrop-filter` keeps its own initial `none`, so no backdrop root is created and an `Affix` inside a Card still positions against the viewport. The saturate companion is shared: `--surface-backdrop-saturate` (tokens/foundation.css). default = none — a card blurs nothing", "name": "--card-backdrop-blur-size", "tier": "component", "value": "initial" }, { "description": "Accent edge — width of the semantic leading-edge stripe (data-accent). Tokenised (rule #44) so a service theme can re-tune it without forking CSS. The slot padding compensation in card-layout.css subtracts the same token, so content stays aligned on the shell whatever the rail width. default = var(--stroke-2xl), resolved at the call site (gh#906)", "name": "--card-accent-rail-width", "tier": "component", "value": "initial" }, { "description": "Accent placement `perimeter` (gh#12) — the FULL attention border. Two knobs so a service can tune the edge weight and the outer ring independently; the defaults reproduce the optical weight of `variant=\"featured\"` (1px border + 1px ring) in the card's own semantic accent tone instead of --primary. Structural strokes, like the base card hairline: both read the hairline step at their call sites since gh#906, so a theme restating the stroke scale moves them with everything else. default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--card-accent-perimeter-width", "tier": "component", "value": "initial" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--card-accent-perimeter-ring-width", "tier": "component", "value": "initial" }, { "description": "`variant=\"featured\"` edge — role-mirror knob (docs/TOKENS.md). `initial` so the --primary default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card at once. Default = hsl(var(--primary)).", "name": "--card-featured-border-color", "tier": "component", "value": "initial" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--card-featured-ring-width", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-label-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-label-font-weight", "tier": "component", "value": "var(--font-weight-medium)" }, { "description": "gh#1305 (ADR C12): sentence case, no tracking by default; a theme opts into small caps.", "name": "--stat-card-label-letter-spacing", "tier": "component", "value": "normal" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-label-letter-case", "tier": "component", "value": "none" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-value-font-size", "tier": "component", "value": "var( --font-size-2xl, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-value-line-height", "tier": "component", "value": "1.1" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-value-font-weight", "tier": "component", "value": "var(--font-weight-semibold)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-hint-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-gap", "tier": "component", "value": "var(--space-stack-xs)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-icon-size", "tier": "component", "value": "var(--icon-size-2xl)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-icon-glyph-size", "tier": "component", "value": "var(--icon-size-lg)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--stat-card-icon-radius", "tier": "component", "value": "initial" }, { "description": "Medallion tint — soft brand wash + brand glyph by default; a service retints by overriding --primary or these tokens directly (rule #44/#45). `initial` so the --primary default re-resolves at the call site under a scoped theme (no :root freeze). Defaults = hsl(var(--primary) / 0.1) fill · hsl(var(--primary)) glyph.", "name": "--stat-card-icon-background", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-icon-foreground", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--stat-card-delta-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "── ServiceLauncherCard (gh#219) ─────────────────────────────────────────────────── Internal rhythm of a launcher tile: one gap knob drives the vertical stack AND the icon↔title↔status row, so a service theme retunes the whole tile density once.", "name": "--card-service-launcher-space-gap", "tier": "component", "value": "var(--space-stack-sm)" }, { "description": "Semantic icon surface — 36px, the `--icon-size-2xl` step, multiplied by --scaling so the medallion still breathes with its sibling controls (the gh#328 rule: an icon that wants density says so itself). It read `var(--control-height-lg)` until gh#324: a CONTROL tier is the wrong axis for an icon box, and the bug was visible — `@media (pointer: coarse)` lifts the control ladder to the 44px tap floor, so on every touch device the medallion silently inflated to 48px while the glyph inside it stayed 20px.", "name": "--card-service-launcher-icon-size", "tier": "component", "value": "calc(var(--icon-size-2xl) * var(--scaling))" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-icon-glyph-size", "tier": "component", "value": "calc(var(--icon-size-lg) * var(--scaling))" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--card-service-launcher-icon-radius", "tier": "component", "value": "initial" }, { "description": "Available-service medallion tint. `initial` (role-mirror rule, docs/TOKENS.md) so the role defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override reaches them. Defaults = hsl(var(--accent)) fill · hsl(var(--primary)) glyph.", "name": "--card-service-launcher-icon-background", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-icon-foreground", "tier": "component", "value": "initial" }, { "description": "Unavailable medallion tint — applied when the consumer supplies `disabledReason`, so an un-launchable service never reads as brand-live. `initial` for the same role-mirror reason. Defaults = hsl(var(--muted)) fill · hsl(var(--muted-foreground)) glyph.", "name": "--card-service-launcher-unavailable-icon-background", "tier": "component", "value": "initial" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-unavailable-icon-foreground", "tier": "component", "value": "initial" }, { "description": "Description prose — also drives the disabled-reason line and the catalog-CTA caption.", "name": "--card-service-launcher-description-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-description-line-height", "tier": "component", "value": "var(--line-height-body)" }, { "description": "Mono metadata line (hostname · plan) — tighter leading than prose by design.", "name": "--card-service-launcher-metadata-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-metadata-line-height", "tier": "component", "value": "var(--line-height-normal)" }, { "description": "Dashed catalog/add companion tile: kept tall enough to sit level with a populated launcher tile in the same grid row. Four control tiers ≈ medallion + title + description + action.", "name": "--card-service-launcher-cta-min-height", "tier": "component", "value": "calc(var(--control-height-lg) * 4)" }, { "description": "Skeleton bar widths — shape-matched placeholders for the title and status badge.", "name": "--card-service-launcher-skeleton-title-width", "tier": "component", "value": "var(--space-12)" }, { "description": "Card component tokens: card chrome derives from semantic layout tokens.", "name": "--card-service-launcher-skeleton-status-width", "tier": "component", "value": "var(--space-10)" }, { "description": "── Plot height tiers (size = xs|sm|md|lg) ─────────────────────────────────────────── `xs` is the canonical dashboard-summary-card density: a seven-day trend that sits under a KPI headline without stealing its vertical rhythm. A service retunes the whole scale here; a screen picks a step with the `size` prop.", "name": "--chart-trend-plot-height-xs", "tier": "component", "value": "3.5rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-trend-plot-height-sm", "tier": "component", "value": "5rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-trend-plot-height-md", "tier": "component", "value": "7.5rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-trend-plot-height-lg", "tier": "component", "value": "10rem" }, { "description": "Active tier — chart-layout.css re-points this per `data-size`; overriding it directly pins one height for every trend regardless of `size`.", "name": "--chart-trend-plot-height", "tier": "component", "value": "var(--chart-trend-plot-height-xs)" }, { "description": "── Bar marks ──────────────────────────────────────────────────────────────────────── Thin marks, a surface gap between neighbours and a rounded data-end anchored to the baseline (the data-visualization mark spec).", "name": "--chart-trend-bar-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--chart-trend-bar-radius", "tier": "component", "value": "initial" }, { "description": "Ceiling on a single mark so a 3-point trend does not render slabs.", "name": "--chart-trend-bar-max-width", "tier": "component", "value": "1.5rem" }, { "description": "Floor so a zero/absent value still reads as a plotted category rather than a hole. default = var(--stroke-md), resolved at the call site (gh#906)", "name": "--chart-trend-bar-min-height", "tier": "component", "value": "initial" }, { "description": "Muted mark fill — role-mirror knob, declared `initial` so the role default re-resolves at the CALL SITE under `.dark` / `[data-tenant]` (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\"). Default = hsl(var(--muted-foreground) / 0.75), which clears the 3:1 non-text contrast floor (WCAG 1.4.11) against the card surface.", "name": "--chart-trend-bar-background", "tier": "component", "value": "initial" }, { "description": "Opacity applied to the muted-fill role default.", "name": "--chart-trend-bar-background-alpha", "tier": "component", "value": "0.75" }, { "description": "Emphasized (\"current\") mark fill — role-mirror knob. Default = hsl(var(--primary)).", "name": "--chart-trend-bar-emphasis-background", "tier": "component", "value": "initial" }, { "description": "── Baseline + category ticks ──────────────────────────────────────────────────────── Chrome defaults QUIET (rule #44): no baseline rule at rest. A service opts in with `--chart-trend-baseline-border: var(--stroke-hairline) solid hsl(var(--border));`.", "name": "--chart-trend-baseline-border", "tier": "component", "value": "initial" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-trend-tick-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-trend-tick-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Gap between the plot block and the optional activity footer slot.", "name": "--chart-trend-footer-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "── Category axis (horizontal BarChart) ──────────────────────────────────────────────── The category axis of a horizontal bar chart holds free text, and in Japanese that text is a company name of 8–10 full-width glyphs (100–125px at the tick size). recharts reserves a flat 60px whatever the ticks say, which painted those names OUTSIDE the plot box where the SVG clip cut them from the START — losing exactly the identifying `株式会社` (gh#409 · 1). The chart now measures its widest tick and sizes the axis from it. These two knobs own the limits of that: how much air sits between the tick and the plot, and how much of the canvas a category axis may take before labels are truncated at their END instead. A service that runs longer names raises the fraction; one that wants the bars to dominate lowers it.", "name": "--chart-category-axis-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Share of the canvas the category axis may occupy, 0..1. At the 1102px dashboard column this is ~440px — four times a 10-glyph 全角 name — so truncation is the exception, not the rule, while a pathological label still cannot squeeze the bars out of their own chart.", "name": "--chart-category-axis-max-fraction", "tier": "component", "value": "0.4" }, { "description": "Stroke weight of the line, and of an area's top edge.", "name": "--chart-series-stroke-width", "tier": "component", "value": "2" }, { "description": "Opacity of an area's filled band. Low by design: an area overlaps its neighbours, and the line above it is what carries the value.", "name": "--chart-area-fill-alpha", "tier": "component", "value": "0.2" }, { "description": "Dash pattern of the cartesian background grid (any `stroke-dasharray` value; `none` = solid).", "name": "--chart-grid-line-dash", "tier": "component", "value": "3 3" }, { "description": "Minimum cell edge per tier. `xs` is still 24px — a cell is a hover/focus target (WCAG 2.5.8).", "name": "--chart-heatmap-cell-size-xs", "tier": "component", "value": "1.5rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-cell-size-sm", "tier": "component", "value": "1.75rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-cell-size-md", "tier": "component", "value": "2rem" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-cell-size-lg", "tier": "component", "value": "2.5rem" }, { "description": "Active tier — chart-layout.css re-points this per `data-size`.", "name": "--chart-heatmap-cell-size", "tier": "component", "value": "var(--chart-heatmap-cell-size-md)" }, { "description": "Surface gap between neighbouring cells (the table's border-spacing).", "name": "--chart-heatmap-cell-gap", "tier": "component", "value": "var(--stroke-md)" }, { "description": "default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio)), resolved at the call site", "name": "--chart-heatmap-cell-radius", "tier": "component", "value": "initial" }, { "description": "EMPTY cell outline — the non-colour cue that tells \"no data\" from a zero (WCAG 1.4.1). Role-mirror knob, `initial` at :root; default at the call site = `var(--stroke-hairline) dashed hsl(var(--muted-foreground))`.", "name": "--chart-heatmap-empty-border", "tier": "component", "value": "initial" }, { "description": "Top-N emphasis ring — a SHAPE cue, never colour alone. Colour is a role-mirror knob (default `hsl(var(--foreground))` at the call site); width is a plain constant.", "name": "--chart-heatmap-emphasis-border", "tier": "component", "value": "initial" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-emphasis-width", "tier": "component", "value": "var(--stroke-md)" }, { "description": "The pinned row-header column paints over cells scrolled beneath it, so it needs a ground. Role-mirror knob; default = `hsl(var(--card))` at the call site.", "name": "--chart-heatmap-row-header-background", "tier": "component", "value": "initial" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-tick-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Legend rhythm: the swatch edge and the gap between legend items / plot ↔ legend.", "name": "--chart-heatmap-legend-swatch-size", "tier": "component", "value": "var(--space-3)" }, { "description": "Chart component tokens — the dependency-free `CompactBarTrend` primitive (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a service theme can match its own design grid WITHOUT page-local CSS or inline heights (cardinal rules #44/#45). The recharts-backed charts draw their own SVG from the foundation `--chart-1..6` palette, plus the cartesian series knobs at the bottom of this file.", "name": "--chart-heatmap-legend-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Bubble fill. `initial` so the --muted default re-resolves at the CALL SITE under a scoped theme; a :root binding to a role var freezes at :root (docs/TOKENS.md — the :root freeze rule). Documented default = hsl(var(--muted)).", "name": "--chat-bubble-background", "tier": "component", "value": "initial" }, { "description": "Ink on that fill — role-mirror knob, documented default = hsl(var(--foreground)).", "name": "--chat-bubble-foreground", "tier": "component", "value": "initial" }, { "description": "The 1px edge of an `outlined` bubble. Decorative chrome, so it mirrors --border, not --input (docs/TOKENS.md — `--border` vs `--input`). Documented default = hsl(var(--border)).", "name": "--chat-bubble-border-color", "tier": "component", "value": "initial" }, { "description": "gh#888 — φ tier freezes at :root; default = var(--radius)", "name": "--chat-bubble-radius", "tier": "component", "value": "initial" }, { "description": "Gap between the avatar column and the message column.", "name": "--chat-bubble-gap", "tier": "component", "value": "var(--space-3)" }, { "description": "The measure a bubble never exceeds. Long-form assistant prose past ~70 characters per line stops being readable, and a chat pane is as wide as the window (#45 — a service retunes the measure to its own column).", "name": "--chat-bubble-max-inline-size", "tier": "component", "value": "34rem" }, { "description": "Avatar box. Role-mirror of a RE-SCOPED tier (--control-height is re-declared per density and by the auth shell), so it is `initial` + a call-site fallback for the same reason a colour knob is. Documented default = var(--control-height).", "name": "--chat-bubble-avatar-size", "tier": "component", "value": "initial" }, { "description": "Inner inset of the bubble body, at the default `md` step. The xs/sm/lg steps re-declare these two on the element itself (styles/data-display-layout.css).", "name": "--chat-bubble-padding-block", "tier": "component", "value": "var(--space-2)" }, { "description": "ChatBubble / ChatBubbleList component tokens (@godxjp/chat since v32) — one message in a conversation, and the feed it lives in. NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` — the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`).", "name": "--chat-bubble-padding-inline", "tier": "component", "value": "var(--space-3)" }, { "description": "Vertical rhythm BETWEEN messages in a ChatBubbleList.", "name": "--chat-bubble-list-gap", "tier": "component", "value": "var(--space-4)" }, { "description": "Inset the \"jump to latest\" affordance keeps from the block-end edge of the feed.", "name": "--chat-bubble-list-jump-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "The typed-so-far caret drawn while `typing` animates. Role-mirror knob, documented default = hsl(var(--muted-foreground)). Never the only signal: the article also carries `aria-busy` and a localized sr-only \"typing\" string.", "name": "--chat-bubble-typing-caret-color", "tier": "component", "value": "initial" }, { "description": "default = var(--stroke-md), resolved at the call site (gh#906)", "name": "--chat-bubble-typing-caret-width", "tier": "component", "value": "initial" }, { "description": "One line box tall, so the caret matches whatever type ramp the bubble is rendering at rather than a fixed pixel height a service theme could not move.", "name": "--chat-bubble-typing-caret-height", "tier": "component", "value": "1em" }, { "description": "The short line of the two-line loading Skeleton — a ragged second line is what makes the placeholder read as prose rather than as a bar chart. A theme can retune the raggedness.", "name": "--chat-bubble-skeleton-short-inline-size", "tier": "component", "value": "60%" }, { "description": "Status-tinted bubbles (`tone`) wash the role colour exactly like Alert does, so an error bubble and an error banner agree. Never colour alone — the bubble also renders a localized sr-only tone word.", "name": "--chat-bubble-tone-background-alpha", "tier": "component", "value": "0.08" }, { "description": "ChatBubble / ChatBubbleList component tokens (@godxjp/chat since v32) — one message in a conversation, and the feed it lives in. NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` — the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`).", "name": "--chat-bubble-tone-border-alpha", "tier": "component", "value": "0.35" }, { "description": "The message column of an `end`-placed (own) bubble. Role-mirror knobs so a service can tint \"my\" messages without touching the assistant's. Documented defaults = hsl(var(--primary) / 0.1) and hsl(var(--foreground)).", "name": "--chat-bubble-end-background", "tier": "component", "value": "initial" }, { "description": "ChatBubble / ChatBubbleList component tokens (@godxjp/chat since v32) — one message in a conversation, and the feed it lives in. NAMING NOTE: the roadmap spelled the surface knob `--chat-bubble-surface`. `surface` is not one of the property words `check:token-tiers` accepts for the `--{component}-{part}-{property}` shape, so the knob ships as `--chat-bubble-background` — the same word every other component tier uses for the same role (`--card-background`, `--list-row-unread-background`).", "name": "--chat-bubble-end-foreground", "tier": "component", "value": "initial" }, { "description": "Floor and ceiling of the draft box, both `initial` — and that is load-bearing, not tidiness. Their defaults READ `--control-height`, which is re-declared per size step on the composer itself (`.ui-control-surface[data-size=\"sm\"]` and friends). Bound here at `:root`, each one would resolve ONCE against the root tier and freeze: measured in Chromium, all four of `size=\"xs|sm|md|lg\"` rendered at an identical 55px box. `initial` sends the fallback chain in `data-entry-layout.css` back to the CALL SITE, where the step's own `--control-height` is in scope. Same rule as ListRow's dividers and the compact-row knobs (docs/TOKENS.md — the :root freeze rule). Default floor = var(--control-height) — exactly one control row. Default ceiling = calc(var(--control-height) * 5) — past it the draft scrolls itself instead of pushing the page. A MULTIPLIER, never `calc(var(--control-height) ± …)`, which silently re-derives a tier (check:control-sizing).", "name": "--chat-composer-min-height", "tier": "component", "value": "initial" }, { "description": "ChatComposer component tokens — the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length — see docs/TOKENS.md and `pnpm check:control-sizing`.", "name": "--chat-composer-max-height", "tier": "component", "value": "initial" }, { "description": "Gap between the header / draft row / footer bands.", "name": "--chat-composer-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Inset of the composer frame. The draft box itself is borderless — the frame IS the boundary, so two nested rounded borders never appear.", "name": "--chat-composer-padding-block", "tier": "component", "value": "var(--space-2)" }, { "description": "ChatComposer component tokens — the message input of a conversation (Ant Design X `Sender`). The composer is a CONTROL, so its box height is not its own decision: both bounds below are expressed in the `--control-height` tier, which is density-aware. A resting one-line composer therefore lines up with the Button beside it, and every size step (`data-size`) moves both bounds together. Never restate either as a literal length — see docs/TOKENS.md and `pnpm check:control-sizing`.", "name": "--chat-composer-padding-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Gap between the prefix slot, the draft box and the trailing actions.", "name": "--chat-composer-row-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Corner shape — `initial` so the control default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root). Default = var(--control-radius).", "name": "--chat-composer-radius", "tier": "component", "value": "initial" }, { "description": "Divider under the `header` slot — `initial`, documented default = 1px solid hsl(var(--border)), so a service retunes the chrome once instead of per composer.", "name": "--chat-composer-header-border", "tier": "component", "value": "initial" }, { "description": "Type scale of the footer hint line (a token counter, a \"Shift+Enter for a new line\" hint).", "name": "--chat-composer-footer-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-compact", "tier": "component", "value": "var(--band-height-sm)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-default", "tier": "component", "value": "var(--band-height-lg)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-comfortable", "tier": "component", "value": "var(--band-height-xl)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-padding-x-compact", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-padding-x-default", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-padding-x-comfortable", "tier": "component", "value": "var(--space-4)" }, { "description": "Held width for `width=\"bounded\"` controls (gh#375). `min()` so the value is a ceiling on a desktop bar and a share of the viewport on a phone, never a fixed rem that overflows it.", "name": "--control-bounded-width", "tier": "component", "value": "min(15rem, 48vw)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height", "tier": "component", "value": "calc(var(--control-height-default) * var(--scaling))" }, { "description": "Adjacent control sizes, derived from the active --control-height. The ±step is scaled too so the whole control ladder stays proportional under --scaling.", "name": "--control-height-sm", "tier": "component", "value": "calc(var(--control-height) - calc(0.25rem * var(--scaling)))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-lg", "tier": "component", "value": "calc(var(--control-height) + calc(0.25rem * var(--scaling)))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-xs", "tier": "component", "value": "calc(var(--control-height) - calc(0.5rem * var(--scaling)))" }, { "description": "THE GLOVE TIER (gh#1304) — `size=\"touch\"` on Button, Segmented, Toggle/ToggleGroup and `RadioGroup optionType=\"button\"`. 56px: wet or gloved hands at a food-production station need more than the 44px WCAG 2.2 SC 2.5.5 target, so this sits one band above `--number-input-touch-height`. A band, NOT derived from `--control-height` — not by density, not by a shell's tier — because the floor is the hand's, not the layout's.", "name": "--control-height-touch", "tier": "component", "value": "var(--band-height-3xl)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-padding-x", "tier": "component", "value": "var(--control-padding-x-default)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-gap", "tier": "component", "value": "var(--space-inline-sm)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-gap-sm", "tier": "component", "value": "var(--space-inline-xs)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-radius", "tier": "component", "value": "var(--radius)" }, { "description": "Match the default 6px field corner while retaining an independent Button knob. The utility consumes a concrete value, so this remains a root alias; scoped services override --button-radius directly. Pill and sharp shapes keep their own tokens.", "name": "--button-radius", "tier": "component", "value": "var(--radius)" }, { "description": "THE BUTTON'S OWN SURFACE — one knob per painted variant (gh#880, standard §1). Every variant painted a bare role (`hsl(var(--primary))`, `hsl(var(--background))`, `hsl(var(--secondary))`, `hsl(var(--destructive))`) with no knob of its own, so the only way to retint a button was to retint the ROLE — and `--primary` is also the link ink, the focus mark and a chart series. There was no way to say \"this button is translucent\" without saying it about eight other things. WHY BUTTONS AT ALL. namethatui's source draws the line this library needed: glassmorphism is a decorative skin for ANY surface including controls, while Apple's Liquid Glass reserves glass for the floating control layer above opaque content. A glass page with a solid primary button on it is the Liquid Glass split applied backwards. FOUR FILLS, NOT SIX. `ghost` and `link` paint no resting surface, so they have nothing to knob. The HOVER fills are deliberately not knobs either: they already resolve from roles at their own call sites (`--primary-hover`, `--accent`, `--secondary`), so a theme reaches them today — the documented consequence being that a glass RESTING fill with an untouched hover gives a button that turns opaque under the pointer, and a theme that wants glass on both moves the role too. ONE BLUR FOR THE WHOLE COMPONENT, because the material is one decision per component and the variants are one component. `initial`, so unset there is no blur and no backdrop root. default = hsl(var(--primary)) at the call site", "name": "--button-default-background", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--destructive)) at the call site", "name": "--button-destructive-background", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--background)) at the call site", "name": "--button-outline-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--button-outline-background-alpha", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--input)) at the call site", "name": "--button-outline-border-color", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--secondary)) at the call site", "name": "--button-secondary-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--button-secondary-background-alpha", "tier": "component", "value": "initial" }, { "description": "THE ONE BUTTON KNOB THAT IS INK, NOT A FILL (gh#884) — the `link` variant's text colour. The others above are backgrounds, so their contrast is owned by the label token that rides on them; this one IS the label, over a surface the library does not control. `--primary` is only ever guaranteed against `--primary-foreground`, so a light seed or a translucent panel makes the default illegible (measured 1.43:1 at `#FFD400`, 1.10:1 on glass) and the service sets this. default = hsl(var(--primary)) at the call site", "name": "--button-link-foreground", "tier": "component", "value": "initial" }, { "description": "default = none — a button blurs nothing", "name": "--button-backdrop-blur-size", "tier": "component", "value": "initial" }, { "description": "Control surface knobs — font-size, border width and resting shadow of every `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them once instead of each component hard-coding Tailwind utilities. Defaults preserve the historical look (font-size-base, 1px border, shadow-xs).", "name": "--control-font-size", "tier": "component", "value": "var(--font-size-base)" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--control-border-width", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-shadow", "tier": "component", "value": "none" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-icon-size", "tier": "component", "value": "calc(var(--icon-size-md) * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-icon-size-sm", "tier": "component", "value": "calc(var(--icon-size-sm) * var(--scaling))" }, { "description": "VALIDATION STATUS — antd's `status` axis (docs/DESIGN-AUTHORITY.md names Ant Design the taxonomy authority). Only the FOCUS half is a knob: the boundary itself has to be painted from a Tailwind utility, because `border-input` sits in a later cascade layer than this file's component rules and would win over any of them (measured in Chromium — see components/data-entry/control-appearance.ts). The error boundary therefore reuses the role `aria-invalid:border-destructive` already paints, and cannot drift into a second red. The warning halo borrows the ERROR halo's alpha rather than inventing a second opacity: antd derives both from one `colorXxxOutline` recipe, and only the error one is defined in this tier.", "name": "--control-status-warning-border-color", "tier": "component", "value": "var(--warning)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-status-warning-glow-color", "tier": "component", "value": "var(--warning)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-status-warning-glow-alpha", "tier": "component", "value": "var(--control-outline-error-alpha)" }, { "description": "THE BAND A NumberInput TAKES ON A COARSE POINTER, and the one control in this package that needs a taller one than rule #24's 44px floor. Its two steppers are STACKED inside the field, so each can only ever be half the band. Measured in Chromium (Playwright touch emulation, `(pointer: coarse)` matching) before this token: the default NumberInput was 44px and each stepper **24×19px**, with their centres 20px apart. WCAG 2.2 SC 2.5.8 wants 24×24, and the Spacing exception does not rescue it either — that needs 24px-diameter circles centred on each box NOT to intersect, and at 20px apart they do. 44px cannot be made to work: half of it is 22px whatever the inset and gap. 48px can, exactly — two 24px halves, no inset, no gap — so the band moves up one step for this control alone, and only where a coarse pointer says it matters. `size=\"lg\"` already lands on 48px there, so it gains the same 24×24 for free; `xs` and `sm` stay where the consumer put them (a deliberately smaller control is the consumer's trade, the same way rule #24 already treats them). A service that wants the 44px row back sets this to `var(--band-height-xl)` and takes 22px targets with it.", "name": "--number-input-touch-height", "tier": "component", "value": "var(--band-height-2xl)" }, { "description": "`size=\"touch\"` (gh#1304). The SPACE between two glove targets: ToggleGroup items, Segmented segments and the buttons of a `RadioGroup optionType=\"button\"` bar stand this far apart at the touch step (8px), so a gloved press on one edge cannot land on the neighbour. Button has no siblings of its own — lay a row of touch Buttons out with a gap of at least this.", "name": "--control-touch-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Button's inline inset at the touch step — one rung under `lg`'s, because a touch Button is usually a short verdict (良 / 否) and its 56px min-inline-size already makes the box.", "name": "--button-touch-space-inline", "tier": "component", "value": "var(--space-6)" }, { "description": "CHROME VARIANT — antd's `variant` axis. `outlined` needs no token: it is what a field already draws. `filled` swaps the boundary for a tinted surface; `borderless` drops both. Kept as knobs so a service theme can retune the dense-form treatment once, globally.", "name": "--control-variant-filled-background", "tier": "component", "value": "var(--muted)" }, { "description": "default = var(--accent), resolved at the call site (the freeze rule)", "name": "--control-variant-filled-hover-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site (gh#901)", "name": "--control-variant-filled-hover-background-alpha", "tier": "component", "value": "initial" }, { "description": "Character counter — antd `count`. Quiet by default; loud only once the ceiling is passed.", "name": "--control-count-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "default = var(--muted-foreground), resolved at the call site (gh#906)", "name": "--control-count-color", "tier": "component", "value": "initial" }, { "description": "`initial`, not `var(--text-error)`: a binding here computes ONCE at `:root`, so a `[data-tenant]` re-theming the error ink would keep this counter on the root's answer (docs/TOKENS.md, the freeze rule). The default lives at the rule that paints it.", "name": "--control-count-exceeded-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-count-space-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-count-inset-block-end", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-count-inset-inline-end", "tier": "component", "value": "var(--space-2)" }, { "description": "antd `addonBefore` / `addonAfter` — a segment welded outside the field's own box.", "name": "--input-addon-background", "tier": "component", "value": "var(--muted)" }, { "description": "default = var(--muted-foreground), resolved at the call site (gh#906)", "name": "--input-addon-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--input-addon-padding-inline", "tier": "component", "value": "var(--control-padding-x)" }, { "description": "Switch `checkedChildren` / `unCheckedChildren` and `loading`.", "name": "--switch-content-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-content-space-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-spinner-size", "tier": "component", "value": "calc(var(--switch-thumb-size) - var(--space-1))" }, { "description": "Slider marks / dots / value bubble — antd `marks`, `dots`, `tooltip`.", "name": "--slider-mark-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "default = var(--muted-foreground), resolved at the call site (gh#906)", "name": "--slider-mark-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-mark-space-block-start", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-dot-size", "tier": "component", "value": "var(--slider-track-height)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-dot-background", "tier": "component", "value": "var(--background)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-dot-border-color", "tier": "component", "value": "var(--border)" }, { "description": "default = var(--primary), resolved at the call site", "name": "--slider-dot-active-border-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-tooltip-background", "tier": "component", "value": "var(--popover)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-tooltip-color", "tier": "component", "value": "var(--popover-foreground)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-tooltip-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--slider-tooltip-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-tooltip-padding-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-tooltip-offset-block", "tier": "component", "value": "var(--space-2)" }, { "description": "Radio `optionType=\"button\"` — antd's welded radio bar.", "name": "--choice-button-background", "tier": "component", "value": "var(--background)" }, { "description": "default = var(--foreground), resolved at the call site (gh#906)", "name": "--choice-button-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-button-border-color", "tier": "component", "value": "var(--input)" }, { "description": "The four brand-coloured knobs default at the call site — a `:root` binding would freeze on the root's primary and ignore a scoped [data-tenant] re-theme (docs/TOKENS.md, the freeze rule). default = var(--primary)", "name": "--choice-button-selected-color", "tier": "component", "value": "initial" }, { "description": "default = var(--primary)", "name": "--choice-button-selected-border-color", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site (gh#901)", "name": "--choice-button-selected-border-color-alpha", "tier": "component", "value": "initial" }, { "description": "default = var(--primary)", "name": "--choice-button-solid-background", "tier": "component", "value": "initial" }, { "description": "default = var(--primary-foreground)", "name": "--choice-button-solid-color", "tier": "component", "value": "initial" }, { "description": "Ring knobs for the two controls that historically wanted a softer mark than the global default — both are filled surfaces where the ring was felt to read as a second border. THE ALPHA IS 1, AND THAT IS THE CRITERION TALKING. WCAG 2.2 SC 1.4.11 asks for ≥3:1 between the focused and unfocused states of the pixels that mark focus, and colour is the whole of that bar. Measured against this palette, the focus hue at alpha 0.35 composites to 1.64:1 against the page (0.45 → ≈1.90); nothing in that band is a compliant indicator, so \"softer\" was buying taste at the cost of the criterion. The softening now comes from the HALO (`--focus-ring-glow-*`), which sits outside the opaque stop and is free to be as quiet as it likes because it is decoration rather than the indicator. The knobs stay — a service can still trade the criterion away deliberately — but the shipped default no longer makes that trade silently. Guarded by src/tokens/__tests__/focus-ring-contrast.test.ts. default = var(--stroke-lg), resolved at the call site (gh#906)", "name": "--toggle-focus-ring-width", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-focus-ring-alpha", "tier": "component", "value": "1" }, { "description": "Mark width for a BORDERED FIELD. This knob exists because a field is the one control that already owns a boundary, so it is the one place the mark could plausibly be dropped and the recoloured border left to carry the state — which is the established treatment for a bordered field: a primary border plus a translucent halo, nothing in between. It ships at the same step as `--focus-outline-weight`, the hairline stroke, so a field and a button carry the same weight. A gate asserts the two stay equal, because this token cannot literally READ the global one without freezing at :root (docs/TOKENS.md, the freeze rule). It feeds `--focus-ring-weight`, never `--focus-ring-width`. The width is `weight × --focus-outline`, so a field's mark is still switched off with everything else — a knob that bypassed the switch would be a hole in it. If a service sets this, note the unit: the halo's spread is summed with a length in `calc()`, and CSS refuses to add a unitless number to a length — a bare `0` makes the whole box-shadow invalid at computed-value time and it resolves to NONE. Write `0px`. modern 2px mark, matching global focus", "name": "--control-focus-ring-width", "tier": "component", "value": "var(--stroke-md)" }, { "description": "Outline-form gaps — marks where a radius-hugging ring would touch the glyph.", "name": "--rating-focus-ring-offset", "tier": "component", "value": "2px" }, { "description": "Star paint (gh#694). HSL components, `initial` so the default resolves at the star — a `:root` binding would freeze on the root's role and ignore a scoped [data-tenant] theme (the freeze rule). Filled default = var(--warning); empty default = var(--muted-foreground) at the alpha.", "name": "--rating-star-filled-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--rating-star-empty-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--rating-star-empty-alpha", "tier": "component", "value": "0.45" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--checkbox-border-width", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--checkbox-size", "tier": "component", "value": "calc(1rem * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--checkbox-size-compact", "tier": "component", "value": "0.875rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--checkbox-size-comfortable", "tier": "component", "value": "1.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-gap", "tier": "component", "value": "var(--space-inline-sm)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-group-gap-x", "tier": "component", "value": "var(--space-6)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-group-gap-y", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-description-gap", "tier": "component", "value": "0.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--choice-control-offset", "tier": "component", "value": "0.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-width", "tier": "component", "value": "calc(2.25rem * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-width-compact", "tier": "component", "value": "2rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-width-comfortable", "tier": "component", "value": "2.5rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-height", "tier": "component", "value": "calc(1.25rem * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-height-compact", "tier": "component", "value": "1.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-height-comfortable", "tier": "component", "value": "1.375rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-size", "tier": "component", "value": "calc(1rem * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-size-compact", "tier": "component", "value": "0.875rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-size-comfortable", "tier": "component", "value": "1.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-translate", "tier": "component", "value": "calc(1rem * var(--scaling))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-translate-compact", "tier": "component", "value": "0.875rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-thumb-translate-comfortable", "tier": "component", "value": "1.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-track-height", "tier": "component", "value": "0.375rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-thumb-size", "tier": "component", "value": "1rem" }, { "description": "A vertical slider fills its container's block size; this keeps one visible in a container that has none (antd leaves it at 0 and relies on the page to size it).", "name": "--slider-vertical-min-block-size", "tier": "component", "value": "10rem" }, { "description": "InputOTP slot box (gh#233). Its own knob so an auth surface can widen the 6-slot challenge row to fill a wide panel WITHOUT re-scoping --control-height (which would resize every other control in the same card). Declared `initial` — the tier-mirror form of the role-mirror rule in docs/TOKENS.md: the default must resolve at the CALL SITE (`var(--otp-slot-size, var(--control-height))`), because `--otp-slot-size: var(--control-height)` here would FREEZE at the :root tier (32px) and an OTP row inside `.ui-auth-shell[data-variant=\"canonical\"]`, which re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. default = var(--control-height) at the call site", "name": "--otp-slot-size", "tier": "component", "value": "initial" }, { "description": "Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot `appearance=\"grouped\"` box of 112x54 with its 1px group border) — not expressible with one square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the same tier-mirror reason as --otp-slot-size: the whole fallback chain (axis → square → --control-height) must resolve at the CALL SITE so a shell that re-scopes --control-height still reaches an OTP row that sets neither axis. default = var(--otp-slot-size, var(--control-height))", "name": "--otp-slot-inline-size", "tier": "component", "value": "initial" }, { "description": "default = var(--otp-slot-size, var(--control-height))", "name": "--otp-slot-block-size", "tier": "component", "value": "initial" }, { "description": "Main-axis alignment of the whole OTP row (rule #44/#45 — chrome is a token, default quiet). `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred code field is `align=\"center\"` on InputOTP (which wins over this knob) or this token set once in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a flex-centring div to get a centred challenge.", "name": "--otp-container-align", "tier": "component", "value": "flex-start" }, { "description": "Checked/on/active fills — `initial` so the --primary default re-resolves at the call site under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped [data-tenant] override of --primary never reaches it). A service retints the \"selected\" state by overriding these directly. Defaults = hsl(var(--primary)) · slider track 0.2α.", "name": "--checkbox-checked-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--switch-checked-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-on-background", "tier": "component", "value": "initial" }, { "description": "Pressed Toggle LABEL colour — the pair to --toggle-on-background, `initial` like it (default hsl(var(--primary-foreground)) at the call site). Without it a service that quietened the pressed fill to a pale tint was left with white text on it.", "name": "--toggle-on-color", "tier": "component", "value": "initial" }, { "description": "`Toggle variant=\"quiet\"` pressed state (gh#1257) — role-mirror knobs, `initial`; defaults at the call site: fill hsl(var(--secondary)), label hsl(var(--foreground)), counter hsl(var(--background)) / hsl(var(--foreground)).", "name": "--toggle-quiet-on-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-quiet-on-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-quiet-on-count-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-quiet-on-count-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-track-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--slider-range-background", "tier": "component", "value": "initial" }, { "description": "Switch OFF track fill (gh#315) — `initial`, default hsl(var(--input)). Its own knob so a service can quieten the off-track without dragging the --input control-boundary role back below the WCAG SC 1.4.11 floor (rule #45); whatever you set still owes 3:1 against the page and against the thumb (--background), or \"off\" stops being a visible state.", "name": "--switch-unchecked-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--switch-unchecked-background-alpha", "tier": "component", "value": "initial" }, { "description": "A labelled OFF track defaults to muted-foreground rather than the input boundary role: text needs 4.5:1, not the 3:1 required of an empty track. Pair custom track fills with this foreground; the default background role contrasts in both light and dark themes.", "name": "--switch-content-unchecked-foreground", "tier": "component", "value": "initial" }, { "description": "ColorPicker — width of the hex text field beside the swatch.", "name": "--color-picker-input-width", "tier": "component", "value": "6.5rem" }, { "description": "ColorPicker `presets` (gh#1055). The swatch box IS the radio's pointer target, so it sits on the WCAG 2.2 SC 2.5.8 floor (antd's own preset block is 24px too) and never rides --scaling below it. The gap leaves room for the checked ring, which is drawn outside the box.", "name": "--color-picker-preset-size", "tier": "component", "value": "var(--touch-target-min)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--color-picker-preset-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--color-picker-presets-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Command / CommandPalette — list height, inner paddings and the palette's own box.", "name": "--command-list-max-height", "tier": "component", "value": "min(300px, 50vh)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-input-padding-x", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-group-padding", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-item-padding-y", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-item-padding-x", "tier": "component", "value": "var(--space-2)" }, { "description": "The gap between a row's leading mark and its label. `.ui-command-item` is a flex row and had NO gap at all, so every command/palette/picker row with an icon rendered its glyph flush against the text — measured at 0px between an organization mark and its name. It reads --control-gap because a command row is a control row: the same distance the trigger it opened from already puts between its own icon and label.", "name": "--command-item-gap", "tier": "component", "value": "var(--control-gap)" }, { "description": "`Command split` (antd List `split`, gh#699) — a list drawn as ONE ruled box. --command-list-split-padding the group/list padding under split: 0, so no inner frame separates the rows from the panel edge. --command-list-split-inset the inline inset the SURFACE puts between the panel edge and the list, which a split row cancels (negative margin) and pays back as padding so its fill and rule still meet both edges. 0 for a bare Command; OrgSwitcher sets its column inset. --command-item-divider-width the hairline between rows. --command-item-divider-color ROLE-MIRROR KNOB — `initial` here, default resolved at the call site = var(--border) (HSL channels; docs/TOKENS.md).", "name": "--command-list-split-padding", "tier": "component", "value": "0" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-list-split-inset", "tier": "component", "value": "0px" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--command-item-divider-width", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-item-divider-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-width", "tier": "component", "value": "35rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-inset-top", "tier": "component", "value": "calc(var(--space-6) * 4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-viewport-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-hint-padding-y", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-hint-padding-x", "tier": "component", "value": "var(--space-4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-palette-hint-gap", "tier": "component", "value": "var(--space-4)" }, { "description": "SearchInput — the inset the leading/trailing icons sit at, and the field padding derived from it so the text never runs under an icon.", "name": "--search-input-edge-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-input-start-padding", "tier": "component", "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-input-end-padding", "tier": "component", "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )" }, { "description": "The --font-size-xs tier, spelled once per control that reads it, so a service can retune a single one of them without moving the whole scale.", "name": "--choice-description-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--color-picker-hex-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--color-picker-presets-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--command-group-heading-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-input-label-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tag-input-chip-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-sm-font-size", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--toggle-xs-font-size", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-sm-font-size", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "TRAILING AFFIX — the clear ✕ / chevron overlay a select-family trigger parks at its inline end. Select, SearchSelect and TagInput each hard-coded the same `end-2 size-6 rounded-sm opacity-50` stack independently (#319), so a service retuning affix weight had to chase the literal through several components. One shared set of knobs instead — this is a CONTROL-level concern, not a per-component one.", "name": "--control-affix-inset-inline-end", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-affix-action-size", "tier": "component", "value": "1.5rem" }, { "description": "Shared coarse-pointer floor; independent of density and the desktop glyph size.", "name": "--control-affix-touch-target-size", "tier": "component", "value": "var(--band-height-xl)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--control-affix-action-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-affix-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Resting weight of an affix glyph — it must read as secondary until hovered/focused.", "name": "--control-affix-rest-alpha", "tier": "component", "value": "0.5" }, { "description": "2.25rem — the room a single trailing affix needs. Written as a raw rem because the literal it replaced (`pe-9`) is a flat Tailwind step, not a density-scaled one.", "name": "--control-trigger-space-inline-end", "tier": "component", "value": "2.25rem" }, { "description": "INSIDE-FIELD AFFIX — the leading/trailing controls Input and TimePicker render WITHIN the field box, as opposed to the overlay affix (--control-affix-*) that Select and SearchSelect park on top of a trigger. Both carried the identical literal stack (#319). Because these sit on the field's own surface rather than over it, they rest a touch heavier than the overlay pair — that difference is the reason the two sets stay separate.", "name": "--control-inline-affix-size", "tier": "component", "value": "1.25rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-inline-affix-icon-size", "tier": "component", "value": "var(--control-affix-icon-size)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-inline-affix-space-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-inline-affix-inset-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-inline-affix-rest-alpha", "tier": "component", "value": "0.7" }, { "description": "Inline room the field reserves so its text never runs under a single affix.", "name": "--control-inline-affix-space-inline-end", "tier": "component", "value": "2.25rem" }, { "description": "Input centres its affix on the field's single line; a textarea has no single line to centre on, so its clear control parks at the top-end corner instead.", "name": "--textarea-clear-inset-block-start", "tier": "component", "value": "var(--space-2)" }, { "description": "MULTILINE BOX — the block padding of `.ui-control-multiline` (Textarea). It was a bare `--space-2` inside the padding shorthand, which made it unreachable for a service that runs a denser composer, AND it is the constant the auto-grow row maths has to add back, so the two had to read the same knob or drift (#45).", "name": "--control-multiline-padding-block", "tier": "component", "value": "var(--space-2)" }, { "description": "The unit a \"row\" is measured in. `initial` on purpose: the call site reads `var(--textarea-autogrow-line-height, var(--line-height-normal))`, so a service that retunes the multiline line-height for CJK legibility retunes the ceiling with it (#46). Unitless — it is multiplied by `--control-font-size`.", "name": "--textarea-autogrow-line-height", "tier": "component", "value": "initial" }, { "description": "Floor of the grown box, in text rows. The `minRows` prop overrides per instance — the same theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. The floor is additionally clamped up to `--control-height` so a resting one-row composer still lines up with the Input / Button beside it instead of undercutting the control tier.", "name": "--textarea-autogrow-min-height-rows", "tier": "component", "value": "1" }, { "description": "Ceiling of the grown box, in text rows; past it the control scrolls internally instead of pushing the page. `maxRows={0}` sets this to `infinity` for an unbounded box.", "name": "--textarea-autogrow-max-height-rows", "tier": "component", "value": "8" }, { "description": "The non-text part of the box the row maths must add back: block padding + border, both edges. `.ui-textarea-autogrow--ghost` re-declares it without the border, because the ghost variant drops its own chrome.", "name": "--textarea-autogrow-box-inset", "tier": "component", "value": "calc( (var(--control-multiline-padding-block) + var(--control-border-width, var(--stroke-hairline))) * 2 )" }, { "description": "COMPOSITE FIELD — the bordered box that wraps two inputs plus a separator (date/month range pickers) or one input plus affixes. Shared so the four range/picker fields cannot drift into four slightly different boxes.", "name": "--control-composite-field-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "The button is a browser-owned box we restyle; it sits one tier below the field so it reads as a control INSIDE the control.", "name": "--input-file-button-height", "tier": "component", "value": "var(--band-height-sm)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--input-file-button-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "SEARCH-SELECT — the Popover+Command combobox. Its panel geometry was baked onto the component as arbitrary values (`max-w-[min(32rem,calc(100vw-1.5rem))]`), so a service could not widen the panel or change the viewport gutter without forking.", "name": "--search-select-panel-max-width", "tier": "component", "value": "32rem" }, { "description": "Seat for a NUMERIC `popupMatchSelectWidth`. `auto` is the inert default — the knob only does anything once a call site sets it, and then the value is that consumer's own measurement.", "name": "--search-select-panel-inline-size", "tier": "component", "value": "auto" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-panel-viewport-inset", "tier": "component", "value": "var(--space-6)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-list-space-inset", "tier": "component", "value": "var(--space-1)" }, { "description": "antd `listHeight` writes this per instance; `none` lets the panel's own available height win. antd listHeight 256px; the list scrolls inside", "name": "--search-select-list-max-height", "tier": "component", "value": "16rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-footer-space-inset", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-option-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Picker rows read compact (~34px), like Linear / GitHub label pickers, not body-text rows.", "name": "--search-select-option-line-height", "tier": "component", "value": "var(--line-height-tight)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-option-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-option-sublabel-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-status-space-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-status-space-block", "tier": "component", "value": "var(--space-3)" }, { "description": "Empty/error states sit alone in the panel, so they get a taller, centred block.", "name": "--search-select-placeholder-space-block", "tier": "component", "value": "var(--space-6)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-status-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--search-select-spinner-size", "tier": "component", "value": "1rem" }, { "description": "CASCADER — column browser + flat search list. Its option rows, column widths and panel paddings were literals on the component (#319), so a service could not widen a column to fit longer JA labels or tighten the row rhythm without forking.", "name": "--cascader-column-min-width", "tier": "component", "value": "9rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-columns-max-height", "tier": "component", "value": "min(280px, 50vh)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-list-max-height", "tier": "component", "value": "min(300px, 50vh)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-panel-space-inset", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-option-space-inline", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-option-space-block", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-option-space-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-option-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-option-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "The flat search result row is denser than a column row — it has no chevron to balance.", "name": "--cascader-result-space-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-result-space-block", "tier": "component", "value": "0.375rem" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--cascader-result-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-result-icon-space-inline-end", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--cascader-empty-space-block", "tier": "component", "value": "var(--space-6)" }, { "description": "SELECT — the Radix listbox surface. Its popup shares the menu row rhythm (--menu-item-*), so only what is genuinely its own lives here (#319).", "name": "--select-content-max-height", "tier": "component", "value": "24rem" }, { "description": "Seat for a NUMERIC `popupMatchSelectWidth` on the plain listbox. `auto` is the inert default.", "name": "--select-content-inline-size", "tier": "component", "value": "auto" }, { "description": "THE LISTBOX SURFACE — and it is deliberately NOT the trigger's (gh#880, docs/GLASSMORPHISM-STANDARD.md §4b). Select is two problems: the TRIGGER is a form field and takes `--control-surface-background` with every other field, while the LISTBOX is an overlay that opens over arbitrary page content and needs the most opaque fill in the system — a 7-line menu over a photograph is unreadable at a card's alpha. One knob for both would make the correct answer for one the wrong answer for the other. `initial` with the role default at the call site, the same shape `--popover-surface-background` uses; the listbox painted a bare `hsl(var(--popover))` with no knob at all until now. default = hsl(var(--popover)) at the call site", "name": "--select-content-background", "tier": "component", "value": "initial" }, { "description": "default = none — the listbox blurs nothing", "name": "--select-content-backdrop-blur-size", "tier": "component", "value": "initial" }, { "description": "Vertical room around the `notFoundContent` row — the same breathing space the SearchSelect panel gives its own empty state, so the two empties read as one affordance.", "name": "--select-empty-space-block", "tier": "component", "value": "var(--search-select-placeholder-space-block)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--select-scroll-button-space-block", "tier": "component", "value": "var(--space-1)" }, { "description": "Select rows sit slightly wider than a menu row: a listbox has no leading icon column to absorb the optical inset, so 2.5 reads level with a menu's 2 + icon.", "name": "--select-item-space-inline", "tier": "component", "value": "0.625rem" }, { "description": "TIME PICKER — scroll columns of hour/minute/second plus an inline affix pair. All of its geometry was literal on the component (#319): a service could not shorten the column, widen the panel for a 12-hour layout, or retune the row rhythm without forking.", "name": "--time-picker-column-height", "tier": "component", "value": "13rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-panel-width", "tier": "component", "value": "9rem" }, { "description": "12-hour mode adds an AM/PM column, so the panel is wider.", "name": "--time-picker-panel-width-12h", "tier": "component", "value": "13rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-heading-space-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-heading-space-block", "tier": "component", "value": "0.375rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-heading-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-column-space-inset", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-option-space-block", "tier": "component", "value": "0.375rem" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--time-picker-option-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-option-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-footer-space-inset", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-footer-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--time-picker-affix-space-gap", "tier": "component", "value": "var(--control-inline-affix-space-gap)" }, { "description": "TREE SELECT — a Select whose panel holds a tree. Its rows, indent and toggle were literal on the component, and the depth indent was a magic expression in JSX (`depth * 1.25 + 0.5` rem) that no theme could reach at all (#319).", "name": "--tree-select-list-max-height", "tier": "component", "value": "min(300px, 50vh)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-row-space-block", "tier": "component", "value": "0.375rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-row-space-inline-end", "tier": "component", "value": "var(--space-2)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--tree-select-row-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-row-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Indent = base + depth × step. A denser service dials the step down without touching JSX.", "name": "--tree-select-depth-space-base", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-depth-space-step", "tier": "component", "value": "1.25rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-toggle-size", "tier": "component", "value": "1.25rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-toggle-space-inline-end", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-label-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--tree-select-empty-space-block", "tier": "component", "value": "var(--space-6)" }, { "description": "CALENDAR — the react-day-picker grid. Day/weekday cells already size from --control-height (the system control tier), but the frame around them — root inset, month gaps, nav offset, grid rhythm — was literal on the component (#319), so a service could not tighten the calendar to its own density without forking the classNames map.", "name": "--calendar-space-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "Gap BETWEEN side-by-side months (a range picker's two panels) — not the caption→grid step. Until gh#730 `.ui-calendar-month` carried it too, and a month has exactly two children, so it stacked with --calendar-grid-space-block-start into one 32px void under 「2026年9月」 that a screenshot read as a missing week row. One gap, one token: the month column no longer sets a gap and --calendar-grid-space-block-start is the whole caption→weekday step.", "name": "--calendar-month-space-gap", "tier": "component", "value": "var(--space-4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-caption-space-inline", "tier": "component", "value": "var(--space-8)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-caption-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-nav-space-block-start", "tier": "component", "value": "var(--space-3)" }, { "description": "THE SAME INSET AS THE GRID, by construction rather than by coincidence (gh#730 item 5). `.ui-calendar-nav` is `position: absolute; inset-inline: 0`, and an absolutely positioned box resolves its insets against the PADDING box — so the nav escapes the calendar's own --calendar-space-inset and its padding is the whole inset the chevrons get. At space-1 the `‹` button's outer edge measured 4px from the popover content edge while the weekday row and every day column started at 12px: an 8px split, reported as 「lề của button và calendar ko bằng nhau」. Pointing this at --calendar-space-inset makes the two ONE value — retuning the calendar's inset moves the chevrons with the grid, in LTR and RTL alike.", "name": "--calendar-nav-space-inline", "tier": "component", "value": "var(--calendar-space-inset)" }, { "description": "Nav chevrons read as secondary until hovered — they frame the month, they are not the point.", "name": "--calendar-nav-rest-alpha", "tier": "component", "value": "0.7" }, { "description": "THE caption→weekday-row step, the only one now (gh#730): measured 32px before, 12px after. space-3 rather than space-2 because the unruled grid's own row rhythm is --calendar-week-space-block-start (space-2, 8px) — at 8px the caption would read as one more week row, at 12px it still reads as the boundary of a group.", "name": "--calendar-grid-space-block-start", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-week-space-block-start", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-weekday-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--calendar-weekday-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-day-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--calendar-day-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-chevron-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-footer-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-footer-space-block-start", "tier": "component", "value": "var(--space-2)" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--calendar-footer-border-width", "tier": "component", "value": "initial" }, { "description": "Block inset of a header cell once the grid is RULED. Unruled, the header row has no edge for its text to sit against, so it needs none; ruled, the line box started right at the 1px rule — measured 1px from the top border and 2.19px from the bottom, an inset below the smallest named step. The smallest step, not a literal, so a service retuning the spacing grid moves it too.", "name": "--calendar-bordered-weekday-padding-block", "tier": "component", "value": "var(--space-1)" }, { "description": "Text inset of a `width=\"full\"` day cell (gh#1258). The full cell reads from the start edge so a number can sit above badges, and with the unruled cell's `padding: 0` the numeral touched the cell edge — 0px left, 3px top, flagged by the library's own `text-edge-inset` rule (cell: >= 8px inline, >= 4px block). `initial` so the density-scaled defaults (var(--space-2) inline, var(--space-1) block) resolve at the call site, not frozen at the :root density. A shift board that wants a tighter or roomier cell sets these.", "name": "--calendar-full-day-padding-inline", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--calendar-full-day-padding-block", "tier": "component", "value": "initial" }, { "description": "Colour of the day-grid ruling (`Calendar bordered`, on by default). `initial` on purpose: the role default is read at the call site as `var(--calendar-grid-border-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / 1.149:1 on the popover in light, L* 20.76 / 1.270:1 in dark — a rule exactly as heavy as a Card edge or a DataTable row rule. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47 / 3.88) to --input/0.5 (1.74 / 1.95, L* 78.67), and gh#730 measured that still darker than the --border every card and table uses and asked for the --border tier itself. Same tier as the RangeTimeline grid. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight or `hsl(var(--input))` for the heavy line.", "name": "--calendar-grid-border-color", "tier": "component", "value": "initial" }, { "description": "TRANSFER — the two-pane list mover. Pane height, header rhythm and row density were literal on the component (#319), so a service could not fit the panes to its own page grid or tighten the row for a dense admin table without forking.", "name": "--transfer-pane-min-height", "tier": "component", "value": "14rem" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--transfer-pane-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-panes-space-gap", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-header-space-inline", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-header-space-block", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-header-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-header-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-search-space-inset", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-list-space-inset", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-row-space-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-row-space-block", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-row-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--transfer-row-radius", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-row-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "The checkbox is top-aligned against a two-line row, so it needs a hair of optical offset to sit level with the first line's cap height rather than its box.", "name": "--transfer-row-check-space-block-start", "tier": "component", "value": "0.125rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-row-description-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-empty-space-block", "tier": "component", "value": "var(--space-8)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-actions-space-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--transfer-action-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "PERIOD GRID — the year-nav header over a 3-column grid that DatePicker shows for a coarse `picker` (month / quarter / year), single or `range`. The `--month-picker-*` names date from when this panel lived in a separate MonthPicker; one set of knobs has always driven every copy of it, which is why merging the four pickers changed no measurement here.", "name": "--month-picker-panel-space-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-grid-space-block-start", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-grid-space-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-cell-space-inline", "tier": "component", "value": "var(--space-4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-nav-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Year-nav chevrons read as secondary until hovered — same treatment as the Calendar nav, so the two panels stay visually consistent when either is retuned.", "name": "--month-picker-nav-rest-alpha", "tier": "component", "value": "var(--calendar-nav-rest-alpha)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--month-picker-separator-icon-size", "tier": "component", "value": "var(--icon-size-sm)" }, { "description": "`initial`, NOT `var(--control-height-xs)`: an alias of a ladder step declared here is substituted against :root's 24px and inherits frozen, so a scope that moves the ladder (a `MobileShell` scopes it to 44 / 40 / 48 / 36px) never reached it — measured, `size=\"xs\"` stayed 24px inside the shell while every other size moved. `.ui-button--xs` reads it with the live ladder step as fallback, so the default re-resolves at the button and an override still wins.", "name": "--button-xs-height", "tier": "component", "value": "initial" }, { "description": "Minimum TARGET of `variant=\"bare\"` (gh#404) — the pseudo-element hit area, not a box height, so it never shows up as geometry. The measure is the same xs tier the note above settled on as this package's WCAG 2.2 SC 2.5.8 floor (1.5rem = 24px), and it moves with that tier and with density. `initial`, NOT `var(--control-height-xs)`, for the reason `--button-xs-height` above carries: an alias of a ladder step written HERE is substituted against :root's value and inherits frozen, so a scope that moves the ladder never reaches it. Measured in Chromium at 393px inside `MobileShell`, which scopes `--control-height` to 2.75rem: `--control-height-xs` correctly re-resolved to 36px while the bare button's `::after` stayed **24×24** — the one touch target in a touch-first shell that did not move. `.ui-button--bare::after` reads the live step as its fallback, so the default re-resolves at the button and a service override still wins.", "name": "--button-bare-target-size", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-xs-space-inline", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-xs-space-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-xs-font-size", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-xs-icon-size", "tier": "component", "value": "var(--icon-size-xs)" }, { "description": "Icon-adjacent padding: a button whose only child is an icon needs less inline room than one carrying a label, or the glyph floats in a too-wide box. One knob per size tier.", "name": "--button-icon-space-inline-md", "tier": "component", "value": "var(--space-3)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-icon-space-inline-sm", "tier": "component", "value": "0.625rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-icon-space-inline-lg", "tier": "component", "value": "var(--space-4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-icon-space-inline-xs", "tier": "component", "value": "0.375rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-space-block", "tier": "component", "value": "var(--space-2)" }, { "description": "The OTP blinking caret. The ratchet catches it because the selector says \"caret\", but it is a text CURSOR, not a chevron: a 1px bar as tall as the digit's line box. Its width belongs to the stroke scale; its height belongs to neither the icon nor the band scale, so it is declared rather than forced onto one. scale-exempt: text-caret height, tracks the OTP digit's line box, not an icon or a band", "name": "--otp-caret-block-size", "tier": "component", "value": "1rem" }, { "description": "default = var(--stroke-hairline), resolved at the call site (gh#906)", "name": "--otp-caret-inline-size", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--otp-separator-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-min-width", "tier": "component", "value": "var(--space-4)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-space-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Count pill · COLOUR (gh#320). The pill used to tint itself translucently over whatever the button's surface happened to be (`bg-primary-foreground/15`, `bg-foreground/8`), which means its contrast was a FUNCTION of that surface — and five of those combinations measured below the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text: default (light) 3.88 · destructive (dark) 4.29 outline family (light, at rest) 4.32 · outline family (light, hover) 3.64 outline family (dark, hover) 3.68 The hover rows are the reason a static sweep never caught this: `--accent` only appears under the cursor, so no screenshot of a resting page contains the failing state. Same shape as gh#299 and gh#315 — a value that passes on the surface someone happened to check. The fix is the one gh#312 already validated on Toggle: OPAQUE role fills, which make the pill's contrast independent of the button's variant AND of hover. Each filled variant uses its own label pair SWAPPED, so the pill is exactly as legible as the label beside it and cannot be less legible under any theme that keeps that button readable at all: default --primary on --primary-foreground 5.04 light · 7.07 dark destructive --destructive on --destructive-foreground 6.10 light · 5.53 dark secondary --secondary on --secondary-foreground 14.25 light · 12.40 dark outline family --foreground on --muted 14.25 light · 12.40 dark The outline family's `--muted` fill is 1.09:1 against the button's own ground, so at rest the counter still reads as quiet text rather than a badge (#44) — it is legibility of the DIGITS that went up, not loudness of the pill. All eight are role-mirror knobs: `initial` at :root with the role default at the CALL SITE, so a scoped [data-tenant]/.dark override of the role still reaches them (docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\").", "name": "--button-count-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-default-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-default-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-destructive-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-destructive-color", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-secondary-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--button-count-secondary-color", "tier": "component", "value": "initial" }, { "description": "LABEL — the Label primitive's own box and type (#319). Every one of these was a Tailwind literal baked into label.tsx (`text-sm leading-none flex items-center gap-2`), so a service whose form grid wanted a smaller/denser label had to hand-write font-size on every call site (which is exactly why --form-label-font-size had to be invented as a per-instance escape). They live under the `control` prefix because Label is a control-family primitive and src/tokens/components/ has no `label` file of its own. Defaults reproduce today's rendering exactly: font-size ← `text-sm` → --text-sm → var(--font-size-sm) line-height ← `leading-none` → 1 (leading-none beats text-sm's companion line-height)", "name": "--control-label-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "A LABEL WRAPS, so its line box cannot be 1. This was a literal `1`, which is right for the one case it was chosen for — a single-line label beside a checkbox, where a cap-height box aligns cleanly — and wrong for every other. The moment the text takes two lines they collide: measured on the hosted sign-up consent label at 520px, font-size 14px with line-height 14px produced a 28px box of two touching lines. Long copy, a narrow column, and ja/vi wrapping all reach that case routinely. This package has already paid for this exact mistake once: `--auth-shell-divider-label-line- height` carries the note that a hardcoded `line-height: 1` rendered an 11px row and sat the lower half of the canonical Login card 8px high (gh#263). Same literal, same failure, one token over. `--line-height-normal` (1.5), not `--line-height-tight`: 1.25 clears the collision but two wrapped lines still read as one block, and a label that has wrapped IS prose at that point. 1.5 is also what this package already decided for the same job one layer up — `--auth-shell-field-label-line-height` — so the two agree instead of drifting. Alignment is unaffected: `.ui-label` is `display: flex; align-items: center`, so the control centres against the label box whatever its height.", "name": "--control-label-line-height", "tier": "component", "value": "var(--line-height-normal)" }, { "description": "Label → addon/required-marker gap. A RAW rem, deliberately NOT var(--space-2): the `gap-2` it replaces reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a --space-* default would silently resize every label row under a compact/comfortable density. A service that WANTS it to follow density points the knob at var(--space-2) itself.", "name": "--control-label-space-gap", "tier": "component", "value": "0.5rem" }, { "description": "Weight of a label whose `peer` control is disabled. Deliberately its OWN knob rather than the global --disabled-opacity (0.5): a label must stay READABLE next to a disabled control — it is still the field's accessible name — so it rests one step heavier than the control it names. Default = the historical `peer-disabled:opacity-70`.", "name": "--control-label-disabled-alpha", "tier": "component", "value": "0.7" }, { "description": "── CONTROL SURFACE — the antd `variant` × `status` matrix (antd 6.6.2) ──────────────────── The four surfaces and the two statuses are TOKENS, not utilities, and that is the whole point of this block. The select-family trigger used to state its surface as `border-input bg-background` — two Tailwind utilities, which live in `@layer utilities` and therefore beat anything a stylesheet in `@layer components` can say. A `[data-variant=\"filled\"]` rule would have been dead on arrival, exactly the way `w-full` killed `.ui-app-setting-picker-icon` (gh#366) and `--control-bounded-width` (gh#375). So the family now withholds those two utilities and reads the surface from here instead; the DEFAULT values reproduce the previous rendering byte for byte. `--control-surface-*` is the `outlined` default; the other three name themselves. THE THREE THAT MIRROR A ROLE ARE `initial` (docs/TOKENS.md, the `:root` freeze rule), and this block is where that rule was broken. `--control-surface-background: hsl(var(--background))` SUBSTITUTES at `:root`, so it froze on the light canvas and inherited that answer into every subtree. It looks fine in product because `.dark` normally lands on ``, where `:root[data-theme=\"dark\"]` re-declares `--background` on the SAME element the binding is made on. It breaks the moment a theme is scoped BELOW `` — the `[data-tenant]` route docs/CUSTOMER-THEMING.md recommends at level 3, and the `.dark` wrapper the docs Theme Editor uses to show both themes at once. Measured there before this change: a `Select` trigger in a `.dark` subtree painted `rgb(253,253,252)` under `rgb(247,247,243)` text, 1.05:1, while the `Input` beside it was correctly dark. The defaults below are unchanged; they simply resolve where the element paints instead of where the knob is declared. default = hsl(var(--input)) at the call site", "name": "--control-surface-border-color", "tier": "component", "value": "initial" }, { "description": "default = hsl(var(--background)) at the call site", "name": "--control-surface-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--control-surface-background-alpha", "tier": "component", "value": "initial" }, { "description": "`filled` — antd's grey field: no edge, a muted fill, no resting elevation.", "name": "--control-filled-border-color", "tier": "component", "value": "transparent" }, { "description": "default = hsl(var(--muted)) at the call site", "name": "--control-filled-background", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-filled-shadow", "tier": "component", "value": "none" }, { "description": "`borderless` — chrome removed entirely, for a control embedded in a surface that already draws the box (a toolbar cell, an inline edit).", "name": "--control-borderless-border-color", "tier": "component", "value": "transparent" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-borderless-background", "tier": "component", "value": "transparent" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-borderless-shadow", "tier": "component", "value": "none" }, { "description": "STATUS. `error` reuses the destructive role already wired to the focus halo through the `[aria-invalid=\"true\"]` rule in focus-ring.css. `warning` deliberately does NOT use `--warning` (山吹 #f8b500). Measured against `--background` (#fdfdfb) that hue is 1.85:1 — a boundary that marks a state has to clear 3:1 under WCAG 2.2 SC 1.4.11, so shipping the brand yellow as the edge would have been a colour that only looks like a warning to people who can already see it. `--text-warning` (36 100% 28%, the darkened amber this palette keeps for exactly this reason) measures 5.4:1. A service that wants antd's yellow back retunes the knob and owns that trade.", "name": "--control-status-error-border-color", "tier": "component", "value": "hsl(var(--destructive))" }, { "description": "default at the call site — freeze rule", "name": "--control-status-warning-border-color", "tier": "component", "value": "initial" }, { "description": "THE SAME AMBER, AS A TRIPLET — and it has to be a triplet, not a colour. The focus mark is composed as `hsl(var(--focus-outline-color) / var(--focus-ring-opacity))`, so a token that already resolves to `hsl(...)` nests one `hsl()` inside another: the declaration is then invalid at computed-value time and the WHOLE `outline` shorthand falls back to its initial value. Measured in Chromium on a focused `status=\"warning\"` Textarea before this line existed: `outline-style: none`, `outline-width: 3px` (`medium`, the initial) — i.e. a warned field had no focus mark at all while the switch was on. It carried `--warning` (山吹 #f8b500) before, which is the hue the note above rejects for a state edge at 1.85:1; `--text-warning` is the darkened amber that measures 5.4:1 and is what the boundary already paints, so the edge and the mark cannot drift apart. default at the call site — freeze rule", "name": "--control-status-warning-outline-color", "tier": "component", "value": "initial" }, { "description": "EmojiPicker (gh#1164): the panel width, an emoji cell (a touch-sized square), the glyph inside it, and how tall the grid gets before it scrolls.", "name": "--emoji-picker-cell-size", "tier": "component", "value": "var(--control-height-default)" }, { "description": "Eight cells plus the popover's inset — derived, so 44px touch cells (coarse pointer) still fit eight to a row (8 × 44 + insets = 376px, inside a 390px phone).", "name": "--emoji-picker-panel-inline-size", "tier": "component", "value": "calc( 8 * var(--emoji-picker-cell-size) + 2 * var(--popover-space-inset, var(--space-3)) )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--emoji-picker-glyph-size", "tier": "component", "value": "var(--icon-size-lg)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--emoji-picker-grid-max-block-size", "tier": "component", "value": "16rem" }, { "description": "SortableList (gh#1173): the space between items, an item's inset, its corner, and the narrowest a grid tile may get before the grid drops a column.", "name": "--sortable-list-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--sortable-list-item-padding", "tier": "component", "value": "var(--space-2)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--sortable-list-item-radius", "tier": "component", "value": "var(--control-radius)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--sortable-list-grid-item-min-inline-size", "tier": "component", "value": "12rem" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-compact", "tier": "component", "value": "var(--band-height-xl)" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--control-height-default", "tier": "component", "value": "var(--band-height-xl)" }, { "description": "SearchInput's text stops at the clear ✕'s 44px TARGET, not at its 24px box (gh#1148): edge inset + half the box (where the glyph's centre is) + half the target.", "name": "--search-input-end-padding", "tier": "component", "value": "calc( var(--search-input-edge-inset) + var(--touch-target-min) / 2 + var(--control-affix-touch-target-size) / 2 )" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-padding-block-start", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-padding-block-end", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-padding-inline-start", "tier": "component", "value": "initial" }, { "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.", "name": "--textarea-padding-inline-end", "tier": "component", "value": "initial" }, { "description": "Gap between the creation button, each bucket, and each run of rows.", "name": "--conversations-gap", "tier": "component", "value": "var(--space-2)" }, { "description": "Gap between rows inside one run.", "name": "--conversations-list-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "ROW BOX. The row is a CONTROL, so its height is the band tier, never a literal (rule #24 and `pnpm check:control-sizing`).", "name": "--conversations-item-height", "tier": "component", "value": "var(--band-height-md)" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-gap", "tier": "component", "value": "var(--space-inline-sm)" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-padding-inline", "tier": "component", "value": "var(--space-inline-sm)" }, { "description": "gh#888 — φ tier freezes at :root; default = var(--radius)", "name": "--conversations-item-radius", "tier": "component", "value": "initial" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "ROW STATE. Role-mirror knobs (docs/TOKENS.md): `initial` so the documented default resolves at the CALL SITE and a scoped `[data-tenant]` / `.dark` override still reaches it. Bound to a value here at `:root` each one would resolve once, against the root palette, and freeze. Default resting ink = hsl(var(--muted-foreground)) Default active ground = hsl(var(--accent)) Default active ink = hsl(var(--foreground))", "name": "--conversations-item-color", "tier": "component", "value": "initial" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-active-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--conversations-item-active-background-alpha", "tier": "component", "value": "initial" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-active-color", "tier": "component", "value": "initial" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-item-active-font-weight", "tier": "component", "value": "var(--font-weight-medium)" }, { "description": "Leading glyph inside a row.", "name": "--conversations-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Gap between a row's label and its timestamp. The TIGHTEST stack step, because the two lines are one thing being read, not two stacked items — anything larger and the row reads as two rows in a rail that is already narrow.", "name": "--conversations-line-gap", "tier": "component", "value": "var(--space-stack-xs)" }, { "description": "BUCKET HEADING (\"今日\" / \"Previous 7 days\").", "name": "--conversations-group-gap", "tier": "component", "value": "var(--space-1)" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-group-padding-inline", "tier": "component", "value": "var(--space-inline-sm)" }, { "description": "Conversations component tokens — the session rail of a chat surface (Ant Design X `Conversations`). Ant X answers \"how do I retune this rail\" with `styles={{ root, group, item, creation }}` — a free-form style hole that freezes its internal slot names into public API. This file is the answer instead (rules #44/#45): every length, tint and type step the rail paints is a named knob a service sets once in its own theme.css. THE DEFAULTS ARE THE SIDEBAR'S ROW RHYTHM, taken from the same foundation steps rather than by reading `--sidebar-*` — a chat rail and a nav rail are the same object seen twice, and gh#559 is partly a complaint that the two halves of one surface were drawn by two different hands. Reading the sidebar's own knobs would have made a service's sidebar retune silently move the chat rail too, which is a coupling nobody asked for; agreeing on the STEP is the part that matters. row band --band-height-md (32px) = --sidebar-nav-item-height row type --font-size-xs = --sidebar-nav-item-font-size icon column --icon-size-md (16px) = --sidebar-nav-icon-size", "name": "--conversations-group-chevron-size", "tier": "component", "value": "var(--icon-size-sm)" }, { "description": "The `{ type: \"divider\" }` rule between two runs.", "name": "--conversations-separator-space-block", "tier": "component", "value": "var(--space-1)" }, { "description": "Accordion chevron and Carousel arrow. Both were bare 1rem literals in data-display-layout.css — glyphs with no tier-2 route, invisible to the icon ratchet because neither selector contains the word \"icon\".", "name": "--accordion-chevron-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--carousel-arrow-icon-size", "tier": "component", "value": "var(--icon-size-md)" }, { "description": "THE ARROW'S BOX, WHICH IS NOT THE SAME KNOB AS ITS GLYPH (gh#931). `--carousel-arrow-icon-size` sizes the mark INSIDE the button; the button itself was a pair of bare `2rem` literals in data-display-layout.css, so the TARGET had no tier-2 route at all. 32px clears WCAG 2.2 SC 2.5.8 (24px), which is why this is a missing knob and not a defect — but a brand whose own foundations ask for a 44px target could not reach it from a theme, and had no option left except a page-local override of a library selector. Reported from a real re-theme whose spec reads \"arrows44px\". The default is the same 2rem the literals painted, so no existing carousel moves. A theme that wants the larger target writes one line: `--carousel-arrow-size: 2.75rem`.", "name": "--carousel-arrow-size", "tier": "component", "value": "2rem" }, { "description": "WHERE THE ARROWS SIT, AND THE DEFAULT IS THE MIDDLE OF THE CONTENT — NOT OF THE COMPONENT. `.ui-carousel` is the positioning context and it is as tall as the slides PLUS the dots, so a plain `50%` centres the arrows on that sum. Measured on a 98px carousel: slides 58px (middle at -3415), dots 40px, arrows landing at -3395 — exactly half the dots row too low, which is what \"tại sao lại là middle của cả khung thế\" is pointing at. The reserve below subtracts it back. default = the content's middle, at the call site", "name": "--carousel-arrow-inset-block-start", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--carousel-dots-block-size", "tier": "component", "value": "0px" }, { "description": "Outline-form ring gaps — a hugging ring would touch these marks (styles/focus-ring.css).", "name": "--accordion-focus-ring-offset", "tier": "component", "value": "2px" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--carousel-dot-focus-ring-offset", "tier": "component", "value": "2px" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--progress-label-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "CodeBlock — a preformatted block; Prose delegates its `pre` treatment to the same knobs.", "name": "--code-block-font-size", "tier": "component", "value": "var(--font-size-sm, var(--font-size-base))" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-font-size-xs", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-line-height", "tier": "component", "value": "var(--line-height-normal)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-space-inset", "tier": "component", "value": "var(--space-3)" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--code-block-radius", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-max-height-sm", "tier": "component", "value": "12rem" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-max-height-md", "tier": "component", "value": "20rem" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-max-height-lg", "tier": "component", "value": "32rem" }, { "description": "SYNTAX COLOURS (gh#784). Twelve knobs, named for Shiki's `createCssVariablesTheme` output so a highlighter's own vocabulary maps onto them one-for-one with no translation layer. WHY THE PACKAGE OWNS THESE AT ALL. `CodeBlock` is a surface and does not highlight — its own prop docs tell a consumer to bring a highlighter and pass its spans. But the consumer rules then close every route those spans could take colour from: `style` and `className` are both visual overrides, and an app stylesheet may declare no custom properties. So the documented path was unbuildable, which is a contradiction in this package's docs rather than a missing feature on the consumer's side. Every one is `initial` with its role default at the CALL SITE (docs/TOKENS.md — the `:root` freeze rule), so light and dark come from the roles rather than from a second palette here, and a service that wants its own scheme overrides the knob without touching the roles.", "name": "--code-block-foreground", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-comment-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-keyword-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-string-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-string-expression-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-function-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-constant-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-parameter-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-punctuation-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-link-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-inserted-color", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--code-block-token-deleted-color", "tier": "component", "value": "initial" }, { "description": "`changed` is the TWELFTH name and it was missed on the first pass: gh#784's own list had eleven, I copied the list instead of the source, and shiki's theme-css-variables.ts emits twelve. It is reachable only through a CONTEXT diff (`diff -c`, `markup.changed.diff` = `^(!).*$`), which is why a unified-diff sample never produced it — a silent wrong answer rather than a missing nicety: a changed line rendered as ordinary foreground, losing the distinction the `!` marker exists to make. Reported by the consumer that tokenised all 17 grammars (gh#793).", "name": "--code-block-token-changed-color", "tier": "component", "value": "initial" }, { "description": "Prose — typography of rendered content. Heading sizes come from --heading-h1..h4, table cell measures from --table-cell-padding-*; these are the rhythm knobs.", "name": "--prose-font-size", "tier": "component", "value": "var(--font-size-base)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-font-size-sm", "tier": "component", "value": "var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)))" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-line-height", "tier": "component", "value": "var(--line-height-body)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-space-block", "tier": "component", "value": "var(--space-3)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-heading-space-block-start", "tier": "component", "value": "var(--space-6)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-list-space-inline", "tier": "component", "value": "var(--space-6)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-list-item-space", "tier": "component", "value": "var(--space-1)" }, { "description": "default = var(--stroke-md), resolved at the call site (gh#906)", "name": "--prose-quote-border-width", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-quote-space-inline", "tier": "component", "value": "var(--space-3)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-code-font-size", "tier": "component", "value": "calc(1em / var(--font-size-ratio))" }, { "description": "scale-exempt: a `pre` in prose follows the surrounding text size, so it scales with user text (gh#1320)", "name": "--prose-code-block-font-size", "tier": "component", "value": "1em" }, { "description": "Prose heading steps RELATIVE to the prose text (gh#1320): ProseMirror strips per-block attributes, so editor headings only grow with user text size by inheriting — a fixed step would not. Same default sizes as the global type scale at 14px body; `--heading-h*` still overrides.", "name": "--prose-heading-h1-font-size", "tier": "component", "value": "calc( 1em * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) )" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-heading-h2-font-size", "tier": "component", "value": "calc(1em * var(--font-size-ratio) * var(--font-size-ratio))" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-heading-h3-font-size", "tier": "component", "value": "calc(1em * var(--font-size-ratio))" }, { "description": "scale-exempt: h4–h6 sit at the prose text size, relative so they scale with it (gh#1320)", "name": "--prose-heading-h4-font-size", "tier": "component", "value": "1em" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--prose-code-space-inline", "tier": "component", "value": "var(--space-1)" }, { "description": "An image in a table cell is capped at a LENGTH, not at 100% (gh#1150): a percentage of an auto-width column lets the column squash the image to nothing, while a length makes the image's narrowest size min(natural width, this) — the table then scrolls in its box.", "name": "--prose-cell-image-max-inline-size", "tier": "component", "value": "20rem" }, { "description": "Grammar v1 blocks (gh#1156). Columns sit this far apart and stack below 40rem; a toggle's summary is the control that opens it. Callouts reuse the geometry (--callout-*).", "name": "--prose-columns-gap", "tier": "component", "value": "var(--space-6)" }, { "description": "@godxjp/block-editor (gh#1156): the start gutter the ⋮⋮ / + handle sits in, and the editing surface's minimum height (an empty body is still a target you can click into).", "name": "--block-editor-gutter-inline-size", "tier": "component", "value": "calc(2 * var(--control-height-xs) + var(--space-2))" }, { "description": "Below 40rem the gutter collapses to this (ADR C05: first line ≤24px from the inner edge) and the handle rises above the caret's block at its inline end instead of sitting beside it.", "name": "--block-editor-compact-gutter-inline-size", "tier": "component", "value": "var(--block-editor-frame-padding)" }, { "description": "Raw-Markdown block head: one step below the editor text, relative so it scales with it (gh#1320).", "name": "--block-editor-raw-block-head-font-size", "tier": "component", "value": "calc(1em / var(--font-size-ratio))" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--block-editor-min-height", "tier": "component", "value": "var(--band-height-3xl)" }, { "description": "`appearance=\"framed\"`: the inset between the frame and the text (the handle gutter is extra).", "name": "--block-editor-frame-padding", "tier": "component", "value": "var(--space-3)" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--block-editor-menu-inline-size", "tier": "component", "value": "16rem" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--block-editor-menu-max-block-size", "tier": "component", "value": "20rem" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))", "name": "--prose-code-radius", "tier": "component", "value": "initial" }, { "description": "The link ink. `initial` — not `var(--primary)` — because the default IS a tenant-scoped role: a `:root` binding computes against the root's --primary and inherits that frozen value down, so a `[data-tenant]` re-tint never reaches it (docs/TOKENS.md, the freeze rule; gh#687). The default lives at the call site in styles/data-display-layout.css and re-resolves there. Until gh#717 `a` was the ONE styled descendant family in Prose with no knob at all — headings, lists, quote, code and image each had one — which left the most common element in a wiki body un-theme-able (#45). default = hsl(var(--primary))", "name": "--prose-link-color", "tier": "component", "value": "initial" }, { "description": "Underlined at rest, same vocabulary as `--text-link-decoration-line`, and deliberately a SEPARATE knob rather than a mirror of it: `none` is legal for a link in a nav row or a card title, which is what that token governs, but Prose is running text — at the shipped inks the link differs from body copy by hue alone (1.87:1 light, 1.54:1 dark), and WCAG 1.4.1 · G183 needs 3:1 for colour to carry a link on its own (gh#664). A theme that drops the rule in chrome must not drop it here by accident.", "name": "--prose-link-decoration-line", "tier": "component", "value": "underline" }, { "description": "gh#888 — φ tier freezes at :root; default = calc(var(--radius) / var(--radius-ratio))", "name": "--prose-image-radius", "tier": "component", "value": "initial" }, { "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).", "name": "--timeline-note-font-size", "tier": "component", "value": "var( --font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)) )" }, { "description": "Avatar surface — `initial` so the --muted default re-resolves at the call site under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override never reaches it). A service re-tints the placeholder fill once (e.g. --avatar-background: hsl(var(--accent))). Default = hsl(var(--muted)).", "name": "--avatar-background", "tier": "component", "value": "initial" }, { "description": "default = 100% at the call site", "name": "--avatar-background-alpha", "tier": "component", "value": "initial" }, { "description": "Optional role wash over the avatar (default transparent = invisible, rule #44). Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08).", "name": "--avatar-tint", "tier": "component", "value": "transparent" }, { "description": "Avatar SIZE LADDER — `` (gh#716). The mark is a control-row citizen: it sits inside an `icon-sm` trigger, in a 24px dense table row, beside a Button on the same line. Before this ladder the box was welded to `--control-height`, so a 32px mark inside a 28px trigger OVERFLOWED it and the only legal move left to a consumer was to raise the whole row. Each step therefore reads the SAME `--control-height-*` tier every other control reads (never a px, never a calc offset), which is what makes `size=\"sm\"` measure exactly as tall as `