From cd487c4268c00c2540ceee986ac6c748b26f3801 Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Mon, 8 Jun 2026 13:06:53 +0000 Subject: [PATCH 1/2] feat(docs): add machine-readable api-index.json for all tokens and classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Generate docs/api-index.json — a single, spreadsheet-style catalogue of every public framework element (design tokens AND classes) for editor integrations, autocomplete, tooltip hints and docs tooling. Each row carries rich metadata columns: type, stability tier (PUBLIC/PUBLIC-ADVANCED/INTERNAL), category, group + description (derived from the existing section-banner comments — no new annotation syntax), source files, @layer, bundle membership, and per-type facets (token namespace/value/aliasOf/registered/animatable/syntax/inherits/fallback; class selector/prefix/kind/variant/baseClass). A self-describing _meta block with counts and a column schema is included for consumers. - scripts/gen-api-index.js: new generator, reuses the canonical comment/string-masking parse contract; token/class counts line up with registry.json (769 tokens, 173 .sf-, 40 .is-, 9 unprefixed). - scripts/token-tiers.js: extract the INTERNAL/ADVANCED tier sets into a shared module; gen-token-index.js now imports them (byte-identical output, verified). - wire into the build: npm run docs chain + docs:api script, register the output in scripts/artifacts.json (CI freshness), ship via package.json exports/files, and publish alongside the bundles on the dist branch. Co-authored-by: Jack Granatowski --- .github/workflows/publish-dist.yml | 4 + docs/api-index.json | 28979 +++++++++++++++++++++++++++ package.json | 7 +- scripts/artifacts.json | 3 +- scripts/gen-api-index.js | 620 + scripts/gen-token-index.js | 35 +- scripts/token-tiers.js | 49 + 7 files changed, 29665 insertions(+), 32 deletions(-) create mode 100644 docs/api-index.json create mode 100644 scripts/gen-api-index.js create mode 100644 scripts/token-tiers.js diff --git a/.github/workflows/publish-dist.yml b/.github/workflows/publish-dist.yml index 9ee19cdf..da0a6df0 100644 --- a/.github/workflows/publish-dist.yml +++ b/.github/workflows/publish-dist.yml @@ -62,6 +62,10 @@ jobs: set -euo pipefail mkdir -p /tmp/sf-dist cp -R dist/. /tmp/sf-dist/ + # Ship the machine-readable API index alongside the bundles so + # integrations can fetch it from the same CDN path, e.g.: + # https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/api-index.json + cp docs/api-index.json /tmp/sf-dist/api-index.json # Stamp file so consumers can verify exactly which source commit # produced this dist tree. { diff --git a/docs/api-index.json b/docs/api-index.json new file mode 100644 index 00000000..835fa5ba --- /dev/null +++ b/docs/api-index.json @@ -0,0 +1,28979 @@ +{ + "_meta": { + "generated_by": "scripts/gen-api-index.js", + "description": "Unified machine-readable index of every SLASHED design token and class, with categories, descriptions, stability tiers and bundle membership. Generated from source — do not edit by hand (run: npm run docs:api).", + "token_sources": [ + "core/tokens.css", + "core/tokens.layout.css", + "core/tokens.macros.css", + "optional/tokens.palette.css", + "optional/tokens.sizes-extended.css", + "optional/tokens.components.css" + ], + "class_sources": [ + "core/layout.css", + "core/macros.css", + "core/states.css", + "core/accessibility.css", + "core/motion.css", + "core/print.css", + "optional/forms.css", + "optional/components.css", + "optional/theme-example.css" + ], + "fallback_source": "core/tokens.color-fallbacks.css", + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ], + "counts": { + "total": 1024, + "by_type": { + "class": 222, + "token": 802 + }, + "by_tier": { + "INTERNAL": 1, + "PUBLIC": 955, + "PUBLIC-ADVANCED": 68 + }, + "tokens": 802, + "classes": 222, + "sf_classes": 173, + "is_classes": 40, + "unprefixed_classes": 9, + "fallback_only_tokens": 33, + "by_category": { + "Accessibility": 7, + "Color fallback (legacy HSL)": 33, + "Core tokens": 463, + "Layout primitives": 120, + "Layout tokens": 48, + "Macro classes": 35, + "Macro tokens": 18, + "Motion / animation": 15, + "Palette tokens": 132, + "Print": 4, + "Sizes-extended tokens": 108, + "State classes": 40, + "Theme example": 1 + } + }, + "schema": { + "name": "Element identifier (token custom-property name incl. leading --, or class name without leading dot).", + "type": "Either 'token' or 'class'.", + "tier": "Stability tier: PUBLIC | PUBLIC-ADVANCED | INTERNAL (see docs/architecture.md).", + "category": "High-level, human-facing area derived from the source file.", + "area": "Short machine slug for the area (core, layout, macros, states, forms, …).", + "group": "Finer-grained section, derived from the nearest section-banner comment in source.", + "description": "Documentation hint derived from section-banner / attached comments (may be empty).", + "sourceFiles": "Array of source CSS files that declare the element.", + "layer": "The CSS @layer the element lives in (e.g. slashed.layout).", + "bundles": "Array of bundle tiers that ship the element (essential, optimal, optimal-components, optimal-utilities, full).", + "optional": "True when the element ships from optional/ (not core).", + "namespace": "TOKEN: second name segment, a filterable facet (color, space, font, radius, shadow, …).", + "value": "TOKEN: default/declared value (last declaration wins; @property initial-value when registered).", + "aliasOf": "TOKEN: target token when value is exactly one var(--sf-x) reference, else null.", + "registered": "TOKEN: declared via @property (typed registration).", + "animatable": "TOKEN: animatable/transition-able (true for @property-registered tokens).", + "syntax": "TOKEN: @property syntax descriptor (e.g. ), else null.", + "inherits": "TOKEN: @property inherits flag, else null.", + "hasFallback": "TOKEN: a legacy HSL fallback exists in core/tokens.color-fallbacks.css.", + "fallbackOnly": "TOKEN: exists only on the legacy HSL fallback tier (channel/override knob).", + "selector": "CLASS: the CSS selector form (.name).", + "prefix": "CLASS: 'sf' | 'is' | '' (unprefixed).", + "kind": "CLASS: element family (layout, macro, state, accessibility, motion, print, form, component, theme).", + "isVariant": "CLASS: true when it is a BEM modifier (contains --).", + "baseClass": "CLASS: the base class name when isVariant, else null." + } + }, + "entries": [ + { + "name": "--sf-action-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "action", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "200", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-action-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "action", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "32%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-action-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "action", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-alternate-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "alternate", + "category": "Layout tokens", + "area": "layout", + "group": "Alternate (zigzag)", + "description": "Alternate (zigzag)", + "value": "var(--sf-space-content)", + "aliasOf": "--sf-space-content", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-alternate-inner-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "alternate", + "category": "Layout tokens", + "area": "layout", + "group": "Alternate (zigzag)", + "description": "Alternate (zigzag)", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-blink", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-blink calc(1s * var(--sf-motion-scale)) steps(1, end) infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-color-pulse", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-color-pulse var(--sf-duration-slow) var(--sf-ease-in-out) infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-delay-1", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "Stagger delays — apply to successive items for entrance choreography (e.g. style=\"animation-delay: var(--sf-animation-delay-2)\"). Tokens only; SLASHED ships no .sf-stagger utility class (by design — apply via token presets or your own BEM rules).", + "value": "calc(75ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-delay-2", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "Stagger delays — apply to successive items for entrance choreography (e.g. style=\"animation-delay: var(--sf-animation-delay-2)\"). Tokens only; SLASHED ships no .sf-stagger utility class (by design — apply via token presets or your own BEM rules).", + "value": "calc(150ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-delay-3", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "Stagger delays — apply to successive items for entrance choreography (e.g. style=\"animation-delay: var(--sf-animation-delay-2)\"). Tokens only; SLASHED ships no .sf-stagger utility class (by design — apply via token presets or your own BEM rules).", + "value": "calc(225ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-delay-4", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "Stagger delays — apply to successive items for entrance choreography (e.g. style=\"animation-delay: var(--sf-animation-delay-2)\"). Tokens only; SLASHED ships no .sf-stagger utility class (by design — apply via token presets or your own BEM rules).", + "value": "calc(300ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-delay-5", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "Stagger delays — apply to successive items for entrance choreography (e.g. style=\"animation-delay: var(--sf-animation-delay-2)\"). Tokens only; SLASHED ships no .sf-stagger utility class (by design — apply via token presets or your own BEM rules).", + "value": "calc(375ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-fade-in", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-fade-in var(--sf-duration-normal) var(--sf-ease-out) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-fade-out", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-fade-out var(--sf-duration-normal) var(--sf-ease-in) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-float", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-float calc(3s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-ping", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-ping var(--sf-duration-slow) var(--sf-ease-out) infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-scale-down", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-scale-down var(--sf-duration-normal) var(--sf-ease-in) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-scale-up", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-scale-up var(--sf-duration-normal) var(--sf-ease-overshoot) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-shimmer", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-shimmer calc(1.5s * var(--sf-motion-scale)) var(--sf-ease-in-out) infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-slide-in-down", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-slide-in-down var(--sf-duration-normal) var(--sf-ease-out) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-slide-in-left", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-slide-in-left var(--sf-duration-normal) var(--sf-ease-out) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-slide-in-right", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-slide-in-right var(--sf-duration-normal) var(--sf-ease-out) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-slide-in-up", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-slide-in-up var(--sf-duration-normal) var(--sf-ease-out) both", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-animation-spin", + "type": "token", + "tier": "PUBLIC", + "namespace": "animation", + "category": "Core tokens", + "area": "core", + "group": "Animation presets", + "description": "pair keyframes (core/motion.css) with duration + easing. Use directly: animation: var(--sf-animation-fade-in);", + "value": "sf-spin var(--sf-duration-slower) linear infinite", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-aspect", + "type": "token", + "tier": "PUBLIC", + "namespace": "aspect", + "category": "Macro tokens", + "area": "macros", + "group": "Aspect ratio", + "description": "default for .sf-aspect (generic ratio container, distinct from layout's .sf-frame which has its own --sf-frame-ratio).", + "value": "16 / 9", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-base-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "base", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "211", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-base-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "base", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "95%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-base-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "base", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "27%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-bento-cols-default", + "type": "token", + "tier": "PUBLIC", + "namespace": "bento", + "category": "Layout tokens", + "area": "layout", + "group": "Bento grid", + "description": "Bento grid", + "value": "3", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-bento-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "bento", + "category": "Layout tokens", + "area": "layout", + "group": "Bento grid", + "description": "Bento grid", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-bento-row-compact", + "type": "token", + "tier": "PUBLIC", + "namespace": "bento", + "category": "Layout tokens", + "area": "layout", + "group": "Bento grid", + "description": "Bento grid", + "value": "6rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-bento-row-default", + "type": "token", + "tier": "PUBLIC", + "namespace": "bento", + "category": "Layout tokens", + "area": "layout", + "group": "Bento grid", + "description": "Bento grid", + "value": "10rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-bento-row-tall", + "type": "token", + "tier": "PUBLIC", + "namespace": "bento", + "category": "Layout tokens", + "area": "layout", + "group": "Bento grid", + "description": "Bento grid", + "value": "16rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-blur-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "blur", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "Blur & opacity", + "value": "32px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-blur-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "blur", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "Blur & opacity", + "value": "16px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-blur-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "blur", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "Blur & opacity", + "value": "8px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-blur-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "blur", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "Blur & opacity", + "value": "48px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-blur-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "blur", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "Blur & opacity", + "value": "4px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-color-text)", + "aliasOf": "--sf-color-text", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-em-style", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "italic", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-font-family", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-body)", + "aliasOf": "--sf-font-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-font-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-m)", + "aliasOf": "--sf-text-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-normal)", + "aliasOf": "--sf-leading-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-strong-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-bold)", + "aliasOf": "--sf-font-weight-bold", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-body-text-wrap", + "type": "token", + "tier": "PUBLIC", + "namespace": "body", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "pretty", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border shorthands", + "description": "convenience tokens composing width, style, and color into a single value for the common cases. subtle / strong vary COLOR CONTRAST only — all three use --sf-border-width-1 (1px). This matches the IBM Carbon and GitHub Primer convention where subtle/strong name a color axis, not…", + "value": "var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border shorthands", + "description": "convenience tokens composing width, style, and color into a single value for the common cases. subtle / strong vary COLOR CONTRAST only — all three use --sf-border-width-1 (1px). This matches the IBM Carbon and GitHub Primer convention where subtle/strong name a color axis, not…", + "value": "var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--strong)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-style", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border style", + "description": "global knob paired with --sf-border-width-* and --sf-color-border*. Consumer BEM: .my-card { border: var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border); } Set once on :root to restyle every framework border, or override per element. For one-off decorative…", + "value": "solid", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border shorthands", + "description": "convenience tokens composing width, style, and color into a single value for the common cases. subtle / strong vary COLOR CONTRAST only — all three use --sf-border-width-1 (1px). This matches the IBM Carbon and GitHub Primer convention where subtle/strong name a color axis, not…", + "value": "var(--sf-border-width-1) var(--sf-border-style) var(--sf-color-border--subtle)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-width-1", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border widths", + "description": "--sf-border-width-hairline: device-pixel-dependent. On 1x DPR displays (Windows non-Retina) the browser will round 0.5px up to 1px, so it visually matches --sf-border-width-1. On 2x+ DPR (macOS/iOS Retina, most modern phones) it renders as a true half-pixel hairline. Use it for…", + "value": "1px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-width-2", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border widths", + "description": "--sf-border-width-hairline: device-pixel-dependent. On 1x DPR displays (Windows non-Retina) the browser will round 0.5px up to 1px, so it visually matches --sf-border-width-1. On 2x+ DPR (macOS/iOS Retina, most modern phones) it renders as a true half-pixel hairline. Use it for…", + "value": "2px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-width-3", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border widths", + "description": "--sf-border-width-hairline: device-pixel-dependent. On 1x DPR displays (Windows non-Retina) the browser will round 0.5px up to 1px, so it visually matches --sf-border-width-1. On 2x+ DPR (macOS/iOS Retina, most modern phones) it renders as a true half-pixel hairline. Use it for…", + "value": "3px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-width-4", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border widths", + "description": "--sf-border-width-hairline: device-pixel-dependent. On 1x DPR displays (Windows non-Retina) the browser will round 0.5px up to 1px, so it visually matches --sf-border-width-1. On 2x+ DPR (macOS/iOS Retina, most modern phones) it renders as a true half-pixel hairline. Use it for…", + "value": "4px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-border-width-hairline", + "type": "token", + "tier": "PUBLIC", + "namespace": "border", + "category": "Core tokens", + "area": "core", + "group": "Border widths", + "description": "--sf-border-width-hairline: device-pixel-dependent. On 1x DPR displays (Windows non-Retina) the browser will round 0.5px up to 1px, so it visually matches --sf-border-width-1. On 2x+ DPR (macOS/iOS Retina, most modern phones) it renders as a true half-pixel hairline. Use it for…", + "value": "0.5px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-box-border-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "box", + "category": "Layout tokens", + "area": "layout", + "group": "Box", + "description": "Box", + "value": "var(--sf-color-border)", + "aliasOf": "--sf-color-border", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-box-border-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "box", + "category": "Layout tokens", + "area": "layout", + "group": "Box", + "description": "Box", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-box-padding", + "type": "token", + "tier": "PUBLIC", + "namespace": "box", + "category": "Layout tokens", + "area": "layout", + "group": "Box", + "description": "Box", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-breakout-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "breakout", + "category": "Layout tokens", + "area": "layout", + "group": "Content grid (breakout pattern)", + "description": "Content grid (breakout pattern)", + "value": "var(--sf-container-wide)", + "aliasOf": "--sf-container-wide", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-caret-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "caret", + "category": "Core tokens", + "area": "core", + "group": "Focus / form colors", + "description": "Focus / form colors", + "value": "var(--sf-color-action)", + "aliasOf": "--sf-color-action", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-center-gutter", + "type": "token", + "tier": "PUBLIC", + "namespace": "center", + "category": "Layout tokens", + "area": "layout", + "group": "Center", + "description": "Center", + "value": "var(--sf-space-gutter)", + "aliasOf": "--sf-space-gutter", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-center-max", + "type": "token", + "tier": "PUBLIC", + "namespace": "center", + "category": "Layout tokens", + "area": "layout", + "group": "Center", + "description": "Center", + "value": "var(--sf-container-default)", + "aliasOf": "--sf-container-default", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-cluster-align", + "type": "token", + "tier": "PUBLIC", + "namespace": "cluster", + "category": "Layout tokens", + "area": "layout", + "group": "Cluster", + "description": "Cluster", + "value": "center", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-cluster-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "cluster", + "category": "Layout tokens", + "area": "layout", + "group": "Cluster", + "description": "Cluster", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-cluster-justify", + "type": "token", + "tier": "PUBLIC", + "namespace": "cluster", + "category": "Layout tokens", + "area": "layout", + "group": "Cluster", + "description": "Cluster", + "value": "flex-start", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-code-font-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "code", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "0.875em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-rule-width-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "var(--sf-border-width-3)", + "aliasOf": "--sf-border-width-3", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-rule-width-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "var(--sf-border-width-2)", + "aliasOf": "--sf-border-width-2", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-rule-width-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "var(--sf-border-width-1)", + "aliasOf": "--sf-border-width-1", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-width-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "32ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-width-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "24ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-col-width-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "col", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "tokens for the `columns` layout property. column-width is ch-based (character units) so columns maintain a comfortable reading measure regardless of font-size.", + "value": "16ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-action-light), var(--sf-color-action-dark, oklch(from var(--sf-color-action-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 8%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 20%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 40%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 65%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 4%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "var(--sf-color-action)", + "aliasOf": "--sf-color-action", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "action", + "description": "action", + "value": "color-mix(in oklab, var(--sf-color-action) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-xdark)", + "aliasOf": "--sf-color-action-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-600)", + "aliasOf": "--sf-color-action-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-a5)", + "aliasOf": "--sf-color-action-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-darker)", + "aliasOf": "--sf-color-action-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "Override these 6 tokens to rebrand — dark mode auto-derives. Optionally set --sf-color-X-dark (no @property) for full control.", + "value": "oklch(0.50 0.22 235)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-400)", + "aliasOf": "--sf-color-action-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-a30)", + "aliasOf": "--sf-color-action-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-a10)", + "aliasOf": "--sf-color-action-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-950)", + "aliasOf": "--sf-color-action-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-50)", + "aliasOf": "--sf-color-action-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-800)", + "aliasOf": "--sf-color-action-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-action-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "action", + "description": "action", + "value": "var(--sf-color-action-200)", + "aliasOf": "--sf-color-action-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-base-light), var(--sf-color-base-dark, oklch(from var(--sf-color-base-light) clamp(0.16, calc(1.18 - l), 0.24) calc(c * 0.5) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-text) 8%, var(--sf-color-base))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-text) 20%, var(--sf-color-base))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-text) 40%, var(--sf-color-base))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-text) 65%, var(--sf-color-base))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-text) 4%, var(--sf-color-base))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "var(--sf-color-base)", + "aliasOf": "--sf-color-base", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "base", + "description": "inverted mix direction (V-shaped ramp by design): tints mix --sf-color-text INTO base, shades mix base INTO text. 50 = lightest base, 950 = darkest. See architecture.md.", + "value": "color-mix(in oklab, var(--sf-color-base) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-xdark)", + "aliasOf": "--sf-color-base-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-600)", + "aliasOf": "--sf-color-base-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-a5)", + "aliasOf": "--sf-color-base-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-darker)", + "aliasOf": "--sf-color-base-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "initial-value is 0.96 (not 0.99) so the +0.02/+0.04 surface offsets produce visually distinct levels in light mode. At 0.99 all lighter surfaces clamp to pure white and become indistinguishable. 0.96 gives: bg=0.98, inset=0.94, raised=1.0→white — all distinct. Consumers using…", + "value": "oklch(0.96 0.006 250)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-400)", + "aliasOf": "--sf-color-base-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-a30)", + "aliasOf": "--sf-color-base-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-a10)", + "aliasOf": "--sf-color-base-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-950)", + "aliasOf": "--sf-color-base-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-50)", + "aliasOf": "--sf-color-base-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-800)", + "aliasOf": "--sf-color-base-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-base-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "base", + "description": "base", + "value": "var(--sf-color-base-200)", + "aliasOf": "--sf-color-base-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Surfaces", + "description": "derived from --sf-color-base (auto-adapts)", + "value": "oklch(from var(--sf-color-base) calc(l + 0.02) c h)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg--active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "derived from --sf-color-neutral (auto-adapts)", + "value": "oklch(from var(--sf-color-neutral) l c h / 0.12)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg--disabled", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-inset)", + "aliasOf": "--sf-color-inset", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg--focus", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "derived from --sf-color-neutral (auto-adapts)", + "value": "oklch(from var(--sf-color-action) l c h / 0.06)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg--hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "derived from --sf-color-neutral (auto-adapts)", + "value": "oklch(from var(--sf-color-neutral) l c h / 0.08)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-bg--selected", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "derived from --sf-color-neutral (auto-adapts)", + "value": "oklch(from var(--sf-color-action) l c h / 0.1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-black", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & backdrop", + "description": "static values (ungated)", + "value": "oklch(0% 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Borders", + "description": "direction-dependent, reference source tokens. Light: borders are lighter than neutral (l + offset). Dark: borders are darker than neutral (l - offset).", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border--disabled", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Border alpha tokens", + "description": "Border alpha tokens", + "value": "oklch(from var(--sf-color-border--subtle) l 0 h / 0.5)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border--focus", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Borders", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-action)", + "aliasOf": "--sf-color-action", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border--strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Borders", + "description": "direction-dependent, reference source tokens. Light: borders are lighter than neutral (l + offset). Dark: borders are darker than neutral (l - offset).", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.55, calc(l + 0.1), 0.85) 0.02 h), oklch(from var(--sf-color-neutral) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border--subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Borders", + "description": "direction-dependent, reference source tokens. Light: borders are lighter than neutral (l + offset). Dark: borders are darker than neutral (l - offset).", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.75, calc(l + 0.4), 0.97) 0.005 h), oklch(from var(--sf-color-neutral) clamp(0.20, calc(l - 0.38), 0.45) 0.005 h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-border--translucent", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Border alpha tokens", + "description": "Border alpha tokens", + "value": "oklch(from var(--sf-color-neutral) l c h / 0.15)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-code-bg", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Interactive states", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-inset)", + "aliasOf": "--sf-color-inset", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-code-text", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Code text", + "description": "Inline-code text colour. Auto-contrasts with --sf-color-code-bg using the same luminance formula as --sf-color-text--on-*. This prevents invisible text when code appears inside inverted-colour containers (e.g. sf-imposter with a dark background where inherited colour is…", + "value": "oklch(from var(--sf-color-code-bg) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-danger", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-danger-light), var(--sf-color-danger-dark, oklch(from var(--sf-color-danger-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-danger-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "STATUS COLORS (-light source tokens)", + "value": "oklch(0.48 0.22 12)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-danger-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-danger) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-danger-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "strong (direction-dependent, uses light-dark) error = form validation, input errors danger = destructive actions (delete, remove)", + "value": "light-dark( oklch(from var(--sf-color-danger-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-danger-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-danger) l c h / 0.1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-dim", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & backdrop", + "description": "static values (ungated)", + "value": "oklch(0 0 0 / 0.5)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-error", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-error-light), var(--sf-color-error-dark, oklch(from var(--sf-color-error-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-error-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "STATUS COLORS (-light source tokens)", + "value": "oklch(0.50 0.20 25)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-error-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-error) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-error-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "strong (direction-dependent, uses light-dark) error = form validation, input errors danger = destructive actions (delete, remove)", + "value": "light-dark( oklch(from var(--sf-color-error-light) calc(l - 0.1) c h), oklch(from var(--sf-color-error) clamp(0.70, calc(l + 0.15), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-error-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-error) l c h / 0.1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-heading", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-info", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-info-light), var(--sf-color-info-dark, oklch(from var(--sf-color-info-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-info-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "STATUS COLORS (-light source tokens)", + "value": "oklch(0.48 0.18 235)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-info-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-info) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-info-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "strong (direction-dependent, uses light-dark) error = form validation, input errors danger = destructive actions (delete, remove)", + "value": "light-dark( oklch(from var(--sf-color-info-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-info-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-info) l c h / 0.1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-inset", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Surfaces", + "description": "derived from --sf-color-base (auto-adapts)", + "value": "oklch(from var(--sf-color-base) calc(l - 0.02) c h)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-inverse", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Surfaces", + "description": "derived from --sf-color-base (auto-adapts)", + "value": "oklch(from var(--sf-color-base) calc(1 - l) c h)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Links keep the action hue but CLAMP lightness toward a contrast-safe band — a ceiling in light mode, a floor in dark mode — so link text clears WCAG AA (4.5:1) on the page background for the default palette AND the large majority of brand overrides (a fixed offset alone only…", + "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c h), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link--active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Links keep the action hue but CLAMP lightness toward a contrast-safe band — a ceiling in light mode, a floor in dark mode — so link text clears WCAG AA (4.5:1) on the page background for the default palette AND the large majority of brand overrides (a fixed offset alone only…", + "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.21, 0.34), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.15, 0.74), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link--disabled", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "plain var aliases and geometry (ungated)", + "value": "var(--sf-color-text--disabled)", + "aliasOf": "--sf-color-text--disabled", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link--hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Links keep the action hue but CLAMP lightness toward a contrast-safe band — a ceiling in light mode, a floor in dark mode — so link text clears WCAG AA (4.5:1) on the page background for the default palette AND the large majority of brand overrides (a fixed offset alone only…", + "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.15, 0.40), 1) c h), oklch(from var(--sf-color-action) clamp(0, max(l + 0.10, 0.68), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link--underline", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Link alpha token", + "description": "Link alpha token", + "value": "oklch(from var(--sf-color-action) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-link--visited", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Visited link — 60° hue shift from action gives clearly distinct chroma without colliding with default tertiary (h ≈ 310). Same lightness clamp as the base link. If your brand puts action and tertiary close in hue, override directly: :root { --sf-color-link--visited: #6b46c1; }", + "value": "light-dark( oklch(from var(--sf-color-action) clamp(0, min(l - 0.07, 0.48), 1) c calc(h + 60)), oklch(from var(--sf-color-action) clamp(0.68, l, 1) c calc(h + 60)) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-mark-bg", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & mark", + "description": "Selection & mark", + "value": "oklch(from var(--sf-color-warning) l c h / 0.25)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-mark-text", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & backdrop", + "description": "static values (ungated)", + "value": "inherit", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-neutral-light), var(--sf-color-neutral-dark, oklch(from var(--sf-color-neutral-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 8%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 20%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 40%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 65%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 4%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral)", + "aliasOf": "--sf-color-neutral", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "neutral", + "description": "neutral", + "value": "color-mix(in oklab, var(--sf-color-neutral) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-xdark)", + "aliasOf": "--sf-color-neutral-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-600)", + "aliasOf": "--sf-color-neutral-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-a5)", + "aliasOf": "--sf-color-neutral-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-darker)", + "aliasOf": "--sf-color-neutral-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "Override these 6 tokens to rebrand — dark mode auto-derives. Optionally set --sf-color-X-dark (no @property) for full control.", + "value": "oklch(0.52 0.025 260)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-400)", + "aliasOf": "--sf-color-neutral-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-a30)", + "aliasOf": "--sf-color-neutral-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-a10)", + "aliasOf": "--sf-color-neutral-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-950)", + "aliasOf": "--sf-color-neutral-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-50)", + "aliasOf": "--sf-color-neutral-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-800)", + "aliasOf": "--sf-color-neutral-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-neutral-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "neutral", + "description": "neutral", + "value": "var(--sf-color-neutral-200)", + "aliasOf": "--sf-color-neutral-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-overlay", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Surfaces", + "description": "derived from --sf-color-base (auto-adapts)", + "value": "oklch(from var(--sf-color-base) l c h / 0.9)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-primary-light), var(--sf-color-primary-dark, oklch(from var(--sf-color-primary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 8%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 20%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 40%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 65%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 4%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary)", + "aliasOf": "--sf-color-primary", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "primary", + "description": "primary", + "value": "color-mix(in oklab, var(--sf-color-primary) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-xdark)", + "aliasOf": "--sf-color-primary-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-600)", + "aliasOf": "--sf-color-primary-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-a5)", + "aliasOf": "--sf-color-primary-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-darker)", + "aliasOf": "--sf-color-primary-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "Override these 6 tokens to rebrand — dark mode auto-derives. Optionally set --sf-color-X-dark (no @property) for full control.", + "value": "oklch(0.47 0.27 264)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-400)", + "aliasOf": "--sf-color-primary-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-a30)", + "aliasOf": "--sf-color-primary-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-a10)", + "aliasOf": "--sf-color-primary-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-950)", + "aliasOf": "--sf-color-primary-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-50)", + "aliasOf": "--sf-color-primary-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-800)", + "aliasOf": "--sf-color-primary-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-primary-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "primary", + "description": "primary", + "value": "var(--sf-color-primary-200)", + "aliasOf": "--sf-color-primary-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-raised", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Surfaces", + "description": "derived from --sf-color-base (auto-adapts)", + "value": "oklch(from var(--sf-color-base) calc(l + 0.04) c h)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-scheme", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Color scheme", + "description": "Color scheme", + "value": "light dark", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-secondary-light), var(--sf-color-secondary-dark, oklch(from var(--sf-color-secondary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 8%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 20%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 40%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 65%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 4%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary)", + "aliasOf": "--sf-color-secondary", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "secondary", + "description": "secondary", + "value": "color-mix(in oklab, var(--sf-color-secondary) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-xdark)", + "aliasOf": "--sf-color-secondary-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-600)", + "aliasOf": "--sf-color-secondary-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-a5)", + "aliasOf": "--sf-color-secondary-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-darker)", + "aliasOf": "--sf-color-secondary-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "Override these 6 tokens to rebrand — dark mode auto-derives. Optionally set --sf-color-X-dark (no @property) for full control.", + "value": "oklch(0.22 0.04 264)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-400)", + "aliasOf": "--sf-color-secondary-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-a30)", + "aliasOf": "--sf-color-secondary-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-a10)", + "aliasOf": "--sf-color-secondary-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-950)", + "aliasOf": "--sf-color-secondary-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-50)", + "aliasOf": "--sf-color-secondary-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-800)", + "aliasOf": "--sf-color-secondary-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-secondary-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "secondary", + "description": "secondary", + "value": "var(--sf-color-secondary-200)", + "aliasOf": "--sf-color-secondary-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-selection-bg", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection", + "description": "Selection", + "value": "light-dark( oklch(from var(--sf-color-action-light) l c h / 0.28), oklch(from var(--sf-color-action-light) clamp(0.62, calc(0.93 - l * 0.4), 0.78) c h / 0.55) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-selection-text", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & backdrop", + "description": "static values (ungated)", + "value": "inherit", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-success", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-success-light), var(--sf-color-success-dark, oklch(from var(--sf-color-success-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-success-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "STATUS COLORS (-light source tokens)", + "value": "oklch(0.50 0.16 145)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-success-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-success) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-success-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "strong (direction-dependent, uses light-dark) error = form validation, input errors danger = destructive actions (delete, remove)", + "value": "light-dark( oklch(from var(--sf-color-success-light) calc(l - 0.15) c h), oklch(from var(--sf-color-success) clamp(0.70, calc(l + 0.15), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-success-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-success) l c h / 0.12)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-surface", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "Surface alias (plain var — no IACVT, stays ungated)", + "value": "var(--sf-color-base)", + "aliasOf": "--sf-color-base", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-tertiary-light), var(--sf-color-tertiary-dark, oklch(from var(--sf-color-tertiary-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 8%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-200", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 20%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-300", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 40%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-400", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 65%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 4%, var(--sf-color-surface))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-500", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary)", + "aliasOf": "--sf-color-tertiary", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-600", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 82%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-700", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 62%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-800", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 38%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-900", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 18%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-950", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 8%, var(--sf-color-text))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a10", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 10%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a20", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 20%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a30", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 30%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a40", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 40%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a5", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 5%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a50", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 50%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a60", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 60%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a70", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 70%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a80", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 80%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a90", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 90%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-a95", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Palette tokens", + "area": "palette", + "group": "tertiary", + "description": "tertiary", + "value": "color-mix(in oklab, var(--sf-color-tertiary) 95%, transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.palette.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-active", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-xdark)", + "aliasOf": "--sf-color-tertiary-xdark", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-darker", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-600)", + "aliasOf": "--sf-color-tertiary-600", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-ghost", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-a5)", + "aliasOf": "--sf-color-tertiary-a5", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-hover", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-darker)", + "aliasOf": "--sf-color-tertiary-darker", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "BRAND COLORS (-light source tokens, animatable)", + "description": "Override these 6 tokens to rebrand — dark mode auto-derives. Optionally set --sf-color-X-dark (no @property) for full control.", + "value": "oklch(0.42 0.22 295)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-lighter", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-400)", + "aliasOf": "--sf-color-tertiary-400", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-a30)", + "aliasOf": "--sf-color-tertiary-a30", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-a10)", + "aliasOf": "--sf-color-tertiary-a10", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-superdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-950)", + "aliasOf": "--sf-color-tertiary-950", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-superlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-50)", + "aliasOf": "--sf-color-tertiary-50", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-xdark", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-800)", + "aliasOf": "--sf-color-tertiary-800", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-tertiary-xlight", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "tertiary", + "description": "tertiary", + "value": "var(--sf-color-tertiary-200)", + "aliasOf": "--sf-color-tertiary-200", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css", + "optional/tokens.palette.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--disabled", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.55, calc(l + 0.25), 0.82) c h), oklch(from var(--sf-color-neutral) clamp(0.25, calc(l - 0.2), 0.55) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--inverse", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.85, calc(l + 0.4), 0.98) c h), oklch(from var(--sf-color-neutral) clamp(0.05, calc(l - 0.4), 0.35) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-neutral)", + "aliasOf": "--sf-color-neutral", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-action", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-action) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-base", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-text)", + "aliasOf": "--sf-color-text", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-danger", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-danger) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-error", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-error) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-info", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-info) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-inverse", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "compat alias → base", + "value": "var(--sf-color-text--inverse)", + "aliasOf": "--sf-color-text--inverse", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-neutral", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-neutral) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-primary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-primary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-secondary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-secondary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-success", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-success) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-surface", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "plain var aliases (ungated)", + "value": "var(--sf-color-text--on-base)", + "aliasOf": "--sf-color-text--on-base", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-tertiary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-tertiary) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--on-warning", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text-on-color", + "description": "sign(var(--sf-contrast-threshold) - l) * 999 is mode-agnostic: auto-selects light or dark text based on background luminance. Uses resolved tokens — works for any user-supplied color. CONTRAST NOTE: Guarantees ≥ 3:1 (WCAG AA Large Text / UI). Colors in the mid-luminance range…", + "value": "oklch(from var(--sf-color-warning) clamp(0.1, sign(var(--sf-contrast-threshold) - l) * 999, 0.95) 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--placeholder", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.45, calc(l + 0.15), 0.75) c h), oklch(from var(--sf-color-neutral) clamp(0.35, calc(l - 0.1), 0.65) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-text--secondary", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Text", + "description": "light and dark require opposite formula directions, so each side of light-dark() references its source token.", + "value": "light-dark( oklch(from var(--sf-color-neutral-light) clamp(0.15, calc(l - 0.25 - var(--sf-contrast-bias)), 0.45) c h), oklch(from var(--sf-color-neutral) clamp(0.55, calc(l + 0.1 + var(--sf-contrast-bias)), 0.90) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-warning", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Resolved color tokens", + "description": "auto-switch via light-dark(). Dark auto-derivation formula (brand + status): clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source. Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark. Override any --sf-color-X-dark to…", + "value": "light-dark(var(--sf-color-warning-light), var(--sf-color-warning-dark, oklch(from var(--sf-color-warning-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-warning-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "STATUS COLORS (-light source tokens)", + "value": "oklch(0.75 0.17 80)", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-warning-muted", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-warning) l c h / 0.3)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-warning-strong", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "strong (direction-dependent, uses light-dark) error = form validation, input errors danger = destructive actions (delete, remove)", + "value": "light-dark( oklch(from var(--sf-color-warning-light) calc(l - 0.25) c h), oklch(from var(--sf-color-warning) clamp(0.70, calc(l + 0.05), 1) c h) )", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-warning-subtle", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Status triplets", + "description": "subtle/muted (alpha variants) bg/border use same formula both modes", + "value": "oklch(from var(--sf-color-warning) l c h / 0.12)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-color-white", + "type": "token", + "tier": "PUBLIC", + "namespace": "color", + "category": "Core tokens", + "area": "core", + "group": "Selection & backdrop", + "description": "static values (ungated)", + "value": "oklch(100% 0 0)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-component-pad", + "type": "token", + "tier": "PUBLIC", + "namespace": "component", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "rhythm within a component", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-container-default", + "type": "token", + "tier": "PUBLIC", + "namespace": "container", + "category": "Core tokens", + "area": "core", + "group": "Containers", + "description": "Containers", + "value": "75rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-container-full", + "type": "token", + "tier": "PUBLIC", + "namespace": "container", + "category": "Core tokens", + "area": "core", + "group": "Containers", + "description": "Containers", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-container-narrow", + "type": "token", + "tier": "PUBLIC", + "namespace": "container", + "category": "Core tokens", + "area": "core", + "group": "Containers", + "description": "Containers", + "value": "38rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-container-prose", + "type": "token", + "tier": "PUBLIC", + "namespace": "container", + "category": "Core tokens", + "area": "core", + "group": "Containers", + "description": "Containers", + "value": "65ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-container-wide", + "type": "token", + "tier": "PUBLIC", + "namespace": "container", + "category": "Core tokens", + "area": "core", + "group": "Containers", + "description": "Containers", + "value": "90rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-content-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "content", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "gap between BEM elements", + "value": "var(--sf-space-s)", + "aliasOf": "--sf-space-s", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-content-intrinsic-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "content", + "category": "Macro tokens", + "area": "macros", + "group": "Content visibility", + "description": "placeholder size for .sf-content-auto. Feeds contain-intrinsic-size so offscreen sections reserve space before their first render, keeping the scrollbar and scroll position stable. Override per element: style=\"--sf-content-intrinsic-size: 800px\".", + "value": "500px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-content-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "content", + "category": "Layout tokens", + "area": "layout", + "group": "Content grid (breakout pattern)", + "description": "Content grid (breakout pattern)", + "value": "var(--sf-container-default)", + "aliasOf": "--sf-container-default", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-contrast-bias", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "contrast", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Global text-contrast knob. Nudges derived reading-text colours toward the extremes (darker in light mode, lighter in dark mode). Positive = more contrast; 0 = no change. Consumed by --sf-color-text, --sf-color-text--secondary, --sf-color-heading.", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-contrast-threshold", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "contrast", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Lightness crossover for text-on-color auto-contrast. Colours with L above this value get dark text; below get light text. Default 0.6 guarantees ≥ 3:1 for most colours. Shift down (e.g. 0.55) if your brand sits in the 0.52-0.60 range and you prefer white text on it.", + "value": "0.6", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-cover-min-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "cover", + "category": "Layout tokens", + "area": "layout", + "group": "Cover", + "description": "Cover", + "value": "100dvh", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-cover-padding", + "type": "token", + "tier": "PUBLIC", + "namespace": "cover", + "category": "Layout tokens", + "area": "layout", + "group": "Cover", + "description": "Cover", + "value": "var(--sf-section-pad)", + "aliasOf": "--sf-section-pad", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-current-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "current", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "State token — consumed by .is-current in states.css. Override to match your nav design (e.g. semibold for thin fonts).", + "value": "var(--sf-font-weight-bold)", + "aliasOf": "--sf-font-weight-bold", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-danger-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "danger", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "340", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-danger-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "danger", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "35%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-danger-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "danger", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-divider-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "divider", + "category": "Core tokens", + "area": "core", + "group": "Divider", + "description": "global separator system. Drives `hr` (base) and the `.sf-divider` layout primitive.", + "value": "var(--sf-color-border)", + "aliasOf": "--sf-color-border", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-divider-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "divider", + "category": "Core tokens", + "area": "core", + "group": "Divider", + "description": "global separator system. Drives `hr` (base) and the `.sf-divider` layout primitive.", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-divider-style", + "type": "token", + "tier": "PUBLIC", + "namespace": "divider", + "category": "Core tokens", + "area": "core", + "group": "Divider", + "description": "global separator system. Drives `hr` (base) and the `.sf-divider` layout primitive.", + "value": "solid", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-divider-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "divider", + "category": "Core tokens", + "area": "core", + "group": "Divider", + "description": "global separator system. Drives `hr` (base) and the `.sf-divider` layout primitive.", + "value": "var(--sf-border-width-1)", + "aliasOf": "--sf-border-width-1", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-drop-shadow-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "drop", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "Drop shadows — for filter: drop-shadow() (respects alpha edges)", + "value": "drop-shadow(0 8px 16px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-drop-shadow-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "drop", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "Drop shadows — for filter: drop-shadow() (respects alpha edges)", + "value": "drop-shadow(0 4px 6px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-drop-shadow-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "drop", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "Drop shadows — for filter: drop-shadow() (respects alpha edges)", + "value": "drop-shadow(0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-fast", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "calc(150ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-instant", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "calc(100ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-none", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "0ms", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-normal", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "calc(250ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-slow", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "calc(400ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-duration-slower", + "type": "token", + "tier": "PUBLIC", + "namespace": "duration", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "calc(600ms * var(--sf-motion-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-bounce", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "linear(0, 0.35 18%, 1 32%, 0.86 42%, 1.02 56%, 0.98 72%, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-elastic", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "linear(0, 0.3, 1.2, 0.9, 1.05, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-in", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "cubic-bezier(0.5, 0, 0.75, 0.25)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-in-out", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-linear", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "linear", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-out", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "cubic-bezier(0.25, 0, 0.15, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-overshoot", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "linear(0, 0.6 30%, 1.08 55%, 0.98 75%, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ease-spring", + "type": "token", + "tier": "PUBLIC", + "namespace": "ease", + "category": "Core tokens", + "area": "core", + "group": "Motion & easing", + "description": "Motion & easing", + "value": "linear(0, 0.5, 1.1, 0.95, 1.02, 1)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-equal-cols", + "type": "token", + "tier": "PUBLIC", + "namespace": "equal", + "category": "Layout tokens", + "area": "layout", + "group": "Equal columns (fixed, non-responsive)", + "description": "Equal columns (fixed, non-responsive)", + "value": "2", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-equal-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "equal", + "category": "Layout tokens", + "area": "layout", + "group": "Equal columns (fixed, non-responsive)", + "description": "Equal columns (fixed, non-responsive)", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-error-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "error", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "352", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-error-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "error", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "38%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-error-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "error", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "93%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-field-block", + "type": "token", + "tier": "PUBLIC", + "namespace": "field", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "standard component padding", + "value": "var(--sf-space-l)", + "aliasOf": "--sf-space-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-field-required-marker", + "type": "token", + "tier": "PUBLIC", + "namespace": "field", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "form-field block spacing", + "value": "\" *\"", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-flow-space", + "type": "token", + "tier": "PUBLIC", + "namespace": "flow", + "category": "Macro tokens", + "area": "macros", + "group": "Flow", + "description": "distance between flow children (lobotomized owl). Consumed by .sf-flow > * + *.", + "value": "var(--sf-space-content)", + "aliasOf": "--sf-space-content", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-focus-ring-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "focus", + "category": "Core tokens", + "area": "core", + "group": "Focus / form colors", + "description": "Focus / form colors", + "value": "var(--sf-color-action)", + "aliasOf": "--sf-color-action", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-focus-ring-offset", + "type": "token", + "tier": "PUBLIC", + "namespace": "focus", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "2px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-focus-ring-shadow", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "focus", + "category": "Core tokens", + "area": "core", + "group": "Focus / form colors", + "description": "Focus / form colors", + "value": "0 0 0 var(--sf-focus-ring-offset) var(--sf-color-bg), 0 0 0 calc(var(--sf-focus-ring-offset) + var(--sf-focus-ring-width)) var(--sf-focus-ring-color)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-focus-ring-style", + "type": "token", + "tier": "PUBLIC", + "namespace": "focus", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "solid", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-focus-ring-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "focus", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "2px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-body", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Font families", + "value": "system-ui, -apple-system, sans-serif", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-display", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Font families", + "value": "var(--sf-font-heading)", + "aliasOf": "--sf-font-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-features", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Opt-in OpenType / variable-font controls (token-only, not applied by the framework)", + "value": "normal", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-geometric", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Optional system-font stacks (zero-cost, no @import)", + "value": "\"Avenir\", \"Montserrat\", \"Corbel\", \"URW Gothic\", source-sans-pro, sans-serif", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-heading", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Font families", + "value": "var(--sf-font-body)", + "aliasOf": "--sf-font-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-humanist", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Optional system-font stacks (zero-cost, no @import)", + "value": "\"Seravek\", \"Gill Sans Nova\", \"Ubuntu\", \"Calibri\", \"DejaVu Sans\", source-sans-pro, sans-serif", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-mono", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Font families", + "value": "ui-monospace, monospace", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-numeric", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Numeric figure style — tabular-nums gives every digit a fixed advance width so numbers line up in vertical columns (price lists, totals, invoices, dashboards). Consumed by number inputs in optional/forms.css and available to BEM components, e.g. `.price { font-variant-numeric:…", + "value": "tabular-nums", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-slab", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "Optional system-font stacks (zero-cost, no @import)", + "value": "\"Rockwell\", \"Rockwell Nova\", \"Roboto Slab\", \"DejaVu Serif\", \"Sitka Small\", serif", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-variation", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "e.g. \"cv11\", \"ss01\"", + "value": "normal", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-black", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "900", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-body", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Semantic aliases — reference the numeric scale", + "value": "var(--sf-font-weight-normal)", + "aliasOf": "--sf-font-weight-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-bold", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "700", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-display", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Semantic aliases — reference the numeric scale", + "value": "var(--sf-font-weight-bold)", + "aliasOf": "--sf-font-weight-bold", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-extrabold", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "800", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-extralight", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "200", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-heading", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Semantic aliases — reference the numeric scale", + "value": "var(--sf-font-weight-semibold)", + "aliasOf": "--sf-font-weight-semibold", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-light", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "300", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-medium", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "500", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-normal", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "400", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-semibold", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "600", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-font-weight-thin", + "type": "token", + "tier": "PUBLIC", + "namespace": "font", + "category": "Core tokens", + "area": "core", + "group": "Font weights", + "description": "Numeric scale", + "value": "100", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-frame-ratio", + "type": "token", + "tier": "PUBLIC", + "namespace": "frame", + "category": "Layout tokens", + "area": "layout", + "group": "Frame", + "description": "Frame", + "value": "16 / 9", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "gap", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "BEM consumer API Use in your own BEM classes: .nav { gap: var(--sf-gap); } Source of truth for tokens.layout.css: --sf-space-gap → var(--sf-gap) (all layout primitives) --sf-space-content → var(--sf-content-gap) (stack, prose)", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gap-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "gap", + "category": "Layout tokens", + "area": "layout", + "group": "Gap", + "description": "Gap", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-brand", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) l c calc(h + 30)))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-fade--b", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch to bottom, transparent, var(--sf-color-bg))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-fade--l", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch to left, transparent, var(--sf-color-bg))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-fade--r", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch to right, transparent, var(--sf-color-bg))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-fade--t", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch to top, transparent, var(--sf-color-bg))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-primary", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch 135deg, var(--sf-color-primary), oklch(from var(--sf-color-primary) calc(l - 0.08) c h))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-secondary", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch 135deg, var(--sf-color-secondary), oklch(from var(--sf-color-secondary) calc(l - 0.08) c h))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-surface", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklab 180deg, var(--sf-color-surface), var(--sf-color-bg))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-gradient-tertiary", + "type": "token", + "tier": "PUBLIC", + "namespace": "gradient", + "category": "Core tokens", + "area": "core", + "group": "Gradients", + "description": "derived from brand colors (auto-adapt)", + "value": "linear-gradient(in oklch 135deg, var(--sf-color-tertiary), oklch(from var(--sf-color-tertiary) calc(l - 0.08) c h))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "16rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "28rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "20rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "16rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "13rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "24rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-grid-min-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "grid", + "category": "Layout tokens", + "area": "layout", + "group": "Grid (auto-fill, breakpoint-free)", + "description": "Grid (auto-fill, breakpoint-free)", + "value": "10rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h1-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h1", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h1-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h1", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-tight)", + "aliasOf": "--sf-tracking-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h1-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h1", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-tight)", + "aliasOf": "--sf-leading-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h1-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h1", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-4xl)", + "aliasOf": "--sf-text-4xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h2-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h2", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h2-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h2", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-tight)", + "aliasOf": "--sf-tracking-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h2-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h2", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-tight)", + "aliasOf": "--sf-leading-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h2-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h2", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-3xl)", + "aliasOf": "--sf-text-3xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h3-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h3", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h3-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h3", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h3-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h3", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-snug)", + "aliasOf": "--sf-leading-snug", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h3-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h3", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-2xl)", + "aliasOf": "--sf-text-2xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h4-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h4", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h4-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h4", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h4-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h4", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-snug)", + "aliasOf": "--sf-leading-snug", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h4-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h4", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-xl)", + "aliasOf": "--sf-text-xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h5-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h5", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h5-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h5", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h5-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h5", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-normal)", + "aliasOf": "--sf-leading-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h5-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h5", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-l)", + "aliasOf": "--sf-text-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h6-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "h6", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h6-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "h6", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-tracking-wide)", + "aliasOf": "--sf-tracking-wide", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h6-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "h6", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-leading-normal)", + "aliasOf": "--sf-leading-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-h6-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "h6", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-text-m)", + "aliasOf": "--sf-text-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-header-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "header", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "clamp( var(--sf-header-height-mobile), calc(0.022222222222222223 * (100vw - 22.5rem) + var(--sf-header-height-mobile)), var(--sf-header-height-desktop))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-header-height-desktop", + "type": "token", + "tier": "PUBLIC", + "namespace": "header", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "5rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-header-height-mobile", + "type": "token", + "tier": "PUBLIC", + "namespace": "header", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "3.5rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-heading-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "heading", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-color-heading)", + "aliasOf": "--sf-color-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-heading-font-family", + "type": "token", + "tier": "PUBLIC", + "namespace": "heading", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "var(--sf-font-heading)", + "aliasOf": "--sf-font-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-heading-text-wrap", + "type": "token", + "tier": "PUBLIC", + "namespace": "heading", + "category": "Core tokens", + "area": "core", + "group": "TYPOGRAPHY ALIASES", + "description": "TYPOGRAPHY ALIASES", + "value": "balance", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "4em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-box-bg", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Layout tokens", + "area": "layout", + "group": "Icon (boxed variant)", + "description": "extras for .sf-icon--boxed. The naked .sf-icon sizing tokens (--sf-icon-xs..xl) live in core/tokens.css alongside the typography scale.", + "value": "var(--sf-color-inset)", + "aliasOf": "--sf-color-inset", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-box-border", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Layout tokens", + "area": "layout", + "group": "Icon (boxed variant)", + "description": "extras for .sf-icon--boxed. The naked .sf-icon sizing tokens (--sf-icon-xs..xl) live in core/tokens.css alongside the typography scale.", + "value": "var(--sf-border-width-1) solid var(--sf-color-border)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-box-pad", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Layout tokens", + "area": "layout", + "group": "Icon (boxed variant)", + "description": "extras for .sf-icon--boxed. The naked .sf-icon sizing tokens (--sf-icon-xs..xl) live in core/tokens.css alongside the typography scale.", + "value": "0.5em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-box-radius", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Layout tokens", + "area": "layout", + "group": "Icon (boxed variant)", + "description": "extras for .sf-icon--boxed. The naked .sf-icon sizing tokens (--sf-icon-xs..xl) live in core/tokens.css alongside the typography scale.", + "value": "var(--sf-radius-s)", + "aliasOf": "--sf-radius-s", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "2em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "1.5em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "1em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "3em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-icon-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "icon", + "category": "Core tokens", + "area": "core", + "group": "Icon sizes", + "description": "em-based by design. Icons are sized in em so they scale with the surrounding text: an icon in a button at --sf-text-m renders at 1rem; moved into a heading at --sf-text-2xl, the same icon scales up automatically. Global scaling flows transitively through --sf-text-scale (parent…", + "value": "0.875em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-imposter-margin", + "type": "token", + "tier": "PUBLIC", + "namespace": "imposter", + "category": "Layout tokens", + "area": "layout", + "group": "Imposter (centered absolute/fixed overlay)", + "description": "Imposter (centered absolute/fixed overlay)", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-info-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "info", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "200", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-info-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "info", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "30%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-info-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "info", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-is-active", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "is", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "Mode flag — drives formula direction for non-color dark overrides. Set by themes.css via [data-theme=\"dark\"] and the prefers-color-scheme media query. Do not set directly.", + "value": "0", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-is-current", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "is", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "Mode flag — drives formula direction for non-color dark overrides. Set by themes.css via [data-theme=\"dark\"] and the prefers-color-scheme media query. Do not set directly.", + "value": "0", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-is-dark", + "type": "token", + "tier": "INTERNAL", + "namespace": "is", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "Mode flag — drives formula direction for non-color dark overrides. Set by themes.css via [data-theme=\"dark\"] and the prefers-color-scheme media query. Do not set directly.", + "value": "0", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-is-open", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "is", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "Mode flag — drives formula direction for non-color dark overrides. Set by themes.css via [data-theme=\"dark\"] and the prefers-color-scheme media query. Do not set directly.", + "value": "0", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-is-pressed", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "is", + "category": "Core tokens", + "area": "core", + "group": "STATUS COLORS (-light source tokens)", + "description": "Mode flag — drives formula direction for non-color dark overrides. Set by themes.css via [data-theme=\"dark\"] and the prefers-color-scheme media query. Do not set directly.", + "value": "0", + "aliasOf": null, + "registered": true, + "animatable": true, + "syntax": "", + "inherits": true, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-leading-normal", + "type": "token", + "tier": "PUBLIC", + "namespace": "leading", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "1.5", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-leading-relaxed", + "type": "token", + "tier": "PUBLIC", + "namespace": "leading", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "1.625", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-leading-snug", + "type": "token", + "tier": "PUBLIC", + "namespace": "leading", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "1.3", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-leading-tight", + "type": "token", + "tier": "PUBLIC", + "namespace": "leading", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "1.1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-line-clamp", + "type": "token", + "tier": "PUBLIC", + "namespace": "line", + "category": "Macro tokens", + "area": "macros", + "group": "Line clamp", + "description": "default line count for .sf-line-clamp-N. Override per element: style=\"--sf-line-clamp: 5\". The fixed-N variants .sf-line-clamp-2 / -3 don't read this token (they hardcode the value), so the default only applies to .sf-line-clamp-N callers.", + "value": "3", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-link-external-marker", + "type": "token", + "tier": "PUBLIC", + "namespace": "link", + "category": "Core tokens", + "area": "core", + "group": "Spacing aliases", + "description": "Leading space is baked into the default so consumers can fully disable the indicator with `--sf-link-external-marker: \"\"` — without the space a bare \"\" still left a stray space after the link text. Override with your own glyph (include leading space if you want one): `:root {…", + "value": "\" \\2197\"", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-link-underline-offset", + "type": "token", + "tier": "PUBLIC", + "namespace": "link", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Underline geometry — consumed by a:link in core/base.css and by the .sf-link--* macros. `auto` defers to the font's own metrics; set an explicit length (e.g. 0.08em) for a uniform rule.", + "value": "0.15em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-link-underline-thickness", + "type": "token", + "tier": "PUBLIC", + "namespace": "link", + "category": "Core tokens", + "area": "core", + "group": "Links", + "description": "Underline geometry — consumed by a:link in core/base.css and by the .sf-link--* macros. `auto` defers to the font's own metrics; set an explicit length (e.g. 0.08em) for a uniform rule.", + "value": "auto", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-lumlocker", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "lumlocker", + "category": "Core tokens", + "area": "core", + "group": "LumLocker", + "description": "OKLCH L value used by the :root[data-lumlocker] override in core/themes.css. Locks all 5 brand colors (primary, secondary, tertiary, action, neutral) to one shared lightness while keeping their individual hue and chroma. Base is excluded — it must remain near-white in light…", + "value": "0.65", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-mask-scrim-end", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "mask", + "category": "Core tokens", + "area": "core", + "group": "Mask scrim", + "description": "edge-fade stops for scroll reels / overflow. Use in a mask-image gradient to fade content near an edge: mask-image: linear-gradient(to right, transparent 0, #000 var(--sf-mask-scrim-start), #000 calc(100% - var(--sf-mask-scrim-end)), transparent 100%);", + "value": "var(--sf-space-l)", + "aliasOf": "--sf-space-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-mask-scrim-start", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "mask", + "category": "Core tokens", + "area": "core", + "group": "Mask scrim", + "description": "edge-fade stops for scroll reels / overflow. Use in a mask-image gradient to fade content near an edge: mask-image: linear-gradient(to right, transparent 0, #000 var(--sf-mask-scrim-start), #000 calc(100% - var(--sf-mask-scrim-end)), transparent 100%);", + "value": "var(--sf-space-l)", + "aliasOf": "--sf-space-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-motion-scale", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "motion", + "category": "Core tokens", + "area": "core", + "group": "Scale multipliers", + "description": "Scale multipliers", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-neutral-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "neutral", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "217", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-neutral-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "neutral", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "42%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-neutral-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "neutral", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "11%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-object-fit", + "type": "token", + "tier": "PUBLIC", + "namespace": "object", + "category": "Core tokens", + "area": "core", + "group": "Object fit / position", + "description": "global defaults for replaced elements. Applied in core/base.css on img and video. Override per element via inline style=\"--sf-object-position: top\" or in BEM CSS.", + "value": "cover", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-object-position", + "type": "token", + "tier": "PUBLIC", + "namespace": "object", + "category": "Core tokens", + "area": "core", + "group": "Object fit / position", + "description": "global defaults for replaced elements. Applied in core/base.css on img and video. Override per element via inline style=\"--sf-object-position: top\" or in BEM CSS.", + "value": "50% 50%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-0", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-10", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "0.1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-100", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-25", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "0.25", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-50", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "0.5", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-75", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "0.75", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-opacity-disabled", + "type": "token", + "tier": "PUBLIC", + "namespace": "opacity", + "category": "Core tokens", + "area": "core", + "group": "Shadow", + "description": "strength scales up in dark mode via --sf-is-dark", + "value": "0.45", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-optical-sizing", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "optical", + "category": "Core tokens", + "area": "core", + "group": "Font families", + "description": "e.g. \"wght\" 450, \"opsz\" 32", + "value": "auto", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-perspective-far", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "perspective", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "2000px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-perspective-near", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "perspective", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "500px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-perspective-normal", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "perspective", + "category": "Core tokens", + "area": "core", + "group": "Blur & opacity", + "description": "3D perspective", + "value": "1000px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-primary-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "primary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "226", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-primary-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "primary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "47%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-primary-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "primary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "99%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-print-base-size", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "print", + "category": "Core tokens", + "area": "core", + "group": "Print", + "description": "Print", + "value": "11pt", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-print-page-margin", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "print", + "category": "Core tokens", + "area": "core", + "group": "Print", + "description": "Print", + "value": "2cm", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-print-page-size", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "print", + "category": "Core tokens", + "area": "core", + "group": "Print", + "description": "Print", + "value": "a4", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-block-margin", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-figcaption-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-text-s)", + "aliasOf": "--sf-text-s", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-figure-margin", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-space-l)", + "aliasOf": "--sf-space-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-heading-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-space-s)", + "aliasOf": "--sf-space-s", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-list-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-space-xs)", + "aliasOf": "--sf-space-xs", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-marker-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-color-primary)", + "aliasOf": "--sf-color-primary", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-media-margin", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-space-m)", + "aliasOf": "--sf-space-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-media-radius", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Macro tokens", + "area": "macros", + "group": "Prose", + "description": "per-instance override knobs for .sf-prose. All values default to system spacing/color tokens so prose stays in sync with the global scale unless overridden. Override per-element: style=\"--sf-prose-marker-color: var(--sf-color-secondary)\"", + "value": "var(--sf-radius-m)", + "aliasOf": "--sf-radius-m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-prose-paragraph", + "type": "token", + "tier": "PUBLIC", + "namespace": "prose", + "category": "Layout tokens", + "area": "layout", + "group": "Prose", + "description": "Prose", + "value": "var(--sf-space-content)", + "aliasOf": "--sf-space-content", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(24px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-3xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(32px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-4xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(48px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-full", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "9999px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(12px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(8px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-none", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-outer", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "Concentric helper — outer radius for a container that wraps content padded by --sf-component-pad with inner radius m. Keeps inner elements visually proportional inside a padded box. Override per use: .my-card { border-radius: var(--sf-radius-outer); } Maths: outer = inner +…", + "value": "calc(var(--sf-radius-m) + var(--sf-component-pad))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-pill", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "Pill — semantic alias of --sf-radius-full. Reach for this name on rectangles you want capsule-shaped (badges, tags, chips); use --sf-radius-full when you mean \"as round as topologically possible\".", + "value": "var(--sf-radius-full)", + "aliasOf": "--sf-radius-full", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(4px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-scale", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Scale multipliers", + "description": "Scale multipliers", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(16px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-radius-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "radius", + "category": "Core tokens", + "area": "core", + "group": "Border radius", + "description": "--sf-radius-full: intentionally not scaled by --sf-radius-scale. A pill/circle is a topological constant, not a relative size: any --sf-radius-scale: 0 (\"sharp\" design system) should still render pill buttons as pills. 9999px is a magic-number convention large enough to clip to…", + "value": "calc(2px * var(--sf-radius-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-3-2", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "3 / 2", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-4-3", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "4 / 3", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-cinema", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "21 / 9", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-golden", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "1.618 / 1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-portrait", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "3 / 4", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-square", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-ratio-video", + "type": "token", + "tier": "PUBLIC", + "namespace": "ratio", + "category": "Core tokens", + "area": "core", + "group": "Aspect ratios", + "description": "Aspect ratios", + "value": "16 / 9", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-reel-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "reel", + "category": "Layout tokens", + "area": "layout", + "group": "Reel", + "description": "Reel", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-reel-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "reel", + "category": "Layout tokens", + "area": "layout", + "group": "Reel", + "description": "Reel", + "value": "auto", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-reel-item-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "reel", + "category": "Layout tokens", + "area": "layout", + "group": "Reel", + "description": "Reel", + "value": "max-content", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-safe-bottom", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "safe", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Lightness crossover for text-on-color auto-contrast. Colours with L above this value get dark text; below get light text. Default 0.6 guarantees ≥ 3:1 for most colours. Shift down (e.g. 0.55) if your brand sits in the 0.52-0.60 range and you prefer white text on it.", + "value": "env(safe-area-inset-bottom, 0px)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-safe-left", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "safe", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Lightness crossover for text-on-color auto-contrast. Colours with L above this value get dark text; below get light text. Default 0.6 guarantees ≥ 3:1 for most colours. Shift down (e.g. 0.55) if your brand sits in the 0.52-0.60 range and you prefer white text on it.", + "value": "env(safe-area-inset-left, 0px)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-safe-right", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "safe", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Lightness crossover for text-on-color auto-contrast. Colours with L above this value get dark text; below get light text. Default 0.6 guarantees ≥ 3:1 for most colours. Shift down (e.g. 0.55) if your brand sits in the 0.52-0.60 range and you prefer white text on it.", + "value": "env(safe-area-inset-right, 0px)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-safe-top", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "safe", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Lightness crossover for text-on-color auto-contrast. Colours with L above this value get dark text; below get light text. Default 0.6 guarantees ≥ 3:1 for most colours. Shift down (e.g. 0.55) if your brand sits in the 0.52-0.60 range and you prefer white text on it.", + "value": "env(safe-area-inset-top, 0px)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrim-color", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrim", + "category": "Macro tokens", + "area": "macros", + "group": "Scrim", + "description": "darkening overlay for text-over-image legibility, consumed by the .sf-scrim macro. The gradient is composed from a direction + a color stop so consumers can retune either independently: style=\"--sf-scrim-color: oklch(0 0 0 / 0.75)\" style=\"--sf-scrim-direction: to top right\"…", + "value": "oklch(0 0 0 / 0.55)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrim-direction", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrim", + "category": "Macro tokens", + "area": "macros", + "group": "Scrim", + "description": "darkening overlay for text-over-image legibility, consumed by the .sf-scrim macro. The gradient is composed from a direction + a color stop so consumers can retune either independently: style=\"--sf-scrim-color: oklch(0 0 0 / 0.75)\" style=\"--sf-scrim-direction: to top right\"…", + "value": "to top", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrim-gradient", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrim", + "category": "Macro tokens", + "area": "macros", + "group": "Scrim", + "description": "darkening overlay for text-over-image legibility, consumed by the .sf-scrim macro. The gradient is composed from a direction + a color stop so consumers can retune either independently: style=\"--sf-scrim-color: oklch(0 0 0 / 0.75)\" style=\"--sf-scrim-direction: to top right\"…", + "value": "linear-gradient(var(--sf-scrim-direction), var(--sf-scrim-color), transparent)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrim-text-shadow", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrim", + "category": "Macro tokens", + "area": "macros", + "group": "Scrim", + "description": "Text-on-image legibility WITHOUT darkening the picture — a soft shadow halo behind glyphs, consumed by .sf-text-protect.", + "value": "0 1px 3px oklch(0 0 0 / 0.6)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scroll-shadow-size", + "type": "token", + "tier": "PUBLIC", + "namespace": "scroll", + "category": "Macro tokens", + "area": "macros", + "group": "Scroll shadow / overflow fade", + "description": "mask gradient size. Used by .sf-scroll-shadow (top+bottom) and .sf-overflow-fade (end-edge horizontal fade).", + "value": "2rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scroll-timeline-range-end", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "scroll", + "category": "Core tokens", + "area": "core", + "group": "Scroll-driven animation range", + "description": "consumer API. Attach these to your own scroll-timeline via animation-range. Not consumed by the framework itself; intended for BEM component authors.", + "value": "cover 30%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scroll-timeline-range-start", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "scroll", + "category": "Core tokens", + "area": "core", + "group": "Scroll-driven animation range", + "description": "consumer API. Attach these to your own scroll-timeline via animation-range. Not consumed by the framework itself; intended for BEM component authors.", + "value": "entry 0%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrollbar-thumb", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrollbar", + "category": "Core tokens", + "area": "core", + "group": "Scrollbar", + "description": "Scrollbar", + "value": "var(--sf-color-neutral)", + "aliasOf": "--sf-color-neutral", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-scrollbar-track", + "type": "token", + "tier": "PUBLIC", + "namespace": "scrollbar", + "category": "Core tokens", + "area": "core", + "group": "Scrollbar", + "description": "Scrollbar", + "value": "transparent", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-secondary-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "secondary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "221", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-secondary-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "secondary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "12%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-secondary-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "secondary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "45%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "var(--sf-section-pad--m)", + "aliasOf": "--sf-section-pad--m", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "calc(var(--sf-space-4xl) * 2)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--l", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "var(--sf-space-4xl)", + "aliasOf": "--sf-space-4xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--m", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "var(--sf-space-3xl)", + "aliasOf": "--sf-space-3xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--s", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "var(--sf-space-2xl)", + "aliasOf": "--sf-space-2xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "calc(var(--sf-space-4xl) * 1.5)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-section-pad--xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "section", + "category": "Core tokens", + "area": "core", + "group": "Section padding", + "description": "Section padding", + "value": "var(--sf-space-xl)", + "aliasOf": "--sf-space-xl", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.6), 0.7)), 0 20px 60px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 4), 0.7)), 0 40px 100px -8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 5), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-color", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "oklch(from var(--sf-color-neutral) 0.15 c h)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-glow", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "Shadow glow", + "description": "Shadow glow", + "value": "0 0 15px 2px oklch(from var(--sf-shadow-glow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-glow-color", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "Shadow", + "description": "strength scales up in dark mode via --sf-is-dark", + "value": "var(--sf-color-primary)", + "aliasOf": "--sf-color-primary", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-inner", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "inset 0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "0 2px 4px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 8px 24px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 3), 0.7)), 0 16px 48px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "0 1px 3px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 4px 12px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-none", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7)), 0 2px 6px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, var(--sf-shadow-strength), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-strength", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "Shadow", + "description": "strength scales up in dark mode via --sf-is-dark", + "value": "calc(0.08 + var(--sf-is-dark) * 0.17)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "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))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-shadow-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "shadow", + "category": "Core tokens", + "area": "core", + "group": "CSS multi-column", + "description": "Shadow tint — near-black derived from the neutral; the tint simply inherits the neutral's own chroma/hue, so a colourless neutral yields colourless shadows. Forced dark in both modes; --sf-shadow-strength handles dark-mode intensity. Override to a brand colour for explicitly…", + "value": "0 1px 2px 0 oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 0.5), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sidebar-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "sidebar", + "category": "Layout tokens", + "area": "layout", + "group": "Sidebar", + "description": "Sidebar", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sidebar-min-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "sidebar", + "category": "Layout tokens", + "area": "layout", + "group": "Sidebar", + "description": "Sidebar", + "value": "50%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sidebar-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "sidebar", + "category": "Layout tokens", + "area": "layout", + "group": "Sidebar", + "description": "content column minimum", + "value": "18rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-size-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "size", + "category": "Core tokens", + "area": "core", + "group": "UI sizes", + "description": "UI sizes", + "value": "2.75rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-size-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "size", + "category": "Core tokens", + "area": "core", + "group": "UI sizes", + "description": "UI sizes", + "value": "2.5rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-size-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "size", + "category": "Core tokens", + "area": "core", + "group": "UI sizes", + "description": "UI sizes", + "value": "2rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-size-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "size", + "category": "Core tokens", + "area": "core", + "group": "UI sizes", + "description": "UI sizes", + "value": "3.5rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-size-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "size", + "category": "Core tokens", + "area": "core", + "group": "UI sizes", + "description": "UI sizes", + "value": "1.5rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(1.95rem, calc(0.04133333333333333 * (100vw - 22.5rem) + 1.95rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.0626666666666667 * (100vw - 22.5rem) + 0.51rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.25rem, calc(0.0517037037037037 * (100vw - 22.5rem) + 1.25rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1rem, calc(0.0554074074074074 * (100vw - 22.5rem) + 1rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.0583703703703704 * (100vw - 22.5rem) + 0.8rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.56rem, calc(0.0471111111111111 * (100vw - 22.5rem) + 1.56rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.0607407407407407 * (100vw - 22.5rem) + 0.64rem), 4.74rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(0.51rem, calc(0.004888888888888888 * (100vw - 22.5rem) + 0.51rem), 0.84rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(2.44rem, calc(0.057333333333333326 * (100vw - 22.5rem) + 2.44rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.95rem, calc(0.0645925925925926 * (100vw - 22.5rem) + 1.95rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.0859259259259259 * (100vw - 22.5rem) + 0.51rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.25rem, calc(0.074962962962963 * (100vw - 22.5rem) + 1.25rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1rem, calc(0.0786666666666667 * (100vw - 22.5rem) + 1rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.0816296296296296 * (100vw - 22.5rem) + 0.8rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.56rem, calc(0.0703703703703704 * (100vw - 22.5rem) + 1.56rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-3xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.084 * (100vw - 22.5rem) + 0.64rem), 6.31rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(3.05rem, calc(0.07955555555555556 * (100vw - 22.5rem) + 3.05rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.95rem, calc(0.0958518518518519 * (100vw - 22.5rem) + 1.95rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.117185185185185 * (100vw - 22.5rem) + 0.51rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-3xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(2.44rem, calc(0.0885925925925926 * (100vw - 22.5rem) + 2.44rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.25rem, calc(0.106222222222222 * (100vw - 22.5rem) + 1.25rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1rem, calc(0.109925925925926 * (100vw - 22.5rem) + 1rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.112888888888889 * (100vw - 22.5rem) + 0.8rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.56rem, calc(0.10162962962963 * (100vw - 22.5rem) + 1.56rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-4xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.115259259259259 * (100vw - 22.5rem) + 0.64rem), 8.42rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-content", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Layout tokens", + "area": "layout", + "group": "Shared spacing aliases", + "description": "component-level gap", + "value": "var(--sf-content-gap)", + "aliasOf": "--sf-content-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Layout tokens", + "area": "layout", + "group": "Shared spacing aliases", + "description": "Shared spacing aliases", + "value": "var(--sf-gap)", + "aliasOf": "--sf-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-gutter", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "fixed", + "value": "var(--sf-space-l)", + "aliasOf": "--sf-space-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(1.25rem, calc(0.021037037037037035 * (100vw - 22.5rem) + 1.25rem), 2.67rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-l-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.032 * (100vw - 22.5rem) + 0.51rem), 2.67rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-l-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1rem, calc(0.0247407407407407 * (100vw - 22.5rem) + 1rem), 2.67rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-l-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.0277037037037037 * (100vw - 22.5rem) + 0.8rem), 2.67rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-l-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.0300740740740741 * (100vw - 22.5rem) + 0.64rem), 2.67rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(1rem, calc(0.014814814814814815 * (100vw - 22.5rem) + 1rem), 2rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-m-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.0220740740740741 * (100vw - 22.5rem) + 0.51rem), 2rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-m-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.0177777777777778 * (100vw - 22.5rem) + 0.8rem), 2rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-m-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.0201481481481481 * (100vw - 22.5rem) + 0.64rem), 2rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-none", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "fixed", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-px", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "fixed", + "value": "1px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(0.8rem, calc(0.01037037037037037 * (100vw - 22.5rem) + 0.8rem), 1.5rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-s-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.0146666666666667 * (100vw - 22.5rem) + 0.51rem), 1.5rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-s-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.0127407407407407 * (100vw - 22.5rem) + 0.64rem), 1.5rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-scale", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Scale multipliers", + "description": "Scale multipliers", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(1.56rem, calc(0.029481481481481477 * (100vw - 22.5rem) + 1.56rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.045037037037037 * (100vw - 22.5rem) + 0.51rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1.25rem, calc(0.0340740740740741 * (100vw - 22.5rem) + 1.25rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(1rem, calc(0.0377777777777778 * (100vw - 22.5rem) + 1rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.8rem, calc(0.0407407407407407 * (100vw - 22.5rem) + 0.8rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.64rem, calc(0.0431111111111111 * (100vw - 22.5rem) + 0.64rem), 3.55rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Core tokens", + "area": "core", + "group": "Spacing", + "description": "Spacing — fluid", + "value": "calc(clamp(0.64rem, calc(0.007259259259259258 * (100vw - 22.5rem) + 0.64rem), 1.13rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-space-xs-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "space", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Spacing bridges", + "description": "Full descending matrix: --sf-space-{larger}-to-{smaller} Each token is a fluid clamp spanning from the larger step's max value down to the smaller step's min value. Respects --sf-space-scale like all fluid spacing tokens.", + "value": "calc(clamp(0.51rem, calc(0.00918518518518518 * (100vw - 22.5rem) + 0.51rem), 1.13rem) * var(--sf-space-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-stack-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "stack", + "category": "Layout tokens", + "area": "layout", + "group": "Stack", + "description": "Stack", + "value": "var(--sf-space-content)", + "aliasOf": "--sf-space-content", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-state-pending-opacity", + "type": "token", + "tier": "PUBLIC", + "namespace": "state", + "category": "Core tokens", + "area": "core", + "group": "Shadow", + "description": "strength scales up in dark mode via --sf-is-dark", + "value": "0.7", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sticky-offset", + "type": "token", + "tier": "PUBLIC", + "namespace": "sticky", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "clamp( var(--sf-sticky-offset-mobile), calc(0.022222222222222223 * (100vw - 22.5rem) + var(--sf-sticky-offset-mobile)), var(--sf-sticky-offset-desktop))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sticky-offset-desktop", + "type": "token", + "tier": "PUBLIC", + "namespace": "sticky", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "var(--sf-header-height-desktop)", + "aliasOf": "--sf-header-height-desktop", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-sticky-offset-mobile", + "type": "token", + "tier": "PUBLIC", + "namespace": "sticky", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "var(--sf-header-height-mobile)", + "aliasOf": "--sf-header-height-mobile", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-stroke-bold", + "type": "token", + "tier": "PUBLIC", + "namespace": "stroke", + "category": "Core tokens", + "area": "core", + "group": "Stroke widths", + "description": "Stroke widths", + "value": "2px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-stroke-heavy", + "type": "token", + "tier": "PUBLIC", + "namespace": "stroke", + "category": "Core tokens", + "area": "core", + "group": "Stroke widths", + "description": "Stroke widths", + "value": "3px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-stroke-regular", + "type": "token", + "tier": "PUBLIC", + "namespace": "stroke", + "category": "Core tokens", + "area": "core", + "group": "Stroke widths", + "description": "Stroke widths", + "value": "1.5px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-stroke-thin", + "type": "token", + "tier": "PUBLIC", + "namespace": "stroke", + "category": "Core tokens", + "area": "core", + "group": "Stroke widths", + "description": "Stroke widths", + "value": "1px", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-success-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "success", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "134", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-success-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "success", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "24%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-success-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "success", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-switcher-gap", + "type": "token", + "tier": "PUBLIC", + "namespace": "switcher", + "category": "Layout tokens", + "area": "layout", + "group": "Switcher", + "description": "Switcher", + "value": "var(--sf-space-gap)", + "aliasOf": "--sf-space-gap", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-switcher-threshold", + "type": "token", + "tier": "PUBLIC", + "namespace": "switcher", + "category": "Layout tokens", + "area": "layout", + "group": "Switcher", + "description": "Switcher", + "value": "30rem", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tertiary-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "tertiary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "268", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tertiary-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "tertiary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "39%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tertiary-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "tertiary", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "84%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(1.95rem, calc(0.014962962962962963 * (100vw - 22.5rem) + 1.95rem), 2.96rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-snug)", + "aliasOf": "--sf-leading-snug", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.0362962962962963 * (100vw - 22.5rem) + 0.51rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.25rem, calc(0.0253333333333333 * (100vw - 22.5rem) + 1.25rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1rem, calc(0.029037037037037 * (100vw - 22.5rem) + 1rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.032 * (100vw - 22.5rem) + 0.8rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.56rem, calc(0.0207407407407407 * (100vw - 22.5rem) + 1.56rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.0343703703703704 * (100vw - 22.5rem) + 0.64rem), 2.96rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(0.51rem, calc(0.00029629629629629656 * (100vw - 22.5rem) + 0.51rem), 0.53rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xs-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xs-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xs-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-relaxed)", + "aliasOf": "--sf-leading-relaxed", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-2xs-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "55ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(2.44rem, calc(0.022370370370370374 * (100vw - 22.5rem) + 2.44rem), 3.95rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-tight)", + "aliasOf": "--sf-tracking-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-tight)", + "aliasOf": "--sf-leading-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.95rem, calc(0.0296296296296296 * (100vw - 22.5rem) + 1.95rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.050962962962963 * (100vw - 22.5rem) + 0.51rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.25rem, calc(0.04 * (100vw - 22.5rem) + 1.25rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1rem, calc(0.0437037037037037 * (100vw - 22.5rem) + 1rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.0466666666666667 * (100vw - 22.5rem) + 0.8rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.56rem, calc(0.0354074074074074 * (100vw - 22.5rem) + 1.56rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-3xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.049037037037037 * (100vw - 22.5rem) + 0.64rem), 3.95rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(3.05rem, calc(0.03274074074074074 * (100vw - 22.5rem) + 3.05rem), 5.26rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-heading)", + "aliasOf": "--sf-font-weight-heading", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-tight)", + "aliasOf": "--sf-tracking-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-tight)", + "aliasOf": "--sf-leading-tight", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-2xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.95rem, calc(0.049037037037037 * (100vw - 22.5rem) + 1.95rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.0703703703703704 * (100vw - 22.5rem) + 0.51rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-3xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(2.44rem, calc(0.0417777777777778 * (100vw - 22.5rem) + 2.44rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.25rem, calc(0.0594074074074074 * (100vw - 22.5rem) + 1.25rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1rem, calc(0.0631111111111111 * (100vw - 22.5rem) + 1rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.0660740740740741 * (100vw - 22.5rem) + 0.8rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.56rem, calc(0.0548148148148148 * (100vw - 22.5rem) + 1.56rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-4xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.0684444444444444 * (100vw - 22.5rem) + 0.64rem), 5.26rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-display-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(3.75rem, calc(0.023407407407407408 * (100vw - 22.5rem) + 3.75rem), 5.33rem) * var(--sf-text-display-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-display-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(3rem, calc(0.014814814814814815 * (100vw - 22.5rem) + 3rem), 4rem) * var(--sf-text-display-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-display-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(2.4rem, calc(0.00888888888888889 * (100vw - 22.5rem) + 2.4rem), 3rem) * var(--sf-text-display-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-display-scale", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Scale multipliers", + "description": "Scale multipliers", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(1.25rem, calc(0.006222222222222221 * (100vw - 22.5rem) + 1.25rem), 1.67rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-normal)", + "aliasOf": "--sf-leading-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.0171851851851852 * (100vw - 22.5rem) + 0.51rem), 1.67rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1rem, calc(0.00992592592592592 * (100vw - 22.5rem) + 1rem), 1.67rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.0128888888888889 * (100vw - 22.5rem) + 0.8rem), 1.67rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-l-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.0152592592592593 * (100vw - 22.5rem) + 0.64rem), 1.67rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(1rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1rem), 1.25rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-normal)", + "aliasOf": "--sf-leading-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "65ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.010962962962963 * (100vw - 22.5rem) + 0.51rem), 1.25rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.00666666666666667 * (100vw - 22.5rem) + 0.8rem), 1.25rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-m-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.00903703703703704 * (100vw - 22.5rem) + 0.64rem), 1.25rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(0.8rem, calc(0.002074074074074073 * (100vw - 22.5rem) + 0.8rem), 0.94rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-relaxed)", + "aliasOf": "--sf-leading-relaxed", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "65ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.00637037037037037 * (100vw - 22.5rem) + 0.51rem), 0.94rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-s-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.00444444444444444 * (100vw - 22.5rem) + 0.64rem), 0.94rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-scale", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Scale multipliers", + "description": "Scale multipliers", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-shadow-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "share --sf-shadow-color / --sf-shadow-strength", + "value": "0 4px 8px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2.5), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-shadow-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "share --sf-shadow-color / --sf-shadow-strength", + "value": "0 2px 4px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 2), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-shadow-none", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "share --sf-shadow-color / --sf-shadow-strength", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-shadow-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Text shadows", + "description": "share --sf-shadow-color / --sf-shadow-strength", + "value": "0 1px 2px oklch(from var(--sf-shadow-color) l c h / clamp(0, calc(var(--sf-shadow-strength) * 1.5), 0.7))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(1.56rem, calc(0.00977777777777778 * (100vw - 22.5rem) + 1.56rem), 2.22rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-snug)", + "aliasOf": "--sf-leading-snug", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "none", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.0253333333333333 * (100vw - 22.5rem) + 0.51rem), 2.22rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-to-l", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1.25rem, calc(0.0143703703703704 * (100vw - 22.5rem) + 1.25rem), 2.22rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-to-m", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(1rem, calc(0.0180740740740741 * (100vw - 22.5rem) + 1rem), 2.22rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-to-s", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.8rem, calc(0.021037037037037 * (100vw - 22.5rem) + 0.8rem), 2.22rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xl-to-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.64rem, calc(0.0234074074074074 * (100vw - 22.5rem) + 0.64rem), 2.22rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Core tokens", + "area": "core", + "group": "Font sizes", + "description": "fluid", + "value": "calc(clamp(0.64rem, calc(0.0008888888888888881 * (100vw - 22.5rem) + 0.64rem), 0.7rem) * var(--sf-text-scale))", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs-font-weight", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-font-weight-body)", + "aliasOf": "--sf-font-weight-body", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs-letter-spacing", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-tracking-normal)", + "aliasOf": "--sf-tracking-normal", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs-line-height", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "var(--sf-leading-relaxed)", + "aliasOf": "--sf-leading-relaxed", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs-max-width", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Per-text-size sub-properties", + "description": "Override knobs for each body text size step. Defaults encode standard typographic conventions; override any value globally here or locally via CSS custom property on a scoped element. These tokens are NOT auto-applied — they are opt-in composable overrides. Wire them up in your…", + "value": "60ch", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-text-xs-to-2xs", + "type": "token", + "tier": "PUBLIC", + "namespace": "text", + "category": "Sizes-extended tokens", + "area": "sizes", + "group": "Text bridges", + "description": "Full descending matrix: --sf-text-{larger}-to-{smaller} No --sf-text-scale multiplier — consistent with how the base text tokens are defined in core/tokens.css.", + "value": "clamp(0.51rem, calc(0.00281481481481481 * (100vw - 22.5rem) + 0.51rem), 0.7rem)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": true, + "layer": "slashed.tokens", + "sourceFiles": [ + "optional/tokens.sizes-extended.css" + ], + "bundles": [ + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-touch-target", + "type": "token", + "tier": "PUBLIC", + "namespace": "touch", + "category": "Core tokens", + "area": "core", + "group": "Layout & a11y", + "description": "Header height fluidly interpolates between the mobile and desktop tokens across the framework viewport range (22.5rem → 90rem), the same range used by the fluid type/space scales. Override either endpoint to retune; set both equal for a fixed height. The slope (0.0222…) matches…", + "value": "var(--sf-size-l)", + "aliasOf": "--sf-size-l", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tracking-normal", + "type": "token", + "tier": "PUBLIC", + "namespace": "tracking", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tracking-tight", + "type": "token", + "tier": "PUBLIC", + "namespace": "tracking", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "-0.025em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tracking-wide", + "type": "token", + "tier": "PUBLIC", + "namespace": "tracking", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "0.025em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tracking-wider", + "type": "token", + "tier": "PUBLIC", + "namespace": "tracking", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "0.05em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-tracking-widest", + "type": "token", + "tier": "PUBLIC", + "namespace": "tracking", + "category": "Core tokens", + "area": "core", + "group": "Line heights & letter spacing", + "description": "Line heights & letter spacing", + "value": "0.1em", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-all", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "all var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-colors", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), text-decoration-color var(--sf-duration-normal) var(--sf-ease-out), fill var(--sf-duration-normal) var(--sf-ease-out), stroke var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-enter", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "color var(--sf-duration-normal) var(--sf-ease-out), background-color var(--sf-duration-normal) var(--sf-ease-out), border-color var(--sf-duration-normal) var(--sf-ease-out), box-shadow var(--sf-duration-normal) var(--sf-ease-out), opacity var(--sf-duration-normal) var(--sf-ease-out), transform var(--sf-duration-normal) var(--sf-ease-out), filter var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-exit", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "color var(--sf-duration-fast) var(--sf-ease-in), background-color var(--sf-duration-fast) var(--sf-ease-in), border-color var(--sf-duration-fast) var(--sf-ease-in), box-shadow var(--sf-duration-fast) var(--sf-ease-in), opacity var(--sf-duration-fast) var(--sf-ease-in), transform var(--sf-duration-fast) var(--sf-ease-in), filter var(--sf-duration-fast) var(--sf-ease-in)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-fast", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "color var(--sf-duration-fast) var(--sf-ease-out), background-color var(--sf-duration-fast) var(--sf-ease-out), border-color var(--sf-duration-fast) var(--sf-ease-out), box-shadow var(--sf-duration-fast) var(--sf-ease-out), opacity var(--sf-duration-fast) var(--sf-ease-out), transform var(--sf-duration-fast) var(--sf-ease-out), filter var(--sf-duration-fast) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-opacity", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "opacity var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-overlay", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "Top-layer transition building block (dialog, [popover]). transition-behavior: allow-discrete keeps the discrete `display` and `overlay` properties in the transition so entry animations can fire and exit animations finish before the element leaves the top layer. Compose it into…", + "value": "overlay var(--sf-duration-normal) allow-discrete, display var(--sf-duration-normal) allow-discrete", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-shadow", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "box-shadow var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-slow", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "color var(--sf-duration-slow) var(--sf-ease-in-out), background-color var(--sf-duration-slow) var(--sf-ease-in-out), border-color var(--sf-duration-slow) var(--sf-ease-in-out), box-shadow var(--sf-duration-slow) var(--sf-ease-in-out), opacity var(--sf-duration-slow) var(--sf-ease-in-out), transform var(--sf-duration-slow) var(--sf-ease-in-out), filter var(--sf-duration-slow) var(--sf-ease-in-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-transition-transform", + "type": "token", + "tier": "PUBLIC", + "namespace": "transition", + "category": "Core tokens", + "area": "core", + "group": "Transition shorthands", + "description": "--sf-transition-all transitions ALL properties — convenient but a performance footgun (forces the browser to watch every computed value). It is the ONLY token here that uses `all`; reach for it only as a deliberate escape hatch. Every other token below names an explicit…", + "value": "transform var(--sf-duration-normal) var(--sf-ease-out)", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-truncate-suffix", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "truncate", + "category": "Macro tokens", + "area": "macros", + "group": "Truncate", + "description": "ellipsis character for .sf-truncate. Stays as a token so consumers can swap to ASCII \"...\" or a localised character without rewriting the rule. The CSS text-overflow: ellipsis property doesn't read it directly; it's exposed for consumer-built variants.", + "value": "\"\\2026\"", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-warning-h", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "warning", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "42", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-warning-l", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "warning", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "45%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-warning-s", + "type": "token", + "tier": "PUBLIC-ADVANCED", + "namespace": "warning", + "category": "Color fallback (legacy HSL)", + "area": "fallback", + "group": "Source channels", + "description": "override to apply brand colours Values are approximate HSL equivalents of the OKLCH source tokens.", + "value": "100%", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "fallbackOnly": true, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.color-fallbacks.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-base", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "0", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-below", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "-1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-dropdown", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "100 fixed app chrome (navbar, FAB)", + "value": "var(--sf-z-high)", + "aliasOf": "--sf-z-high", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-fixed", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "10 sticky headers / sidebars", + "value": "var(--sf-z-mid)", + "aliasOf": "--sf-z-mid", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-high", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "500", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-low", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "10", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-max", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "9999", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-mid", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "100", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-overlay", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "900 transient notifications", + "value": "var(--sf-z-max)", + "aliasOf": "--sf-z-max", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-raised", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "1", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-sticky", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Semantic z-index aliases — map UI roles onto the numeric ladder above so component authors target intent, not magic integers. Every role that can overlap another on the scroll plane gets its OWN rung, ordered: raised < sticky < fixed < dropdown < toast. Notably --sf-z-dropdown…", + "value": "var(--sf-z-low)", + "aliasOf": "--sf-z-low", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-toast", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "500 menus — clear sticky + fixed", + "value": "var(--sf-z-top)", + "aliasOf": "--sf-z-top", + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "--sf-z-top", + "type": "token", + "tier": "PUBLIC", + "namespace": "z", + "category": "Core tokens", + "area": "core", + "group": "Z-index", + "description": "Z-index", + "value": "900", + "aliasOf": null, + "registered": false, + "animatable": false, + "syntax": null, + "inherits": null, + "hasFallback": false, + "optional": false, + "layer": "slashed.tokens", + "sourceFiles": [ + "core/tokens.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-active", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-active", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "ACTIVE / SELECTED / CURRENT", + "description": "navigation & toggling", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-busy", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-busy", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "LOADING / ASYNC FEEDBACK", + "description": "Reduced-motion: accessibility.css kills animation-duration via !important on *, *::before, *::after — so this spinner stops even without a local reduced-motion wrapper.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-clickable", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-clickable", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "FOCUS / INTERACTION MODIFIERS", + "description": "FOCUS / INTERACTION MODIFIERS", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-clipped", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-clipped", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OVERFLOW / CLIPPING", + "description": "OVERFLOW / CLIPPING", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-collapsed", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-collapsed", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OPEN / CLOSED", + "description": "disclosure widgets, modals, dropdowns .is-open / .is-collapsed — a thing is shown vs hidden (modal, dropdown, drawer). .is-expanded — maps to aria-expanded on a disclosure/accordion trigger. They share the --sf-is-open flag but signal different intent to consumers.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-current", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-current", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "ACTIVE / SELECTED / CURRENT", + "description": "Generic active indicator — components add visual specifics. Sets a scoped token for components to consume.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-danger", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-danger", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-invalid and .is-error share identical CSS values by design. · .is-invalid → form-field validation failure (maps to aria-invalid=\"true\"). · .is-error → general component error state (failed save, network error).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-disabled", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-disabled", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "INTERACTIVITY", + "description": "DISABLED / READONLY", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-draggable", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-draggable", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "DRAG & DROP", + "description": "DRAG & DROP", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-dragging", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-dragging", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "DRAG & DROP", + "description": "DRAG & DROP", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-drop-target", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-drop-target", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "DRAG & DROP", + "description": "DRAG & DROP", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-empty", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-empty", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "EMPTY STATE", + "description": "NOTE: :empty only matches elements with NO child nodes — including no whitespace. Server-rendered HTML often includes space between tags, which prevents the match. When toggling via JS, call element.textContent = \"\" before adding this class (or use element.innerHTML = \"\" to…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-error", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-error", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-invalid and .is-error share identical CSS values by design. · .is-invalid → form-field validation failure (maps to aria-invalid=\"true\"). · .is-error → general component error state (failed save, network error).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-expanded", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-expanded", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OPEN / CLOSED", + "description": "disclosure widgets, modals, dropdowns .is-open / .is-collapsed — a thing is shown vs hidden (modal, dropdown, drawer). .is-expanded — maps to aria-expanded on a disclosure/accordion trigger. They share the --sf-is-open flag but signal different intent to consumers.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-fixed", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-fixed", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "POSITION / STICKINESS", + "description": "logical: respects writing-mode", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-focused", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-focused", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "FOCUS / INTERACTION MODIFIERS", + "description": "FOCUS / INTERACTION MODIFIERS", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-fullscreen", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-fullscreen", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "POSITION / STICKINESS", + "description": "Intentionally bare — position only. Consumers must supply placement (inset, inset-block-start, etc.) and z-index via a modifier or inline style. Example:
", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-hidden", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-hidden", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VISIBILITY", + "description": "VISIBILITY", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-highlighted", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-highlighted", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "ACTIVE / SELECTED / CURRENT", + "description": "Navigation: marks the current page/route. Components style via .sf-nav .is-current etc. Weight is tokenised so consumers can override without specificity battles: :root { --sf-current-font-weight: var(--sf-font-weight-semibold); }", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-info", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-info", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-invalid and .is-error share identical CSS values by design. · .is-invalid → form-field validation failure (maps to aria-invalid=\"true\"). · .is-error → general component error state (failed save, network error).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-invalid", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-invalid", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-invalid and .is-error share identical CSS values by design. · .is-invalid → form-field validation failure (maps to aria-invalid=\"true\"). · .is-error → general component error state (failed save, network error).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-invisible", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-invisible", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VISIBILITY", + "description": "VISIBILITY", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-loading", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-loading", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "LOADING / ASYNC FEEDBACK", + "description": "LOADING / ASYNC FEEDBACK", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-open", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-open", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OPEN / CLOSED", + "description": "disclosure widgets, modals, dropdowns .is-open / .is-collapsed — a thing is shown vs hidden (modal, dropdown, drawer). .is-expanded — maps to aria-expanded on a disclosure/accordion trigger. They share the --sf-is-open flag but signal different intent to consumers.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-overlay", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-overlay", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OVERLAY / BACKDROP", + "description": "OVERLAY / BACKDROP", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-pending", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-pending", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "LOADING / ASYNC FEEDBACK", + "description": "Reduced-motion: accessibility.css kills animation-duration via !important on *, *::before, *::after — so this spinner stops even without a local reduced-motion wrapper.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-pinned", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-pinned", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "POSITION / STICKINESS", + "description": "logical: respects writing-mode", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-pressed", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-pressed", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "ACTIVE / SELECTED / CURRENT", + "description": "Navigation: marks the current page/route. Components style via .sf-nav .is-current etc. Weight is tokenised so consumers can override without specificity battles: :root { --sf-current-font-weight: var(--sf-font-weight-semibold); }", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-readonly", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-readonly", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "INTERACTIVITY", + "description": "cursor: not-allowed is intentional even though pointer-events:none means it never renders on this element itself. The CSS value IS inherited by child elements that have pointer-events:auto re-enabled, and it is part of the documented .is-disabled API surface.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-resizable", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-resizable", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "POSITION / STICKINESS", + "description": "App-managed fullscreen overlay. For the native Fullscreen API, prefer the `:fullscreen` pseudo-class; this is the JS-toggled equivalent for elements not entered via that API.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-scrollable", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-scrollable", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OVERFLOW / CLIPPING", + "description": "OVERFLOW / CLIPPING", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-selected", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-selected", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "ACTIVE / SELECTED / CURRENT", + "description": "Generic active indicator — components add visual specifics. Sets a scoped token for components to consume.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-skeleton", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-skeleton", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "LOADING / ASYNC FEEDBACK", + "description": "Optimistic UI — request in flight but content still visible/usable (unlike .is-loading, which masks content with a spinner).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-sticky", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-sticky", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "POSITION / STICKINESS", + "description": "POSITION / STICKINESS", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-success", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-success", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-valid and .is-success share identical CSS values by design. The semantic distinction is intentional (see docs/states.md): · .is-valid → form-field validation result (maps to aria-invalid=\"false\"). Use on elements. · .is-success → general component feedback,…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-truncated", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-truncated", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "OVERFLOW / CLIPPING", + "description": "OVERFLOW / CLIPPING", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-unselectable", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-unselectable", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "FOCUS / INTERACTION MODIFIERS", + "description": "FOCUS / INTERACTION MODIFIERS", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-valid", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-valid", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-valid and .is-success share identical CSS values by design. The semantic distinction is intentional (see docs/states.md): · .is-valid → form-field validation result (maps to aria-invalid=\"false\"). Use on elements. · .is-success → general component feedback,…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-visible", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-visible", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VISIBILITY", + "description": "VISIBILITY", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "is-warning", + "type": "class", + "tier": "PUBLIC", + "selector": ".is-warning", + "prefix": "is", + "kind": "state", + "category": "State classes", + "area": "states", + "group": "VALIDATION / FEEDBACK", + "description": "NOTE: .is-invalid and .is-error share identical CSS values by design. · .is-invalid → form-field validation failure (maps to aria-invalid=\"true\"). · .is-error → general component error state (failed save, network error).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.states", + "sourceFiles": [ + "core/states.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "no-motion", + "type": "class", + "tier": "PUBLIC", + "selector": ".no-motion", + "prefix": "", + "kind": "accessibility", + "category": "Accessibility", + "area": "accessibility", + "group": "Reduced motion. Token override helps components that read", + "description": "Manual motion opt-out — same suppression as the OS preference above, but consumer-toggled (e.g. a site-level \"reduce motion\" switch). Works regardless of the OS setting.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.accessibility", + "sourceFiles": [ + "core/accessibility.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "no-print", + "type": "class", + "tier": "PUBLIC", + "selector": ".no-print", + "prefix": "", + "kind": "print", + "category": "Print", + "area": "print", + "group": "", + "description": "Hide non-essential interactive and decorative elements. `!important` is justified: these elements are content negative-space in print, and consumer-authored display rules must not bring them back accidentally.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.print", + "sourceFiles": [ + "core/print.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "print-color-exact", + "type": "class", + "tier": "PUBLIC", + "selector": ".print-color-exact", + "prefix": "", + "kind": "print", + "category": "Print", + "area": "print", + "group": "Opt-in colour treatment", + "description": "Force colour-faithful rendering. Use on regions where a tinted background or coloured text encodes meaning (status pills, severity callouts, syntax highlighting, charts).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.print", + "sourceFiles": [ + "core/print.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "print-no-color", + "type": "class", + "tier": "PUBLIC", + "selector": ".print-no-color", + "prefix": "", + "kind": "print", + "category": "Print", + "area": "print", + "group": "Opt-in colour treatment", + "description": "Opt back into the legacy blanket reset: transparent backgrounds and system text colour everywhere inside the marked subtree. Use on regions where ink-saving is the contract (corporate boilerplate forms, append-to-existing-document templates).", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.print", + "sourceFiles": [ + "core/print.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "print-only", + "type": "class", + "tier": "PUBLIC", + "selector": ".print-only", + "prefix": "", + "kind": "print", + "category": "Print", + "area": "print", + "group": "", + "description": "Screen default: print-only content is hidden until the page is printed.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.print", + "sourceFiles": [ + "core/print.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-alternate", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-alternate", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Alternate (zigzag / media-object)", + "description": "Alternating two-column layouts (container-query responsive). Every other row reverses its children's order. Establishes a named container `sf-alternate` and binds the responsive query to that name — so a `.sf-alternate` nested inside another container (e.g. `.sf-bento`) still…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-aspect", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-aspect", + "prefix": "sf", + "kind": "macro", + "category": "Macro classes", + "area": "macros", + "group": "Aspect", + "description": "Generic aspect-ratio container. Distinct from layout's .sf-frame which targets media (object-fit: cover) — .sf-aspect is content-agnostic. Override: style=\"--sf-aspect: 4 / 3\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.macros", + "sourceFiles": [ + "core/macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-bento", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-bento", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Bento grid", + "description": "Free-form grid with auto-flow dense, responsive via CQ. Override: style=\"--sf-bento-cols: 4; --sf-bento-row: 12rem\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-bento--2", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-bento--2", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Bento grid", + "description": "single column at smallest container sizes", + "isVariant": true, + "baseClass": "sf-bento", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-bento--4", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-bento--4", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Bento grid", + "description": "single column at smallest container sizes", + "isVariant": true, + "baseClass": "sf-bento", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-bento--compact", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-bento--compact", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Bento grid", + "description": "single column at smallest container sizes", + "isVariant": true, + "baseClass": "sf-bento", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-bento--tall", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-bento--tall", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Bento grid", + "description": "single column at smallest container sizes", + "isVariant": true, + "baseClass": "sf-bento", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-box", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-box", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Box", + "description": "Isolated unit with padding and an optional border. Outline instead of border — doesn't disturb the box model when toggled. Override: style=\"--sf-box-padding: 1rem; --sf-box-border-width: 1px\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-breakout", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-breakout", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Content grid (breakout pattern)", + "description": "Full-width grid that lets items break out to breakout or full width. Children default to the content column.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-center", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-center", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Center", + "description": "Centers content with a max-inline-size and side gutters. content-box: max-inline-size applies to content only; padding is additive. Override: style=\"--sf-center-max: 60rem\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-center--intrinsic", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-center--intrinsic", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Center", + "description": "Centers content with a max-inline-size and side gutters. content-box: max-inline-size applies to content only; padding is additive. Override: style=\"--sf-center-max: 60rem\"", + "isVariant": true, + "baseClass": "sf-center", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-clickable-parent", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-clickable-parent", + "prefix": "sf", + "kind": "accessibility", + "category": "Accessibility", + "area": "accessibility", + "group": "Clickable-parent", + "description": "the card-with-link a11y pattern. Applied to the card container. Two modes: Automatic (single primary link):

Title

Description

Explicit (multiple links — add…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.accessibility", + "sourceFiles": [ + "core/accessibility.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--2xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--2xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--between", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--between", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--center", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--center", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--end", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--end", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--l", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--l", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--m", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--m", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--no-wrap", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--no-wrap", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--s", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--s", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cluster--xs", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cluster--xs", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cluster", + "description": "Flex-wrap group of variable-width items. Override: style=\"--sf-cluster-gap: 0.5rem; --sf-cluster-justify: center\"", + "isVariant": true, + "baseClass": "sf-cluster", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-color-pulse", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-color-pulse", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "@property color interpolation — animates --sf-color-primary-light smoothly because it is registered with syntax:\"\" (see @property in tokens.css). Without that registration the browser cannot interpolate between color values and the animation will snap at 50% with no…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-container", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-container", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Container", + "description": "Max-width container, centered with side gutters. Establishes a named inline-size container `sf-layout` so children can target it precisely with `@container sf-layout (...)`. The framework's own `.sf-bento` and `.sf-grid-*` rules use anonymous `@container` queries on purpose —…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-container--full", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-container--full", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Container", + "description": "Max-width container, centered with side gutters. Establishes a named inline-size container `sf-layout` so children can target it precisely with `@container sf-layout (...)`. The framework's own `.sf-bento` and `.sf-grid-*` rules use anonymous `@container` queries on purpose —…", + "isVariant": true, + "baseClass": "sf-container", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-container--narrow", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-container--narrow", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Container", + "description": "Max-width container, centered with side gutters. Establishes a named inline-size container `sf-layout` so children can target it precisely with `@container sf-layout (...)`. The framework's own `.sf-bento` and `.sf-grid-*` rules use anonymous `@container` queries on purpose —…", + "isVariant": true, + "baseClass": "sf-container", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-container--prose", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-container--prose", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Container", + "description": "Max-width container, centered with side gutters. Establishes a named inline-size container `sf-layout` so children can target it precisely with `@container sf-layout (...)`. The framework's own `.sf-bento` and `.sf-grid-*` rules use anonymous `@container` queries on purpose —…", + "isVariant": true, + "baseClass": "sf-container", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-container--wide", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-container--wide", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Container", + "description": "Max-width container, centered with side gutters. Establishes a named inline-size container `sf-layout` so children can target it precisely with `@container sf-layout (...)`. The framework's own `.sf-bento` and `.sf-grid-*` rules use anonymous `@container` queries on purpose —…", + "isVariant": true, + "baseClass": "sf-container", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-content-auto", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-content-auto", + "prefix": "sf", + "kind": "macro", + "category": "Macro classes", + "area": "macros", + "group": "Content visibility", + "description": "Skip rendering (layout + paint) for offscreen content until it scrolls near the viewport — a large initial-render win on long pages (product grids, long articles). contain-intrinsic-size reserves a placeholder box so the scrollbar and scroll position stay stable before a…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.macros", + "sourceFiles": [ + "core/macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-content-grid", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-content-grid", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Content grid (breakout pattern)", + "description": "Full-width grid that lets items break out to breakout or full width. Children default to the content column.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "Full-height flex column. A .sf-cover__center child is vertically centered via margin-block: auto. Override: style=\"--sf-cover-min-height: 50dvh\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover__center", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover__center", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "Full-height flex column. A .sf-cover__center child is vertically centered via margin-block: auto. Override: style=\"--sf-cover-min-height: 50dvh\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover--max", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover--max", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "--max intentionally sets min-height: 0 to override .sf-cover's token-driven minimum — the cover may collapse below the default min if content is short. Pair with padding-block or a min-content guard if collapsing is undesirable.", + "isVariant": true, + "baseClass": "sf-cover", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover--min", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover--min", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "Full-height flex column. A .sf-cover__center child is vertically centered via margin-block: auto. Override: style=\"--sf-cover-min-height: 50dvh\"", + "isVariant": true, + "baseClass": "sf-cover", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover--padding-l", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover--padding-l", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "--max intentionally sets min-height: 0 to override .sf-cover's token-driven minimum — the cover may collapse below the default min if content is short. Pair with padding-block or a min-content guard if collapsing is undesirable.", + "isVariant": true, + "baseClass": "sf-cover", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-cover--padding-s", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-cover--padding-s", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Cover", + "description": "--max intentionally sets min-height: 0 to override .sf-cover's token-driven minimum — the cover may collapse below the default min if content is short. Pair with padding-block or a min-content guard if collapsing is undesirable.", + "isVariant": true, + "baseClass": "sf-cover", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Standalone separator primitive. Token-driven; pairs with the `--sf-divider-*` tokens and mirrors the `hr` element default.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--dashed", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--dashed", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Style modifiers — retune the line itself via the same tokens the base rule reads, so they apply to horizontal and vertical alike.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--dotted", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--dotted", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Style modifiers — retune the line itself via the same tokens the base rule reads, so they apply to horizontal and vertical alike.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--gradient", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--gradient", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Gradient divider — a hairline that fades out at both ends. Replaces the border with a masked background so it can't use border-style; height tracks --sf-divider-width. Horizontal only.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--soft", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--soft", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Style modifiers — retune the line itself via the same tokens the base rule reads, so they apply to horizontal and vertical alike.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--strong", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--strong", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Style modifiers — retune the line itself via the same tokens the base rule reads, so they apply to horizontal and vertical alike.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-divider--vertical", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-divider--vertical", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Divider", + "description": "Standalone separator primitive. Token-driven; pairs with the `--sf-divider-*` tokens and mirrors the `hr` element default.", + "isVariant": true, + "baseClass": "sf-divider", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--fade", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--fade", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--fade-down", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--fade-down", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--fade-left", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--fade-left", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--fade-right", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--fade-right", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--fade-up", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--fade-up", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-entrance--scale-up", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-entrance--scale-up", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Scroll-driven entrance effects — element animates into view as it enters the viewport. Uses CSS scroll-driven animations via animation-timeline: view(). Range tokens (--sf-scroll-timeline-range-{start,end}, declared in core/tokens.css) control where the animation starts and…", + "isVariant": true, + "baseClass": "sf-entrance", + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Equal columns", + "description": "Fixed N-column grid. Column count NEVER collapses — unlike .sf-grid-N which uses container queries to stack at small sizes. Use when the layout must remain N columns at all widths; the caller is responsible for overflow handling. Override: style=\"--sf-equal-cols: 3\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal--2", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal--2", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Equal columns", + "description": "Fixed N-column grid. Column count NEVER collapses — unlike .sf-grid-N which uses container queries to stack at small sizes. Use when the layout must remain N columns at all widths; the caller is responsible for overflow handling. Override: style=\"--sf-equal-cols: 3\"", + "isVariant": true, + "baseClass": "sf-equal", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal--3", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal--3", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Equal columns", + "description": "Fixed N-column grid. Column count NEVER collapses — unlike .sf-grid-N which uses container queries to stack at small sizes. Use when the layout must remain N columns at all widths; the caller is responsible for overflow handling. Override: style=\"--sf-equal-cols: 3\"", + "isVariant": true, + "baseClass": "sf-equal", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal--4", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal--4", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Equal columns", + "description": "Fixed N-column grid. Column count NEVER collapses — unlike .sf-grid-N which uses container queries to stack at small sizes. Use when the layout must remain N columns at all widths; the caller is responsible for overflow handling. Override: style=\"--sf-equal-cols: 3\"", + "isVariant": true, + "baseClass": "sf-equal", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal--6", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal--6", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Equal columns", + "description": "Fixed N-column grid. Column count NEVER collapses — unlike .sf-grid-N which uses container queries to stack at small sizes. Use when the layout must remain N columns at all widths; the caller is responsible for overflow handling. Override: style=\"--sf-equal-cols: 3\"", + "isVariant": true, + "baseClass": "sf-equal", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-equal-height", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-equal-height", + "prefix": "sf", + "kind": "macro", + "category": "Macro classes", + "area": "macros", + "group": "Equal height", + "description": "Force grid/flex children to share the tallest one's height. Works in flex (default `align-items: stretch`) and is re-asserted here for cases where a wrapper resets it.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.macros", + "sourceFiles": [ + "core/macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-fade-in", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-fade-in", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Animation presets — opt-in classes. Scoped to no-preference so reduced-motion users never trigger them (accessibility.css also neutralises animation-duration as a hard guarantee). These are DECORATIVE: under reduced motion they simply don't run, so never rely on one (e.g.…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-fade-out", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-fade-out", + "prefix": "sf", + "kind": "motion", + "category": "Motion / animation", + "area": "motion", + "group": "", + "description": "Animation presets — opt-in classes. Scoped to no-preference so reduced-motion users never trigger them (accessibility.css also neutralises animation-duration as a hard guarantee). These are DECORATIVE: under reduced motion they simply don't run, so never rely on one (e.g.…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.motion", + "sourceFiles": [ + "core/motion.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-flow", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-flow", + "prefix": "sf", + "kind": "macro", + "category": "Macro classes", + "area": "macros", + "group": "Flow", + "description": "Heydon Pickering's \"lobotomized owl\" — every flow child gets equal margin-block-start. Useful for content blocks where you don't know in advance which elements will be present. Override: style=\"--sf-flow-space: 2rem\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.macros", + "sourceFiles": [ + "core/macros.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-focus-parent", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-focus-parent", + "prefix": "sf", + "kind": "accessibility", + "category": "Accessibility", + "area": "accessibility", + "group": "Focus-parent", + "description": "Uses --sf-focus-ring-color (same token as :focus-visible) so the ring is visually consistent whether focus lands on the parent or a child.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.accessibility", + "sourceFiles": [ + "core/accessibility.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-focus-shadow", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-focus-shadow", + "prefix": "sf", + "kind": "accessibility", + "category": "Accessibility", + "area": "accessibility", + "group": "Focus-shadow opt-in", + "description": "switches the focus indicator from the default `outline` ring to a `box-shadow` ring (the composite --sf-focus-ring-shadow token). Useful when the outline clips awkwardly on rounded corners or overflow:hidden containers, where box-shadow follows border-radius. Opt-in per…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.accessibility", + "sourceFiles": [ + "core/accessibility.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--3-2", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--3-2", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--4-3", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--4-3", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--cinema", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--cinema", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--golden", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--golden", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--portrait", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--portrait", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--square", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--square", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-frame--video", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-frame--video", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Frame", + "description": "Aspect-ratio container. Media children: fill + cover. Override: style=\"--sf-frame-ratio: 4 / 3\"", + "isVariant": true, + "baseClass": "sf-frame", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-full-bleed", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-full-bleed", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Content grid (breakout pattern)", + "description": "Full-width grid that lets items break out to breakout or full width. Children default to the content column.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--2xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--2xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--l", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--l", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--m", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--m", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--s", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--s", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-gap--xs", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-gap--xs", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Gap", + "description": "Injects gap into any existing flex or grid container without imposing a display type or axis. Unlike .sf-stack (flex column) or .sf-cluster (flex-wrap row), .sf-gap is layout- agnostic — use it on elements that already have their own display context. Override:…", + "isVariant": true, + "baseClass": "sf-gap", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--2xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--2xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--dense", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--dense", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Dense packing — let later items backfill earlier gaps (as .sf-bento does). Applies to any grid, including the fixed-column .sf-grid-N.", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--fit", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--fit", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--l", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--l", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--m", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--m", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--s", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--s", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid--xs", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid--xs", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Grid", + "description": "Auto-fill CSS grid with no breakpoints. .sf-grid--fit switches to auto-fit. auto-fill: empty tracks preserved, last item doesn't stretch. auto-fit (.sf-grid--fit): empty tracks collapsed, items stretch to fill the gap. Override: style=\"--sf-grid-min: 12rem; --sf-grid-gap: 1rem\"", + "isVariant": true, + "baseClass": "sf-grid", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-1", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-1", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Fixed column grids (container-query responsive)", + "description": "Responsive fixed-column grids with no media queries. IMPORTANT: These classes use anonymous @container queries, so they react to the nearest ancestor that has a container context (container-type: inline-size). Without a container ancestor the queries never match and the grid…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-1-2", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-1-2", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Ratio grids", + "description": "Two-column ratio grids, container-query responsive.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-1-3", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-1-3", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Ratio grids", + "description": "Two-column ratio grids, container-query responsive.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-2", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-2", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Fixed column grids (container-query responsive)", + "description": "Responsive fixed-column grids with no media queries. IMPORTANT: These classes use anonymous @container queries, so they react to the nearest ancestor that has a container context (container-type: inline-size). Without a container ancestor the queries never match and the grid…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-2-1", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-2-1", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Ratio grids", + "description": "Two-column ratio grids, container-query responsive.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-3", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-3", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Fixed column grids (container-query responsive)", + "description": "Responsive fixed-column grids with no media queries. IMPORTANT: These classes use anonymous @container queries, so they react to the nearest ancestor that has a container context (container-type: inline-size). Without a container ancestor the queries never match and the grid…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-3-1", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-3-1", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Ratio grids", + "description": "Two-column ratio grids, container-query responsive.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-4", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-4", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Fixed column grids (container-query responsive)", + "description": "Responsive fixed-column grids with no media queries. IMPORTANT: These classes use anonymous @container queries, so they react to the nearest ancestor that has a container context (container-type: inline-size). Without a container ancestor the queries never match and the grid…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-grid-6", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-grid-6", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Fixed column grids (container-query responsive)", + "description": "Responsive fixed-column grids with no media queries. IMPORTANT: These classes use anonymous @container queries, so they react to the nearest ancestor that has a container context (container-type: inline-size). Without a container ancestor the queries never match and the grid…", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-icon", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-icon", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Icon", + "description": "Inline icon sizing primitive. Uses em-based --sf-icon-* tokens so an icon scales with its surrounding text. Defaults to -m.", + "isVariant": false, + "baseClass": null, + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-icon--2xl", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-icon--2xl", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Icon", + "description": "Inline icon sizing primitive. Uses em-based --sf-icon-* tokens so an icon scales with its surrounding text. Defaults to -m.", + "isVariant": true, + "baseClass": "sf-icon", + "optional": false, + "layer": "slashed.layout", + "sourceFiles": [ + "core/layout.css" + ], + "bundles": [ + "essential", + "full", + "optimal", + "optimal-components", + "optimal-utilities" + ] + }, + { + "name": "sf-icon--boxed", + "type": "class", + "tier": "PUBLIC", + "selector": ".sf-icon--boxed", + "prefix": "sf", + "kind": "layout", + "category": "Layout primitives", + "area": "layout", + "group": "Icon", + "description": "Boxed variant — wraps the icon in a padded, bordered, optionally coloured frame. The declared inline-/block-size is the OUTER size (icon + 2× pad); border-box ensures padding is subtracted inward so the glyph content area stays at exactly --sf-icon-size.