From 627a00cccb170e1f8cc50651162fd6b7746b45c4 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Jul 2026 09:54:59 +0000 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20sync=20landing/README/demos=20with?= =?UTF-8?q?=20latest=20main=20(720=20=E2=86=92=20729=20tokens)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rebased fresh off main after #552 merged. Later PRs (#554–#559) grew the token set to 729 (new --sf-fluid-width and --sf-surface-bg-* knobs from #557) and renamed state classes to .sf-is-* (already reflected in the merged docs). Update the remaining stale counts: - README + landing: 720 → 729 design tokens. - architecture.md file-map: list the full active utility set (heading/text-size/hover/list-reset/marker/selection/sticky). - demos/generate.mjs: teach it the eight new --sf-surface-bg-* knobs (seven curated background overrides + skip the animation shorthand), then regenerate: 324 bundled classes / 729 tokens (was 320 / 720). Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq --- README.md | 4 +-- demos/full-api-demo-with-overrides.html | 46 +++++++++++++++++-------- demos/full-api-demo.html | 46 +++++++++++++++++-------- demos/generate.mjs | 9 +++++ demos/ultimate-override.css | 17 +++++++-- docs/architecture.md | 2 +- index.html | 6 ++-- 7 files changed, 91 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index 43094368..1ed5a79c 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@

A cascade-layer CSS framework you never compile.
- 720 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript. + 729 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.

@@ -67,7 +67,7 @@ Every letter of SLASHED is a design commitment, and each one is checkable agains ## What's inside -- **720 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json). +- **729 design tokens** (`--sf-*`) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable [API index](docs/api-index.json). - **Layout primitives** — `.sf-container`, `.sf-stack`, `.sf-grid`, `.sf-cluster`, `.sf-sidebar`, `.sf-switcher`, `.sf-cover`, `.sf-center`, `.sf-frame`, `.sf-reel`, `.sf-bento`, and more ([docs/layout.md](docs/layout.md)). - **Macros** — recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, `.sf-aspect`, `.sf-scroll-shadow`, `.sf-surface` ([docs/macros.md](docs/macros.md)). - **State classes** — `.sf-is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)). diff --git a/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html index aa53e59e..4cca298f 100644 --- a/demos/full-api-demo-with-overrides.html +++ b/demos/full-api-demo-with-overrides.html @@ -22,7 +22,7 @@ .tile__cap { font: var(--sf-text-xs)/1.4 var(--sf-font-mono); padding: var(--sf-space-2xs) var(--sf-space-xs); background: var(--sf-color-inset); border-block-end: 1px solid var(--sf-color-border); color: var(--sf-color-text--secondary); } .tile__warn { color: var(--sf-color-warning); } - /* contain traps position:fixed/absolute-fill classes (sf-is-fullscreen, + /* contain traps position:fixed/absolute-fill classes (fullscreen-style helpers, sf-overlay, sf-imposter--fixed) inside their own tile instead of the page. */ .tile__stage { padding: var(--sf-space-m); position: relative; overflow: hidden; contain: layout paint; min-block-size: 4rem; } @@ -122,7 +122,7 @@

SLASHED Full API Demo

-

v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 configurable)

+

