From 207e6f55988b3d4e5277500d160cabbc94a060e7 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 11 Jul 2026 20:39:59 +0000 Subject: [PATCH 1/3] refactor(components)!: drop the .sf-card auto-shrink of nested button labels MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size, var(--sf-text-s)) }` rule silently pinned every button nested in a card to the text-s label size, so the same .sf-btn rendered smaller inside a card than outside it (and a .sf-btn--xl in a footer lost its size). This context-dependent restyling — one component quietly overriding another — was surprising and is the only rule of its kind in the framework, so it is removed. Buttons in cards now render at their own size (default = text-m), like anywhere else — the Bootstrap/Tailwind model. Add .sf-btn--s explicitly for a compact card action, or scope a size tier on a card variant to shrink them in bulk. - Remove the .sf-card .sf-btn rule (optional/components.css). - Remove the now-orphaned --sf-card-btn-font-size token, its annotation, its llm-guide entry, and the configurator "Nested button size" control. - Regenerate registry/docs/demos/api-index (755 tokens, was 756); update the token-api snapshot, audit report and coverage list. - Document the break in docs/migration.md and CHANGELOG (Breaking Changes). Verified in Chromium: a default .sf-btn in a card footer now measures text-m (19.4px), identical to outside a card; an explicit .sf-btn--s stays text-s. BREAKING CHANGE: buttons nested in .sf-card no longer auto-shrink to text-s; add .sf-btn--s for a compact card action. The --sf-card-btn-font-size token is removed. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w --- CHANGELOG.md | 3 ++ .../components/panels/ComponentsPanel.svelte | 17 --------- .../src/data/api-index.generated.json | 28 ++------------ .../src/data/token-registry.generated.json | 3 +- demos/full-api-demo-with-overrides.html | 8 ++-- demos/full-api-demo.html | 8 ++-- dist/css-custom-data.json | 5 --- docs/api-index.json | 37 +++---------------- docs/api-index.md | 9 ++--- docs/llm-guide.md | 1 - docs/migration.md | 30 +++++++++++++++ docs/registry.json | 3 +- docs/test-coverage-6-token-reference.html | 2 +- docs/token-annotations.json | 1 - docs/token-index.json | 14 ++----- docs/token-index.md | 7 ++-- docs/tokens.md | 5 +-- optional/components.css | 11 +----- optional/tokens.components.css | 7 ++-- .../full-api-audit/results/tokens-report.json | 19 +--------- tests/token-api.snapshot.json | 1 - token-registry.json | 3 +- 22 files changed, 76 insertions(+), 146 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd243be2..4ca7cf7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ## Unreleased +### Breaking Changes +- **components:** `.sf-btn` nested in `.sf-card` no longer auto-shrinks its label to `--sf-text-s`. Buttons in cards now render at their own size like anywhere else; add `.sf-btn--s` for a compact card action. The orphaned `--sf-card-btn-font-size` token is removed. See `docs/migration.md`. + ## [0.7.15] - 2026-07-11 ### Features diff --git a/configurator/src/components/panels/ComponentsPanel.svelte b/configurator/src/components/panels/ComponentsPanel.svelte index 845f750f..76b80705 100644 --- a/configurator/src/components/panels/ComponentsPanel.svelte +++ b/configurator/src/components/panels/ComponentsPanel.svelte @@ -586,23 +586,6 @@ -
-
Nested button size — --sf-card-btn-font-size
-
- {#each TEXT_STEPS as step (step)} - {@const cur = currentStep("--sf-card-btn-font-size", "text", TEXT_STEPS, "s")} - - {/each} -
-
-
Media object-fit — --sf-object-fit (global, affects all img/video)
diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json index b1507913..ed70e0aa 100644 --- a/configurator/src/data/api-index.generated.json +++ b/configurator/src/data/api-index.generated.json @@ -2,15 +2,15 @@ "_sync": { "generatedBy": "configurator/scripts/sync-api.mjs", "source": "docs/api-index.json", - "tokensHash": "ed57360d56f3", + "tokensHash": "ea14629a05b1", "bundles": [ "full", "optimal" ], "counts": { - "tokens": 756, + "tokens": 755, "byTier": { - "PUBLIC": 696, + "PUBLIC": 695, "PUBLIC-ADVANCED": 59, "INTERNAL": 1 }, @@ -18,7 +18,7 @@ "Layout tokens": 53, "Core tokens": 622, "Macro tokens": 34, - "Component tokens": 47 + "Component tokens": 46 } } }, @@ -1922,26 +1922,6 @@ "full" ] }, - { - "name": "--sf-card-btn-font-size", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "card", - "category": "Component tokens", - "group": "CARD TOKENS", - "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.", - "note": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.", - "value": "var(--sf-text-s)", - "aliasOf": "--sf-text-s", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": true, - "layer": "slashed.tokens", - "bundles": [ - "full" - ] - }, { "name": "--sf-card-gap", "tier": "PUBLIC", diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json index c0f81997..d2f1fd0a 100644 --- a/configurator/src/data/token-registry.generated.json +++ b/configurator/src/data/token-registry.generated.json @@ -2942,7 +2942,8 @@ }, { "id": 725, - "name": "--sf-card-btn-font-size" + "name": "--sf-card-btn-font-size", + "removed": true }, { "id": 726, diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html index 91840f70..6b5b3afc 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.15 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)

+

v0.7.15 · full bundle from jsDelivr CDN · 328 classes · 755 tokens (265 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.
@@ -1273,7 +1273,7 @@

Theme 3

-

Part 2 — Complete token reference 756 tokens · live values

+

Part 2 — Complete token reference 755 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
…
@@ -1331,8 +1331,8 @@

breakout 1

--sf-breakout-width
…

btn 29

--sf-btn-border-width
…
--sf-btn-font-scale…
--sf-btn-font-size adv…
--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 adv…
--sf-btn-padding-block adv…
--sf-btn-padding-inline adv…
--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…
-

card 15

-
--sf-card-avatar-size…
--sf-card-bg…
--sf-card-border-color…
--sf-card-border-width…
--sf-card-btn-font-size…
--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…
+

card 14

+
--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…

caret 1

--sf-caret-color…

center 2

diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html index cb2fbb77..583e6553 100644 --- a/demos/full-api-demo.html +++ b/demos/full-api-demo.html @@ -121,7 +121,7 @@

SLASHED Full API Demo

-

v0.7.15 · full bundle from jsDelivr CDN · 328 classes · 756 tokens (265 configurable)

+

v0.7.15 · full bundle from jsDelivr CDN · 328 classes · 755 tokens (265 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.
@@ -1272,7 +1272,7 @@

Theme 3

-

Part 2 — Complete token reference 756 tokens · live values

+

Part 2 — Complete token reference 755 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
…
@@ -1330,8 +1330,8 @@

breakout 1

--sf-breakout-width
…

btn 29

--sf-btn-border-width
…
--sf-btn-font-scale…
--sf-btn-font-size adv…
--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 adv…
--sf-btn-padding-block adv…
--sf-btn-padding-inline adv…
--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…
-

card 15

-
--sf-card-avatar-size…
--sf-card-bg…
--sf-card-border-color…
--sf-card-border-width…
--sf-card-btn-font-size…
--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…
+

card 14

+
--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…

caret 1

--sf-caret-color…

center 2

diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json index 41d3eb8a..52028b27 100644 --- a/dist/css-custom-data.json +++ b/dist/css-custom-data.json @@ -461,11 +461,6 @@ "description": "Border thickness for .sf-card.\n\nDefault: `var(--sf-border-width-1)`", "syntax": "*" }, - { - "name": "--sf-card-btn-font-size", - "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.\n\nDefault: `var(--sf-text-s)`", - "syntax": "*" - }, { "name": "--sf-card-gap", "description": "Divider spacing for .sf-card__header / __footer (padding + margin around the rule).\n\nDefault: `var(--sf-space-m)`", diff --git a/docs/api-index.json b/docs/api-index.json index 93d8c9b6..8c2e1aff 100644 --- a/docs/api-index.json +++ b/docs/api-index.json @@ -26,28 +26,28 @@ "optimal" ], "counts": { - "total": 1085, + "total": 1084, "by_type": { "class": 329, - "token": 756 + "token": 755 }, "by_tier": { "INTERNAL": 1, - "PUBLIC": 1025, + "PUBLIC": 1024, "PUBLIC-ADVANCED": 59 }, "by_role": { - "consumption": 491, + "consumption": 490, "knob": 265 }, - "tokens": 756, + "tokens": 755, "classes": 329, "sf_classes": 292, "is_classes": 28, "unprefixed_classes": 9, "by_category": { "Accessibility": 8, - "Component tokens": 47, + "Component tokens": 46, "Components": 30, "Core tokens": 622, "Layout primitives": 145, @@ -2449,31 +2449,6 @@ "full" ] }, - { - "name": "--sf-card-btn-font-size", - "type": "token", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "card", - "category": "Component tokens", - "area": "components", - "group": "CARD TOKENS", - "description": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.", - "value": "var(--sf-text-s)", - "aliasOf": "--sf-text-s", - "registered": false, - "animatable": false, - "syntax": null, - "inherits": null, - "optional": true, - "layer": "slashed.tokens", - "sourceFiles": [ - "optional/tokens.components.css" - ], - "bundles": [ - "full" - ] - }, { "name": "--sf-card-gap", "type": "token", diff --git a/docs/api-index.md b/docs/api-index.md index ff2a1ecb..f7824d95 100644 --- a/docs/api-index.md +++ b/docs/api-index.md @@ -10,17 +10,17 @@ 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). -**1085 elements** — 756 tokens, 329 classes. +**1084 elements** — 755 tokens, 329 classes. | Tier | Count | Meaning | |---|---|---| -| PUBLIC | 1025 | Everyday surface. SemVer-stable. | +| PUBLIC | 1024 | Everyday surface. SemVer-stable. | | PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | -## Tokens (756) +## Tokens (755) -### Component tokens (47) +### Component tokens (46) | Token | Tier | Role | Namespace | Default | Description | |---|---|---|---|---|---| @@ -57,7 +57,6 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-card-bg` | PUBLIC | consumption | card | `var(--sf-color-surface)` | Background surface for .sf-card. Defaults to --sf-color-surface. | | `--sf-card-border-color` | PUBLIC | consumption | card | `var(--sf-color-border)` | Border colour for .sf-card. Defaults to --sf-color-border. | | `--sf-card-border-width` | PUBLIC | consumption | card | `var(--sf-border-width-1)` | Border thickness for .sf-card. | -| `--sf-card-btn-font-size` | PUBLIC | consumption | card | `var(--sf-text-s)` | Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s. | | `--sf-card-gap` | PUBLIC | consumption | card | `var(--sf-space-m)` | Divider spacing for .sf-card__header / __footer (padding + margin around the rule). | | `--sf-card-heading-size` | PUBLIC | consumption | card | `var(--sf-text-xl)` | Font-size for .sf-card__title. Defaults to --sf-text-xl. | | `--sf-card-media-radius` | PUBLIC | consumption | card | `var(--sf-card-radius, var(--sf-radius-m))` | Corner radius for .sf-card__media. Mirrors the card's inner radius by default. | diff --git a/docs/llm-guide.md b/docs/llm-guide.md index 80f8e3d5..1cf8c678 100644 --- a/docs/llm-guide.md +++ b/docs/llm-guide.md @@ -1151,7 +1151,6 @@ Component tokens from `optional/tokens.components.css`: --sf-card-media-radius: var(--sf-card-radius, var(--sf-radius-m)) --sf-card-avatar-size: 2.5rem --sf-card-heading-size: var(--sf-text-xl) ---sf-card-btn-font-size: var(--sf-text-s) ``` `.sf-btn` colour families (all 10, 1:1 with the palette): `--primary diff --git a/docs/migration.md b/docs/migration.md index e1e77281..22327a43 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -37,6 +37,36 @@ button min-height to the accessibility anchor — globally: or per-button with `.sf-btn--l` (`--sf-size-l`, 48px). In the configurator this is the **Min height → touch-target** choice. +### `.sf-btn` inside `.sf-card` no longer auto-shrinks its label (breaking) + +A `.sf-card .sf-btn { --sf-btn-font-size--size: var(--sf-card-btn-font-size, +var(--sf-text-s)) }` rule used to silently pin every button nested in a card to +the `--sf-text-s` label size — so the *same* `.sf-btn` rendered smaller inside a +card than outside it, and a `.sf-btn--xl` in a card footer lost its size. This +context-dependent restyling was surprising (one component quietly overriding +another) and is the only rule of its kind, so it has been removed. The +now-orphaned `--sf-card-btn-font-size` token is deleted. + +**What changed for you:** buttons in cards now render at their own size (default +`.sf-btn` = `--sf-text-m`), exactly as they do anywhere else — the Bootstrap / +Tailwind model where an element looks the same regardless of container. + +**Restore the compact card action** by sizing the button explicitly — the same +way you would anywhere else: + +```html +
+ +
+``` + +Or, to shrink *every* button inside a given card without touching each one, set +the size tier on that card: + +```css +.sf-card--compact .sf-btn { --sf-btn-font-size--size: var(--sf-text-s); } +``` + ### `--sf-touch-target` decoupled from `--sf-size-l`; size scale regularised (breaking) `--sf-touch-target` used to be `var(--sf-size-l)`, which coupled the WCAG 2.5.5 diff --git a/docs/registry.json b/docs/registry.json index d6b2dc76..982b3f83 100644 --- a/docs/registry.json +++ b/docs/registry.json @@ -20,7 +20,7 @@ "optional/utilities.css" ], "counts": { - "tokens": 756, + "tokens": 755, "sf_classes": 292, "is_classes": 28 } @@ -118,7 +118,6 @@ "--sf-card-bg", "--sf-card-border-color", "--sf-card-border-width", - "--sf-card-btn-font-size", "--sf-card-gap", "--sf-card-heading-size", "--sf-card-media-radius", diff --git a/docs/test-coverage-6-token-reference.html b/docs/test-coverage-6-token-reference.html index 0f289280..f289e227 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-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5","--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-btn-font-size","--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-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-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-delay-1","--sf-animation-delay-2","--sf-animation-delay-3","--sf-animation-delay-4","--sf-animation-delay-5","--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-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-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 146b3598..d8c9081a 100644 --- a/docs/token-annotations.json +++ b/docs/token-annotations.json @@ -767,7 +767,6 @@ "--sf-card-media-ratio": "Aspect ratio for .sf-card__media. Defaults to --sf-ratio-video (16/9).", "--sf-card-media-radius": "Corner radius for .sf-card__media. Mirrors the card's inner radius by default.", "--sf-card-heading-size": "Font-size for .sf-card__title. Defaults to --sf-text-xl.", - "--sf-card-btn-font-size": "Font-size a .sf-btn shrinks to when nested inside a .sf-card. Defaults to --sf-text-s.", "--sf-h1-max-width": "Max-inline-size cap for

. Default none (unconstrained). Set to a ch value (e.g. 20ch) to prevent wide headings from spanning the full column on large screens.", "--sf-h2-max-width": "Max-inline-size cap for

. Default none.", "--sf-h3-max-width": "Max-inline-size cap for

. Default none.", diff --git a/docs/token-index.json b/docs/token-index.json index f947a906..468b3a97 100644 --- a/docs/token-index.json +++ b/docs/token-index.json @@ -8,15 +8,15 @@ "optional/tokens.components.css" ], "counts": { - "tokens": 756, + "tokens": 755, "by_tier": { - "PUBLIC": 696, + "PUBLIC": 695, "PUBLIC-ADVANCED": 59, "INTERNAL": 1 }, "by_role": { "knob": 265, - "consumption": 491 + "consumption": 490 } } }, @@ -757,14 +757,6 @@ ], "value": "var(--sf-border-width-1)" }, - "--sf-card-btn-font-size": { - "tier": "PUBLIC", - "role": "consumption", - "files": [ - "optional/tokens.components.css" - ], - "value": "var(--sf-text-s)" - }, "--sf-card-gap": { "tier": "PUBLIC", "role": "consumption", diff --git a/docs/token-index.md b/docs/token-index.md index ecf078f5..70cf76cf 100644 --- a/docs/token-index.md +++ b/docs/token-index.md @@ -8,11 +8,11 @@ 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). -**756 tokens** (deduplicated by name across the 4 token source files). +**755 tokens** (deduplicated by name across the 4 token source files). | Tier | Count | Meaning | |---|---|---| -| PUBLIC | 696 | Everyday knobs. SemVer-stable. | +| PUBLIC | 695 | Everyday knobs. SemVer-stable. | | PUBLIC-ADVANCED | 59 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | @@ -23,7 +23,7 @@ declared value (a value that references `var(--sf-…)` is a derived output): | Role | Count | Meaning | |---|---|---| | knob | 265 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). | -| consumption | 491 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | +| consumption | 490 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | ## INTERNAL tokens @@ -187,7 +187,6 @@ declared value (a value that references `var(--sf-…)` is a derived output): | `--sf-card-bg` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-surface)` | | `--sf-card-border-color` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-color-border)` | | `--sf-card-border-width` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-border-width-1)` | -| `--sf-card-btn-font-size` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-text-s)` | | `--sf-card-gap` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-space-m)` | | `--sf-card-heading-size` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-text-xl)` | | `--sf-card-media-radius` | PUBLIC | consumption | Components (optional, incomplete) | `var(--sf-card-radius, var(--sf-radius-m))` | diff --git a/docs/tokens.md b/docs/tokens.md index fb4fe843..990b71d0 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. -**756 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. +**755 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 @@ -743,7 +743,7 @@ rebrand workflow. ## Component tokens (`optional/tokens.components.css`) -47 tokens. +46 tokens. | Token | Default | |---|---| @@ -780,7 +780,6 @@ rebrand workflow. | `--sf-card-bg` | `var(--sf-color-surface)` | | `--sf-card-border-color` | `var(--sf-color-border)` | | `--sf-card-border-width` | `var(--sf-border-width-1)` | -| `--sf-card-btn-font-size` | `var(--sf-text-s)` | | `--sf-card-gap` | `var(--sf-space-m)` | | `--sf-card-heading-size` | `var(--sf-text-xl)` | | `--sf-card-media-radius` | `var(--sf-card-radius, var(--sf-radius-m))` | diff --git a/optional/components.css b/optional/components.css index b042343f..4d1dd7e7 100644 --- a/optional/components.css +++ b/optional/components.css @@ -400,8 +400,8 @@ * --sf-card-radius on inner elements (mirrors the math in * tokens.components.css). * Subcomponents: __media (16/9 cover image), __avatar (round), - * __title (unified heading size). Nested .sf-btn shrinks to - * --sf-card-btn-font-size. + * __title (unified heading size). Nested buttons keep their own + * size — add .sf-btn--s explicitly for a compact card action. * ============================================================ */ .sf-card { /* A card is a block box. When combined with a layout primitive on the same @@ -460,13 +460,6 @@ color: var(--sf-color-heading); } - /* Nested buttons shrink to the card's button size. Feed the *-size tier - (not the public --sf-btn-font-size knob) so a :root override of the knob - still wins inside cards, exactly as it does everywhere else. */ - .sf-card .sf-btn { - --sf-btn-font-size--size: var(--sf-card-btn-font-size, var(--sf-text-s)); - } - /* --- Modifiers --- */ /* Flat, outlined card: keep the border, drop the shadow. */ .sf-card--bordered { diff --git a/optional/tokens.components.css b/optional/tokens.components.css index b767fef9..42e5a2cf 100644 --- a/optional/tokens.components.css +++ b/optional/tokens.components.css @@ -27,14 +27,13 @@ --sf-card-shadow--elevated: var(--sf-shadow-l); --sf-card-shadow--hover: var(--sf-shadow-l); - /* Smart-card subcomponents (.sf-card__media / __avatar / __title and the - * scoped button font-size override). Media defaults to the 16/9 ratio - * token; inner media radius mirrors the card's inner radius. */ + /* Smart-card subcomponents (.sf-card__media / __avatar / __title). Media + * defaults to the 16/9 ratio token; inner media radius mirrors the card's + * inner radius. */ --sf-card-media-ratio: var(--sf-ratio-video); --sf-card-media-radius: var(--sf-card-radius, var(--sf-radius-m)); --sf-card-avatar-size: 2.5rem; --sf-card-heading-size: var(--sf-text-xl); - --sf-card-btn-font-size: var(--sf-text-s); /* ============================================================ * FIELD TOKENS diff --git a/reports/full-api-audit/results/tokens-report.json b/reports/full-api-audit/results/tokens-report.json index 791103ea..de4edd2e 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": 756, - "rendered": 756, + "totalTokens": 755, + "rendered": 755, "consoleErrors": 0, "requestFailures": 0, "empties": 48, @@ -1274,21 +1274,6 @@ "darkComputed": "", "changedInDark": false }, - { - "name": "--sf-card-btn-font-size", - "tier": "PUBLIC", - "role": "consumption", - "category": "Component tokens", - "declared": "var(--sf-text-s)", - "aliasOf": "--sf-text-s", - "issues": [ - "EMPTY_COMPUTED" - ], - "computed": "", - "shown": "(empty)", - "darkComputed": "", - "changedInDark": false - }, { "name": "--sf-card-gap", "tier": "PUBLIC", diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json index 599fb8c7..2c0aea41 100644 --- a/tests/token-api.snapshot.json +++ b/tests/token-api.snapshot.json @@ -91,7 +91,6 @@ "--sf-card-bg", "--sf-card-border-color", "--sf-card-border-width", - "--sf-card-btn-font-size", "--sf-card-gap", "--sf-card-heading-size", "--sf-card-media-radius", diff --git a/token-registry.json b/token-registry.json index c0f81997..d2f1fd0a 100644 --- a/token-registry.json +++ b/token-registry.json @@ -2942,7 +2942,8 @@ }, { "id": 725, - "name": "--sf-card-btn-font-size" + "name": "--sf-card-btn-font-size", + "removed": true }, { "id": 726, From 0adfec523afd7f6b75a269c9b2c32a7a4b632ada Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 11 Jul 2026 20:46:34 +0000 Subject: [PATCH 2/3] docs(components): drop stale --sf-card-btn-font-size references Address CodeRabbit review on PR #602: docs/components.md (hand-authored, not gated by check:llm-guide) still described nested .sf-btn as auto-shrinking to --sf-card-btn-font-size and listed the removed token in the card token table. Rewrite the prose to point at explicit .sf-btn--s and drop the table row. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w --- docs/components.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/components.md b/docs/components.md index 329004e2..977ed92b 100644 --- a/docs/components.md +++ b/docs/components.md @@ -143,9 +143,9 @@ proportional. ``` -A `.sf-btn` nested in a card automatically shrinks to `--sf-card-btn-font-size`. -Pair `--interactive` with `.sf-clickable-parent` (from `core/accessibility.css`) -when the entire card should be a single link. +A `.sf-btn` nested in a card keeps its own size — add `.sf-btn--s` explicitly +for a compact card action. Pair `--interactive` with `.sf-clickable-parent` +(from `core/accessibility.css`) when the entire card should be a single link. **Modifiers** @@ -172,7 +172,6 @@ when the entire card should be a single link. | `--sf-card-media-ratio` | `var(--sf-ratio-video)` | `__media` aspect ratio | | `--sf-card-avatar-size` | `2.5rem` | `__avatar` diameter | | `--sf-card-heading-size` | `var(--sf-text-xl)` | `__title` size | -| `--sf-card-btn-font-size` | `var(--sf-text-s)` | Nested `.sf-btn` size | **Coloured cards** From 444d1eeed1eba08725f4024d7d381f76f358ea1a Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 11 Jul 2026 20:56:41 +0000 Subject: [PATCH 3/3] test(card): update nested-button test for the removed auto-shrink tests/card.spec.js asserted the old behaviour ("a nested .sf-btn shrinks relative to a standalone one"), which the Regression suite flagged after the .sf-card .sf-btn rule was removed (nested == standalone: 19.11 == 19.11). Rewrite it to the new contract: a plain nested .sf-btn matches a standalone one (no auto-shrink), and .sf-btn--s opts into a compact card action. Verified in Chromium against the exact markup: loose == nested == 19.41px; compact (.sf-btn--s) == 14.68px < loose. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01GnwqYHgHNAWPbsUJWUeY1w --- tests/card.spec.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/tests/card.spec.js b/tests/card.spec.js index 73fe0b2b..f9b69b99 100644 --- a/tests/card.spec.js +++ b/tests/card.spec.js @@ -85,18 +85,23 @@ for (const theme of ['light', 'dark']) { expect(cursor).toBe('pointer'); }); - test('a nested .sf-btn shrinks relative to a standalone one', async ({ page }) => { + test('a nested .sf-btn keeps its own size; .sf-btn--s opts into a compact action', async ({ page }) => { + // Cards no longer auto-shrink nested buttons (removed in 0.8.0). A plain + // .sf-btn is the same size inside a card as outside it; a compact card + // action is opted into explicitly with .sf-btn--s. await mount( page, `
+
`, ); - const [loose, nested] = await page.evaluate(() => - ['loose', 'nested'].map((id) => parseFloat(getComputedStyle(document.getElementById(id)).fontSize)), + const [loose, nested, compact] = await page.evaluate(() => + ['loose', 'nested', 'compact'].map((id) => parseFloat(getComputedStyle(document.getElementById(id)).fontSize)), ); - expect(nested).toBeLessThan(loose); + expect(nested).toBeCloseTo(loose, 2); // no auto-shrink + expect(compact).toBeLessThan(loose); // explicit sizing still works }); test('__media crops to a 16/9 aspect ratio', async ({ page }) => {