From dfe351a86a1e5e7a2925aab439c4e9972f231d2a Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 14:05:59 +0000 Subject: [PATCH 1/5] docs: add demo-audit.html covering every framework class Standalone page loading only dist/slashed.full.css (no overrides, no scripts) that exercises all 294 .sf-* classes and 28 .sf-is-* state classes documented in docs/classes.md, organized by source file. --- demo-audit.html | 814 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 814 insertions(+) create mode 100644 demo-audit.html diff --git a/demo-audit.html b/demo-audit.html new file mode 100644 index 00000000..56963d5c --- /dev/null +++ b/demo-audit.html @@ -0,0 +1,814 @@ + + + + + +SLASHED .sf-* Class Coverage Audit + + + + +
+
+

This page is an automated coverage audit for the SLASHED framework. Every + .sf-* class documented in docs/classes.md is applied to + real, visible markup below, organised by source file. It loads only + dist/slashed.full.css — no custom CSS, no scripts, no third-party + resources.

+
+
+ + +
+
+

Layout primitives (core/layout.css)

+

Breakpoint-free, container-query-driven layout building blocks. Each demo below +exercises one primitive (and its size/variant modifiers) with realistic children.

+ +

Section rhythm & section-group

+
+
section--xs
+
section--s
+
section--m (default)
+
section--l
+
section--xl
+
section--2xl + section--collapse (shares padding with neighbour)
+
+
+

section--guttered adds inline gutters without a container

+
+ +

Header padding rhythm

+
header--xs
+
header--s
+
header--m
+
header--l
+
header--xl
+ +

Containers & container-query scopes

+

default .sf-container

+

container--narrow

+

container--prose

+

container--wide

+

container--full

+
sf-cq scope, col 1
col 2 — resizes by container width, not viewport
+

sf-fluid-cq — children interpolate type/space against this box's own inline size rather than the viewport.

+ +

Box & centering

+
sf-box — isolated padded unit with an outline
+
sf-center — intrinsic centering with gutters
+
sf-center--intrinsic
+ +

Stack — vertical flow

+
+

xs

gap

+

s

gap

+

m

gap (default)

+

l

gap

+

xl

gap

+

2xl

gap

+
+
+
+
+
+
+ +

Cluster — wrapping inline group

+
+
xsgap
+
sgap
+
mgap (default)
+
lgap
+
xlgap
+
2xlgap
+
no-wrapstayson one line
+
cluster--between: leftright
+
cluster--center
+
cluster--end
+
+ +

Gap — inject gap into an existing container

+
gap xs
a
b
+
gap s
a
b
+
gap m
a
b
+
gap l
a
b
+
gap xl
a
b
+
gap 2xl
a
b
+ +

Sidebar

+
Main content wraps below when narrow
+
Main
+
sidebar--right panel
+
Main
+ +

Switcher

+
A
B
C
+
A
B
C
+
A
B
C
+ +

Grid — auto-fill responsive

+
xs
min col
width
+
s
min col
width
+
m
min col
width
+
l
min col
width
+
xl
min col
width
+
2xl
min col
width
+
fit
stretches to fill row
+
dense
packing
fills gaps
+ +

Grid — fixed columns & ratios

+
grid-cols-1
+
grid-cols-2 a
b
+
grid-cols-3 a
b
c
+
1
2
3
4
+
1
2
3
4
5
6
+
1fr
2fr
+
2fr
1fr
+
1fr
3fr
+
3fr
1fr
+ +

Grid-flex

+
xs
item
item
+
s
item
item
+
m
item
item
+
l
item
item
+
xl
item
item
+
2xl
item
item
+
center
last row
stays fixed
+ +

Bento — dense free-form grid

+
+
bento-featured (span 2x2)
+
bento-wide (span 2)
+
bento-tall (row span 2)
+
normal cell
+
bento-full (full width)
+
+
bento--2
bento--compact rows
+
bento--6
bento--tall rows
c
d
e
f
+ +

Alternate — zigzag two-column

+
+
+

Feature one

Text column reverses order on alternate rows.

+
placeholder
+
+
+

Feature two

Second row — image/text order swaps automatically.

+
placeholder
+
+
+ +

Pancake — sticky-footer grid

+
+
+
+
Pancake header
+
Pancake main (1fr)
+
Pancake footer
+
+
+ +

Content-grid — breakout & full-bleed

+
+

Regular content-width paragraph inside .sf-content-grid.

+
sf-breakout — wider than content, narrower than viewport
+
sf-full-bleed — spans the whole viewport width
+
+ +

Cover — full-height centered region

+

cover--min + cover__center

+

cover--max + cover--padding-s

+

cover--padding-l

+ +

Frame — aspect-ratio media box

+
+
default 16:9
+
square
+
video
+
cinema
+
portrait
+
4:3
+
3:2
+
golden
+
+ +

Background layer

+
+ +

sf-bg-layer fills behind this text; the parent auto-positions itself.

+
+ +

Reel — horizontal scroll strip

+
+
1
2
3
+
4
5
6
+
+ +

Imposter — absolutely-centered overlay

+
+

Host box (positioning context)

+ imposter (centered) +
+
+ imposter--fixed +
+
+
imposter--contain: constrained + scrollable long content that overflows the imposter box on purpose to show the scrollbar in action.
+
+ +

Overlay helper

+
+

Base content

+
+
+ +

Subgrid

+
+
+
subgrid a
subgrid b
subgrid c
+
+
+
+
+
subgrid-rows row 1
subgrid-rows row 2
+
+
+ +

Divider & divide

+
+
+
+
+
+
+
Left
Right
+

One

Two (divide adds a border between siblings)

Three

+
XYZ
+ +

Equal — CSS multi-column flow

+

Newspaper-style flowing columns, 2 target columns. Text flows down one column, then continues at the top of the next, unlike grid cells.

+

Three target columns of flowing text content for a denser magazine layout.

+

Four target columns for a very dense flowing layout of short list items.

+

Six target columns, useful for long tag/keyword lists that should flow.

+ +

Icon sizing

+
+ ★ + ★ + ★ + ★ + ★ + ★ + ★ +
+ +
+
+ + +
+
+

Macro classes (core/macros.css)

+

Recipes that answer "what does this element do/look like?" — composable on top of layout primitives.

+ +

Prose & not-prose

+
+

Article heading

+

Paragraph one of long-form text with automatic vertical rhythm between children.

+

Paragraph two — automatically spaced from the previous one.

+
  • Bullet one
  • Bullet two
+
This region opts out of prose spacing/list rules (sf-not-prose).
+

More article body after the opted-out region.

+
+ +

Flow

+
+

One

+

Two — gets margin-block-start from the flow rhythm.

+

Three — same.

+
+ +

Truncate & line-clamp

+

This very long sentence about the SLASHED framework will be cut off with an ellipsis after exactly one line because the box has a finite inline size.

+

Two-line clamp: SLASHED ships breakpoint-free, container-query-driven layout primitives that respond to their own container's width instead of the viewport, which keeps components portable across sidebars, cards, and full-width sections alike.

+

Three-line clamp: token-driven design system with a fluid type and space engine computed at runtime from a handful of input scalars, so retuning one number recalibrates the whole scale without a rebuild step or any SCSS preprocessing.

+

Five-line clamp via the N variant and the --sf-line-clamp custom property: this paragraph is intentionally long so the clamp is visible — it keeps going and going, describing layout primitives, macros, state classes, motion utilities and components until it is cut off after five lines with an ellipsis, no matter how much more text follows this point in the source.

+ +

Equal-height flex children

+
+
Short
+
Two
lines
+
Three
lines
here
+
+ +

Aspect ratio

+
sf-aspect at 4/3 via the --sf-aspect custom property
+ +

Scroll shadow & scroll snap

+
+

Long scrolling content fades near the top/bottom edges of this box.

+

Line two.

Line three.

Line four.

Line five.

Line six.

+
+
+
Snap A
+
Snap B
+
Snap C
+
+ +

Overflow fade

+
+ tagtagtagtag +
+
+ rightfadedemotags +
+
+ leftfadedemotags +
+

Top-fade content. Line 2.

Line 3.

Line 4.

+

Bottom-fade content. Line 2.

Line 3.

Line 4.

+

Both block edges fade. Line 2.

Line 3.

Line 4.

+
+ inlinefadebothedges +
+ +

No tap highlight

+Link with suppressed mobile tap-highlight overlay + +

Content-visibility auto

+
Offscreen rendering is skipped until this section nears the viewport (content-visibility: auto).
+ +

Tabular numbers

+ + + +
Invoice #1024$1,204.50
Invoice #999$88.00
+ +

Drop shadows

+
+ xs shadow + s shadow + m shadow + l shadow + xl shadow +
+ +

Surfaces

+
+
sf-surface (generic, tinted)
+
surface--primary
+
surface--secondary
+
surface--tertiary
+
surface--action
+
surface--neutral
+
surface--inverse
+
surface--success
+
surface--warning
+
surface--info
+
surface--danger
+
+
sf-surface-bg — named background preset (colour fallback layer shown here)
+ +

Text gradient & text protect

+

Gradient headline

+
+ +

Legible text over a busy photo

+
+ +

Link helpers

+

+ External link · + Subtle link (underline on hover) · + Reverse link (underline at rest) +

+ +

Scrim over media

+
+ +
+

scrim--bottom + scrim__content

+
+
+
+ +
+

scrim--top

+
+
+
+ +
+

scrim--full

+
+
+ +

Entrance & exit scroll animations

+
+
entrance--fade
+
entrance--fade-up
+
entrance--fade-down
+
entrance--fade-left
+
entrance--fade-right
+
entrance--scale-up
+
exit--fade
+
exit--fade-up
+
exit--fade-down
+
exit--fade-left
+
exit--fade-right
+
exit--scale-down
+
+ +

Stagger

+
    +
  • First
    • +
  • Second
    • +
  • Third
    • +
+ +

Corner scoop

+
+
top-left
+
top-right
+
bottom-left
+
bottom-right
+
+ +

Overlap & overlap-host

+
+
+ badge +
overlap (pulls up) + overlap-host reserves space
+
+
+
Host for overlap--down
+ badge +
+
+
Host
+ badge +
+
+ badge +
Host
+
+
+ +
+
+ + +
+
+

State classes (core/states.css)

+

Runtime-condition classes, applied statically here on realistic hosts so each visual treatment is visible.

