/* SLASHED — optional/tokens.components.css @layer slashed.tokens Component token surface for the optional component module: card, field, and button knobs. Prefix: --sf-*. */ @layer slashed.tokens { :root { /* ============================================================ * CARD TOKENS * ============================================================ * Concentric radius math: outer = inner + padding. Keeps inner * elements that use the global --sf-radius-m visually * proportional inside a padded card. */ --sf-card-padding: var(--sf-space-l); --sf-card-gap: var(--sf-space-m); --sf-card-radius: var(--sf-radius-m); --sf-card-radius-outer: calc(var(--sf-card-radius) + var(--sf-card-padding)); --sf-card-bg: var(--sf-color-surface); --sf-card-border-width: var(--sf-border-width-1); --sf-card-border-color: var(--sf-color-border); --sf-card-shadow: var(--sf-shadow-s); /* Shadow escalation for the --elevated and --interactive modifiers. * Both default to the same --sf-shadow-l step (elevated's resting shadow * and interactive's hover shadow read as the same "lifted" level) — two * tokens so each modifier can still be tuned independently. */ --sf-card-shadow--elevated: var(--sf-shadow-l); --sf-card-shadow--hover: var(--sf-shadow-l); /* Smart-card subcomponents (.sf-card__media / __avatar / __title). Media * defaults to the 16/9 ratio token; inner media radius mirrors the card's * inner radius. */ --sf-card-media-ratio: var(--sf-ratio-video); --sf-card-media-radius: var(--sf-card-radius, var(--sf-radius-m)); --sf-card-avatar-size: 2.5rem; --sf-card-heading-size: var(--sf-text-xl); /* ============================================================ * FIELD TOKENS * Override to give form fields a distinct visual language from * buttons without touching global radius/spacing tokens. Consumed * by the classless field rules in optional/forms.css (padding-block, * padding-inline, border-radius); each fallback there equals these * defaults so an unset knob renders identically. * ============================================================ */ --sf-field-radius: var(--sf-radius-m); --sf-field-padding-block: var(--sf-space-xs); --sf-field-padding-inline: var(--sf-space-s); /* ============================================================ * BUTTON TOKENS * Override to give buttons a distinct visual language from * form fields without touching global radius/spacing tokens. * ============================================================ */ --sf-btn-radius: var(--sf-radius-m); --sf-btn-gap: var(--sf-space-2xs); --sf-btn-font-weight: var(--sf-font-weight-interactive); --sf-btn-border-width: var(--sf-border-width-1); /* Uniform label-size multiplier — the everyday "make button text a little * larger / smaller" knob. Scales the resolved font-size of EVERY button * size (.sf-btn--xs…xl) by the same factor while KEEPING the size ladder * intact (xs < s < m < l < xl). Contrast with --sf-btn-font-size below, * which flattens every size to one value. Applied in the font-size calc() * in optional/components.css. */ --sf-btn-font-scale: 1; /* * The four SIZE-VARYING knobs are declared `initial` on purpose — NOT with * a concrete default. Each size modifier (.sf-btn--xs/--s/--l/--xl) needs * its own per-size value, and a rule-local declaration on the element * always beats an inherited :root one; a concrete :root default here would * make these knobs work on the default (m) button yet silently die on every * sized button. `initial` sets each to the guaranteed-invalid value, so the * property reads FIRST in its var() chain fall through to the rule-local * `*--size` tier default (set per size in optional/components.css): * font-size: var(--sf-btn-font-size, var(--sf-btn-font-size--size)); * Setting one of these knobs on :root replaces the `initial` and therefore * wins on EVERY button of any size — honouring the framework's "one token * on :root changes everything" contract — while the default size scale is * untouched. They stay PUBLIC knobs (catalogued, share-encodable), just with * no baked-in value: the effective m-size default lives on the tier token. */ --sf-btn-font-size: initial; --sf-btn-padding-block: initial; --sf-btn-padding-inline: initial; --sf-btn-min-height: initial; /* * Per-size knobs — one PUBLIC knob per size rung for each sizing property * (label font-size, block/inline padding, min-height): the button * counterpart of the per-heading typography knobs. Each is `initial` so, * unset, that rung falls through to its own scale default (--sf-text-{size}, * --sf-space-*, --sf-size-{size}); set one on :root to retune a SINGLE * rung's property without disturbing the others — unlike the flatten-all * --sf-btn-{prop} overrides above, or the proportional --sf-btn-font-scale. * Consumed per .sf-btn--{size} in optional/components.css as the first arg * of the matching --sf-btn-{prop}--size tier token. */ --sf-btn-xs-font-size: initial; --sf-btn-s-font-size: initial; --sf-btn-m-font-size: initial; --sf-btn-l-font-size: initial; --sf-btn-xl-font-size: initial; --sf-btn-xs-padding-block: initial; --sf-btn-s-padding-block: initial; --sf-btn-m-padding-block: initial; --sf-btn-l-padding-block: initial; --sf-btn-xl-padding-block: initial; --sf-btn-xs-padding-inline: initial; --sf-btn-s-padding-inline: initial; --sf-btn-m-padding-inline: initial; --sf-btn-l-padding-inline: initial; --sf-btn-xl-padding-inline: initial; --sf-btn-xs-min-height: initial; --sf-btn-s-min-height: initial; --sf-btn-m-min-height: initial; --sf-btn-l-min-height: initial; --sf-btn-xl-min-height: initial; /* * Size modifiers (.sf-btn--xs/--s/--l/--xl) and the colour family * (--sf-btn-color / --sf-btn-color--hover / --sf-btn-on-color) are * rule-local overrides set in optional/components.css, not global knobs. * * Full-width: .sf-btn--block is unconditional; .sf-btn--block-cq * stretches to 100% only inside a query container narrower than 20rem * (no @media breakpoints). The threshold is a literal in the * @container condition — query conditions cannot read var(), so * there is no token for it. */ } }