diff --git a/CHANGELOG.md b/CHANGELOG.md index 1dc31357..ea6a37b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ## Unreleased ### Features +- **tokens:** add `--sf-density` (PUBLIC-ADVANCED, default `1`) — the compact ↔ comfortable dial for interactive control **geometry**. It scales the `--sf-size-*` rung ladder (24·32·40·48·56px at `1`); below `1` packs controls tighter for dashboards / data tables / power-user tools, above `1` loosens them. A deliberate design or user-preference choice, **not** viewport-fluid (control height must not shrink on small screens where touch targets need to grow), so the size ladder — previously static literals scaled by no knob — now moves only by this one dial. Orthogonal to `--sf-space-scale` (whitespace) and `--sf-section-scale` (section rhythm); combine them for a fully compact UI. The `--sf-touch-target` accessibility floor stays independent, so a small value can't pull native controls under the WCAG target. Wired through the configurator (spacing domain) and the LLM guide's global-multipliers section. - **motion:** add `.sf-stagger` — put it on a parent and every direct child gets an incrementing `animation-delay`, so a group of time-based entrance animations (`.sf-fade-in` / `.sf-slide-in-*`) plays in sequence. Works on any number of children with no manual per-item index: where `sibling-index()` is supported the ramp is unbounded, otherwise it falls back to an 8-step `:nth-child` ramp (covering a 4-column grid's first two rows) that plateaus. One knob, `--sf-stagger-step` (default `75ms`), retunes the whole sequence; each child's delay is `index × --sf-stagger-step × --sf-motion-scale`. Choreography only — a child without its own animation just carries an inert delay, so animating only some children needs no opt-out on the rest. - **tokens:** the `.sf-hover-*` transform utilities now read magnitude knobs instead of hard-coded values — `--sf-hover-grow-scale` (1.05), `--sf-hover-shrink-scale` (0.95), `--sf-hover-lift` (0.25em, float/sink), `--sf-hover-slide` (0.5em, slide-start/end) — so each effect's strength is one global override. diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json index d84edc17..c4fa4e18 100644 --- a/configurator/src/data/api-index.generated.json +++ b/configurator/src/data/api-index.generated.json @@ -2,21 +2,21 @@ "_sync": { "generatedBy": "configurator/scripts/sync-api.mjs", "source": "docs/api-index.json", - "tokensHash": "5624c486ab4d", + "tokensHash": "2733b25b05b9", "bundles": [ "full", "optimal" ], "counts": { - "tokens": 755, + "tokens": 756, "byTier": { "PUBLIC": 695, - "PUBLIC-ADVANCED": 59, + "PUBLIC-ADVANCED": 60, "INTERNAL": 1 }, "byCategory": { "Layout tokens": 53, - "Core tokens": 622, + "Core tokens": 623, "Macro tokens": 34, "Component tokens": 46 } @@ -7855,6 +7855,27 @@ "optimal" ] }, + { + "name": "--sf-density", + "tier": "PUBLIC-ADVANCED", + "role": "knob", + "namespace": "density", + "category": "Core tokens", + "group": "Density", + "description": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).", + "note": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).", + "value": "1", + "aliasOf": null, + "registered": false, + "syntax": null, + "fallbackOnly": false, + "optional": false, + "layer": "slashed.tokens", + "bundles": [ + "full", + "optimal" + ] + }, { "name": "--sf-display-l-line-height", "tier": "PUBLIC", @@ -13168,13 +13189,13 @@ { "name": "--sf-size-l", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "group": "UI sizes", "description": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "note": "Large UI component height (~48px). Touch-friendly interactive elements.", - "value": "3rem", + "value": "calc(3rem * var(--sf-density))", "aliasOf": null, "registered": false, "syntax": null, @@ -13189,13 +13210,13 @@ { "name": "--sf-size-m", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "group": "UI sizes", "description": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "note": "~40px UI component height (scale rung `m`). The default `.sf-btn` min-height.", - "value": "2.5rem", + "value": "calc(2.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "syntax": null, @@ -13210,13 +13231,13 @@ { "name": "--sf-size-s", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "group": "UI sizes", "description": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "note": "Small UI component height (~32px). Compact buttons and input variants.", - "value": "2rem", + "value": "calc(2rem * var(--sf-density))", "aliasOf": null, "registered": false, "syntax": null, @@ -13231,13 +13252,13 @@ { "name": "--sf-size-xl", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "group": "UI sizes", "description": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "note": "Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.", - "value": "3.5rem", + "value": "calc(3.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "syntax": null, @@ -13252,13 +13273,13 @@ { "name": "--sf-size-xs", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "group": "UI sizes", "description": "Fixed sizes for interactive components (buttons, inputs, chips) at S / M / L.", "note": "Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.", - "value": "1.5rem", + "value": "calc(1.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "syntax": null, diff --git a/configurator/src/data/domain-patterns.json b/configurator/src/data/domain-patterns.json index 190df640..7ecddd0b 100644 --- a/configurator/src/data/domain-patterns.json +++ b/configurator/src/data/domain-patterns.json @@ -5,7 +5,7 @@ "body-em", "body-text", "heading-text", "display-l-", "display-m-", "-h1-", "-h2-", "-h3-", "-h4-", "-h5-", "-h6-", "link-", "optical-sizing", "fluid-width", "fluid-min-vw", "fluid-max-vw"], - "spacing": ["space", "section", "gutter", "content-gap", "component-pad"], + "spacing": ["space", "section", "gutter", "content-gap", "component-pad", "density"], "layout": ["container", "layout", "grid", "breakpoint", "measure", "column", "header-height", "touch-target", "bento", "cluster", "cover-min", "equal-min", "equal-rule", "frame", "ratio-", "reel", "safe-", "sidebar", diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json index 94704541..9aacaf4f 100644 --- a/configurator/src/data/token-registry.generated.json +++ b/configurator/src/data/token-registry.generated.json @@ -1,7 +1,7 @@ { "_meta": { "generatedBy": "scripts/gen-token-registry.js", - "nextId": 797 + "nextId": 798 }, "tokens": [ { @@ -3233,6 +3233,10 @@ { "id": 796, "name": "--sf-stagger-step" + }, + { + "id": 797, + "name": "--sf-density" } ] } diff --git a/core/tokens.css b/core/tokens.css index 8f85e4fe..a5c8ce84 100644 --- a/core/tokens.css +++ b/core/tokens.css @@ -1175,18 +1175,38 @@ --sf-space-3xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale)); --sf-space-4xl: calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 5) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 5) * 1rem)) * var(--sf-space-scale)); + /* ---------------------------------------------------------- + Density — the compact ↔ comfortable dial for interactive + control GEOMETRY. 1 = default; <1 packs controls tighter + (dashboards, data tables, power-user tools), >1 loosens them. + It is a discrete design/product choice (or a user preference), + NOT a viewport response — control height must never shrink on + small screens where touch targets need to be larger, so unlike + the fluid text and space scales the size ladder stays non-fluid + and is scaled only by this deliberate knob. Orthogonal to + --sf-space-scale (overall whitespace) and --sf-section-scale + (macro section rhythm); combine them for a fully compact UI. + Accessibility is unaffected: the coarse-pointer floor lives on + --sf-touch-target (core/accessibility.css), never on a rung, so + a small --sf-density can't shrink native controls below the + WCAG target. Like the other global multipliers it is a :root + dial — the size ladder is computed at :root and inherits, so a + nested override does not retroactively rescale it (same + computed-value rule as --sf-space-scale et al.). */ + --sf-density: 1; + /* ---------------------------------------------------------- UI sizes — a purely geometric rung ladder (+0.5rem / 8px per - step: 24 · 32 · 40 · 48 · 56 px). These are free design knobs: - nothing external constrains them, so overriding them just - rescales component heights. Accessibility floors live on their - own tokens (--sf-touch-target), never on a rung — see below. + step: 24 · 32 · 40 · 48 · 56 px at density 1). These are free + design knobs, scaled by --sf-density; overriding a rung just + rescales that component height. Accessibility floors live on + their own tokens (--sf-touch-target), never on a rung. ---------------------------------------------------------- */ - --sf-size-xs: 1.5rem; - --sf-size-s: 2rem; - --sf-size-m: 2.5rem; - --sf-size-l: 3rem; - --sf-size-xl: 3.5rem; + --sf-size-xs: calc(1.5rem * var(--sf-density)); + --sf-size-s: calc(2rem * var(--sf-density)); + --sf-size-m: calc(2.5rem * var(--sf-density)); + --sf-size-l: calc(3rem * var(--sf-density)); + --sf-size-xl: calc(3.5rem * var(--sf-density)); /* ---------------------------------------------------------- Containers diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html index a04dd405..f9996762 100644 --- a/demos/full-api-demo-with-overrides.html +++ b/demos/full-api-demo-with-overrides.html @@ -122,7 +122,7 @@