+ +
+
is-hidden (removed from layout — you should not see this box)
+
is-invisible (keeps its box, invisible)
+
is-visible
+ +
+
is-loading (spinner replaces content)
+
is-pending (content stays usable)
+ +
+ +
  • is-selected list item
    • + is-current nav item + +
    is-highlighted
    +
    is-open panel
    +
    is-collapsed panel
    + +
    + +

    Form validation states

    +
    +
    +
    Please enter a valid email
    +
    + +

    Feedback states

    +
    +

    is-success: saved successfully

    + +

    is-warning: quota nearly reached

    +

    is-info: new version available

    + +
    + +

    Drag & drop

    +
    +
    is-draggable item
    +
    is-dragging item
    +
    is-drop-target zone
    +
    + +

    Empty state

    +
      + +
      +
      + + +
      +
      +

      Accessibility (core/accessibility.css)

      +

      Focus and clickable-area helpers.

      + +
      +

      sf-focus-parent — this whole box rings when a descendant has keyboard focus.

      + +
      + +
      + +
      +
      +

      sf-clickable-parent

      +

      The whole card is a single click target via the overlay link below.

      + Read more +
      +
      + +
      +
      + + +
      +
      +

      Motion / entrances (core/motion.css)

      +

      Looping and one-shot animation classes applied to visible elements (final/initial state may render statically depending on browser support).

      + +
      +
      fade-in
      +
      fade-out
      +
      scale-up
      +
      scale-down
      +
      slide-in-up
      +
      slide-in-down
      +
      slide-in-left
      +
      slide-in-right
      +
      + +

      Colour pulse

      +
      sf-color-pulse — animates the primary hue lightness
      + +
      +
      + + +
      +
      +

      Print utilities (core/print.css)

      +

      Print rules key off classes already used elsewhere on the page for other purposes — .sf-link-external also +gains print-specific treatment (its href is expanded next to the link text when the page is printed).

      +

      This external link also exercises the print stylesheet — see the "Link helpers" demo above for the on-screen version of the same class.

      +
      +
      + + +
      +
      +

      Theme utilities (core/themes.css)

      +

      Forcing light/dark on a region, plus the smooth-transition helper.

      + +
      +
      sf-theme-dark — forces dark palette on this region
      +
      sf-theme-light — forces light palette on this region
      +
      +
      sf-theme-transition — cross-fades registered colour tokens when a theme toggle script flips data-theme on this element (normally applied to <html>; shown here on a scoped region since this page has no toggle script).
      +
      +
      + + +
      +
      +

      Forms (optional/forms.css)

      +

      Classless form controls, styled without any .sf-* class needed on the inputs themselves — the one opt-in +utility here is .sf-live-validate, which enables native :user-invalid/:user-valid border feedback +after a submit attempt.

      + +
      +
      + Contact details + + + + + + + +
      + +
      + +
      +
      + + +
      +
      +

      Components — Buttons (optional/components.css)

      +

      All colour families, style treatments, gradient axis, sizes, width, and state modifiers for .sf-btn.

      + +

      Colour families

      +
      + + + + + + + + + + + +
      + +

      Style treatments

      +
      + + + + +
      + +

      Gradient axis

      +
      + + + +
      + +

      Sizes

      +
      + + + + + +
      + +

      Width

      + +
      + +
      + +

      States

      +
      + + +
      + +
      +
      + + +
      +
      +

      Components — Cards (optional/components.css)

      + +
      +
      + +
      + +

      Default card

      +
      +
      +

      Body content with header, media, avatar and title slots.

      +
      +
      + +
      +
      + +
      +

      card--bordered: flat, outlined, no shadow.

      +
      + +
      +

      card--elevated: floating shadow, no border.

      +
      + + +

      card--interactive: lifts on hover/focus.

      +       + +
      +

      Card in an is-loading state.

      +
      + +
      +

      Card in an is-disabled state.

      +
      + +
      +

      Standalone card__body composed with sf-flow for spacing.

      +

      Second paragraph.

      +
      + +
      + New + Popular +
      +
      + +
      +
      + + +
      +
      +

      Utilities (optional/utilities.css)

      + +

      Heading helper classes

      +
      +
      Visually H1 (div)
      +
      Visually H2 (div)
      +
      Visually H3 (div)
      +
      Visually H4 (div)
      +
      Visually H5 (div)
      +
      Visually H6 (div)
      +
      + +

      Text-size utilities

      +
      +

      2xs — legal / metadata copy

      +

      xs — fine print

      +

      s — secondary copy

      +

      m — body copy

      +

      l — larger body copy

      +

      xl — lede paragraph

      +

      2xl — subheading

      +

      3xl — heading

      +

      4xl — display heading

      +
      + +

      Hover transforms

      +
      +
      hover-grow
      +
      hover-shrink
      + hover-float + hover-sink +
      hover-slide-start
      +
      hover-slide-end
      +
      + +

      List reset & marker colours

      +
        +
      • sf-list-none: no bullets, no inline-start padding
        • +
      +
        +
      • marker--primary bullet
        • +
      +
        +
      • marker--secondary bullet
        • +
      +
        +
      • marker--tertiary bullet
        • +
      +
        +
      • marker--action bullet
        • +
      + +

      Selection colour

      +

      Select this text — sf-selection--alt swaps the ::selection colours for a surface with poor default contrast.

      + +

      Sticky positioning

      +
      +
      sf-sticky (base offset)
      +

      Scroll content…

      More…

      More…

      +
      +
      +
      sf-sticky--s (extra gap)
      +

      Scroll content…

      More…

      More…

      +
      +
      +
      sf-sticky--m
      +

      Scroll content…

      More…

      More…

      +
      +
      +
      sf-sticky--l
      +

      Scroll content…

      More…

      More…

      +
      + +
      +
      + + + From 2113927c6a9bf19410498e593c3a7aaa23e7a3ee Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 14:08:16 +0000 Subject: [PATCH 2/5] docs: add commented CDN link for local testing in demo-audit.html --- demo-audit.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demo-audit.html b/demo-audit.html index 56963d5c..b7d0c29e 100644 --- a/demo-audit.html +++ b/demo-audit.html @@ -4,6 +4,7 @@ SLASHED .sf-* Class Coverage Audit + From 06bd335aee50966af59922ee6a04cdf3b1bff5e0 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 14:38:57 +0000 Subject: [PATCH 3/5] fix: correct rendering bugs found by visual QA + review comments - Address CodeRabbit/Greptile review feedback: fix imposter--fixed escaping its host via a containing-block transform, wrap the orphaned
    • in a
        , and correct the "automated" -> "hand-authored" wording. - Set --sf-box-border-width once on so .sf-box demos (invisible by default, border-width: 0) are actually visible throughout the page. - Fix low-contrast text on .sf-card instances nested inside .sf-surface--neutral sections (corner-scoop, clickable-parent, hover cards) by dropping the ambient dark-surface wrapper where cards were affected. - Give the overlap/overlap-host row clearance so .sf-overlap no longer intrudes into the heading above it. - Fix .sf-is-pressed / .sf-is-expanded button demos (contrast + text overflow). - Reset --sf-sticky-offset to 0 on the sticky demo boxes so the sticky element isn't pushed down by the page-header-height token this page doesn't have. --- demo-audit.html | 47 ++++++++++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 19 deletions(-) diff --git a/demo-audit.html b/demo-audit.html index b7d0c29e..13bfeb2c 100644 --- a/demo-audit.html +++ b/demo-audit.html @@ -7,15 +7,19 @@ - +
        -

        This page is an automated coverage audit for the SLASHED framework. Every +

        This page is a hand-authored coverage audit for the SLASHED framework. Every .sf-* class documented in docs/classes.md is applied to real, visible markup below, organised by source file. It loads only dist/slashed.full.css — no custom CSS, no scripts, no third-party - resources.

        + resources. .sf-box's border is opt-in via its + --sf-box-border-width custom property (0 by default); it's set to + 1px once here on <body> — a documented public token, + inherited like any CSS custom property — purely so every box demo below is + visible at a glance.

        @@ -212,7 +216,8 @@

        Imposter — absolutely-centered overlay

        Host box (positioning context)

        imposter (centered) -
        +
        +

        Host box (transform creates a containing block so the fixed-positioned imposter stays inside it)

        imposter--fixed
        @@ -269,7 +274,7 @@

        Icon sizing

        -
        +

        Macro classes (core/macros.css)

        Recipes that answer "what does this element do/look like?" — composable on top of layout primitives.

        @@ -438,7 +443,7 @@

        Corner scoop

        Overlap & overlap-host

        -
        +
        badge
        overlap (pulls up) + overlap-host reserves space
        @@ -477,14 +482,14 @@

        State classes (core/states.css)

        -
      • is-selected list item
        • +
        • is-selected list item
        is-current nav item - +
        is-highlighted
        is-open panel
        is-collapsed panel
        @@ -517,7 +522,7 @@

        Empty state

        -
        +

        Accessibility (core/accessibility.css)

        Focus and clickable-area helpers.

        @@ -733,7 +738,7 @@

        Default card

        -
        +

        Utilities (optional/utilities.css)

        @@ -791,21 +796,25 @@

        Selection colour

        Select this text — sf-selection--alt swaps the ::selection colours for a surface with poor default contrast.

        Sticky positioning

        -
        +

        --sf-sticky-offset normally reads the page's fixed header height (0 here, +since this page has none) — set to 0 per demo box below so the base case +sticks flush to each isolated scroll container's own top edge; scroll each box to see +it hold in place.

        +
        sf-sticky (base offset)
        -

        Scroll content…

        More…

        More…

        +

        Scroll content…

        More…

        More…

        More…

        More…

        -
        +
        sf-sticky--s (extra gap)
        -

        Scroll content…

        More…

        More…

        +

        Scroll content…

        More…

        More…

        More…

        More…

        -
        +
        sf-sticky--m
        -

        Scroll content…

        More…

        More…

        +

        Scroll content…

        More…

        More…

        More…

        More…

        -
        +
        sf-sticky--l
        -

        Scroll content…

        More…

        More…

        +

        Scroll content…

        More…

        More…

        More…

        More…

        From d5166670d3fc00fd205de0a16176c24510dcbffa Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 18:32:04 +0000 Subject: [PATCH 4/5] refactor(macros)!: remove .sf-corner-scoop Remove the .sf-corner-scoop macro (and its --top-left/--top-right/ --bottom-left/--bottom-right modifiers plus the --sf-corner-scoop-size/ --sf-corner-scoop-at knobs). Judged too niche for the public API relative to its cost while still pre-1.0: - a single absolute --sf-corner-scoop-size needs per-element tuning to read well across control-sized and hero-sized boxes (no size tier); - the mask clips box-shadow/border at the cut and can't compose with the other mask-based macros (.sf-overflow-fade, .sf-scroll-shadow) on the same element. Source removed from core/macros.css + core/tokens.macros.css; all generated docs/registry/configurator/demo artifacts regenerated; the hand-authored guides (macros.md, llm-guide.md, roadmap.md, CHANGELOG, token-annotations) and the static QA artifacts (token-reference coverage page, full-api tokens report, token-api snapshot) updated to match. The parse-lib regression test that used corner-scoop as an inline fixture was repointed to a neutral synthetic fixture, preserving its coverage. To keep a concave corner, apply the mask directly on the element: style="-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px); mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px)" BREAKING CHANGE: .sf-corner-scoop and its modifiers/tokens are removed. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y --- CHANGELOG.md | 1 + badges/badge-optimal.json | 2 +- .../src/data/api-index.generated.json | 50 +---- configurator/src/data/classes.generated.json | 50 ----- configurator/src/data/domain-patterns.json | 2 +- .../src/data/token-registry.generated.json | 6 +- configurator/src/lib/preview/sections.ts | 16 -- core/macros.css | 21 -- core/tokens.macros.css | 8 - demo-audit.html | 8 - demos/full-api-demo-with-overrides.html | 28 +-- demos/full-api-demo.html | 28 +-- demos/generate.mjs | 1 - demos/ultimate-override.css | 5 +- dist/css-custom-data.json | 10 - docs/api-index.json | 189 +----------------- docs/api-index.md | 19 +- docs/classes.md | 9 +- docs/demo.html | 13 +- docs/llm-guide.md | 4 - docs/macros.md | 38 ---- docs/registry.json | 11 +- docs/roadmap.md | 28 +-- docs/test-coverage-6-token-reference.html | 2 +- docs/token-annotations.json | 7 - docs/token-index.json | 24 +-- docs/token-index.md | 10 +- docs/tokens.md | 6 +- .../full-api-audit/results/tokens-report.json | 30 +-- tests/macros.spec.js | 31 --- tests/parse-lib.test.js | 19 +- tests/token-api.snapshot.json | 2 - token-registry.json | 6 +- 33 files changed, 85 insertions(+), 599 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea6a37b0..dc669417 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ### Breaking Changes - **tokens:** removed the fixed `--sf-animation-delay-1…5` stagger tokens, superseded by the new `.sf-stagger` utility + `--sf-stagger-step` knob. Replace `style="animation-delay: var(--sf-animation-delay-N)"` on hand-indexed children with a single `.sf-stagger` class on their parent (see `docs/motion.md`); to keep a fixed manual delay, use a literal (e.g. `animation-delay: 150ms`). +- **macros:** removed `.sf-corner-scoop` (and its `--top-left`/`--top-right`/`--bottom-left`/`--bottom-right` modifiers and `--sf-corner-scoop-size`/`--sf-corner-scoop-at` knobs). Judged too niche for the public API relative to its cost — the single absolute cut size needed per-element tuning across control- vs hero-sized boxes, and the mask clipped `box-shadow`/`border` and could not compose with the other mask-based macros. To keep a concave corner, apply the mask directly on the element: `style="-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px); mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px)"`. ### Bug Fixes - **layout:** `.sf-bento` and `.sf-grid-cols-2/3/4/6` now actually respond to their `@container` breakpoints — both used to declare a `container` on themselves and then query that same container to resize themselves, which is a no-op per spec (a container can't be the subject of its own `@container` query). Fixed by relying on an ancestor container (`.sf-container` / `.sf-cq` / `.sf-fluid-cq`) instead, matching how `.sf-alternate` and `.sf-grid-cols-1-2` etc. already do it. `.sf-bento-wide` / `.sf-bento-featured` also no longer force a phantom 2nd column once the grid collapses to 1 column at the mobile breakpoint. diff --git a/badges/badge-optimal.json b/badges/badge-optimal.json index 31ef54a3..46b854cc 100644 --- a/badges/badge-optimal.json +++ b/badges/badge-optimal.json @@ -1,7 +1,7 @@ { "schemaVersion": 1, "label": "optimal", - "message": "19.6 kB gzip", + "message": "19.5 kB gzip", "color": "brightgreen", "namedLogo": "css3" } diff --git a/configurator/src/data/api-index.generated.json b/configurator/src/data/api-index.generated.json index c4fa4e18..22ada5fb 100644 --- a/configurator/src/data/api-index.generated.json +++ b/configurator/src/data/api-index.generated.json @@ -2,22 +2,22 @@ "_sync": { "generatedBy": "configurator/scripts/sync-api.mjs", "source": "docs/api-index.json", - "tokensHash": "2733b25b05b9", + "tokensHash": "5a5ec9f40624", "bundles": [ "full", "optimal" ], "counts": { - "tokens": 756, + "tokens": 754, "byTier": { - "PUBLIC": 695, + "PUBLIC": 693, "PUBLIC-ADVANCED": 60, "INTERNAL": 1 }, "byCategory": { "Layout tokens": 53, "Core tokens": 623, - "Macro tokens": 34, + "Macro tokens": 32, "Component tokens": 46 } } @@ -7750,48 +7750,6 @@ "optimal" ] }, - { - "name": "--sf-corner-scoop-at", - "tier": "PUBLIC", - "role": "knob", - "namespace": "corner", - "category": "Macro tokens", - "group": "Concave corner", - "description": "Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0.", - "note": "Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0.", - "value": "100% 0", - "aliasOf": null, - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "--sf-corner-scoop-size", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "corner", - "category": "Macro tokens", - "group": "Concave corner", - "description": "Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl).", - "note": "Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl).", - "value": "var(--sf-radius-2xl)", - "aliasOf": "--sf-radius-2xl", - "registered": false, - "syntax": null, - "fallbackOnly": false, - "optional": false, - "layer": "slashed.tokens", - "bundles": [ - "full", - "optimal" - ] - }, { "name": "--sf-cover-min-height", "tier": "PUBLIC", diff --git a/configurator/src/data/classes.generated.json b/configurator/src/data/classes.generated.json index 88a7b6f6..ec718c5f 100644 --- a/configurator/src/data/classes.generated.json +++ b/configurator/src/data/classes.generated.json @@ -734,56 +734,6 @@ "optional": false, "layer": "slashed.layout" }, - { - "name": "sf-corner-scoop", - "selector": ".sf-corner-scoop", - "kind": "macro", - "category": "Macro classes", - "group": "", - "description": "Concave \"scooped\" corner cut with a radial-gradient mask; defaults to the top-right corner (--sf-corner-scoop-at). Add a placement modifier to move it.", - "optional": false, - "layer": "slashed.macros" - }, - { - "name": "sf-corner-scoop--bottom-left", - "selector": ".sf-corner-scoop--bottom-left", - "kind": "macro", - "category": "Macro classes", - "group": "", - "description": "Places the concave corner scoop at the bottom-left corner.", - "optional": false, - "layer": "slashed.macros" - }, - { - "name": "sf-corner-scoop--bottom-right", - "selector": ".sf-corner-scoop--bottom-right", - "kind": "macro", - "category": "Macro classes", - "group": "", - "description": "Places the concave corner scoop at the bottom-right corner.", - "optional": false, - "layer": "slashed.macros" - }, - { - "name": "sf-corner-scoop--top-left", - "selector": ".sf-corner-scoop--top-left", - "kind": "macro", - "category": "Macro classes", - "group": "", - "description": "Places the concave corner scoop at the top-left corner.", - "optional": false, - "layer": "slashed.macros" - }, - { - "name": "sf-corner-scoop--top-right", - "selector": ".sf-corner-scoop--top-right", - "kind": "macro", - "category": "Macro classes", - "group": "", - "description": "Places the concave corner scoop at the top-right corner.", - "optional": false, - "layer": "slashed.macros" - }, { "name": "sf-cover", "selector": ".sf-cover", diff --git a/configurator/src/data/domain-patterns.json b/configurator/src/data/domain-patterns.json index 7ecddd0b..8fda785b 100644 --- a/configurator/src/data/domain-patterns.json +++ b/configurator/src/data/domain-patterns.json @@ -1,5 +1,5 @@ { - "macros": ["prose", "flow-space", "line-clamp", "aspect", "scroll-shadow", "scrim", "surface-color", "surface-bg", "content-intrinsic", "corner-scoop", "overlap-"], + "macros": ["prose", "flow-space", "line-clamp", "aspect", "scroll-shadow", "scrim", "surface-color", "surface-bg", "content-intrinsic", "overlap-"], "colors": ["color", "contrast", "palette-mix", "lumlocker", "gradient"], "typography": ["font", "--sf-text", "leading", "tracking", "weight", "body-font", "heading-font", "body-em", "body-text", "heading-text", "display-l-", "display-m-", diff --git a/configurator/src/data/token-registry.generated.json b/configurator/src/data/token-registry.generated.json index 9aacaf4f..2899b694 100644 --- a/configurator/src/data/token-registry.generated.json +++ b/configurator/src/data/token-registry.generated.json @@ -2883,11 +2883,13 @@ }, { "id": 710, - "name": "--sf-corner-scoop-at" + "name": "--sf-corner-scoop-at", + "removed": true }, { "id": 711, - "name": "--sf-corner-scoop-size" + "name": "--sf-corner-scoop-size", + "removed": true }, { "id": 712, diff --git a/configurator/src/lib/preview/sections.ts b/configurator/src/lib/preview/sections.ts index 67499224..4a31e9fd 100644 --- a/configurator/src/lib/preview/sections.ts +++ b/configurator/src/lib/preview/sections.ts @@ -604,21 +604,6 @@ export function macros(): string { // Text gradient. const textGradient = well(`

        Gradient headline

        `); - // Corner scoop — the notch reveals whatever sits behind the element, so - // the card sits on a contrasting frame. - const scoopCard = (mods: string) => - `
        `; - const cornerScoop = frame( - `
        ${[ - ["sf-corner-scoop", "default (top-right)"], - ["sf-corner-scoop sf-corner-scoop--top-left", "top-left"], - ["sf-corner-scoop sf-corner-scoop--bottom-left", "bottom-left"], - ["sf-corner-scoop sf-corner-scoop--bottom-right", "bottom-right"], - ] - .map(([mods, label]) => specimen(label, scoopCard(mods))) - .join("")}
        `, - ); - // Overlap — an avatar pulled down over the card that follows it // (.sf-overlap--down; the plain .sf-overlap pulls UP onto whatever // precedes it instead — not what a leading avatar needs here), plus the @@ -665,7 +650,6 @@ export function macros(): string { section("Named background preset (sf-surface-bg)", surfaceBg), section("Text protect (sf-text-protect)", well(textProtect)), section("Text gradient (sf-text-gradient)", textGradient), - section("Corner scoop (sf-corner-scoop + corner modifiers)", cornerScoop), section("Overlap (sf-overlap, sf-overlap-host)", well(stack("m", overlapHost, overlapDirections))), section("No tap highlight (sf-no-tap-highlight)", noTapHighlight), ); diff --git a/core/macros.css b/core/macros.css index d574b189..78aaed19 100644 --- a/core/macros.css +++ b/core/macros.css @@ -387,27 +387,6 @@ text-decoration-line: none; } - /* Concave corner — a corner that curves AWAY from the box (revealing - whatever sits behind it), via a radial-gradient mask. Physical corner - names (mask geometry has no logical form, same rationale as - .sf-overflow-fade's physical directions). Cuts the element's full - paint at that corner — box-shadow/border don't survive the cut there; - put shadows on a wrapper if needed. Named to mirror the future - `corner-shape: scoop` keyword for an easy @supports migration. */ - .sf-corner-scoop { - /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 18 */ - -webkit-mask-image: radial-gradient(circle at var(--sf-corner-scoop-at), - transparent var(--sf-corner-scoop-size), - black calc(var(--sf-corner-scoop-size) + 0.5px)); - mask-image: radial-gradient(circle at var(--sf-corner-scoop-at), - transparent var(--sf-corner-scoop-size), - black calc(var(--sf-corner-scoop-size) + 0.5px)); - } - .sf-corner-scoop--top-left { --sf-corner-scoop-at: 0 0; } - .sf-corner-scoop--top-right { --sf-corner-scoop-at: 100% 0; } - .sf-corner-scoop--bottom-left { --sf-corner-scoop-at: 0 100%; } - .sf-corner-scoop--bottom-right { --sf-corner-scoop-at: 100% 100%; } - /* Overlap recipe — one element intentionally overlapping the previous one (e.g. an image pulled up over the card below it), via a negative logical margin + a raised stacking context. Directional variants are diff --git a/core/tokens.macros.css b/core/tokens.macros.css index 22eb8a5c..90c41876 100644 --- a/core/tokens.macros.css +++ b/core/tokens.macros.css @@ -120,14 +120,6 @@ --sf-surface-bg-attachment: scroll; --sf-surface-bg-animation: none; - /* ---------------------------------------------------------- - Concave corner — radius and corner position for .sf-corner-scoop. - Override per element: style="--sf-corner-scoop-size: var(--sf-radius-3xl)" - (cut radius) or style="--sf-corner-scoop-at: 0 0" (which corner). - ---------------------------------------------------------- */ - --sf-corner-scoop-size: var(--sf-radius-2xl); - --sf-corner-scoop-at: 100% 0; - /* ---------------------------------------------------------- Overlap recipe — how far .sf-overlap pulls into the adjacent element. .sf-overlap-host's padding compensation defaults to this diff --git a/demo-audit.html b/demo-audit.html index 13bfeb2c..fd16d551 100644 --- a/demo-audit.html +++ b/demo-audit.html @@ -434,14 +434,6 @@

        Stagger

      • Third
      -

      Corner scoop

      -
      -
      top-left
      -
      top-right
      -
      bottom-left
      -
      bottom-right
      -
      -

      Overlap & overlap-host

      diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html index f9996762..e3dabd2d 100644 --- a/demos/full-api-demo-with-overrides.html +++ b/demos/full-api-demo-with-overrides.html @@ -122,7 +122,7 @@

      SLASHED Full API Demo

      -

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

      +

      v0.7.16 · full bundle from jsDelivr CDN · 325 classes · 754 tokens (265 configurable)

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

      Layout primitives 145

      -

      Macro classes 58

      +

      Macro classes 53

      .sf-aspect
      @@ -764,26 +764,6 @@

      Macro classes 58

      .sf-content-auto
      content-auto
      -
      -
      .sf-corner-scoop
      -
      corner-scoop
      -
      -
      -
      .sf-corner-scoop--bottom-left
      -
      corner-scoop--bottom-left
      -
      -
      -
      .sf-corner-scoop--bottom-right
      -
      corner-scoop--bottom-right
      -
      -
      -
      .sf-corner-scoop--top-left
      -
      corner-scoop--top-left
      -
      -
      -
      .sf-corner-scoop--top-right
      -
      corner-scoop--top-right
      -
      .sf-drop-shadow-l
      drop-shadow-l
      @@ -1277,7 +1257,7 @@

      Theme 3

      -

      Part 2 — Complete token reference 756 tokens · live values

      +

      Part 2 — Complete token reference 754 tokens · live values

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

      color 255

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

      content 3

      --sf-content-gap
      …
      --sf-content-intrinsic-size
      …
      --sf-content-width
      …

      contrast 2

      --sf-contrast-bias adv…
      --sf-contrast-threshold adv…
      -

      corner 2

      -
      --sf-corner-scoop-at…
      --sf-corner-scoop-size…

      cover 2

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

      current 1

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

      SLASHED Full API Demo

      -

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

      +

      v0.7.16 · full bundle from jsDelivr CDN · 325 classes · 754 tokens (265 configurable)

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

      Layout primitives 145

      -

      Macro classes 58

      +

      Macro classes 53

      .sf-aspect
      @@ -763,26 +763,6 @@

      Macro classes 58

      .sf-content-auto
      content-auto
      -
      -
      .sf-corner-scoop
      -
      corner-scoop
      -
      -
      -
      .sf-corner-scoop--bottom-left
      -
      corner-scoop--bottom-left
      -
      -
      -
      .sf-corner-scoop--bottom-right
      -
      corner-scoop--bottom-right
      -
      -
      -
      .sf-corner-scoop--top-left
      -
      corner-scoop--top-left
      -
      -
      -
      .sf-corner-scoop--top-right
      -
      corner-scoop--top-right
      -
      .sf-drop-shadow-l
      drop-shadow-l
      @@ -1276,7 +1256,7 @@

      Theme 3

      -

      Part 2 — Complete token reference 756 tokens · live values

      +

      Part 2 — Complete token reference 754 tokens · live values

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

      color 255

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

      content 3

      --sf-content-gap
      …
      --sf-content-intrinsic-size
      …
      --sf-content-width
      …

      contrast 2

      --sf-contrast-bias adv…
      --sf-contrast-threshold adv…
      -

      corner 2

      -
      --sf-corner-scoop-at…
      --sf-corner-scoop-size…

      cover 2

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

      current 1

      diff --git a/demos/generate.mjs b/demos/generate.mjs index f53b19a9..f8850063 100644 --- a/demos/generate.mjs +++ b/demos/generate.mjs @@ -134,7 +134,6 @@ const CURATED = { '--sf-link-underline-thickness': '3px', '--sf-link-external-marker': '" \\2192"', '--sf-link-external-label': '"leaves this site"', - '--sf-corner-scoop-at': '30% 70%', '--sf-field-required-marker': '" \\2737"', '--sf-color-mark-text': 'oklch(0.45 0.27 320)', '--sf-color-selection-text': 'oklch(0.98 0 0)', diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css index 0681332b..9aa90655 100644 --- a/demos/ultimate-override.css +++ b/demos/ultimate-override.css @@ -5,7 +5,7 @@ Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct value so full-api-demo.html can prove each one is wired end to end. - Coverage: 238 of 266 knob tokens overridden. + Coverage: 237 of 265 knob tokens overridden. 28 knobs are intentionally NOT perturbed (structural / meta / sentinel) — listed with reasons at the bottom of this file. ============================================================================ */ @@ -117,9 +117,6 @@ --sf-contrast-bias: 0.12; /* was: 0 */ --sf-contrast-threshold: 0.45; /* was: 0.6 */ - /* corner */ - --sf-corner-scoop-at: 30% 70%; /* was: 100% 0 */ - /* cover */ --sf-cover-min-height: 160dvh; /* was: 100dvh */ diff --git a/dist/css-custom-data.json b/dist/css-custom-data.json index be9a3401..9859c871 100644 --- a/dist/css-custom-data.json +++ b/dist/css-custom-data.json @@ -1851,16 +1851,6 @@ "description": "OKLCH lightness crossover for auto-contrast on colored surfaces. Colors with L above this get dark text; below get light text. Default 0.6.\n\nDefault: `0.6`\n\n(advanced token)", "syntax": "*" }, - { - "name": "--sf-corner-scoop-at", - "description": "Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0.\n\nDefault: `100% 0`", - "syntax": "*" - }, - { - "name": "--sf-corner-scoop-size", - "description": "Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl).\n\nDefault: `var(--sf-radius-2xl)`", - "syntax": "*" - }, { "name": "--sf-cover-min-height", "description": "Minimum height of the cover layout (typically 100svh).\n\nDefault: `100dvh`", diff --git a/docs/api-index.json b/docs/api-index.json index 2956904b..b5a142cc 100644 --- a/docs/api-index.json +++ b/docs/api-index.json @@ -26,23 +26,23 @@ "optimal" ], "counts": { - "total": 1087, + "total": 1080, "by_type": { - "class": 331, - "token": 756 + "class": 326, + "token": 754 }, "by_tier": { "INTERNAL": 1, - "PUBLIC": 1026, + "PUBLIC": 1019, "PUBLIC-ADVANCED": 60 }, "by_role": { - "consumption": 490, - "knob": 266 + "consumption": 489, + "knob": 265 }, - "tokens": 756, - "classes": 331, - "sf_classes": 294, + "tokens": 754, + "classes": 326, + "sf_classes": 289, "is_classes": 28, "unprefixed_classes": 9, "by_category": { @@ -53,8 +53,8 @@ "Forms": 1, "Layout primitives": 145, "Layout tokens": 53, - "Macro classes": 58, - "Macro tokens": 34, + "Macro classes": 53, + "Macro tokens": 32, "Motion / animation": 22, "Print": 4, "State classes": 28, @@ -9668,58 +9668,6 @@ "optimal" ] }, - { - "name": "--sf-corner-scoop-at", - "type": "token", - "tier": "PUBLIC", - "role": "knob", - "namespace": "corner", - "category": "Macro tokens", - "area": "macros", - "group": "Concave corner", - "description": "Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0.", - "value": "100% 0", - "aliasOf": null, - "registered": false, - "animatable": false, - "syntax": null, - "inherits": null, - "optional": false, - "layer": "slashed.tokens", - "sourceFiles": [ - "core/tokens.macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "--sf-corner-scoop-size", - "type": "token", - "tier": "PUBLIC", - "role": "consumption", - "namespace": "corner", - "category": "Macro tokens", - "area": "macros", - "group": "Concave corner", - "description": "Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl).", - "value": "var(--sf-radius-2xl)", - "aliasOf": "--sf-radius-2xl", - "registered": false, - "animatable": false, - "syntax": null, - "inherits": null, - "optional": false, - "layer": "slashed.tokens", - "sourceFiles": [ - "core/tokens.macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, { "name": "--sf-cover-min-height", "type": "token", @@ -21350,121 +21298,6 @@ "optimal" ] }, - { - "name": "sf-corner-scoop", - "type": "class", - "tier": "PUBLIC", - "selector": ".sf-corner-scoop", - "prefix": "sf", - "kind": "macro", - "category": "Macro classes", - "area": "macros", - "group": "", - "description": "Concave \"scooped\" corner cut with a radial-gradient mask; defaults to the top-right corner (--sf-corner-scoop-at). Add a placement modifier to move it.", - "isVariant": false, - "baseClass": null, - "optional": false, - "layer": "slashed.macros", - "sourceFiles": [ - "core/macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "sf-corner-scoop--bottom-left", - "type": "class", - "tier": "PUBLIC", - "selector": ".sf-corner-scoop--bottom-left", - "prefix": "sf", - "kind": "macro", - "category": "Macro classes", - "area": "macros", - "group": "", - "description": "Places the concave corner scoop at the bottom-left corner.", - "isVariant": true, - "baseClass": "sf-corner-scoop", - "optional": false, - "layer": "slashed.macros", - "sourceFiles": [ - "core/macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "sf-corner-scoop--bottom-right", - "type": "class", - "tier": "PUBLIC", - "selector": ".sf-corner-scoop--bottom-right", - "prefix": "sf", - "kind": "macro", - "category": "Macro classes", - "area": "macros", - "group": "", - "description": "Places the concave corner scoop at the bottom-right corner.", - "isVariant": true, - "baseClass": "sf-corner-scoop", - "optional": false, - "layer": "slashed.macros", - "sourceFiles": [ - "core/macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "sf-corner-scoop--top-left", - "type": "class", - "tier": "PUBLIC", - "selector": ".sf-corner-scoop--top-left", - "prefix": "sf", - "kind": "macro", - "category": "Macro classes", - "area": "macros", - "group": "", - "description": "Places the concave corner scoop at the top-left corner.", - "isVariant": true, - "baseClass": "sf-corner-scoop", - "optional": false, - "layer": "slashed.macros", - "sourceFiles": [ - "core/macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, - { - "name": "sf-corner-scoop--top-right", - "type": "class", - "tier": "PUBLIC", - "selector": ".sf-corner-scoop--top-right", - "prefix": "sf", - "kind": "macro", - "category": "Macro classes", - "area": "macros", - "group": "", - "description": "Places the concave corner scoop at the top-right corner.", - "isVariant": true, - "baseClass": "sf-corner-scoop", - "optional": false, - "layer": "slashed.macros", - "sourceFiles": [ - "core/macros.css" - ], - "bundles": [ - "full", - "optimal" - ] - }, { "name": "sf-cover", "type": "class", diff --git a/docs/api-index.md b/docs/api-index.md index ae23d267..f53614ce 100644 --- a/docs/api-index.md +++ b/docs/api-index.md @@ -10,15 +10,15 @@ and a short description. The machine-readable companion (with all columns) is [registry.json](registry.json); for the tier contract see [architecture.md](architecture.md). -**1087 elements** — 756 tokens, 331 classes. +**1080 elements** — 754 tokens, 326 classes. | Tier | Count | Meaning | |---|---|---| -| PUBLIC | 1026 | Everyday surface. SemVer-stable. | +| PUBLIC | 1019 | Everyday surface. SemVer-stable. | | PUBLIC-ADVANCED | 60 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | -## Tokens (756) +## Tokens (754) ### Component tokens (46) @@ -757,14 +757,12 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-switcher-gap` | PUBLIC | consumption | switcher | `var(--sf-gap)` | Gap between switcher columns / rows. | | `--sf-switcher-threshold` | PUBLIC | knob | switcher | `30rem` | Inline-size threshold below which the switcher flips from horizontal to vertical. | -### Macro tokens (34) +### Macro tokens (32) | Token | Tier | Role | Namespace | Default | Description | |---|---|---|---|---|---| | `--sf-aspect` | PUBLIC | knob | aspect | `16 / 9` | Aspect ratio value for the .aspect-ratio macro. | | `--sf-content-intrinsic-size` | PUBLIC | knob | content | `500px` | Intrinsic-size hint for content-visibility: auto (prevents layout shift on first reveal). | -| `--sf-corner-scoop-at` | PUBLIC | knob | corner | `100% 0` | Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0. | -| `--sf-corner-scoop-size` | PUBLIC | consumption | corner | `var(--sf-radius-2xl)` | Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl). | | `--sf-flow-space` | PUBLIC | consumption | flow | `var(--sf-content-gap)` | Margin-block-start applied to all flow children except the first. | | `--sf-line-clamp` | PUBLIC | knob | line | `3` | Number of visible lines before text is clipped with an ellipsis. | | `--sf-overlap-pull` | PUBLIC | consumption | overlap | `var(--sf-space-xl)` | how far .sf-overlap pulls into the adjacent element. .sf-overlap-host's padding compensation defaults to this same value via a var() fallback in the rule itself (not aliased here — see core/macros.css), so one override on the host tunes both unless --sf-overlap-host-pad is set… | @@ -796,7 +794,7 @@ and a short description. The machine-readable companion (with all columns) is | `--sf-surface-bg-size` | PUBLIC | knob | surface | `cover` | background-size for the .sf-surface-bg image. Default: cover. | | `--sf-surface-color` | PUBLIC | consumption | surface | `var(--sf-color-base)` | Input for the generic .sf-surface macro. Set any color (including palette shades); the macro derives background, auto-contrast foreground, and the contextual token set from it. | -## Classes (331) +## Classes (326) ### Accessibility (8) @@ -1002,17 +1000,12 @@ and a short description. The machine-readable companion (with all columns) is | `.sf-switcher--no-wrap` | PUBLIC | layout | Switcher | Switcher variant that stays horizontal and never wraps (single-line regardless of container width). | | `.sf-switcher--vertical` | PUBLIC | layout | Switcher | Switcher variant that starts in the vertical (stacked) direction on all sizes. | -### Macro classes (58) +### Macro classes (53) | Class | Tier | Kind | Group | Description | |---|---|---|---|---| | `.sf-aspect` | PUBLIC | macro | Aspect | Sets aspect-ratio from a --sf-aspect-ratio scoped token. Override the token inline to get any ratio without a new class. | | `.sf-content-auto` | PUBLIC | macro | Content visibility | Sets content-visibility: auto on the element. The browser skips rendering off-screen content, improving LCP for long pages. | -| `.sf-corner-scoop` | PUBLIC | macro | — | Concave "scooped" corner cut with a radial-gradient mask; defaults to the top-right corner (--sf-corner-scoop-at). Add a placement modifier to move it. | -| `.sf-corner-scoop--bottom-left` | PUBLIC | macro | — | Places the concave corner scoop at the bottom-left corner. | -| `.sf-corner-scoop--bottom-right` | PUBLIC | macro | — | Places the concave corner scoop at the bottom-right corner. | -| `.sf-corner-scoop--top-left` | PUBLIC | macro | — | Places the concave corner scoop at the top-left corner. | -| `.sf-corner-scoop--top-right` | PUBLIC | macro | — | Places the concave corner scoop at the top-right corner. | | `.sf-drop-shadow-l` | PUBLIC | macro | — | Large filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-l). | | `.sf-drop-shadow-m` | PUBLIC | macro | — | Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m). | | `.sf-drop-shadow-s` | PUBLIC | macro | — | Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s). | diff --git a/docs/classes.md b/docs/classes.md index 6f893ab6..c20cc6eb 100644 --- a/docs/classes.md +++ b/docs/classes.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-class-reference.js` — > run `npm run docs:classes` to refresh. Do not edit by hand. -**294 .sf-classes, 28 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class. +**289 .sf-classes, 28 .sf-is-classes.** Every `.sf-*` layout/macro class and `.sf-is-*` state class. See [architecture.md](architecture.md) for layer order and naming conventions. ## Layout primitives (`core/layout.css`) @@ -160,17 +160,12 @@ See [architecture.md](architecture.md) for layer order and naming conventions. ## Macro classes (`core/macros.css`) -58 classes. +53 classes. | Class | |---| | `.sf-aspect` | | `.sf-content-auto` | -| `.sf-corner-scoop` | -| `.sf-corner-scoop--bottom-left` | -| `.sf-corner-scoop--bottom-right` | -| `.sf-corner-scoop--top-left` | -| `.sf-corner-scoop--top-right` | | `.sf-drop-shadow-l` | | `.sf-drop-shadow-m` | | `.sf-drop-shadow-s` | diff --git a/docs/demo.html b/docs/demo.html index b96bec22..d89171a4 100644 --- a/docs/demo.html +++ b/docs/demo.html @@ -2802,15 +2802,6 @@

      .sf-bg-layer — -

      .sf-corner-scoop — concave corner

      -

      A corner that curves away from the box, revealing the page behind it, via a mask-image radial gradient.

      -
      -
      -
      -
      -
      -
      -

      .sf-overlap / .sf-overlap-host — intentional overlap recipe

      One element pulled up over the next, which reserves clearance for it automatically.

      @@ -2822,9 +2813,9 @@

      .sf-overlap / Directional variants: .sf-overlap--down (pulls into the next element), .sf-overlap--start / .sf-overlap--end (pulls into the inline edge).

      Macros in action — a composed profile card

      -

      Both recipes together on one realistic card: a notched banner (.sf-corner-scoop) with an avatar overlapping into the body below (.sf-overlap / .sf-overlap-host).

      +

      A realistic card built from the overlap recipe: a banner with an avatar overlapping into the body below (.sf-overlap / .sf-overlap-host).

      -
      +
      Jamie Chen diff --git a/docs/llm-guide.md b/docs/llm-guide.md index 81c0011d..23e34221 100644 --- a/docs/llm-guide.md +++ b/docs/llm-guide.md @@ -903,10 +903,6 @@ Each primitive has its own knobs. Override locally (`style="--sf-cluster-gap: 2r --sf-surface-bg-attachment: scroll --sf-surface-bg-animation: none /* optional animation shorthand */ -/* Concave corner (.sf-corner-scoop) */ ---sf-corner-scoop-size: var(--sf-radius-2xl) ---sf-corner-scoop-at: 100% 0 - /* Overlap recipe (.sf-overlap / .sf-overlap-host) */ --sf-overlap-pull: var(--sf-space-xl) ``` diff --git a/docs/macros.md b/docs/macros.md index de99c0a5..9394d549 100644 --- a/docs/macros.md +++ b/docs/macros.md @@ -733,44 +733,6 @@ Lives in `core/motion.css`, layer `slashed.motion`. --- -## `.sf-corner-scoop` - -A corner that curves **away** from the box (a concave "notch"), instead -of the normal convex `border-radius`. Reveals whatever sits behind the -element at that corner via a `mask-image` radial gradient. Default -corner is top-right. - -```html -
      - Panel with a corner that curves away -
      -``` - -Variants: - -| Class | Effect | -|---|---| -| `.sf-corner-scoop--top-left` | scoop at the top-left corner | -| `.sf-corner-scoop--top-right` | scoop at the top-right corner | -| `.sf-corner-scoop--bottom-left` | scoop at the bottom-left corner | -| `.sf-corner-scoop--bottom-right` | scoop at the bottom-right corner | - -Tokens: - -| Token | Default | What it controls | -|---|---|---| -| `--sf-corner-scoop-size` | `var(--sf-radius-2xl)` | radius of the concave cut | -| `--sf-corner-scoop-at` | `100% 0` | position of the cut (set by the variants above) | - -**Limitations:** masking cuts the element's entire paint at that -corner — `box-shadow`/`border` don't survive the cut there (put shadows -on a wrapper element if needed). Only one scoop per element — a second -mask layer would fill the first hole rather than adding a second cut. -Doesn't compose with other mask-based macros (`.sf-overflow-fade`, -`.sf-scroll-shadow`) on the same element — the last `mask-image` wins. - ---- - ## `.sf-overlap` and `.sf-overlap-host` A recipe for one element intentionally overlapping the element before diff --git a/docs/registry.json b/docs/registry.json index 7ed38d57..5bfeee73 100644 --- a/docs/registry.json +++ b/docs/registry.json @@ -20,8 +20,8 @@ "optional/utilities.css" ], "counts": { - "tokens": 756, - "sf_classes": 294, + "tokens": 754, + "sf_classes": 289, "is_classes": 28 } }, @@ -396,8 +396,6 @@ "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold", - "--sf-corner-scoop-at", - "--sf-corner-scoop-size", "--sf-cover-min-height", "--sf-cover-padding", "--sf-current-font-weight", @@ -852,11 +850,6 @@ "sf-container--wide", "sf-content-auto", "sf-content-grid", - "sf-corner-scoop", - "sf-corner-scoop--bottom-left", - "sf-corner-scoop--bottom-right", - "sf-corner-scoop--top-left", - "sf-corner-scoop--top-right", "sf-cover", "sf-cover--max", "sf-cover--min", diff --git a/docs/roadmap.md b/docs/roadmap.md index b55cc3bf..e6178eca 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -161,12 +161,16 @@ non-additive changes; the v0.6.x series focuses on the components layer.* (`search_tokens`, `get_class_info`, etc.) for AI coding assistants, as a live alternative to the static `llms.txt`. Tracked in [#473](https://github.com/codeslash-dev/SLASHED/issues/473). -- ~~**Concave/inverted corner utility**~~ ✓ **Done** — shipped as - `.sf-corner-scoop` (mask-based radial-gradient cut) with 4 single-corner - position variants (`--top-left`/`--top-right`/`--bottom-left`/`--bottom-right`). - A two-corner "pair variant" (for U-shaped cutouts) was explored and - dropped — WebKit's `mask-composite` implementation has a bug with no - viable workaround found. +- ~~**Concave/inverted corner utility**~~ ✗ **Not planned** — shipped as + `.sf-corner-scoop` (mask-based radial-gradient cut with 4 single-corner + position variants) and then removed before 1.0. Judged too niche for the + public API relative to its cost: a single absolute `--sf-corner-scoop-size` + needs per-element tuning to read well across button-sized and hero-sized + boxes, and the mask clips `box-shadow`/`border` and can't compose with the + other mask-based macros (`.sf-overflow-fade`, `.sf-scroll-shadow`) on the + same element. (A two-corner "pair variant" for U-shaped cutouts had already + been dropped earlier — WebKit's `mask-composite` has a bug with no viable + workaround.) Tracked in [#484](https://github.com/codeslash-dev/SLASHED/issues/484). - ~~**Boxed-section layout primitive**~~ ✗ **Not planned** — a `.sf-boxed` section macro was implemented and then dropped after review; judged too @@ -183,12 +187,12 @@ non-additive changes; the v0.6.x series focuses on the components layer.* color/gradient overlay with correct automatic stacking; documented in `docs/macros.md` instead of adding a redundant class. Tracked in [#489](https://github.com/codeslash-dev/SLASHED/issues/489). -- **Concrete recipe macros** — **partially done**. Shipped: `.sf-corner-scoop` - (border-radius-style recipe, tracked as #484 above) and `.sf-overlap`/ - `.sf-overlap-host` (overlap + card-container recipes). A `.sf-corners` - logical-corner recipe (with a `--leaf` asymmetric variant) was also built - and then cut — judged too niche for the public API relative to its - long-term maintenance cost. +- **Concrete recipe macros** — **partially done**. Shipped: `.sf-overlap`/ + `.sf-overlap-host` (overlap + card-container recipes). Two corner-recipe + macros were built and then cut before 1.0 — `.sf-corner-scoop` (mask-based + concave cut, tracked as #484 above) and a `.sf-corners` logical-corner + recipe (with a `--leaf` asymmetric variant) — both judged too niche for the + public API relative to their long-term maintenance cost. Tracked in [#490](https://github.com/codeslash-dev/SLASHED/issues/490). - **Container-relative fluid scale** — the `--sf-text-*`/`--sf-space-*` fluid scales are `100vw`-driven and don't respond to `@container` width the way diff --git a/docs/test-coverage-6-token-reference.html b/docs/test-coverage-6-token-reference.html index 97fd56ee..515f2b8b 100644 --- a/docs/test-coverage-6-token-reference.html +++ b/docs/test-coverage-6-token-reference.html @@ -109,7 +109,7 @@

      Full token reference — tokens

      else apply(next); }); - var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-corner-scoop-at","--sf-corner-scoop-size","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-density","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-hover-grow-scale","--sf-hover-lift","--sf-hover-shrink-scale","--sf-hover-slide","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-stagger-step","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"]; + var TOKENS = ["--sf-alternate-gap","--sf-alternate-inner-gap","--sf-animation-blink","--sf-animation-color-pulse","--sf-animation-fade-in","--sf-animation-fade-out","--sf-animation-float","--sf-animation-ping","--sf-animation-scale-down","--sf-animation-scale-up","--sf-animation-shimmer","--sf-animation-slide-in-down","--sf-animation-slide-in-left","--sf-animation-slide-in-right","--sf-animation-slide-in-up","--sf-animation-slide-out-down","--sf-animation-slide-out-left","--sf-animation-slide-out-right","--sf-animation-slide-out-up","--sf-animation-spin","--sf-aspect","--sf-bento-cols-default","--sf-bento-gap","--sf-bento-row-compact","--sf-bento-row-default","--sf-bento-row-tall","--sf-bg-layer-fit","--sf-bg-layer-inset","--sf-bg-layer-position","--sf-bg-layer-radius","--sf-bg-layer-z","--sf-blur","--sf-body-color","--sf-body-em-style","--sf-body-font-family","--sf-body-font-size","--sf-body-font-weight","--sf-body-line-height","--sf-body-strong-weight","--sf-body-text-wrap","--sf-border","--sf-border-scale","--sf-border-strong","--sf-border-style","--sf-border-subtle","--sf-border-width-1","--sf-border-width-2","--sf-border-width-3","--sf-border-width-4","--sf-border-width-hairline","--sf-box-border-color","--sf-box-border-width","--sf-box-padding","--sf-breakout-width","--sf-btn-border-width","--sf-btn-font-scale","--sf-btn-font-size","--sf-btn-font-weight","--sf-btn-gap","--sf-btn-l-font-size","--sf-btn-l-min-height","--sf-btn-l-padding-block","--sf-btn-l-padding-inline","--sf-btn-m-font-size","--sf-btn-m-min-height","--sf-btn-m-padding-block","--sf-btn-m-padding-inline","--sf-btn-min-height","--sf-btn-padding-block","--sf-btn-padding-inline","--sf-btn-radius","--sf-btn-s-font-size","--sf-btn-s-min-height","--sf-btn-s-padding-block","--sf-btn-s-padding-inline","--sf-btn-xl-font-size","--sf-btn-xl-min-height","--sf-btn-xl-padding-block","--sf-btn-xl-padding-inline","--sf-btn-xs-font-size","--sf-btn-xs-min-height","--sf-btn-xs-padding-block","--sf-btn-xs-padding-inline","--sf-card-avatar-size","--sf-card-bg","--sf-card-border-color","--sf-card-border-width","--sf-card-gap","--sf-card-heading-size","--sf-card-media-radius","--sf-card-media-ratio","--sf-card-padding","--sf-card-radius","--sf-card-radius-outer","--sf-card-shadow","--sf-card-shadow--elevated","--sf-card-shadow--hover","--sf-caret-color","--sf-center-gutter","--sf-center-max","--sf-cluster-align","--sf-cluster-gap","--sf-cluster-justify","--sf-code-font-size","--sf-color-action","--sf-color-action--active","--sf-color-action--hover","--sf-color-action-100","--sf-color-action-200","--sf-color-action-300","--sf-color-action-400","--sf-color-action-50","--sf-color-action-500","--sf-color-action-600","--sf-color-action-700","--sf-color-action-800","--sf-color-action-900","--sf-color-action-950","--sf-color-action-a10","--sf-color-action-a30","--sf-color-action-a5","--sf-color-action-a50","--sf-color-action-a80","--sf-color-action-darker","--sf-color-action-lighter","--sf-color-action-muted","--sf-color-action-source-dark","--sf-color-action-source-light","--sf-color-action-subtle","--sf-color-action-superdark","--sf-color-action-superlight","--sf-color-action-tint","--sf-color-action-xdark","--sf-color-action-xlight","--sf-color-base","--sf-color-base--active","--sf-color-base--hover","--sf-color-base-100","--sf-color-base-200","--sf-color-base-300","--sf-color-base-400","--sf-color-base-50","--sf-color-base-500","--sf-color-base-600","--sf-color-base-700","--sf-color-base-800","--sf-color-base-900","--sf-color-base-950","--sf-color-base-a10","--sf-color-base-a30","--sf-color-base-a5","--sf-color-base-a50","--sf-color-base-a80","--sf-color-base-muted","--sf-color-base-source-dark","--sf-color-base-source-light","--sf-color-base-subtle","--sf-color-base-tint","--sf-color-bg","--sf-color-bg--active","--sf-color-bg--disabled","--sf-color-bg--focus","--sf-color-bg--hover","--sf-color-bg--selected","--sf-color-black","--sf-color-border","--sf-color-border--disabled","--sf-color-border--focus","--sf-color-border--strong","--sf-color-border--subtle","--sf-color-border--translucent","--sf-color-code-bg","--sf-color-code-text","--sf-color-danger","--sf-color-danger-muted","--sf-color-danger-source-dark","--sf-color-danger-source-light","--sf-color-danger-strong","--sf-color-danger-subtle","--sf-color-danger-tint","--sf-color-dim","--sf-color-heading","--sf-color-info","--sf-color-info-muted","--sf-color-info-source-dark","--sf-color-info-source-light","--sf-color-info-strong","--sf-color-info-subtle","--sf-color-info-tint","--sf-color-inset","--sf-color-inverse","--sf-color-link","--sf-color-link--active","--sf-color-link--disabled","--sf-color-link--hover","--sf-color-link--underline","--sf-color-link--visited","--sf-color-mark-bg","--sf-color-mark-text","--sf-color-neutral","--sf-color-neutral--active","--sf-color-neutral--hover","--sf-color-neutral-100","--sf-color-neutral-200","--sf-color-neutral-300","--sf-color-neutral-400","--sf-color-neutral-50","--sf-color-neutral-500","--sf-color-neutral-600","--sf-color-neutral-700","--sf-color-neutral-800","--sf-color-neutral-900","--sf-color-neutral-950","--sf-color-neutral-a10","--sf-color-neutral-a30","--sf-color-neutral-a5","--sf-color-neutral-a50","--sf-color-neutral-a80","--sf-color-neutral-darker","--sf-color-neutral-lighter","--sf-color-neutral-muted","--sf-color-neutral-source-dark","--sf-color-neutral-source-light","--sf-color-neutral-subtle","--sf-color-neutral-superdark","--sf-color-neutral-superlight","--sf-color-neutral-tint","--sf-color-neutral-xdark","--sf-color-neutral-xlight","--sf-color-overlay","--sf-color-primary","--sf-color-primary--active","--sf-color-primary--hover","--sf-color-primary-100","--sf-color-primary-200","--sf-color-primary-300","--sf-color-primary-400","--sf-color-primary-50","--sf-color-primary-500","--sf-color-primary-600","--sf-color-primary-700","--sf-color-primary-800","--sf-color-primary-900","--sf-color-primary-950","--sf-color-primary-a10","--sf-color-primary-a30","--sf-color-primary-a5","--sf-color-primary-a50","--sf-color-primary-a80","--sf-color-primary-darker","--sf-color-primary-lighter","--sf-color-primary-muted","--sf-color-primary-source-dark","--sf-color-primary-source-light","--sf-color-primary-subtle","--sf-color-primary-superdark","--sf-color-primary-superlight","--sf-color-primary-tint","--sf-color-primary-xdark","--sf-color-primary-xlight","--sf-color-raised","--sf-color-scheme","--sf-color-secondary","--sf-color-secondary--active","--sf-color-secondary--hover","--sf-color-secondary-100","--sf-color-secondary-200","--sf-color-secondary-300","--sf-color-secondary-400","--sf-color-secondary-50","--sf-color-secondary-500","--sf-color-secondary-600","--sf-color-secondary-700","--sf-color-secondary-800","--sf-color-secondary-900","--sf-color-secondary-950","--sf-color-secondary-a10","--sf-color-secondary-a30","--sf-color-secondary-a5","--sf-color-secondary-a50","--sf-color-secondary-a80","--sf-color-secondary-darker","--sf-color-secondary-lighter","--sf-color-secondary-muted","--sf-color-secondary-source-dark","--sf-color-secondary-source-light","--sf-color-secondary-subtle","--sf-color-secondary-superdark","--sf-color-secondary-superlight","--sf-color-secondary-tint","--sf-color-secondary-xdark","--sf-color-secondary-xlight","--sf-color-selection-bg","--sf-color-selection-bg--alt","--sf-color-selection-text","--sf-color-selection-text--alt","--sf-color-success","--sf-color-success-muted","--sf-color-success-source-dark","--sf-color-success-source-light","--sf-color-success-strong","--sf-color-success-subtle","--sf-color-success-tint","--sf-color-surface","--sf-color-tertiary","--sf-color-tertiary--active","--sf-color-tertiary--hover","--sf-color-tertiary-100","--sf-color-tertiary-200","--sf-color-tertiary-300","--sf-color-tertiary-400","--sf-color-tertiary-50","--sf-color-tertiary-500","--sf-color-tertiary-600","--sf-color-tertiary-700","--sf-color-tertiary-800","--sf-color-tertiary-900","--sf-color-tertiary-950","--sf-color-tertiary-a10","--sf-color-tertiary-a30","--sf-color-tertiary-a5","--sf-color-tertiary-a50","--sf-color-tertiary-a80","--sf-color-tertiary-darker","--sf-color-tertiary-lighter","--sf-color-tertiary-muted","--sf-color-tertiary-source-dark","--sf-color-tertiary-source-light","--sf-color-tertiary-subtle","--sf-color-tertiary-superdark","--sf-color-tertiary-superlight","--sf-color-tertiary-tint","--sf-color-tertiary-xdark","--sf-color-tertiary-xlight","--sf-color-text","--sf-color-text--disabled","--sf-color-text--inverse","--sf-color-text--muted","--sf-color-text--on-action","--sf-color-text--on-base","--sf-color-text--on-danger","--sf-color-text--on-info","--sf-color-text--on-inverse","--sf-color-text--on-neutral","--sf-color-text--on-primary","--sf-color-text--on-secondary","--sf-color-text--on-success","--sf-color-text--on-tertiary","--sf-color-text--on-warning","--sf-color-text--placeholder","--sf-color-text--secondary","--sf-color-warning","--sf-color-warning-muted","--sf-color-warning-source-dark","--sf-color-warning-source-light","--sf-color-warning-strong","--sf-color-warning-subtle","--sf-color-warning-tint","--sf-color-white","--sf-component-pad","--sf-container-default","--sf-container-full","--sf-container-narrow","--sf-container-prose","--sf-container-wide","--sf-content-gap","--sf-content-intrinsic-size","--sf-content-width","--sf-contrast-bias","--sf-contrast-threshold","--sf-cover-min-height","--sf-cover-padding","--sf-current-font-weight","--sf-density","--sf-display-l-line-height","--sf-display-m-line-height","--sf-display-s-line-height","--sf-divider-color","--sf-divider-gap","--sf-divider-style","--sf-divider-width","--sf-drop-shadow-l","--sf-drop-shadow-m","--sf-drop-shadow-s","--sf-drop-shadow-xl","--sf-drop-shadow-xs","--sf-duration-fast","--sf-duration-instant","--sf-duration-none","--sf-duration-normal","--sf-duration-slow","--sf-duration-slower","--sf-ease-bounce","--sf-ease-elastic","--sf-ease-in","--sf-ease-in-out","--sf-ease-linear","--sf-ease-out","--sf-ease-overshoot","--sf-ease-spring","--sf-equal-gap","--sf-equal-min-col","--sf-equal-rule-color","--sf-equal-rule-style","--sf-equal-rule-width","--sf-field-block","--sf-field-padding-block","--sf-field-padding-inline","--sf-field-radius","--sf-field-required-marker","--sf-flow-space","--sf-fluid-max-vw","--sf-fluid-min-vw","--sf-fluid-width","--sf-focus-ring-color","--sf-focus-ring-offset","--sf-focus-ring-shadow","--sf-focus-ring-style","--sf-focus-ring-width","--sf-font-body","--sf-font-display","--sf-font-features","--sf-font-geometric","--sf-font-heading","--sf-font-humanist","--sf-font-mono","--sf-font-numeric","--sf-font-slab","--sf-font-variation","--sf-font-weight-body","--sf-font-weight-bold","--sf-font-weight-display","--sf-font-weight-heading","--sf-font-weight-interactive","--sf-font-weight-light","--sf-font-weight-medium","--sf-font-weight-normal","--sf-font-weight-semibold","--sf-font-weight-strong","--sf-frame-ratio","--sf-gap","--sf-gradient-action","--sf-gradient-brand","--sf-gradient-fade--b","--sf-gradient-fade--l","--sf-gradient-fade--r","--sf-gradient-fade--t","--sf-gradient-primary","--sf-gradient-secondary","--sf-gradient-surface","--sf-gradient-tertiary","--sf-grid-gap","--sf-grid-min","--sf-grid-min-2xl","--sf-grid-min-l","--sf-grid-min-m","--sf-grid-min-s","--sf-grid-min-xl","--sf-grid-min-xs","--sf-gutter","--sf-h1-font-weight","--sf-h1-letter-spacing","--sf-h1-line-height","--sf-h1-max-width","--sf-h1-size","--sf-h2-font-weight","--sf-h2-letter-spacing","--sf-h2-line-height","--sf-h2-max-width","--sf-h2-size","--sf-h3-font-weight","--sf-h3-letter-spacing","--sf-h3-line-height","--sf-h3-max-width","--sf-h3-size","--sf-h4-font-weight","--sf-h4-letter-spacing","--sf-h4-line-height","--sf-h4-max-width","--sf-h4-size","--sf-h5-font-weight","--sf-h5-letter-spacing","--sf-h5-line-height","--sf-h5-max-width","--sf-h5-size","--sf-h6-font-weight","--sf-h6-letter-spacing","--sf-h6-line-height","--sf-h6-max-width","--sf-h6-size","--sf-header-height","--sf-header-height-desktop","--sf-header-height-mobile","--sf-heading-color","--sf-heading-font-family","--sf-heading-text-wrap","--sf-hover-grow-scale","--sf-hover-lift","--sf-hover-shrink-scale","--sf-hover-slide","--sf-icon-2xl","--sf-icon-box-bg","--sf-icon-box-border","--sf-icon-box-pad","--sf-icon-box-radius","--sf-icon-l","--sf-icon-m","--sf-icon-s","--sf-icon-xl","--sf-icon-xs","--sf-imposter-margin","--sf-is-active","--sf-is-current","--sf-is-dark","--sf-is-open","--sf-is-pressed","--sf-leading-normal","--sf-leading-relaxed","--sf-leading-snug","--sf-leading-taper","--sf-leading-tight","--sf-line-clamp","--sf-link-external-label","--sf-link-external-marker","--sf-link-underline-offset","--sf-link-underline-thickness","--sf-lumlocker","--sf-mask-scrim-end","--sf-mask-scrim-start","--sf-media-radius","--sf-motion-scale","--sf-object-fit","--sf-object-position","--sf-opacity-disabled","--sf-opacity-muted","--sf-optical-sizing","--sf-overlap-pull","--sf-palette-mix-100","--sf-palette-mix-200","--sf-palette-mix-300","--sf-palette-mix-400","--sf-palette-mix-50","--sf-palette-mix-600","--sf-palette-mix-700","--sf-palette-mix-800","--sf-palette-mix-900","--sf-palette-mix-950","--sf-print-base-size","--sf-print-page-margin","--sf-print-page-size","--sf-prose-block-margin","--sf-prose-blockquote-border","--sf-prose-blockquote-padding","--sf-prose-figcaption-size","--sf-prose-figure-margin","--sf-prose-heading-gap","--sf-prose-hr-margin","--sf-prose-list-gap","--sf-prose-marker-color","--sf-prose-media-margin","--sf-prose-media-radius","--sf-prose-nested-list-gap","--sf-prose-paragraph","--sf-prose-table-pad","--sf-radius-2xl","--sf-radius-2xs","--sf-radius-3xl","--sf-radius-4xl","--sf-radius-full","--sf-radius-l","--sf-radius-m","--sf-radius-none","--sf-radius-outer","--sf-radius-pill","--sf-radius-s","--sf-radius-scale","--sf-radius-xl","--sf-radius-xs","--sf-ratio-3-2","--sf-ratio-4-3","--sf-ratio-cinema","--sf-ratio-golden","--sf-ratio-portrait","--sf-ratio-square","--sf-ratio-video","--sf-reel-gap","--sf-reel-height","--sf-reel-item-width","--sf-safe-bottom","--sf-safe-left","--sf-safe-right","--sf-safe-top","--sf-scrim-color","--sf-scrim-direction","--sf-scrim-gradient","--sf-scrim-text-shadow","--sf-scroll-shadow-size","--sf-scroll-timeline-range-end","--sf-scroll-timeline-range-exit-end","--sf-scroll-timeline-range-exit-start","--sf-scroll-timeline-range-start","--sf-scrollbar-thumb","--sf-scrollbar-track","--sf-section-pad","--sf-section-pad--2xl","--sf-section-pad--l","--sf-section-pad--m","--sf-section-pad--s","--sf-section-pad--xl","--sf-section-pad--xs","--sf-section-scale","--sf-shadow-2xl","--sf-shadow-color","--sf-shadow-glow","--sf-shadow-glow-color","--sf-shadow-inner","--sf-shadow-l","--sf-shadow-lightness","--sf-shadow-m","--sf-shadow-none","--sf-shadow-s","--sf-shadow-strength","--sf-shadow-xl","--sf-shadow-xs","--sf-sidebar-gap","--sf-sidebar-min-width","--sf-sidebar-width","--sf-size-l","--sf-size-m","--sf-size-s","--sf-size-xl","--sf-size-xs","--sf-space-2xl","--sf-space-2xs","--sf-space-3xl","--sf-space-4xl","--sf-space-base-max","--sf-space-base-min","--sf-space-l","--sf-space-m","--sf-space-none","--sf-space-px","--sf-space-ratio-max","--sf-space-ratio-min","--sf-space-s","--sf-space-scale","--sf-space-xl","--sf-space-xs","--sf-stack-gap","--sf-stagger-step","--sf-state-pending-opacity","--sf-sticky-offset","--sf-sticky-offset-desktop","--sf-sticky-offset-mobile","--sf-surface-bg-animation","--sf-surface-bg-attachment","--sf-surface-bg-color","--sf-surface-bg-image","--sf-surface-bg-overlay","--sf-surface-bg-position","--sf-surface-bg-repeat","--sf-surface-bg-size","--sf-surface-color","--sf-switcher-gap","--sf-switcher-threshold","--sf-text-2xl","--sf-text-2xl-font-weight","--sf-text-2xl-letter-spacing","--sf-text-2xl-line-height","--sf-text-2xl-max-width","--sf-text-2xs","--sf-text-2xs-font-weight","--sf-text-2xs-letter-spacing","--sf-text-2xs-line-height","--sf-text-2xs-max-width","--sf-text-3xl","--sf-text-3xl-font-weight","--sf-text-3xl-letter-spacing","--sf-text-3xl-line-height","--sf-text-3xl-max-width","--sf-text-4xl","--sf-text-4xl-font-weight","--sf-text-4xl-letter-spacing","--sf-text-4xl-line-height","--sf-text-4xl-max-width","--sf-text-base-max","--sf-text-base-min","--sf-text-display-base-max","--sf-text-display-base-min","--sf-text-display-l","--sf-text-display-m","--sf-text-display-s","--sf-text-display-scale","--sf-text-l","--sf-text-l-font-weight","--sf-text-l-letter-spacing","--sf-text-l-line-height","--sf-text-l-max-width","--sf-text-m","--sf-text-m-font-weight","--sf-text-m-letter-spacing","--sf-text-m-line-height","--sf-text-m-max-width","--sf-text-ratio-max","--sf-text-ratio-min","--sf-text-s","--sf-text-s-font-weight","--sf-text-s-letter-spacing","--sf-text-s-line-height","--sf-text-s-max-width","--sf-text-scale","--sf-text-shadow-l","--sf-text-shadow-m","--sf-text-shadow-none","--sf-text-shadow-s","--sf-text-shadow-xl","--sf-text-shadow-xs","--sf-text-xl","--sf-text-xl-font-weight","--sf-text-xl-letter-spacing","--sf-text-xl-line-height","--sf-text-xl-max-width","--sf-text-xs","--sf-text-xs-font-weight","--sf-text-xs-letter-spacing","--sf-text-xs-line-height","--sf-text-xs-max-width","--sf-theme-transition-duration","--sf-touch-target","--sf-tracking-normal","--sf-tracking-tight","--sf-tracking-wide","--sf-tracking-wider","--sf-tracking-widest","--sf-transition-colors","--sf-transition-enter","--sf-transition-exit","--sf-transition-fast","--sf-transition-form-field","--sf-transition-opacity","--sf-transition-overlay","--sf-transition-shadow","--sf-transition-slow","--sf-transition-transform","--sf-z-base","--sf-z-below","--sf-z-dropdown","--sf-z-fixed","--sf-z-modal","--sf-z-overlay","--sf-z-raised","--sf-z-sticky","--sf-z-toast","--sf-z-tooltip"]; document.getElementById('tok-count').textContent = TOKENS.length; var grid = document.getElementById('tok-grid'); var filter = document.getElementById('token-filter'); diff --git a/docs/token-annotations.json b/docs/token-annotations.json index b1cfb69f..38948f7c 100644 --- a/docs/token-annotations.json +++ b/docs/token-annotations.json @@ -861,8 +861,6 @@ "--sf-animation-slide-out-down": "Ready-made animation shorthand: slides the element out downward (sf-slide-out-down) at the normal duration with ease-in.", "--sf-animation-slide-out-left": "Ready-made animation shorthand: slides the element out to the left (sf-slide-out-left) at the normal duration with ease-in.", "--sf-animation-slide-out-right": "Ready-made animation shorthand: slides the element out to the right (sf-slide-out-right) at the normal duration with ease-in.", - "--sf-corner-scoop-size": "Cut radius of the .sf-corner-scoop mask. Default: var(--sf-radius-2xl).", - "--sf-corner-scoop-at": "Corner the .sf-corner-scoop mask cuts, as a radial-gradient origin (e.g. '100% 0' = top-right). Default: 100% 0.", "--sf-scroll-timeline-range-exit-start": "Scroll-timeline range at which a scroll-out exit animation begins. Default: cover 70%.", "--sf-scroll-timeline-range-exit-end": "Scroll-timeline range at which a scroll-out exit animation finishes. Default: exit 100%.", "--sf-color-selection-bg--alt": "Alt selection background — the inverse-scheme highlight fill for surfaces that deliberately flip colour scheme (e.g. a dark hero in light mode).", @@ -1163,11 +1161,6 @@ "sf-exit--fade-left": "Scroll-out exit animation: fades out while sliding to the left (sf-slide-out-left).", "sf-exit--fade-right": "Scroll-out exit animation: fades out while sliding to the right (sf-slide-out-right).", "sf-exit--scale-down": "Scroll-out exit animation: fades out while shrinking (sf-scale-down).", - "sf-corner-scoop": "Concave \"scooped\" corner cut with a radial-gradient mask; defaults to the top-right corner (--sf-corner-scoop-at). Add a placement modifier to move it.", - "sf-corner-scoop--top-left": "Places the concave corner scoop at the top-left corner.", - "sf-corner-scoop--top-right": "Places the concave corner scoop at the top-right corner.", - "sf-corner-scoop--bottom-left": "Places the concave corner scoop at the bottom-left corner.", - "sf-corner-scoop--bottom-right": "Places the concave corner scoop at the bottom-right corner.", "sf-drop-shadow-xs": "Extra-small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-xs).", "sf-drop-shadow-s": "Small filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-s).", "sf-drop-shadow-m": "Medium filter drop-shadow — follows the element's alpha shape (--sf-drop-shadow-m).", diff --git a/docs/token-index.json b/docs/token-index.json index 3239988b..360cae07 100644 --- a/docs/token-index.json +++ b/docs/token-index.json @@ -8,15 +8,15 @@ "optional/tokens.components.css" ], "counts": { - "tokens": 756, + "tokens": 754, "by_tier": { - "PUBLIC": 695, + "PUBLIC": 693, "PUBLIC-ADVANCED": 60, "INTERNAL": 1 }, "by_role": { - "knob": 266, - "consumption": 490 + "knob": 265, + "consumption": 489 } } }, @@ -2981,22 +2981,6 @@ ], "value": "0.6" }, - "--sf-corner-scoop-at": { - "tier": "PUBLIC", - "role": "knob", - "files": [ - "core/tokens.macros.css" - ], - "value": "100% 0" - }, - "--sf-corner-scoop-size": { - "tier": "PUBLIC", - "role": "consumption", - "files": [ - "core/tokens.macros.css" - ], - "value": "var(--sf-radius-2xl)" - }, "--sf-cover-min-height": { "tier": "PUBLIC", "role": "knob", diff --git a/docs/token-index.md b/docs/token-index.md index 1198278d..d00e8582 100644 --- a/docs/token-index.md +++ b/docs/token-index.md @@ -8,11 +8,11 @@ A cross-reference of every `--sf-*` custom property by **source file** and for the flat name list see [registry.json](registry.json); for the tier contract and naming rules see [architecture.md](architecture.md). -**756 tokens** (deduplicated by name across the 4 token source files). +**754 tokens** (deduplicated by name across the 4 token source files). | Tier | Count | Meaning | |---|---|---| -| PUBLIC | 695 | Everyday knobs. SemVer-stable. | +| PUBLIC | 693 | Everyday knobs. SemVer-stable. | | PUBLIC-ADVANCED | 60 | Same SemVer guarantee; niche/powerful. | | INTERNAL | 1 | Implementation detail; may change without a major bump. | @@ -22,8 +22,8 @@ declared value (a value that references `var(--sf-…)` is a derived output): | Role | Count | Meaning | |---|---|---| -| knob | 266 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). | -| consumption | 490 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | +| knob | 265 | Input you **set** to configure the system (a literal primitive: length, number, colour literal, keyword, font stack, easing curve …). | +| consumption | 489 | Ready-to-use output you **read**; derived from other tokens via `var(--sf-…)` (incl. `light-dark()`/`oklch(from …)`/`color-mix()`). | ## INTERNAL tokens @@ -466,8 +466,6 @@ declared value (a value that references `var(--sf-…)` is a derived output): | `--sf-content-width` | PUBLIC | consumption | Layout | `var(--sf-container-default)` | | `--sf-contrast-bias` | PUBLIC-ADVANCED | knob | Core | `0` | | `--sf-contrast-threshold` | PUBLIC-ADVANCED | knob | Core | `0.6` | -| `--sf-corner-scoop-at` | PUBLIC | knob | Macros | `100% 0` | -| `--sf-corner-scoop-size` | PUBLIC | consumption | Macros | `var(--sf-radius-2xl)` | | `--sf-cover-min-height` | PUBLIC | knob | Layout | `100dvh` | | `--sf-cover-padding` | PUBLIC | consumption | Layout | `var(--sf-section-pad)` | | `--sf-current-font-weight` | PUBLIC | consumption | Core | `var(--sf-font-weight-bold)` | diff --git a/docs/tokens.md b/docs/tokens.md index c2c3ac7b..938d4f73 100644 --- a/docs/tokens.md +++ b/docs/tokens.md @@ -3,7 +3,7 @@ > **Generated** from source by `scripts/gen-token-reference.js` — > run `npm run docs:tokens` to refresh. Do not edit by hand. -**756 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. +**754 tokens.** Every `--sf-*` custom property and its default value, grouped by source file. If a token is defined in multiple files, it is listed once per section — so this count can be higher than `docs/registry.json` (which deduplicates by name). See [architecture.md](architecture.md) for the PUBLIC / PUBLIC-ADVANCED / INTERNAL @@ -703,14 +703,12 @@ rebrand workflow. ## Macro tokens (`core/tokens.macros.css`) -34 tokens. +32 tokens. | Token | Default | |---|---| | `--sf-aspect` | `16 / 9` | | `--sf-content-intrinsic-size` | `500px` | -| `--sf-corner-scoop-at` | `100% 0` | -| `--sf-corner-scoop-size` | `var(--sf-radius-2xl)` | | `--sf-flow-space` | `var(--sf-content-gap)` | | `--sf-line-clamp` | `3` | | `--sf-overlap-pull` | `var(--sf-space-xl)` | diff --git a/reports/full-api-audit/results/tokens-report.json b/reports/full-api-audit/results/tokens-report.json index 7fed84ca..6762463e 100644 --- a/reports/full-api-audit/results/tokens-report.json +++ b/reports/full-api-audit/results/tokens-report.json @@ -1,7 +1,7 @@ { "summary": { - "totalTokens": 756, - "rendered": 756, + "totalTokens": 754, + "rendered": 754, "consoleErrors": 0, "requestFailures": 0, "empties": 48, @@ -4914,32 +4914,6 @@ "darkComputed": "0.6", "changedInDark": false }, - { - "name": "--sf-corner-scoop-at", - "tier": "PUBLIC", - "role": "knob", - "category": "Macro tokens", - "declared": "100% 0", - "aliasOf": null, - "issues": [], - "computed": "100% 0", - "shown": "100% 0", - "darkComputed": "100% 0", - "changedInDark": false - }, - { - "name": "--sf-corner-scoop-size", - "tier": "PUBLIC", - "role": "consumption", - "category": "Macro tokens", - "declared": "var(--sf-radius-2xl)", - "aliasOf": "--sf-radius-2xl", - "issues": [], - "computed": "24px", - "shown": "24px", - "darkComputed": "24px", - "changedInDark": false - }, { "name": "--sf-cover-min-height", "tier": "PUBLIC", diff --git a/tests/macros.spec.js b/tests/macros.spec.js index 1320f861..17512d16 100644 --- a/tests/macros.spec.js +++ b/tests/macros.spec.js @@ -436,37 +436,6 @@ test.describe('macro: .sf-exit--fade', () => { }); }); -test.describe('macro: .sf-corner-scoop', () => { - test('sets a radial-gradient mask', async ({ page }) => { - await setup(page, `
      `); - const mask = await page.locator('#t').evaluate(el => getComputedStyle(el).maskImage); - expect(mask).toContain('radial-gradient'); - }); - - for (const [cls, at] of [ - ['sf-corner-scoop--top-left', '0 0'], - ['sf-corner-scoop--top-right', '100% 0'], - ['sf-corner-scoop--bottom-left', '0 100%'], - ['sf-corner-scoop--bottom-right', '100% 100%'], - ]) { - test(`.${cls} points the cut at ${at}`, async ({ page }) => { - await setup(page, `
      `); - const value = await page.locator('#t').evaluate(el => - getComputedStyle(el).getPropertyValue('--sf-corner-scoop-at').trim() - ); - expect(value).toBe(at); - }); - } - - test('--sf-corner-scoop-size override changes the resolved cut radius', async ({ page }) => { - await setup(page, `
      `); - const size = await page.locator('#t').evaluate(el => - getComputedStyle(el).getPropertyValue('--sf-corner-scoop-size').trim() - ); - expect(size).toBe('40px'); - }); -}); - test.describe('macro: .sf-overlap / .sf-overlap-host', () => { test('pulls the element up over the previous sibling by --sf-overlap-pull', async ({ page }) => { await setup(page, ` diff --git a/tests/parse-lib.test.js b/tests/parse-lib.test.js index 7b84ed9a..8212fccd 100644 --- a/tests/parse-lib.test.js +++ b/tests/parse-lib.test.js @@ -120,16 +120,19 @@ describe('readFile vs requireFile — missing-file behavior', () => { }); describe('collectComments / describe — directive comments never become descriptions', () => { - // Reproduces the .sf-corner-scoop--* leak: a stylelint-disable comment sits - // right above a vendor-prefixed declaration inside the base rule, with no - // comment of their own governing the variant selectors that follow. + // Synthetic reproduction of a historical directive-comment leak: a + // stylelint-disable comment sits right above a vendor-prefixed declaration + // inside the base rule, with no comment of their own governing the variant + // selectors that follow — those variants must fall back to the base rule's + // governing note, never inherit the stylelint-disable directive as a + // description. const css = ` - /* Concave corner — a corner that curves away from the box. */ - .sf-corner-scoop { + /* Masked shape — an element clipped by a radial-gradient mask. */ + .sf-mask-cut { /* stylelint-disable-next-line property-no-vendor-prefix -- required for Safari < 18 */ -webkit-mask-image: radial-gradient(circle, transparent 1rem, black 1rem); } - .sf-corner-scoop--top-left { --sf-corner-scoop-at: 0 0; } + .sf-mask-cut--top-left { --sf-mask-cut-at: 0 0; } `; test('a stylelint-disable comment is classified as a directive, not a note', () => { @@ -141,10 +144,10 @@ describe('collectComments / describe — directive comments never become descrip test('a variant selector with no comment of its own falls back to the governing note, not the directive', () => { const comments = collectComments(css); - const idx = css.indexOf('.sf-corner-scoop--top-left'); + const idx = css.indexOf('.sf-mask-cut--top-left'); const { description } = describeElement(comments, idx); assert.ok(!description.includes('stylelint-disable')); - assert.match(description, /concave corner/i); + assert.match(description, /masked shape/i); }); }); diff --git a/tests/token-api.snapshot.json b/tests/token-api.snapshot.json index bef23631..64fd35fd 100644 --- a/tests/token-api.snapshot.json +++ b/tests/token-api.snapshot.json @@ -369,8 +369,6 @@ "--sf-content-width", "--sf-contrast-bias", "--sf-contrast-threshold", - "--sf-corner-scoop-at", - "--sf-corner-scoop-size", "--sf-cover-min-height", "--sf-cover-padding", "--sf-current-font-weight", diff --git a/token-registry.json b/token-registry.json index 9aacaf4f..2899b694 100644 --- a/token-registry.json +++ b/token-registry.json @@ -2883,11 +2883,13 @@ }, { "id": 710, - "name": "--sf-corner-scoop-at" + "name": "--sf-corner-scoop-at", + "removed": true }, { "id": 711, - "name": "--sf-corner-scoop-size" + "name": "--sf-corner-scoop-size", + "removed": true }, { "id": 712, From 47c52b0815555f012e322bea41ded8ee1e026886 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 15 Jul 2026 19:08:28 +0000 Subject: [PATCH 5/5] docs(migration): add .sf-corner-scoop removal migration entry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The corner-scoop removal is a breaking change (refactor(macros)!), so the CI "Check migration docs for breaking changes" gate requires a docs/migration.md entry. Add one under 0.7.8 → 0.8.0 documenting the removal and the inline mask-image replacement. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y --- docs/migration.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/migration.md b/docs/migration.md index 0888e764..9594d29d 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -187,6 +187,33 @@ families read distinctly: `sf-bento--row-compact` and `sf-bento--tall` → `sf-bento--row-tall` on any `.sf-bento` container element. +### `.sf-corner-scoop` removed (breaking) + +The `.sf-corner-scoop` macro — a concave "notch" cut into one corner via a +`mask-image` radial gradient — and its four placement modifiers +(`--top-left` / `--top-right` / `--bottom-left` / `--bottom-right`) plus the +`--sf-corner-scoop-size` / `--sf-corner-scoop-at` knobs have been removed. +It was judged too niche for the public API relative to its cost: the single +absolute `--sf-corner-scoop-size` needed per-element tuning to read well +across control-sized and hero-sized boxes (no size tier), and the mask clipped +`box-shadow` / `border` at the cut and could not compose with the other +mask-based macros (`.sf-overflow-fade`, `.sf-scroll-shadow`) on the same +element. + +**What changed for you:** elements that carried `.sf-corner-scoop*` now render +with square (un-masked) corners. To keep the concave corner, apply the mask +directly on the element — the same declaration the macro used to emit: + +```html +
      + Panel with a top-right corner that curves away +
      +``` + +Change the `at ` (e.g. `0 0` = top-left, `100% 100%` = bottom-right) +to move the cut, and the two radii to resize it. + ## SLASHED 0.7.6 → 0.7.7 ### `.sf-btn` axes reworked (breaking)