v0.7.0 · optimal-components bundle from jsDelivr CDN · 324 classes · 729 tokens (238 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.
@@ -169,7 +169,7 @@

Drop shadows (filter)

-

Layout primitives 143

+

Layout primitives 145

.sf-alternate
@@ -387,6 +387,10 @@

Layout primitives 143

.sf-equal--6
1
2
3
4
+
+
.sf-fluid-cq
+
1
2
3
4
+
.sf-frame
media
@@ -619,6 +623,10 @@

Layout primitives 143

.sf-imposter--fixed
base
imposter
+
+
.sf-overlay
+
1
2
3
4
+
.sf-pancake
header
main
footer
@@ -746,7 +754,7 @@

Layout primitives 143

-

Macro classes 57

+

Macro classes 58

.sf-aspect
@@ -960,6 +968,10 @@

Macro classes 57

.sf-surface--warning
surface--warning
+
+
.sf-surface-bg
+
surface-bg
+
.sf-tabular-nums
1234567890
0987654321
@@ -979,7 +991,7 @@

Macro classes 57

-

State classes 29

+

State classes 28

.sf-is-active
@@ -1057,10 +1069,6 @@

State classes 29

.sf-is-open
sf-is-open
-
-
.sf-overlay
-
sf-overlay
-
.sf-is-pending
sf-is-pending
@@ -1247,8 +1255,16 @@

Print 4

-

Theme 1

+

Theme 3

+
+
.sf-theme-dark
+
sf-theme-dark
+
+
+
.sf-theme-light
+
sf-theme-light
+
.sf-theme-transition
sf-theme-transition
@@ -1257,7 +1273,7 @@

Theme 1

-

Part 2 — Complete token reference 720 tokens · live values

+

Part 2 — Complete token reference 729 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 251

--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-ghost
…
--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-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-ghost
…
--sf-color-base-muted
…
--sf-color-base-source-dark
…
--sf-color-base-source-light
…
--sf-color-base-subtle
…
--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-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-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-ghost
…
--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-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-ghost
…
--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-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-ghost
…
--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-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-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-ghost
…
--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-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-white
…
@@ -1349,8 +1365,8 @@

field 5

--sf-field-block
…
--sf-field-padding-block
…
--sf-field-padding-inline
…
--sf-field-radius
…
--sf-field-required-marker…

flow 1

--sf-flow-space…
-

fluid 2

-
--sf-fluid-max-vw adv…
--sf-fluid-min-vw adv…
+

fluid 3

+
--sf-fluid-max-vw adv…
--sf-fluid-min-vw adv…
--sf-fluid-width…

frame 1

--sf-frame-ratio…

gap 1

@@ -1427,8 +1443,8 @@

state 1

--sf-state-pending-opacity…

sticky 3

--sf-sticky-offset…
--sf-sticky-offset-desktop
…
--sf-sticky-offset-mobile
…
-

surface 1

-
--sf-surface-color…
+

surface 9

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

switcher 2

--sf-switcher-gap
…
--sf-switcher-threshold
…

theme 1

diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html index ba0179ab..ec73973c 100644 --- a/demos/full-api-demo.html +++ b/demos/full-api-demo.html @@ -21,7 +21,7 @@ .tile__cap { font: var(--sf-text-xs)/1.4 var(--sf-font-mono); padding: var(--sf-space-2xs) var(--sf-space-xs); background: var(--sf-color-inset); border-block-end: 1px solid var(--sf-color-border); color: var(--sf-color-text--secondary); } .tile__warn { color: var(--sf-color-warning); } - /* contain traps position:fixed/absolute-fill classes (sf-is-fullscreen, + /* contain traps position:fixed/absolute-fill classes (fullscreen-style helpers, sf-overlay, sf-imposter--fixed) inside their own tile instead of the page. */ .tile__stage { padding: var(--sf-space-m); position: relative; overflow: hidden; contain: layout paint; min-block-size: 4rem; } @@ -121,7 +121,7 @@

SLASHED Full API Demo

-

v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 configurable)

+