SLASHED Full API Demo

-

v0.7.16 · full bundle from jsDelivr CDN · 330 classes · 755 tokens (270 configurable)

+

v0.7.16 · full bundle from jsDelivr CDN · 330 classes · 756 tokens (266 configurable)

ultimate-override.css is ACTIVE. Every value below is recomputed from perturbed knob tokens — toggle it off in the toolbar, or compare against the un-overridden page.
@@ -1277,7 +1277,7 @@

Theme 3

-

Part 2 — Complete token reference 755 tokens · live values

+

Part 2 — Complete token reference 756 tokens · live values

Every --sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.

color 255

--sf-color-action
…
--sf-color-action--active
…
--sf-color-action--hover
…
--sf-color-action-100
…
--sf-color-action-200
…
--sf-color-action-300
…
--sf-color-action-400
…
--sf-color-action-50
…
--sf-color-action-500
…
--sf-color-action-600
…
--sf-color-action-700
…
--sf-color-action-800
…
--sf-color-action-900
…
--sf-color-action-950
…
--sf-color-action-a10
…
--sf-color-action-a30
…
--sf-color-action-a5
…
--sf-color-action-a50
…
--sf-color-action-a80
…
--sf-color-action-darker
…
--sf-color-action-lighter
…
--sf-color-action-muted
…
--sf-color-action-source-dark
…
--sf-color-action-source-light
…
--sf-color-action-subtle
…
--sf-color-action-superdark
…
--sf-color-action-superlight
…
--sf-color-action-tint
…
--sf-color-action-xdark
…
--sf-color-action-xlight
…
--sf-color-base
…
--sf-color-base--active
…
--sf-color-base--hover
…
--sf-color-base-100
…
--sf-color-base-200
…
--sf-color-base-300
…
--sf-color-base-400
…
--sf-color-base-50
…
--sf-color-base-500
…
--sf-color-base-600
…
--sf-color-base-700
…
--sf-color-base-800
…
--sf-color-base-900
…
--sf-color-base-950
…
--sf-color-base-a10
…
--sf-color-base-a30
…
--sf-color-base-a5
…
--sf-color-base-a50
…
--sf-color-base-a80
…
--sf-color-base-muted
…
--sf-color-base-source-dark
…
--sf-color-base-source-light
…
--sf-color-base-subtle
…
--sf-color-base-tint
…
--sf-color-bg
…
--sf-color-bg--active
…
--sf-color-bg--disabled
…
--sf-color-bg--focus
…
--sf-color-bg--hover
…
--sf-color-bg--selected
…
--sf-color-black
…
--sf-color-border
…
--sf-color-border--disabled
…
--sf-color-border--focus
…
--sf-color-border--strong
…
--sf-color-border--subtle
…
--sf-color-border--translucent
…
--sf-color-code-bg
…
--sf-color-code-text
…
--sf-color-danger
…
--sf-color-danger-muted
…
--sf-color-danger-source-dark
…
--sf-color-danger-source-light
…
--sf-color-danger-strong
…
--sf-color-danger-subtle
…
--sf-color-danger-tint
…
--sf-color-dim
…
--sf-color-heading
…
--sf-color-info
…
--sf-color-info-muted
…
--sf-color-info-source-dark
…
--sf-color-info-source-light
…
--sf-color-info-strong
…
--sf-color-info-subtle
…
--sf-color-info-tint
…
--sf-color-inset
…
--sf-color-inverse
…
--sf-color-link
…
--sf-color-link--active
…
--sf-color-link--disabled
…
--sf-color-link--hover
…
--sf-color-link--underline
…
--sf-color-link--visited
…
--sf-color-mark-bg
…
--sf-color-mark-text
…
--sf-color-neutral
…
--sf-color-neutral--active
…
--sf-color-neutral--hover
…
--sf-color-neutral-100
…
--sf-color-neutral-200
…
--sf-color-neutral-300
…
--sf-color-neutral-400
…
--sf-color-neutral-50
…
--sf-color-neutral-500
…
--sf-color-neutral-600
…
--sf-color-neutral-700
…
--sf-color-neutral-800
…
--sf-color-neutral-900
…
--sf-color-neutral-950
…
--sf-color-neutral-a10
…
--sf-color-neutral-a30
…
--sf-color-neutral-a5
…
--sf-color-neutral-a50
…
--sf-color-neutral-a80
…
--sf-color-neutral-darker
…
--sf-color-neutral-lighter
…
--sf-color-neutral-muted
…
--sf-color-neutral-source-dark
…
--sf-color-neutral-source-light
…
--sf-color-neutral-subtle
…
--sf-color-neutral-superdark
…
--sf-color-neutral-superlight
…
--sf-color-neutral-tint
…
--sf-color-neutral-xdark
…
--sf-color-neutral-xlight
…
--sf-color-overlay
…
--sf-color-primary
…
--sf-color-primary--active
…
--sf-color-primary--hover
…
--sf-color-primary-100
…
--sf-color-primary-200
…
--sf-color-primary-300
…
--sf-color-primary-400
…
--sf-color-primary-50
…
--sf-color-primary-500
…
--sf-color-primary-600
…
--sf-color-primary-700
…
--sf-color-primary-800
…
--sf-color-primary-900
…
--sf-color-primary-950
…
--sf-color-primary-a10
…
--sf-color-primary-a30
…
--sf-color-primary-a5
…
--sf-color-primary-a50
…
--sf-color-primary-a80
…
--sf-color-primary-darker
…
--sf-color-primary-lighter
…
--sf-color-primary-muted
…
--sf-color-primary-source-dark
…
--sf-color-primary-source-light
…
--sf-color-primary-subtle
…
--sf-color-primary-superdark
…
--sf-color-primary-superlight
…
--sf-color-primary-tint
…
--sf-color-primary-xdark
…
--sf-color-primary-xlight
…
--sf-color-raised
…
--sf-color-scheme
…
--sf-color-secondary
…
--sf-color-secondary--active
…
--sf-color-secondary--hover
…
--sf-color-secondary-100
…
--sf-color-secondary-200
…
--sf-color-secondary-300
…
--sf-color-secondary-400
…
--sf-color-secondary-50
…
--sf-color-secondary-500
…
--sf-color-secondary-600
…
--sf-color-secondary-700
…
--sf-color-secondary-800
…
--sf-color-secondary-900
…
--sf-color-secondary-950
…
--sf-color-secondary-a10
…
--sf-color-secondary-a30
…
--sf-color-secondary-a5
…
--sf-color-secondary-a50
…
--sf-color-secondary-a80
…
--sf-color-secondary-darker
…
--sf-color-secondary-lighter
…
--sf-color-secondary-muted
…
--sf-color-secondary-source-dark
…
--sf-color-secondary-source-light
…
--sf-color-secondary-subtle
…
--sf-color-secondary-superdark
…
--sf-color-secondary-superlight
…
--sf-color-secondary-tint
…
--sf-color-secondary-xdark
…
--sf-color-secondary-xlight
…
--sf-color-selection-bg
…
--sf-color-selection-bg--alt
…
--sf-color-selection-text
…
--sf-color-selection-text--alt
…
--sf-color-success
…
--sf-color-success-muted
…
--sf-color-success-source-dark
…
--sf-color-success-source-light
…
--sf-color-success-strong
…
--sf-color-success-subtle
…
--sf-color-success-tint
…
--sf-color-surface
…
--sf-color-tertiary
…
--sf-color-tertiary--active
…
--sf-color-tertiary--hover
…
--sf-color-tertiary-100
…
--sf-color-tertiary-200
…
--sf-color-tertiary-300
…
--sf-color-tertiary-400
…
--sf-color-tertiary-50
…
--sf-color-tertiary-500
…
--sf-color-tertiary-600
…
--sf-color-tertiary-700
…
--sf-color-tertiary-800
…
--sf-color-tertiary-900
…
--sf-color-tertiary-950
…
--sf-color-tertiary-a10
…
--sf-color-tertiary-a30
…
--sf-color-tertiary-a5
…
--sf-color-tertiary-a50
…
--sf-color-tertiary-a80
…
--sf-color-tertiary-darker
…
--sf-color-tertiary-lighter
…
--sf-color-tertiary-muted
…
--sf-color-tertiary-source-dark
…
--sf-color-tertiary-source-light
…
--sf-color-tertiary-subtle
…
--sf-color-tertiary-superdark
…
--sf-color-tertiary-superlight
…
--sf-color-tertiary-tint
…
--sf-color-tertiary-xdark
…
--sf-color-tertiary-xlight
…
--sf-color-text
…
--sf-color-text--disabled
…
--sf-color-text--inverse
…
--sf-color-text--muted
…
--sf-color-text--on-action
…
--sf-color-text--on-base
…
--sf-color-text--on-danger
…
--sf-color-text--on-info
…
--sf-color-text--on-inverse
…
--sf-color-text--on-neutral
…
--sf-color-text--on-primary
…
--sf-color-text--on-secondary
…
--sf-color-text--on-success
…
--sf-color-text--on-tertiary
…
--sf-color-text--on-warning
…
--sf-color-text--placeholder
…
--sf-color-text--secondary
…
--sf-color-warning
…
--sf-color-warning-muted
…
--sf-color-warning-source-dark
…
--sf-color-warning-source-light
…
--sf-color-warning-strong
…
--sf-color-warning-subtle
…
--sf-color-warning-tint
…
--sf-color-white
…
@@ -1359,6 +1359,8 @@

cover 2

--sf-cover-min-height
…
--sf-cover-padding
…

current 1

--sf-current-font-weight…
+

density 1

+
--sf-density adv…

display 3

--sf-display-l-line-height…
--sf-display-m-line-height…
--sf-display-s-line-height…

divider 4

diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html index 7bb9616c..117e369e 100644 --- a/demos/full-api-demo.html +++ b/demos/full-api-demo.html @@ -121,7 +121,7 @@

SLASHED Full API Demo

-

v0.7.16 · full bundle from jsDelivr CDN · 330 classes · 755 tokens (270 configurable)

+

v0.7.16 · full bundle from jsDelivr CDN · 330 classes · 756 tokens (266 configurable)

Baseline render with default tokens. Use the toolbar to switch theme, toggle the ultimate override live, or replay motion. The always-on override variant is full-api-demo-with-overrides.html.
@@ -1276,7 +1276,7 @@

Theme 3

-

Part 2 — Complete token reference 755 tokens · live values

+

Part 2 — Complete token reference 756 tokens · live values

Every --sf-* token — knob and consumption, all tiers — with its live computed value (filled by JS). Toggle the theme or the override in the toolbar and watch every value recompute. Tokens that resolve to a colour, length, shadow, gradient, type or motion value also show a visual.

color 255