v0.7.0 · optimal-components bundle from jsDelivr CDN · 324 classes · 729 tokens (238 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.
@@ -168,7 +168,7 @@

Drop shadows (filter)

-

Layout primitives 143

+

Layout primitives 145

.sf-alternate
@@ -386,6 +386,10 @@

Layout primitives 143

.sf-equal--6
1
2
3
4
+
+
.sf-fluid-cq
+
1
2
3
4
+
.sf-frame
media
@@ -618,6 +622,10 @@

Layout primitives 143

.sf-imposter--fixed
base
imposter
+
+
.sf-overlay
+
1
2
3
4
+
.sf-pancake
header
main
footer
@@ -745,7 +753,7 @@

Layout primitives 143

-

Macro classes 57

+

Macro classes 58

.sf-aspect
@@ -959,6 +967,10 @@

Macro classes 57

.sf-surface--warning
surface--warning
+
+
.sf-surface-bg
+
surface-bg
+
.sf-tabular-nums
1234567890
0987654321
@@ -978,7 +990,7 @@

Macro classes 57

-

State classes 29

+

State classes 28

.sf-is-active
@@ -1056,10 +1068,6 @@

State classes 29

.sf-is-open
sf-is-open
-
-
.sf-overlay
-
sf-overlay
-
.sf-is-pending
sf-is-pending
@@ -1246,8 +1254,16 @@

Print 4

-

Theme 1

+

Theme 3

+
+
.sf-theme-dark
+
sf-theme-dark
+
+
+
.sf-theme-light
+
sf-theme-light
+
.sf-theme-transition
sf-theme-transition
@@ -1256,7 +1272,7 @@

Theme 1

-

Part 2 — Complete token reference 720 tokens · live values

+

Part 2 — Complete token reference 729 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 251

--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-ghost
…
--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-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-ghost
…
--sf-color-base-muted
…
--sf-color-base-source-dark
…
--sf-color-base-source-light
…
--sf-color-base-subtle
…
--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-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-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-ghost
…
--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-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-ghost
…
--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-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-ghost
…
--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-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-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-ghost
…
--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-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-white
…
@@ -1348,8 +1364,8 @@

field 5

--sf-field-block
…
--sf-field-padding-block
…
--sf-field-padding-inline
…
--sf-field-radius
…
--sf-field-required-marker…

flow 1

--sf-flow-space…
-

fluid 2

-
--sf-fluid-max-vw adv…
--sf-fluid-min-vw adv…
+

fluid 3

+
--sf-fluid-max-vw adv…
--sf-fluid-min-vw adv…
--sf-fluid-width…

frame 1

--sf-frame-ratio…

gap 1

@@ -1426,8 +1442,8 @@

state 1

--sf-state-pending-opacity…

sticky 3

--sf-sticky-offset…
--sf-sticky-offset-desktop
…
--sf-sticky-offset-mobile
…
-

surface 1

-
--sf-surface-color…
+

surface 9

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

switcher 2

--sf-switcher-gap
…
--sf-switcher-threshold
…

theme 1

diff --git a/demos/generate.mjs b/demos/generate.mjs index cc9310c6..06f71057 100644 --- a/demos/generate.mjs +++ b/demos/generate.mjs @@ -53,6 +53,7 @@ const SKIP = { '--sf-is-dark': 'runtime theme flag — driven by color-scheme; a global flip would desync from the actual scheme', '--sf-shadow-none': 'sentinel "none" — the API guarantees no shadow; overriding would add one where none is promised', '--sf-text-shadow-none': 'sentinel "none" — the API guarantees no text-shadow', + '--sf-surface-bg-animation': 'background animation shorthand on .sf-surface — a global value would force motion on every surface and fight reduced-motion; no safe single-element visual perturbation', }; // Curated overrides for keyword / numeric / zero-valued knobs that no generic @@ -73,6 +74,14 @@ const CURATED = { '--sf-object-fit': 'contain', '--sf-bg-layer-position': '25% 75%', '--sf-object-position': '25% 75%', + // .sf-surface background knobs → real background-* properties on .sf-surface + '--sf-surface-bg-color': 'oklch(0.85 0.05 300)', + '--sf-surface-bg-image': 'linear-gradient(135deg, oklch(0.9 0.08 300 / 0.6), oklch(0.8 0.12 200 / 0.6))', + '--sf-surface-bg-overlay': 'linear-gradient(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.15))', + '--sf-surface-bg-size': 'contain', + '--sf-surface-bg-position': '25% 75%', + '--sf-surface-bg-repeat': 'repeat', + '--sf-surface-bg-attachment': 'fixed', '--sf-border-style': 'dashed', '--sf-divider-style': 'dashed', '--sf-equal-rule-style': 'dashed', diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css index 6c734d87..041aea18 100644 --- a/demos/ultimate-override.css +++ b/demos/ultimate-override.css @@ -5,8 +5,8 @@ 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: 206 of 229 knob tokens overridden. - 23 knobs are intentionally NOT perturbed (structural / + Coverage: 214 of 238 knob tokens overridden. + 24 knobs are intentionally NOT perturbed (structural / meta / sentinel) — listed with reasons at the bottom of this file. ============================================================================ */ @@ -128,6 +128,7 @@ /* fluid */ --sf-fluid-max-vw: 70; /* was: 90 */ --sf-fluid-min-vw: 30; /* was: 22.5 */ + --sf-fluid-width: 160vw; /* was: 100vw */ /* focus */ --sf-focus-ring-offset: 3.2px; /* was: 2px */ @@ -311,6 +312,15 @@ /* state */ --sf-state-pending-opacity: 0.4; /* was: 0.7 */ + /* surface */ + --sf-surface-bg-attachment: fixed; /* was: scroll */ + --sf-surface-bg-color: oklch(0.85 0.05 300); /* was: transparent */ + --sf-surface-bg-image: linear-gradient(135deg, oklch(0.9 0.08 300 / 0.6), oklch(0.8 0.12 200 / 0.6)); /* was: none */ + --sf-surface-bg-overlay: linear-gradient(oklch(0 0 0 / 0.15), oklch(0 0 0 / 0.15)); /* was: none */ + --sf-surface-bg-position: 25% 75%; /* was: center */ + --sf-surface-bg-repeat: repeat; /* was: no-repeat */ + --sf-surface-bg-size: contain; /* was: cover */ + /* switcher */ --sf-switcher-threshold: 48rem; /* was: 30rem */ @@ -342,7 +352,7 @@ } /* ---------------------------------------------------------------------------- - Intentionally NOT overridden (23): + Intentionally NOT overridden (24): --sf-bg-layer-z — stacking order — lowering it would push the background layer over content --sf-color-scheme — meta control — forcing a scheme would override the page light/dark behaviour rather than test a visual token --sf-is-active — runtime state flag — exercised via the .sf-is-active class; a global :root flip would force every element active @@ -355,6 +365,7 @@ --sf-safe-right — env() device inset — zero on desktop, no visual surface --sf-safe-top — env() device inset — zero on desktop, no visual surface --sf-shadow-none — sentinel "none" — the API guarantees no shadow; overriding would add one where none is promised + --sf-surface-bg-animation — background animation shorthand on .sf-surface — a global value would force motion on every surface and fight reduced-motion; no safe single-element visual perturbation --sf-text-shadow-none — sentinel "none" — the API guarantees no text-shadow --sf-z-base — stacking order — no single-element visual surface --sf-z-below — stacking order — no single-element visual surface; global change risks hiding content diff --git a/docs/architecture.md b/docs/architecture.md index 4c6a75b0..abd73dbd 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -51,7 +51,7 @@ optional/ theme-example.css slashed.themes (copy-and-customise rebrand example; not bundled) forms.css slashed.forms (classless native form-control styling) components.css slashed.components (btn + card — the only two components) - utilities.css slashed.utilities (curated subset active — heading/text-size/hover; rest commented) + utilities.css slashed.utilities (curated subset active — heading/text-size/hover/list-reset/marker/selection/sticky) legacy.css slashed.legacy ``` diff --git a/index.html b/index.html index d9971142..e7d66b41 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ SLASHED — a cascade-layer CSS framework - + @@ -417,7 +417,7 @@

The name is the manifesto. Seven promises, one stylesheet.

-

A cascade-layer CSS framework: 720 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.

+

A cascade-layer CSS framework: 729 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.

Open Configurator → View Demo @@ -431,7 +431,7 @@

-
720
design tokens
+
729
design tokens
15
cascade layers
0
lines of frontend JS
0
build steps
From aa103bc155a709857b0dfae0f0b859746ee42bad Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Jul 2026 10:04:39 +0000 Subject: [PATCH 2/2] docs: use exact utility block names in architecture file-map (review) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CodeRabbit flagged docs/architecture.md:54 — the terse 'marker/selection' labels did not match the block names in optional/utilities.css or the fuller prose in the same file. Spell them out as marker-colour / alternate-selection. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_016WH9Q15j1dZYxqTqMoomxq --- docs/architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/architecture.md b/docs/architecture.md index abd73dbd..edd8c3f4 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -51,7 +51,7 @@ optional/ theme-example.css slashed.themes (copy-and-customise rebrand example; not bundled) forms.css slashed.forms (classless native form-control styling) components.css slashed.components (btn + card — the only two components) - utilities.css slashed.utilities (curated subset active — heading/text-size/hover/list-reset/marker/selection/sticky) + utilities.css slashed.utilities (curated subset active — heading/text-size/hover/list-reset/marker-colour/alternate-selection/sticky) legacy.css slashed.legacy ```