--sf-color-action
…
--sf-color-action--active
…
--sf-color-action--hover
…
--sf-color-action-100
…
--sf-color-action-200
…
--sf-color-action-300
…
--sf-color-action-400
…
--sf-color-action-50
…
--sf-color-action-500
…
--sf-color-action-600
…
--sf-color-action-700
…
--sf-color-action-800
…
--sf-color-action-900
…
--sf-color-action-950
…
--sf-color-action-a10
…
--sf-color-action-a30
…
--sf-color-action-a5
…
--sf-color-action-a50
…
--sf-color-action-a80
…
--sf-color-action-darker
…
--sf-color-action-lighter
…
--sf-color-action-muted
…
--sf-color-action-source-dark
…
--sf-color-action-source-light
…
--sf-color-action-subtle
…
--sf-color-action-superdark
…
--sf-color-action-superlight
…
--sf-color-action-tint
…
--sf-color-action-xdark
…
--sf-color-action-xlight
…
--sf-color-base
…
--sf-color-base--active
…
--sf-color-base--hover
…
--sf-color-base-100
…
--sf-color-base-200
…
--sf-color-base-300
…
--sf-color-base-400
…
--sf-color-base-50
…
--sf-color-base-500
…
--sf-color-base-600
…
--sf-color-base-700
…
--sf-color-base-800
…
--sf-color-base-900
…
--sf-color-base-950
…
--sf-color-base-a10
…
--sf-color-base-a30
…
--sf-color-base-a5
…
--sf-color-base-a50
…
--sf-color-base-a80
…
--sf-color-base-muted
…
--sf-color-base-source-dark
…
--sf-color-base-source-light
…
--sf-color-base-subtle
…
--sf-color-base-tint
…
--sf-color-bg
…
--sf-color-bg--active
…
--sf-color-bg--disabled
…
--sf-color-bg--focus
…
--sf-color-bg--hover
…
--sf-color-bg--selected
…
--sf-color-black
…
--sf-color-border
…
--sf-color-border--disabled
…
--sf-color-border--focus
…
--sf-color-border--strong
…
--sf-color-border--subtle
…
--sf-color-border--translucent
…
--sf-color-code-bg
…
--sf-color-code-text
…
--sf-color-danger
…
--sf-color-danger-muted
…
--sf-color-danger-source-dark
…
--sf-color-danger-source-light
…
--sf-color-danger-strong
…
--sf-color-danger-subtle
…
--sf-color-danger-tint
…
--sf-color-dim
…
--sf-color-heading
…
--sf-color-info
…
--sf-color-info-muted
…
--sf-color-info-source-dark
…
--sf-color-info-source-light
…
--sf-color-info-strong
…
--sf-color-info-subtle
…
--sf-color-info-tint
…
--sf-color-inset
…
--sf-color-inverse
…
--sf-color-link
…
--sf-color-link--active
…
--sf-color-link--disabled
…
--sf-color-link--hover
…
--sf-color-link--underline
…
--sf-color-link--visited
…
--sf-color-mark-bg
…
--sf-color-mark-text
…
--sf-color-neutral
…
--sf-color-neutral--active
…
--sf-color-neutral--hover
…
--sf-color-neutral-100
…
--sf-color-neutral-200
…
--sf-color-neutral-300
…
--sf-color-neutral-400
…
--sf-color-neutral-50
…
--sf-color-neutral-500
…
--sf-color-neutral-600
…
--sf-color-neutral-700
…
--sf-color-neutral-800
…
--sf-color-neutral-900
…
--sf-color-neutral-950
…
--sf-color-neutral-a10
…
--sf-color-neutral-a30
…
--sf-color-neutral-a5
…
--sf-color-neutral-a50
…
--sf-color-neutral-a80
…
--sf-color-neutral-darker
…
--sf-color-neutral-lighter
…
--sf-color-neutral-muted
…
--sf-color-neutral-source-dark
…
--sf-color-neutral-source-light
…
--sf-color-neutral-subtle
…
--sf-color-neutral-superdark
…
--sf-color-neutral-superlight
…
--sf-color-neutral-tint
…
--sf-color-neutral-xdark
…
--sf-color-neutral-xlight
…
--sf-color-overlay
…
--sf-color-primary
…
--sf-color-primary--active
…
--sf-color-primary--hover
…
--sf-color-primary-100
…
--sf-color-primary-200
…
--sf-color-primary-300
…
--sf-color-primary-400
…
--sf-color-primary-50
…
--sf-color-primary-500
…
--sf-color-primary-600
…
--sf-color-primary-700
…
--sf-color-primary-800
…
--sf-color-primary-900
…
--sf-color-primary-950
…
--sf-color-primary-a10
…
--sf-color-primary-a30
…
--sf-color-primary-a5
…
--sf-color-primary-a50
…
--sf-color-primary-a80
…
--sf-color-primary-darker
…
--sf-color-primary-lighter
…
--sf-color-primary-muted
…
--sf-color-primary-source-dark
…
--sf-color-primary-source-light
…
--sf-color-primary-subtle
…
--sf-color-primary-superdark
…
--sf-color-primary-superlight
…
--sf-color-primary-tint
…
--sf-color-primary-xdark
…
--sf-color-primary-xlight
…
--sf-color-raised
…
--sf-color-scheme
…
--sf-color-secondary
…
--sf-color-secondary--active
…
--sf-color-secondary--hover
…
--sf-color-secondary-100
…
--sf-color-secondary-200
…
--sf-color-secondary-300
…
--sf-color-secondary-400
…
--sf-color-secondary-50
…
--sf-color-secondary-500
…
--sf-color-secondary-600
…
--sf-color-secondary-700
…
--sf-color-secondary-800
…
--sf-color-secondary-900
…
--sf-color-secondary-950
…
--sf-color-secondary-a10
…
--sf-color-secondary-a30
…
--sf-color-secondary-a5
…
--sf-color-secondary-a50
…
--sf-color-secondary-a80
…
--sf-color-secondary-darker
…
--sf-color-secondary-lighter
…
--sf-color-secondary-muted
…
--sf-color-secondary-source-dark
…
--sf-color-secondary-source-light
…
--sf-color-secondary-subtle
…
--sf-color-secondary-superdark
…
--sf-color-secondary-superlight
…
--sf-color-secondary-tint
…
--sf-color-secondary-xdark
…
--sf-color-secondary-xlight
…
--sf-color-selection-bg
…
--sf-color-selection-bg--alt
…
--sf-color-selection-text
…
--sf-color-selection-text--alt
…
--sf-color-success
…
--sf-color-success-muted
…
--sf-color-success-source-dark
…
--sf-color-success-source-light
…
--sf-color-success-strong
…
--sf-color-success-subtle
…
--sf-color-success-tint
…
--sf-color-surface
…
--sf-color-tertiary
…
--sf-color-tertiary--active
…
--sf-color-tertiary--hover
…
--sf-color-tertiary-100
…
--sf-color-tertiary-200
…
--sf-color-tertiary-300
…
--sf-color-tertiary-400
…
--sf-color-tertiary-50
…
--sf-color-tertiary-500
…
--sf-color-tertiary-600
…
--sf-color-tertiary-700
…
--sf-color-tertiary-800
…
--sf-color-tertiary-900
…
--sf-color-tertiary-950
…
--sf-color-tertiary-a10
…
--sf-color-tertiary-a30
…
--sf-color-tertiary-a5
…
--sf-color-tertiary-a50
…
--sf-color-tertiary-a80
…
--sf-color-tertiary-darker
…
--sf-color-tertiary-lighter
…
--sf-color-tertiary-muted
…
--sf-color-tertiary-source-dark
…
--sf-color-tertiary-source-light
…
--sf-color-tertiary-subtle
…
--sf-color-tertiary-superdark
…
--sf-color-tertiary-superlight
…
--sf-color-tertiary-tint
…
--sf-color-tertiary-xdark
…
--sf-color-tertiary-xlight
…
--sf-color-text
…
--sf-color-text--disabled
…
--sf-color-text--inverse
…
--sf-color-text--muted
…
--sf-color-text--on-action
…
--sf-color-text--on-base
…
--sf-color-text--on-danger
…
--sf-color-text--on-info
…
--sf-color-text--on-inverse
…
--sf-color-text--on-neutral
…
--sf-color-text--on-primary
…
--sf-color-text--on-secondary
…
--sf-color-text--on-success
…
--sf-color-text--on-tertiary
…
--sf-color-text--on-warning
…
--sf-color-text--placeholder
…
--sf-color-text--secondary
…
--sf-color-warning
…
--sf-color-warning-muted
…
--sf-color-warning-source-dark
…
--sf-color-warning-source-light
…
--sf-color-warning-strong
…
--sf-color-warning-subtle
…
--sf-color-warning-tint
…
--sf-color-white
…
@@ -1358,6 +1358,8 @@

cover 2

--sf-cover-min-height
…
--sf-cover-padding
…

current 1

--sf-current-font-weight…
+

density 1

+
--sf-density adv…

display 3

--sf-display-l-line-height…
--sf-display-m-line-height…
--sf-display-s-line-height…

divider 4

diff --git a/demos/generate.mjs b/demos/generate.mjs index 5b167267..f53b19a9 100644 --- a/demos/generate.mjs +++ b/demos/generate.mjs @@ -204,6 +204,7 @@ const CURATED = { '--sf-text-scale': '1.6', '--sf-text-display-scale': '1.6', '--sf-motion-scale': '1.6', + '--sf-density': '1.6', }; const LEN_UNIT = /^(-?[\d.]+)(px|rem|em|ch|vw|vh|dvh|svh|lvh|vmin|vmax|pt|cm|mm|ex|cap|lh|q)$/i; diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css index 935c049c..0681332b 100644 --- a/demos/ultimate-override.css +++ b/demos/ultimate-override.css @@ -5,7 +5,7 @@ Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct value so full-api-demo.html can prove each one is wired end to end. - Coverage: 242 of 270 knob tokens overridden. + Coverage: 238 of 266 knob tokens overridden. 28 knobs are intentionally NOT perturbed (structural / meta / sentinel) — listed with reasons at the bottom of this file. ============================================================================ */ @@ -123,6 +123,9 @@ /* cover */ --sf-cover-min-height: 160dvh; /* was: 100dvh */ + /* density */ + --sf-density: 1.6; /* was: 1 */ + /* display */ --sf-display-l-line-height: 1.2; /* was: 1 */ --sf-display-m-line-height: 1.25; /* was: 1.05 */ @@ -325,13 +328,6 @@ --sf-sidebar-min-width: 35%; /* was: 50% */ --sf-sidebar-width: 28.8rem; /* was: 18rem */ - /* size */ - --sf-size-l: 4.8rem; /* was: 3rem */ - --sf-size-m: 4rem; /* was: 2.5rem */ - --sf-size-s: 3.2rem; /* was: 2rem */ - --sf-size-xl: 5.6rem; /* was: 3.5rem */ - --sf-size-xs: 2.4rem; /* was: 1.5rem */ - /* space */ --sf-space-base-max: 3; /* was: 2 */ --sf-space-base-min: 1.4; /* was: 1 */ diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json index a8ea6069..be9a3401 100644 --- a/dist/css-custom-data.json +++ b/dist/css-custom-data.json @@ -1876,6 +1876,11 @@ "description": "Inherits the current font-weight from context. Useful as a reset.\n\nDefault: `var(--sf-font-weight-bold)`", "syntax": "*" }, + { + "name": "--sf-density", + "description": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).\n\nDefault: `1`\n\n(advanced token)", + "syntax": "*" + }, { "name": "--sf-display-l-line-height", "description": "Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes.\n\nDefault: `1`", @@ -3138,27 +3143,27 @@ }, { "name": "--sf-size-l", - "description": "Large UI component height (~48px). Touch-friendly interactive elements.\n\nDefault: `3rem`", + "description": "Large UI component height (~48px). Touch-friendly interactive elements.\n\nDefault: `calc(3rem * var(--sf-density))`", "syntax": "*" }, { "name": "--sf-size-m", - "description": "~40px UI component height (scale rung `m`). The default `.sf-btn` min-height.\n\nDefault: `2.5rem`", + "description": "~40px UI component height (scale rung `m`). The default `.sf-btn` min-height.\n\nDefault: `calc(2.5rem * var(--sf-density))`", "syntax": "*" }, { "name": "--sf-size-s", - "description": "Small UI component height (~32px). Compact buttons and input variants.\n\nDefault: `2rem`", + "description": "Small UI component height (~32px). Compact buttons and input variants.\n\nDefault: `calc(2rem * var(--sf-density))`", "syntax": "*" }, { "name": "--sf-size-xl", - "description": "Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.\n\nDefault: `3.5rem`", + "description": "Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.\n\nDefault: `calc(3.5rem * var(--sf-density))`", "syntax": "*" }, { "name": "--sf-size-xs", - "description": "Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.\n\nDefault: `1.5rem`", + "description": "Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.\n\nDefault: `calc(1.5rem * var(--sf-density))`", "syntax": "*" }, { diff --git a/docs/api-index.json b/docs/api-index.json index b49c965e..2956904b 100644 --- a/docs/api-index.json +++ b/docs/api-index.json @@ -26,21 +26,21 @@ "optimal" ], "counts": { - "total": 1086, + "total": 1087, "by_type": { "class": 331, - "token": 755 + "token": 756 }, "by_tier": { "INTERNAL": 1, "PUBLIC": 1026, - "PUBLIC-ADVANCED": 59 + "PUBLIC-ADVANCED": 60 }, "by_role": { - "consumption": 485, - "knob": 270 + "consumption": 490, + "knob": 266 }, - "tokens": 755, + "tokens": 756, "classes": 331, "sf_classes": 294, "is_classes": 28, @@ -49,7 +49,7 @@ "Accessibility": 8, "Component tokens": 46, "Components": 30, - "Core tokens": 622, + "Core tokens": 623, "Forms": 1, "Layout primitives": 145, "Layout tokens": 53, @@ -9798,6 +9798,32 @@ "optimal" ] }, + { + "name": "--sf-density", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "role": "knob", + "namespace": "density", + "category": "Core tokens", + "area": "core", + "group": "Density", + "description": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "full", + "optimal" + ] + }, { "name": "--sf-display-l-line-height", "type": "token", @@ -16377,13 +16403,13 @@ "name": "--sf-size-l", "type": "token", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "area": "core", "group": "UI sizes", "description": "Large UI component height (~48px). Touch-friendly interactive elements.", - "value": "3rem", + "value": "calc(3rem * var(--sf-density))", "aliasOf": null, "registered": false, "animatable": false, @@ -16403,13 +16429,13 @@ "name": "--sf-size-m", "type": "token", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "area": "core", "group": "UI sizes", "description": "~40px UI component height (scale rung `m`). The default `.sf-btn` min-height.", - "value": "2.5rem", + "value": "calc(2.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "animatable": false, @@ -16429,13 +16455,13 @@ "name": "--sf-size-s", "type": "token", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "area": "core", "group": "UI sizes", "description": "Small UI component height (~32px). Compact buttons and input variants.", - "value": "2rem", + "value": "calc(2rem * var(--sf-density))", "aliasOf": null, "registered": false, "animatable": false, @@ -16455,13 +16481,13 @@ "name": "--sf-size-xl", "type": "token", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "area": "core", "group": "UI sizes", "description": "Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls.", - "value": "3.5rem", + "value": "calc(3.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "animatable": false, @@ -16481,13 +16507,13 @@ "name": "--sf-size-xs", "type": "token", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "namespace": "size", "category": "Core tokens", "area": "core", "group": "UI sizes", "description": "Extra-small interactive component height (~24px). For very compact inline elements and micro-controls.", - "value": "1.5rem", + "value": "calc(1.5rem * var(--sf-density))", "aliasOf": null, "registered": false, "animatable": false, diff --git a/docs/api-index.md b/docs/api-index.md index 2313c27b..ae23d267 100644 --- a/docs/api-index.md +++ b/docs/api-index.md @@ -10,15 +10,15 @@ and a short description. The machine-readable companion (with all columns) is [registry.json](registry.json); for the tier contract see [architecture.md](architecture.md). -**1086 elements** — 755 tokens, 331 classes. +**1087 elements** — 756 tokens, 331 classes. | Tier | Count | Meaning | |---|---|---| | PUBLIC | 1026 | Everyday surface. SemVer-stable. | -| PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. | +| PUBLIC-ADVANCED | 60 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | -## Tokens (755) +## Tokens (756) ### Component tokens (46) @@ -71,7 +71,7 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-field-padding-inline` | PUBLIC | consumption | field | `var(--sf-space-s)` | Horizontal (inline) inner padding for form field inputs. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. | | `--sf-field-radius` | PUBLIC | consumption | field | `var(--sf-radius-m)` | Border radius for form field inputs. Defaults to --sf-radius-m; override to reshape all inputs at once. Reserved for a future .sf-field class — declared but not yet consumed by any shipped rule. | -### Core tokens (622) +### Core tokens (623) | Token | Tier | Role | Namespace | Default | Description | |---|---|---|---|---|---| @@ -379,6 +379,7 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-contrast-bias` | PUBLIC-ADVANCED | knob | contrast | `0` | Global text-contrast nudge. Positive values push derived reading-text colors toward the extremes (darker in light mode, lighter in dark). Default 0 (neutral). | | `--sf-contrast-threshold` | PUBLIC-ADVANCED | knob | contrast | `0.6` | OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6. | | `--sf-current-font-weight` | PUBLIC | consumption | current | `var(--sf-font-weight-bold)` | Inherits the current font-weight from context. Useful as a reset. | +| `--sf-density` | PUBLIC-ADVANCED | knob | density | `1` | Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it). | | `--sf-display-l-line-height` | PUBLIC | knob | display | `1` | Line height for large display text (--sf-text-display-l). Very tight to avoid excessive gaps at oversized sizes. | | `--sf-display-m-line-height` | PUBLIC | knob | display | `1.05` | Line height for medium display text (--sf-text-display-m). | | `--sf-display-s-line-height` | PUBLIC | consumption | display | `var(--sf-leading-tight)` | Line height for small display text (--sf-text-display-s). | @@ -582,11 +583,11 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-shadow-strength` | PUBLIC-ADVANCED | knob | shadow | `calc(0.08 + var(--sf-is-dark) * 0.17)` | Base opacity for the entire shadow ramp. Auto-boosted in dark mode via --sf-is-dark. Override with calc() to preserve the adaptation: e.g. calc(0.12 + var(--sf-is-dark) * 0.17). | | `--sf-shadow-xl` | PUBLIC | consumption | shadow | `0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` | Extra-large shadow for modals, dialogs, and high-elevation sheets. | | `--sf-shadow-xs` | PUBLIC | consumption | shadow | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))` | Extra-small shadow for barely-elevated elements (focused inputs, small chips). | -| `--sf-size-l` | PUBLIC | knob | size | `3rem` | Large UI component height (~48px). Touch-friendly interactive elements. | -| `--sf-size-m` | PUBLIC | knob | size | `2.5rem` | ~40px UI component height (scale rung `m`). The default `.sf-btn` min-height. | -| `--sf-size-s` | PUBLIC | knob | size | `2rem` | Small UI component height (~32px). Compact buttons and input variants. | -| `--sf-size-xl` | PUBLIC | knob | size | `3.5rem` | Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls. | -| `--sf-size-xs` | PUBLIC | knob | size | `1.5rem` | Extra-small interactive component height (~24px). For very compact inline elements and micro-controls. | +| `--sf-size-l` | PUBLIC | consumption | size | `calc(3rem * var(--sf-density))` | Large UI component height (~48px). Touch-friendly interactive elements. | +| `--sf-size-m` | PUBLIC | consumption | size | `calc(2.5rem * var(--sf-density))` | ~40px UI component height (scale rung `m`). The default `.sf-btn` min-height. | +| `--sf-size-s` | PUBLIC | consumption | size | `calc(2rem * var(--sf-density))` | Small UI component height (~32px). Compact buttons and input variants. | +| `--sf-size-xl` | PUBLIC | consumption | size | `calc(3.5rem * var(--sf-density))` | Extra-large interactive component height (~56px). For oversized or prominently touch-friendly controls. | +| `--sf-size-xs` | PUBLIC | consumption | size | `calc(1.5rem * var(--sf-density))` | Extra-small interactive component height (~24px). For very compact inline elements and micro-controls. | | `--sf-space-2xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))` | 48px-equivalent spacing. Large section spacing. | | `--sf-space-2xs` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))` | 4px-equivalent spacing. Tight inline gaps, icon-to-text padding. | | `--sf-space-3xl` | PUBLIC | consumption | space | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))` | 64px-equivalent spacing. Extra-large layout gaps. | diff --git a/docs/llm-guide.md b/docs/llm-guide.md index 659444a7..81c0011d 100644 --- a/docs/llm-guide.md +++ b/docs/llm-guide.md @@ -1204,7 +1204,20 @@ One token changes the entire design. Override on `:root`. All are PUBLIC-ADVANCE --sf-space-scale: 1 /* global fluid spacing multiplier */ --sf-text-scale: 1 /* global body type scale multiplier */ --sf-text-display-scale: 1 /* global display type scale multiplier */ -``` +--sf-density: 1 /* control-size ladder (--sf-size-*): <1 compact, >1 roomy */ +``` + +`--sf-density` is the compact ↔ comfortable dial for interactive control +**geometry** (the `--sf-size-*` rung ladder). Unlike `--sf-text-*` / `--sf-space-*` +it is intentionally **not** viewport-fluid — control height must not shrink on +small screens where touch targets need to grow — so the size ladder is static and +moves only by this deliberate knob (a product mode or user preference), never +automatically. It is orthogonal to `--sf-space-scale` (whitespace) and +`--sf-section-scale` (section rhythm); combine them for a fully compact UI. The +`--sf-touch-target` accessibility floor is independent, so a small `--sf-density` +cannot pull native controls under the WCAG target. Like the other multipliers in +this section it is a `:root` dial — the `--sf-size-*` ladder is computed at `:root` +and inherits, so a nested override does not retroactively rescale it. --- diff --git a/docs/registry.json b/docs/registry.json index bfafa997..7ed38d57 100644 --- a/docs/registry.json +++ b/docs/registry.json @@ -20,7 +20,7 @@ "optional/utilities.css" ], "counts": { - "tokens": 755, + "tokens": 756, "sf_classes": 294, "is_classes": 28 } @@ -401,6 +401,7 @@ "--sf-cover-min-height", "--sf-cover-padding", "--sf-current-font-weight", + "--sf-density", "--sf-display-l-line-height", "--sf-display-m-line-height", "--sf-display-s-line-height", diff --git a/docs/test-coverage-6-token-reference.html b/docs/test-coverage-6-token-reference.html index d8b1d7a8..97fd56ee 100644 --- a/docs/test-coverage-6-token-reference.html +++ b/docs/test-coverage-6-token-reference.html @@ -109,7 +109,7 @@

Full token reference — tokens

else apply(next); }); - var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-corner-scoop-at","--sf-corner-scoop-size","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-hover-grow-scale","--sf-hover-lift","--sf-hover-shrink-scale","--sf-hover-slide","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-stagger-step","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"]; + var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-corner-scoop-at","--sf-corner-scoop-size","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-density","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-hover-grow-scale","--sf-hover-lift","--sf-hover-shrink-scale","--sf-hover-slide","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-stagger-step","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"]; document.getElementById('tok-count').textContent = TOKENS.length; var grid = document.getElementById('tok-grid'); var filter = document.getElementById('token-filter'); diff --git a/docs/token-annotations.json b/docs/token-annotations.json index 65114ab1..b1cfb69f 100644 --- a/docs/token-annotations.json +++ b/docs/token-annotations.json @@ -801,6 +801,7 @@ "--sf-motion-scale": "Global motion multiplier. All transition and animation durations multiply by this factor. Set to 0 to disable all motion; reduce below 1 for snappier feel.", "--sf-radius-scale": "Global border-radius multiplier. Scales the entire radius ramp up (>1) or down (<1) from one knob. Set to 0 for sharp corners everywhere.", "--sf-space-scale": "Global spacing multiplier. Scales the fluid spacing ramp. Increase above 1 for airier layouts; reduce below 1 for compact UIs.", + "--sf-density": "Compact ↔ comfortable dial for interactive control geometry (the --sf-size-* rung ladder). Default 1; below 1 packs controls tighter (dashboards, data tables), above 1 loosens them. A deliberate design/user choice, not a viewport response — orthogonal to --sf-space-scale (whitespace) and --sf-section-scale (section rhythm). The --sf-touch-target accessibility floor is independent, so a small value can't shrink native controls below the WCAG target. Like the other global multipliers it is a :root dial (the size ladder is computed at :root and inherits, so nested overrides don't retroactively rescale it).", "--sf-text-scale": "Global type-size multiplier. Scales the entire fluid type scale. 1.08 gives noticeably larger body text without breaking layout.", "--sf-text-display-scale": "Multiplier applied only to the display/hero type scale (--sf-text-display-*). Tune headline impact independently of body text.", "--sf-palette-mix-50": "Color-mix percentage for the lightest palette step (50). Controls how far step 50 blends toward the surface. Default 4%.", diff --git a/docs/token-index.json b/docs/token-index.json index 6a7b0e06..3239988b 100644 --- a/docs/token-index.json +++ b/docs/token-index.json @@ -8,15 +8,15 @@ "optional/tokens.components.css" ], "counts": { - "tokens": 755, + "tokens": 756, "by_tier": { "PUBLIC": 695, - "PUBLIC-ADVANCED": 59, + "PUBLIC-ADVANCED": 60, "INTERNAL": 1 }, "by_role": { - "knob": 270, - "consumption": 485 + "knob": 266, + "consumption": 490 } } }, @@ -3021,6 +3021,14 @@ ], "value": "var(--sf-font-weight-bold)" }, + "--sf-density": { + "tier": "PUBLIC-ADVANCED", + "role": "knob", + "files": [ + "core/tokens.css" + ], + "value": "1" + }, "--sf-display-l-line-height": { "tier": "PUBLIC", "role": "knob", @@ -5047,43 +5055,43 @@ }, "--sf-size-l": { "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "files": [ "core/tokens.css" ], - "value": "3rem" + "value": "calc(3rem * var(--sf-density))" }, "--sf-size-m": { "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "files": [ "core/tokens.css" ], - "value": "2.5rem" + "value": "calc(2.5rem * var(--sf-density))" }, "--sf-size-s": { "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "files": [ "core/tokens.css" ], - "value": "2rem" + "value": "calc(2rem * var(--sf-density))" }, "--sf-size-xl": { "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "files": [ "core/tokens.css" ], - "value": "3.5rem" + "value": "calc(3.5rem * var(--sf-density))" }, "--sf-size-xs": { "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "files": [ "core/tokens.css" ], - "value": "1.5rem" + "value": "calc(1.5rem * var(--sf-density))" }, "--sf-space-2xl": { "tier": "PUBLIC", diff --git a/docs/token-index.md b/docs/token-index.md index 7725350a..1198278d 100644 --- a/docs/token-index.md +++ b/docs/token-index.md @@ -8,12 +8,12 @@ A cross-reference of every `--sf-*` custom property by **source file** and for the flat name list see [registry.json](registry.json); for the tier contract and naming rules see [architecture.md](architecture.md). -**755 tokens** (deduplicated by name across the 4 token source files). +**756 tokens** (deduplicated by name across the 4 token source files). | Tier | Count | Meaning | |---|---|---| | PUBLIC | 695 | Everyday knobs. SemVer-stable. | -| PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. | +| PUBLIC-ADVANCED | 60 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | Every token also carries a **role** — an orthogonal, SemVer-neutral hint about @@ -22,8 +22,8 @@ declared value (a value that references `var(--sf-…)` is a derived output): | Role | Count | Meaning | |---|---|---| -| knob | 270 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). | -| consumption | 485 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | +| knob | 266 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). | +| consumption | 490 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | ## INTERNAL tokens @@ -37,6 +37,7 @@ declared value (a value that references `var(--sf-…)` is a derived output): - `--sf-btn-padding-inline` - `--sf-contrast-bias` - `--sf-contrast-threshold` +- `--sf-density` - `--sf-fluid-max-vw` - `--sf-fluid-min-vw` - `--sf-focus-ring-shadow` @@ -470,6 +471,7 @@ declared value (a value that references `var(--sf-…)` is a derived output): | `--sf-cover-min-height` | PUBLIC | knob | Layout | `100dvh` | | `--sf-cover-padding` | PUBLIC | consumption | Layout | `var(--sf-section-pad)` | | `--sf-current-font-weight` | PUBLIC | consumption | Core | `var(--sf-font-weight-bold)` | +| `--sf-density` | PUBLIC-ADVANCED | knob | Core | `1` | | `--sf-display-l-line-height` | PUBLIC | knob | Core | `1` | | `--sf-display-m-line-height` | PUBLIC | knob | Core | `1.05` | | `--sf-display-s-line-height` | PUBLIC | consumption | Core | `var(--sf-leading-tight)` | @@ -723,11 +725,11 @@ declared value (a value that references `var(--sf-…)` is a derived output): | `--sf-sidebar-gap` | PUBLIC | consumption | Layout | `var(--sf-gap)` | | `--sf-sidebar-min-width` | PUBLIC | knob | Layout | `50%` | | `--sf-sidebar-width` | PUBLIC | knob | Layout | `18rem` | -| `--sf-size-l` | PUBLIC | knob | Core | `3rem` | -| `--sf-size-m` | PUBLIC | knob | Core | `2.5rem` | -| `--sf-size-s` | PUBLIC | knob | Core | `2rem` | -| `--sf-size-xl` | PUBLIC | knob | Core | `3.5rem` | -| `--sf-size-xs` | PUBLIC | knob | Core | `1.5rem` | +| `--sf-size-l` | PUBLIC | consumption | Core | `calc(3rem * var(--sf-density))` | +| `--sf-size-m` | PUBLIC | consumption | Core | `calc(2.5rem * var(--sf-density))` | +| `--sf-size-s` | PUBLIC | consumption | Core | `calc(2rem * var(--sf-density))` | +| `--sf-size-xl` | PUBLIC | consumption | Core | `calc(3.5rem * var(--sf-density))` | +| `--sf-size-xs` | PUBLIC | consumption | Core | `calc(1.5rem * var(--sf-density))` | | `--sf-space-2xl` | PUBLIC | consumption | Core | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))` | | `--sf-space-2xs` | PUBLIC | consumption | Core | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))` | | `--sf-space-3xl` | PUBLIC | consumption | Core | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))` | diff --git a/docs/tokens.md b/docs/tokens.md index 58f4b351..c2c3ac7b 100644 --- a/docs/tokens.md +++ b/docs/tokens.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-token-reference.js` — > run `npm run docs:tokens` to refresh. Do not edit by hand. -**755 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. +**756 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. If a token is defined in multiple files, it is listed once per section — so this count can be higher than `docs/registry.json` (which deduplicates by name). See [architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL @@ -13,7 +13,7 @@ rebrand workflow. ## Core tokens (`core/tokens.css`) -622 tokens. +623 tokens. | Token | Default | |---|---| @@ -321,6 +321,7 @@ rebrand workflow. | `--sf-contrast-bias` | `0` | | `--sf-contrast-threshold` | `0.6` | | `--sf-current-font-weight` | `var(--sf-font-weight-bold)` | +| `--sf-density` | `1` | | `--sf-display-l-line-height` | `1` | | `--sf-display-m-line-height` | `1.05` | | `--sf-display-s-line-height` | `var(--sf-leading-tight)` | @@ -524,11 +525,11 @@ rebrand workflow. | `--sf-shadow-strength` | `calc(0.08 + var(--sf-is-dark) * 0.17)` | | `--sf-shadow-xl` | `0 2px 8px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 12px 36px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3.5), 0.7)), 0 24px 72px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))` | | `--sf-shadow-xs` | `0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))` | -| `--sf-size-l` | `3rem` | -| `--sf-size-m` | `2.5rem` | -| `--sf-size-s` | `2rem` | -| `--sf-size-xl` | `3.5rem` | -| `--sf-size-xs` | `1.5rem` | +| `--sf-size-l` | `calc(3rem * var(--sf-density))` | +| `--sf-size-m` | `calc(2.5rem * var(--sf-density))` | +| `--sf-size-s` | `calc(2rem * var(--sf-density))` | +| `--sf-size-xl` | `calc(3.5rem * var(--sf-density))` | +| `--sf-size-xs` | `calc(1.5rem * var(--sf-density))` | | `--sf-space-2xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 3) * 1rem)) * var(--sf-space-scale))` | | `--sf-space-2xs` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), -3) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), -3) * 1rem)) * var(--sf-space-scale))` | | `--sf-space-3xl` | `calc(clamp(calc(var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc((var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) - var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4)) / (var(--sf-fluid-max-vw) - var(--sf-fluid-min-vw)) * (var(--sf-fluid-width) - var(--sf-fluid-min-vw) * 1rem) + var(--sf-space-base-min) * pow(var(--sf-space-ratio-min), 4) * 1rem), calc(var(--sf-space-base-max) * pow(var(--sf-space-ratio-max), 4) * 1rem)) * var(--sf-space-scale))` | diff --git a/reports/full-api-audit/results/tokens-report.json b/reports/full-api-audit/results/tokens-report.json index ce419042..7fed84ca 100644 --- a/reports/full-api-audit/results/tokens-report.json +++ b/reports/full-api-audit/results/tokens-report.json @@ -1,7 +1,7 @@ { "summary": { - "totalTokens": 755, - "rendered": 755, + "totalTokens": 756, + "rendered": 756, "consoleErrors": 0, "requestFailures": 0, "empties": 48, @@ -8227,66 +8227,66 @@ { "name": "--sf-size-l", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "category": "Core tokens", - "declared": "2.75rem", + "declared": "calc(3rem * var(--sf-density))", "aliasOf": null, "issues": [], - "computed": "2.75rem", - "shown": "2.75rem", - "darkComputed": "2.75rem", + "computed": "calc(3rem * 1)", + "shown": "calc(3rem * 1)", + "darkComputed": "calc(3rem * 1)", "changedInDark": false }, { "name": "--sf-size-m", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "category": "Core tokens", - "declared": "2.5rem", + "declared": "calc(2.5rem * var(--sf-density))", "aliasOf": null, "issues": [], - "computed": "2.5rem", - "shown": "2.5rem", - "darkComputed": "2.5rem", + "computed": "calc(2.5rem * 1)", + "shown": "calc(2.5rem * 1)", + "darkComputed": "calc(2.5rem * 1)", "changedInDark": false }, { "name": "--sf-size-s", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "category": "Core tokens", - "declared": "2rem", + "declared": "calc(2rem * var(--sf-density))", "aliasOf": null, "issues": [], - "computed": "2rem", - "shown": "2rem", - "darkComputed": "2rem", + "computed": "calc(2rem * 1)", + "shown": "calc(2rem * 1)", + "darkComputed": "calc(2rem * 1)", "changedInDark": false }, { "name": "--sf-size-xl", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "category": "Core tokens", - "declared": "3.5rem", + "declared": "calc(3.5rem * var(--sf-density))", "aliasOf": null, "issues": [], - "computed": "3.5rem", - "shown": "3.5rem", - "darkComputed": "3.5rem", + "computed": "calc(3.5rem * 1)", + "shown": "calc(3.5rem * 1)", + "darkComputed": "calc(3.5rem * 1)", "changedInDark": false }, { "name": "--sf-size-xs", "tier": "PUBLIC", - "role": "knob", + "role": "consumption", "category": "Core tokens", - "declared": "1.5rem", + "declared": "calc(1.5rem * var(--sf-density))", "aliasOf": null, "issues": [], - "computed": "1.5rem", - "shown": "1.5rem", - "darkComputed": "1.5rem", + "computed": "calc(1.5rem * 1)", + "shown": "calc(1.5rem * 1)", + "darkComputed": "calc(1.5rem * 1)", "changedInDark": false }, { @@ -9928,6 +9928,19 @@ "shown": "8px", "darkComputed": "8px", "changedInDark": false + }, + { + "name": "--sf-density", + "tier": "PUBLIC-ADVANCED", + "role": "knob", + "category": "Core tokens", + "declared": "1", + "aliasOf": null, + "issues": [], + "computed": "1", + "shown": "1", + "darkComputed": "1", + "changedInDark": false } ] } diff --git a/scripts/token-tiers.js b/scripts/token-tiers.js index 0ff6e797..954e4215 100644 --- a/scripts/token-tiers.js +++ b/scripts/token-tiers.js @@ -45,6 +45,7 @@ const ADVANCED = new Set([ '--sf-font-features', '--sf-font-variation', '--sf-optical-sizing', '--sf-space-scale', '--sf-text-scale', '--sf-text-display-scale', '--sf-radius-scale', '--sf-motion-scale', '--sf-section-scale', + '--sf-density', '--sf-leading-taper', '--sf-fluid-min-vw', '--sf-fluid-max-vw', '--sf-text-ratio-min', '--sf-text-ratio-max', diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json index 08485708..bef23631 100644 --- a/tests/token-api.snapshot.json +++ b/tests/token-api.snapshot.json @@ -374,6 +374,7 @@ "--sf-cover-min-height", "--sf-cover-padding", "--sf-current-font-weight", + "--sf-density", "--sf-display-l-line-height", "--sf-display-m-line-height", "--sf-display-s-line-height", diff --git a/tests/tokens.spec.js b/tests/tokens.spec.js index e781b768..e1e67b8c 100644 --- a/tests/tokens.spec.js +++ b/tests/tokens.spec.js @@ -340,3 +340,42 @@ test('button per-size label knobs retune one rung; font-scale multiplies the lad expect(boxBefore.mh).not.toBeCloseTo(112, 0); expect(boxAfter.mh).toBeCloseTo(112, 0); }); + +// ---- Density: one knob scales the whole --sf-size-* geometric ladder ------ +test('--sf-density scales the --sf-size-* ladder uniformly (default 1 = 24/32/40/48/56px)', async ({ browser }) => { + const page = await browser.newPage(); + await page.goto(FIXTURE); + + const measure = () => page.evaluate(() => { + const rungs = ['xs', 's', 'm', 'l', 'xl']; + const read = () => Object.fromEntries(rungs.map((r) => { + const el = document.createElement('div'); + el.style.blockSize = `var(--sf-size-${r})`; + document.body.appendChild(el); + const px = parseFloat(getComputedStyle(el).blockSize); + el.remove(); + return [r, px]; + })); + return read(); + }); + + const base = await measure(); + // Default ladder: 24 · 32 · 40 · 48 · 56 px. + expect(base.xs).toBeCloseTo(24, 0); + expect(base.m).toBeCloseTo(40, 0); + expect(base.xl).toBeCloseTo(56, 0); + + // Compact: every rung shrinks by the same factor — ladder preserved, not flattened. + await page.evaluate(() => document.documentElement.style.setProperty('--sf-density', '0.8')); + const compact = await measure(); + for (const r of ['xs', 's', 'm', 'l', 'xl']) { + expect(compact[r] / base[r], `${r} ×density`).toBeCloseTo(0.8, 2); + } + + // Roomy: same knob loosens the ladder. + await page.evaluate(() => document.documentElement.style.setProperty('--sf-density', '1.25')); + const roomy = await measure(); + expect(roomy.m / base.m).toBeCloseTo(1.25, 2); + + await page.close(); +}); diff --git a/token-registry.json b/token-registry.json index 94704541..9aacaf4f 100644 --- a/token-registry.json +++ b/token-registry.json @@ -1,7 +1,7 @@ { "_meta": { "generatedBy": "scripts/gen-token-registry.js", - "nextId": 797 + "nextId": 798 }, "tokens": [ { @@ -3233,6 +3233,10 @@ { "id": 796, "name": "--sf-stagger-step" + }, + { + "id": 797, + "name": "--sf-density" } ] }