From f76bfdf71036f6c072942d198c570844ca3010ee Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 12:19:15 +0000 Subject: [PATCH 01/10] docs: rewrite README and landing page as first-contact copy Correct stale facts on both surfaces: token count (685, was 840), cascade layer count (fifteen, was sixteen), hardcoded landing-page version, and the npm link (the 'slashed' npm package is an unrelated project). Label the staged component/utility layers honestly, point the WordPress plugin link at SLASHED-Plugins, and restructure both pages around a quick-start-first flow. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- README.md | 279 ++++++++++++++++++++++-------------------------------- index.md | 42 ++++---- 2 files changed, 134 insertions(+), 187 deletions(-) diff --git a/README.md b/README.md index 82916404..5af17c33 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,106 @@ -# SLASHED CSS Framework -logo +

+ SLASHED +

+ +

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

+ +

+ version + CI + license + optimal bundle + runtime deps + CDN +

+ +

+ Website · + Configurator · + Documentation · + Changelog +

-**S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic +--- + +SLASHED — **S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet: -A cascade-layer CSS framework. No build step. No Node. No runtime dependencies. +```html + +``` -[![version](https://img.shields.io/github/v/tag/codeslash-dev/SLASHED?sort=semver&label=version&color=blueviolet&logo=css3)](https://github.com/codeslash-dev/SLASHED/tags) -[![CI](https://img.shields.io/github/actions/workflow/status/codeslash-dev/SLASHED/ci.yml?branch=main&label=CI&logo=github)](https://github.com/codeslash-dev/SLASHED/actions/workflows/ci.yml) -[![license](https://img.shields.io/github/license/codeslash-dev/SLASHED)](LICENSE) -[![optimal bundle](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/codeslash-dev/SLASHED/dist/badge-optimal.json)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css) -[![runtime deps](https://img.shields.io/badge/runtime_deps-zero-brightgreen)](https://github.com/codeslash-dev/SLASHED/blob/main/package.json) -[![CDN](https://img.shields.io/badge/CDN-jsDelivr-e84d3d?logo=jsdelivr&logoColor=white)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) +Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile: ---- +```css +:root { + --sf-color-primary-source-light: #3b5bdb; + --sf-color-secondary-source-light: #5c677d; + --sf-color-tertiary-source-light: #0c8599; + --sf-color-action-source-light: #0ca678; + --sf-color-neutral-source-light: #495057; + --sf-color-base-source-light: #f8f9fa; +} +``` + +Each color takes an optional `-source-dark` counterpart for per-mode control, and the derived status colors (`success` / `warning` / `danger` / `info`) can be overridden individually — up to 20 color knobs in total. Or use the `light-dark()` shorthand: + +```css +:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } +``` + +To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links. + +## What's inside -## Quick start +- **685 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** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)). +- **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)). +- **Classless form styling**, motion, accessibility, and print modules. -Use a pre-built bundle (see [Releases](https://github.com/codeslash-dev/SLASHED/releases)): +SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**, and the component classes (`.sf-btn`, `.sf-card`, …) are staged in source — commented out until they land in v0.8. What you get today is the foundation, honestly labelled. + +## Dark mode + +Pure CSS — no script, no flash: ```html - - + + +
+``` - - +## Cascade layers - - +Every rule lives in one of fifteen named `@layer`s with a fixed order, declared in [`core/layers.css`](core/layers.css): - - +```text +slashed.tokens → reset → base → forms → layout → components → macros → +utilities → states → themes → motion → accessibility → print → legacy → +overrides ``` -À la carte is also supported. When wiring up individual files, `core/layers.css` -must load **first**. `optional/legacy.css` is not bundled by default — add it -explicitly if you need back-compat shims and load it **last**: +Later layers win, regardless of selector specificity. `slashed.overrides` is reserved for you and sits last — your customisations always beat framework defaults, no `!important` required. + +## Bundles + +Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLASHED/releases) and on the [CDN](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/), each as readable, minified (+ source map), and layer-flattened `.flat` variants: + +| Bundle | Contents | +| --- | --- | +| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** | +| `slashed.optimal-components.css` | optimal + the staged component layer *(inert until v0.8)* | +| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* | +| `slashed.full.css` | optimal + both staged layers | + +
+À la carte loading (individual source files) + +`core/layers.css` must load **first**; `optional/legacy.css` is not bundled by default — add it explicitly if you need back-compat shims and load it **last**: ```html @@ -59,142 +125,22 @@ explicitly if you need back-compat shims and load it **last**: ``` -`optional/components.css` and `optional/tokens.components.css` are incomplete: -their `@layer` declarations are real, but every class and component token is -commented out, so no CSS is emitted. `optional/utilities.css` is an empty stub — -SLASHED is BEM-first and ships no utility classes in 0.x. - -## Cascade layer order - -```text -slashed.tokens → reset → base → forms → layout → components → macros → -utilities → states → themes → motion → accessibility → print → legacy → -overrides -``` - -Declared in `core/layers.css`. Later layers win. `slashed.overrides` is reserved -for your own overrides and sits last. `slashed.legacy` sits just before it; its -rules are gated by `@supports not (...)` and are inert on modern engines. -`slashed.forms` holds the opt-in classless form styling from `optional/forms.css`. -`slashed.macros` holds recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, -`.sf-aspect`, `.sf-scroll-shadow` (see [`docs/macros.md`](docs/macros.md)). - -## Scope of the base layer - -The `base` layer is a minimal foundation, **not** a classless UI kit. SLASHED is -BEM-first: the token API is the product, and consumers build components on top. - -- **Global base** — flow and inline text: headings, `p`, `a`, `code`, `pre`, - `mark`, `hr`, `sub`/`sup`, `abbr`, `::selection`. -- **Rich blocks** (`table`, `blockquote`, `figure`, `dl`) — styled **only inside - `.sf-prose`**, not globally. -- **Interactive widgets** (`dialog`, `details`, `progress`, `meter`) — consumer - BEM / future `components` territory; `core` carries reset-level normalization - only. -- **Native form controls** — opt-in via `optional/forms.css`. - -Any module may have its own token file (e.g. `tokens.print.css`), loaded with its -parent module. All token files share the `slashed.tokens` layer. - -## Bundles - -| Bundle | Contents | -| --- | --- | -| `slashed.optimal.css` | all `core/` + `forms` | -| `slashed.optimal-components.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* | -| `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* | -| `slashed.full.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* + `utilities` *(empty)* | - -`optional/legacy.css` is **not bundled by default** — add it explicitly when you -need back-compat shims. Every rule lives in an `@layer`, so concatenation order -never affects the cascade. Each bundle is emitted readable and minified with a -source map: `badges/slashed..css`, `badges/slashed..min.css`, -`badges/slashed..min.css.map`, plus a layer-flattened `.flat` variant. -`npm run build` prints raw / gzip / brotli sizes; -`tests/bundle-size.spec.js` guards against bloat. - -## Customising tokens - -Override the source tokens in your own stylesheet — any valid CSS color works. The -minimum rebrand is the 6 brand `-source-light` tokens; optionally add `-source-dark` -counterparts for per-mode control. The 4 status colours -(`success`/`warning`/`danger`/`info`) auto-derive but are overridable -too, for up to 20 color tokens total (10 source-light + 10 source-dark). -```css -:root { - --sf-color-primary-source-light: #3b5bdb; - --sf-color-secondary-source-light: #5c677d; - --sf-color-tertiary-source-light: #0c8599; - --sf-color-action-source-light: #0ca678; - --sf-color-neutral-source-light: #495057; - --sf-color-base-source-light: #f8f9fa; - - /* optional dark counterparts for per-mode control */ - --sf-color-primary-source-dark: #748ffc; - --sf-color-action-source-dark: #38d9a9; - --sf-color-neutral-source-dark: #adb5bd; - --sf-color-base-source-dark: #1a1b1e; -} -``` - -Or shorthand with `light-dark()`: - -```css -:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } -``` - -## Fluid engine - -The fluid type, display, and space scales are **generated at runtime** from 12 -input scalars — viewport range, modular ratios (a separate ratio for the min -and max viewport), and base sizes. Change one ratio and the whole system -regenerates — no build: - -```css -:root { - --sf-text-ratio-max: 1.414; /* steeper headline hierarchy on desktop */ - --sf-fluid-max-vw: 110; /* keep growing until very wide screens */ -} -``` - -For a one-off fluid value, write a `clamp()` that reads the engine's viewport -range so it recalibrates with the scale. See -[docs/theming.md](docs/theming.md#fluid-engine) and the -all-dials-in-one-file reference -[`optional/config-example.css`](optional/config-example.css). - -## Dark mode - -```html - - -
-``` +
## Browser support -**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). Set by -colour-system, fluid-engine, and scroll-driven animation features that arrived -in 2024 with no graceful fallback — below the floor, derived colours collapse -to `initial`, the generative scales stop computing, and scroll-driven animations -are unavailable. +**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback: | Feature | Used for | Chrome | Safari | Firefox | |---|---|---|---|---| -| `light-dark()` | every resolved colour token | 123 | 17.5 | 120 | -| `@property` with `inherits: true` | animatable brand/status colours, `initial` reset | 85 | 16.4 | 128 | -| `oklch(from …)` relative colour | hover/tint/shade/dark derivation | 119 | 16.4 | 128 | -| `pow()` math function | generative fluid type/space scales (ratio + viewport) | 125 | 15.4 | 118 | +| `light-dark()` | every resolved color token | 123 | 17.5 | 120 | +| `@property` with `inherits: true` | animatable brand/status colors, `initial` reset | 85 | 16.4 | 128 | +| `oklch(from …)` relative color | hover/tint/shade/dark derivation | 119 | 16.4 | 128 | +| `pow()` math function | generative fluid type/space scales | 125 | 15.4 | 118 | | `animation-timeline: view()` | scroll-driven animations | 115 | 18.0 | 114 | | `@starting-style` | dialog / modal entry animations | 117 | 17.5 | 129 | -The effective floor is the maximum per engine. Cascade layers (`@layer`) are -foundational — below cascade-layer support (~2022) the architecture collapses. - -`optional/legacy.css` smooths a few property-level gaps within the -cascade-layer window (Safari 15.0–15.3 `dvh`/`:focus-visible`, Safari -`scrollbar-gutter`), gated by `@supports not (...)`. It does **not** lower the -colour floor. If you must support older engines, SLASHED is not the right tool. +`optional/legacy.css` smooths a few property-level gaps within that window but does **not** lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly. ## Documentation @@ -203,32 +149,31 @@ colour floor. If you must support older engines, SLASHED is not the right tool. | [Architecture](docs/architecture.md) | layers, file structure, class taxonomy, bundles, token contract, performance | | [Theming](docs/theming.md) | rebrand in 6 tokens, dark mode, multi-brand, contrast | | [Layout primitives](docs/layout.md) | every `.sf-*` layout class + tokens | -| [Macros / recipes](docs/macros.md) | every `.sf-*` macro-class + tokens | -| [Components](docs/components.md) | taken component names + roadmap | +| [Macros / recipes](docs/macros.md) | every `.sf-*` macro class + tokens | +| [Components](docs/components.md) | reserved component names + roadmap | | [State classes](docs/states.md) | every `.is-*` + ARIA mapping + overlap semantics | -| [Motion](docs/motion.md) | animation classes, tokens, reduced-motion | +| [Motion](docs/motion.md) | animation classes, tokens, reduced motion | | [Class reference](docs/classes.md) | every shipped class (generated) | | [Token reference](docs/tokens.md) | all `--sf-*` tokens + defaults (generated) | +| [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development | | [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks | -| [Contributing](CONTRIBUTING.md) | setup, conventions, tests | -The WordPress plugin (Bricks Builder + Gutenberg) lives in its own repository: -[slashed-for-wp](https://github.com/codeslash-dev/slashed-for-wp). +## WordPress + +The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins). ## Development ```sh -npm run build # build all badges/ bundles +npm run build # build all badges/ bundles + docs npm run watch # rebuild on change -npm run docs:tokens # regenerate docs/tokens.md from source npm run lint:css # stylelint all CSS -npm run lint:css:fix # auto-fix where possible -npm test # token regression suite (Playwright, light + dark) -npm run test:install # one-time: install the Chromium, Firefox & WebKit test browsers -npm run release # bump version (runs version-sync + build), tag & push +npm test # full suite (unit + Playwright, light + dark) +npm run test:install # one-time: install the test browsers ``` -Commits follow [Conventional Commits](https://www.conventionalcommits.org/). -`CHANGELOG.md` is maintained by hand following -[Keep a Changelog](https://keepachangelog.com/); move `[Unreleased]` entries under -a version heading before releasing (see [CONTRIBUTING.md](CONTRIBUTING.md)). +Commits follow [Conventional Commits](https://www.conventionalcommits.org/); see [CONTRIBUTING.md](CONTRIBUTING.md) for setup and conventions. + +## License + +[MIT](LICENSE) © CODE/ diff --git a/index.md b/index.md index 37572f26..4e675e5a 100644 --- a/index.md +++ b/index.md @@ -121,9 +121,9 @@ title: Home
- v0.6.19 — see what's new → -

CSS that gets out
of your way

-

A cascade-layer framework with 840 design tokens, automatic dark mode, fluid type & spacing — and zero JavaScript, zero build step.

+ Latest release — see what's new → +

The framework is
just a stylesheet

+

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

Open Configurator → View Demo @@ -136,32 +136,32 @@ title: Home
🎨

OKLCH Color Engine

-

840+ tokens derived from a handful of source colors. Full palette, dark mode, and semantic roles — all automatic.

+

Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette derive automatically in plain CSS.

📐

Fluid Type & Space

-

Type and spacing scales that flow smoothly from mobile to 4K using CSS clamp() — no breakpoints needed.

+

Modular scales computed in the browser from 12 dials using pow() and clamp() — smooth from phone to 4K, no breakpoints.

🌗

Automatic Dark Mode

-

Light and dark palettes are derived from a single source color. Section-level theming with [data-theme].

+

Follows the OS by default. Force it — or mix light and dark sections on one page — with data-theme. No script, no flash.

⚡

Zero Build Step

-

Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no bundler.

+

Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no Sass, no purge step.

🔩

@layer Architecture

-

Sixteen explicit cascade layers keep specificity predictable and your overrides always on top.

+

Fifteen named cascade layers in a fixed order. Your overrides sit in the top layer and always win — no !important, no specificity wars.

🛠️

Visual Configurator

-

Live-preview every token, export override CSS, or share a config URL — all from the browser with no install.

+

Tune every token with a live light/dark preview, export override CSS, or share a config link — all in the browser, nothing to install.

@@ -184,12 +184,14 @@ title: Home | Bundle | Includes | |--------|----------| -| `slashed.optimal.css` | Core + classless forms — **recommended** | -| `slashed.optimal-components.css` | Optimal + component stubs | -| `slashed.optimal-utilities.css` | Optimal + utility classes | -| `slashed.full.css` | Everything | +| `slashed.optimal.css` | Everything live today: core + classless forms — **recommended** | +| `slashed.optimal-components.css` | Optimal + the staged component layer *(inert until v0.8)* | +| `slashed.optimal-utilities.css` | Optimal + the staged utility layer *(inert in 0.x)* | +| `slashed.full.css` | Optimal + both staged layers | -[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) · [npm](https://www.npmjs.com/package/slashed) +SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property`, `pow()` — so the browser floor is **Chrome 125+, Safari 18+, Firefox 129+**. + +[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases)
@@ -210,10 +212,10 @@ title: Home

Reference

@@ -224,7 +226,7 @@ title: Home
  • LLM Guide AI-assisted development reference
  • API Index machine-readable catalogue
  • Comment Policy contributor conventions
    • -
  • Demo full component showcase
    • +
  • Demo live showcase
  • Full API Demo every class & token, live · dark mode
  • Full API Demo — overridden ultimate-override.css applied
  • Test Coverage visual regression suite
    • @@ -239,6 +241,6 @@ title: Home Contributing CI status GitHub - npm - MIT · © CodeSlash + WordPress plugin + MIT · © CODE/
    From 70adcd5f8605a6de412c18f9e9d32193132f2bae Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 13:30:17 +0000 Subject: [PATCH 02/10] docs: move proposed README/landing copy to copy-wip for review Restore the live README.md and index.md to their previous state and park the rewritten versions in copy-wip/ pending review. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- README.md | 279 ++++++++++++++++++++------------- copy-wip/github-pages-index.md | 246 +++++++++++++++++++++++++++++ copy-wip/github-readme.md | 179 +++++++++++++++++++++ index.md | 42 +++-- 4 files changed, 612 insertions(+), 134 deletions(-) create mode 100644 copy-wip/github-pages-index.md create mode 100644 copy-wip/github-readme.md diff --git a/README.md b/README.md index 5af17c33..82916404 100644 --- a/README.md +++ b/README.md @@ -1,106 +1,40 @@ -

    - SLASHED -

    - -

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

    - -

    - version - CI - license - optimal bundle - runtime deps - CDN -

    - -

    - Website · - Configurator · - Documentation · - Changelog -

    +# SLASHED CSS Framework +logo ---- - -SLASHED — **S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet: - -```html - -``` - -Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile: - -```css -:root { - --sf-color-primary-source-light: #3b5bdb; - --sf-color-secondary-source-light: #5c677d; - --sf-color-tertiary-source-light: #0c8599; - --sf-color-action-source-light: #0ca678; - --sf-color-neutral-source-light: #495057; - --sf-color-base-source-light: #f8f9fa; -} -``` - -Each color takes an optional `-source-dark` counterpart for per-mode control, and the derived status colors (`success` / `warning` / `danger` / `info`) can be overridden individually — up to 20 color knobs in total. Or use the `light-dark()` shorthand: - -```css -:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } -``` +**S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic -To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links. +A cascade-layer CSS framework. No build step. No Node. No runtime dependencies. -## What's inside +[![version](https://img.shields.io/github/v/tag/codeslash-dev/SLASHED?sort=semver&label=version&color=blueviolet&logo=css3)](https://github.com/codeslash-dev/SLASHED/tags) +[![CI](https://img.shields.io/github/actions/workflow/status/codeslash-dev/SLASHED/ci.yml?branch=main&label=CI&logo=github)](https://github.com/codeslash-dev/SLASHED/actions/workflows/ci.yml) +[![license](https://img.shields.io/github/license/codeslash-dev/SLASHED)](LICENSE) +[![optimal bundle](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/codeslash-dev/SLASHED/dist/badge-optimal.json)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css) +[![runtime deps](https://img.shields.io/badge/runtime_deps-zero-brightgreen)](https://github.com/codeslash-dev/SLASHED/blob/main/package.json) +[![CDN](https://img.shields.io/badge/CDN-jsDelivr-e84d3d?logo=jsdelivr&logoColor=white)](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) -- **685 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** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)). -- **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)). -- **Classless form styling**, motion, accessibility, and print modules. - -SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**, and the component classes (`.sf-btn`, `.sf-card`, …) are staged in source — commented out until they land in v0.8. What you get today is the foundation, honestly labelled. +--- -## Dark mode +## Quick start -Pure CSS — no script, no flash: +Use a pre-built bundle (see [Releases](https://github.com/codeslash-dev/SLASHED/releases)): ```html - - -
    -``` + + -## Cascade layers + + -Every rule lives in one of fifteen named `@layer`s with a fixed order, declared in [`core/layers.css`](core/layers.css): + + -```text -slashed.tokens → reset → base → forms → layout → components → macros → -utilities → states → themes → motion → accessibility → print → legacy → -overrides + + ``` -Later layers win, regardless of selector specificity. `slashed.overrides` is reserved for you and sits last — your customisations always beat framework defaults, no `!important` required. - -## Bundles - -Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLASHED/releases) and on the [CDN](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/), each as readable, minified (+ source map), and layer-flattened `.flat` variants: - -| Bundle | Contents | -| --- | --- | -| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** | -| `slashed.optimal-components.css` | optimal + the staged component layer *(inert until v0.8)* | -| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* | -| `slashed.full.css` | optimal + both staged layers | - -
    -À la carte loading (individual source files) - -`core/layers.css` must load **first**; `optional/legacy.css` is not bundled by default — add it explicitly if you need back-compat shims and load it **last**: +À la carte is also supported. When wiring up individual files, `core/layers.css` +must load **first**. `optional/legacy.css` is not bundled by default — add it +explicitly if you need back-compat shims and load it **last**: ```html @@ -125,22 +59,142 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA ``` -
    +`optional/components.css` and `optional/tokens.components.css` are incomplete: +their `@layer` declarations are real, but every class and component token is +commented out, so no CSS is emitted. `optional/utilities.css` is an empty stub — +SLASHED is BEM-first and ships no utility classes in 0.x. + +## Cascade layer order + +```text +slashed.tokens → reset → base → forms → layout → components → macros → +utilities → states → themes → motion → accessibility → print → legacy → +overrides +``` + +Declared in `core/layers.css`. Later layers win. `slashed.overrides` is reserved +for your own overrides and sits last. `slashed.legacy` sits just before it; its +rules are gated by `@supports not (...)` and are inert on modern engines. +`slashed.forms` holds the opt-in classless form styling from `optional/forms.css`. +`slashed.macros` holds recipes like `.sf-prose`, `.sf-flow`, `.sf-truncate`, +`.sf-aspect`, `.sf-scroll-shadow` (see [`docs/macros.md`](docs/macros.md)). + +## Scope of the base layer + +The `base` layer is a minimal foundation, **not** a classless UI kit. SLASHED is +BEM-first: the token API is the product, and consumers build components on top. + +- **Global base** — flow and inline text: headings, `p`, `a`, `code`, `pre`, + `mark`, `hr`, `sub`/`sup`, `abbr`, `::selection`. +- **Rich blocks** (`table`, `blockquote`, `figure`, `dl`) — styled **only inside + `.sf-prose`**, not globally. +- **Interactive widgets** (`dialog`, `details`, `progress`, `meter`) — consumer + BEM / future `components` territory; `core` carries reset-level normalization + only. +- **Native form controls** — opt-in via `optional/forms.css`. + +Any module may have its own token file (e.g. `tokens.print.css`), loaded with its +parent module. All token files share the `slashed.tokens` layer. + +## Bundles + +| Bundle | Contents | +| --- | --- | +| `slashed.optimal.css` | all `core/` + `forms` | +| `slashed.optimal-components.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* | +| `slashed.optimal-utilities.css` | optimal + `utilities` *(empty)* | +| `slashed.full.css` | optimal + `tokens.components` *(incomplete)* + `components` *(incomplete)* + `utilities` *(empty)* | + +`optional/legacy.css` is **not bundled by default** — add it explicitly when you +need back-compat shims. Every rule lives in an `@layer`, so concatenation order +never affects the cascade. Each bundle is emitted readable and minified with a +source map: `badges/slashed..css`, `badges/slashed..min.css`, +`badges/slashed..min.css.map`, plus a layer-flattened `.flat` variant. +`npm run build` prints raw / gzip / brotli sizes; +`tests/bundle-size.spec.js` guards against bloat. + +## Customising tokens + +Override the source tokens in your own stylesheet — any valid CSS color works. The +minimum rebrand is the 6 brand `-source-light` tokens; optionally add `-source-dark` +counterparts for per-mode control. The 4 status colours +(`success`/`warning`/`danger`/`info`) auto-derive but are overridable +too, for up to 20 color tokens total (10 source-light + 10 source-dark). +```css +:root { + --sf-color-primary-source-light: #3b5bdb; + --sf-color-secondary-source-light: #5c677d; + --sf-color-tertiary-source-light: #0c8599; + --sf-color-action-source-light: #0ca678; + --sf-color-neutral-source-light: #495057; + --sf-color-base-source-light: #f8f9fa; + + /* optional dark counterparts for per-mode control */ + --sf-color-primary-source-dark: #748ffc; + --sf-color-action-source-dark: #38d9a9; + --sf-color-neutral-source-dark: #adb5bd; + --sf-color-base-source-dark: #1a1b1e; +} +``` + +Or shorthand with `light-dark()`: + +```css +:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } +``` + +## Fluid engine + +The fluid type, display, and space scales are **generated at runtime** from 12 +input scalars — viewport range, modular ratios (a separate ratio for the min +and max viewport), and base sizes. Change one ratio and the whole system +regenerates — no build: + +```css +:root { + --sf-text-ratio-max: 1.414; /* steeper headline hierarchy on desktop */ + --sf-fluid-max-vw: 110; /* keep growing until very wide screens */ +} +``` + +For a one-off fluid value, write a `clamp()` that reads the engine's viewport +range so it recalibrates with the scale. See +[docs/theming.md](docs/theming.md#fluid-engine) and the +all-dials-in-one-file reference +[`optional/config-example.css`](optional/config-example.css). + +## Dark mode + +```html + + +
    +``` ## Browser support -**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback: +**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). Set by +colour-system, fluid-engine, and scroll-driven animation features that arrived +in 2024 with no graceful fallback — below the floor, derived colours collapse +to `initial`, the generative scales stop computing, and scroll-driven animations +are unavailable. | Feature | Used for | Chrome | Safari | Firefox | |---|---|---|---|---| -| `light-dark()` | every resolved color token | 123 | 17.5 | 120 | -| `@property` with `inherits: true` | animatable brand/status colors, `initial` reset | 85 | 16.4 | 128 | -| `oklch(from …)` relative color | hover/tint/shade/dark derivation | 119 | 16.4 | 128 | -| `pow()` math function | generative fluid type/space scales | 125 | 15.4 | 118 | +| `light-dark()` | every resolved colour token | 123 | 17.5 | 120 | +| `@property` with `inherits: true` | animatable brand/status colours, `initial` reset | 85 | 16.4 | 128 | +| `oklch(from …)` relative colour | hover/tint/shade/dark derivation | 119 | 16.4 | 128 | +| `pow()` math function | generative fluid type/space scales (ratio + viewport) | 125 | 15.4 | 118 | | `animation-timeline: view()` | scroll-driven animations | 115 | 18.0 | 114 | | `@starting-style` | dialog / modal entry animations | 117 | 17.5 | 129 | -`optional/legacy.css` smooths a few property-level gaps within that window but does **not** lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly. +The effective floor is the maximum per engine. Cascade layers (`@layer`) are +foundational — below cascade-layer support (~2022) the architecture collapses. + +`optional/legacy.css` smooths a few property-level gaps within the +cascade-layer window (Safari 15.0–15.3 `dvh`/`:focus-visible`, Safari +`scrollbar-gutter`), gated by `@supports not (...)`. It does **not** lower the +colour floor. If you must support older engines, SLASHED is not the right tool. ## Documentation @@ -149,31 +203,32 @@ Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLA | [Architecture](docs/architecture.md) | layers, file structure, class taxonomy, bundles, token contract, performance | | [Theming](docs/theming.md) | rebrand in 6 tokens, dark mode, multi-brand, contrast | | [Layout primitives](docs/layout.md) | every `.sf-*` layout class + tokens | -| [Macros / recipes](docs/macros.md) | every `.sf-*` macro class + tokens | -| [Components](docs/components.md) | reserved component names + roadmap | +| [Macros / recipes](docs/macros.md) | every `.sf-*` macro-class + tokens | +| [Components](docs/components.md) | taken component names + roadmap | | [State classes](docs/states.md) | every `.is-*` + ARIA mapping + overlap semantics | -| [Motion](docs/motion.md) | animation classes, tokens, reduced motion | +| [Motion](docs/motion.md) | animation classes, tokens, reduced-motion | | [Class reference](docs/classes.md) | every shipped class (generated) | | [Token reference](docs/tokens.md) | all `--sf-*` tokens + defaults (generated) | -| [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development | | [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks | +| [Contributing](CONTRIBUTING.md) | setup, conventions, tests | -## WordPress - -The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins). +The WordPress plugin (Bricks Builder + Gutenberg) lives in its own repository: +[slashed-for-wp](https://github.com/codeslash-dev/slashed-for-wp). ## Development ```sh -npm run build # build all badges/ bundles + docs +npm run build # build all badges/ bundles npm run watch # rebuild on change +npm run docs:tokens # regenerate docs/tokens.md from source npm run lint:css # stylelint all CSS -npm test # full suite (unit + Playwright, light + dark) -npm run test:install # one-time: install the test browsers +npm run lint:css:fix # auto-fix where possible +npm test # token regression suite (Playwright, light + dark) +npm run test:install # one-time: install the Chromium, Firefox & WebKit test browsers +npm run release # bump version (runs version-sync + build), tag & push ``` -Commits follow [Conventional Commits](https://www.conventionalcommits.org/); see [CONTRIBUTING.md](CONTRIBUTING.md) for setup and conventions. - -## License - -[MIT](LICENSE) © CODE/ +Commits follow [Conventional Commits](https://www.conventionalcommits.org/). +`CHANGELOG.md` is maintained by hand following +[Keep a Changelog](https://keepachangelog.com/); move `[Unreleased]` entries under +a version heading before releasing (see [CONTRIBUTING.md](CONTRIBUTING.md)). diff --git a/copy-wip/github-pages-index.md b/copy-wip/github-pages-index.md new file mode 100644 index 00000000..4e675e5a --- /dev/null +++ b/copy-wip/github-pages-index.md @@ -0,0 +1,246 @@ +--- +layout: default +title: Home +--- + + + +
    + Latest release — see what's new → +

    The framework is
    just a stylesheet

    +

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

    +
    + Open Configurator → + View Demo + Full API Demo + GitHub +
    +
    + +
    +
    +
    🎨
    +

    OKLCH Color Engine

    +

    Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette derive automatically in plain CSS.

    +
    +
    +
    📐
    +

    Fluid Type & Space

    +

    Modular scales computed in the browser from 12 dials using pow() and clamp() — smooth from phone to 4K, no breakpoints.

    +
    +
    +
    🌗
    +

    Automatic Dark Mode

    +

    Follows the OS by default. Force it — or mix light and dark sections on one page — with data-theme. No script, no flash.

    +
    +
    +
    ⚡
    +

    Zero Build Step

    +

    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no Sass, no purge step.

    +
    +
    +
    🔩
    +

    @layer Architecture

    +

    Fifteen named cascade layers in a fixed order. Your overrides sit in the top layer and always win — no !important, no specificity wars.

    +
    +
    +
    🛠️
    +

    Visual Configurator

    +

    Tune every token with a live light/dark preview, export override CSS, or share a config link — all in the browser, nothing to install.

    +
    +
    + +--- + +## Install + +
    +
    /* jsDelivr CDN — drop into your CSS */
+@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
    +
    + +
    +
    <!-- or a <link> tag -->
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
    +
    + +
    + +| Bundle | Includes | +|--------|----------| +| `slashed.optimal.css` | Everything live today: core + classless forms — **recommended** | +| `slashed.optimal-components.css` | Optimal + the staged component layer *(inert until v0.8)* | +| `slashed.optimal-utilities.css` | Optimal + the staged utility layer *(inert in 0.x)* | +| `slashed.full.css` | Optimal + both staged layers | + +SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property`, `pow()` — so the browser floor is **Chrome 125+, Safari 18+, Firefox 129+**. + +[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) + +
    + +--- + +## Documentation + +
    +
    +

    Guides

    + +
    +
    +

    Reference

    + +
    +
    +

    Developer

    + +
    +
    + +--- + +
    + Changelog + Contributing + CI status + GitHub + WordPress plugin + MIT · © CODE/ +
    diff --git a/copy-wip/github-readme.md b/copy-wip/github-readme.md new file mode 100644 index 00000000..5af17c33 --- /dev/null +++ b/copy-wip/github-readme.md @@ -0,0 +1,179 @@ +

    + SLASHED +

    + +

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

    + +

    + version + CI + license + optimal bundle + runtime deps + CDN +

    + +

    + Website · + Configurator · + Documentation · + Changelog +

    + +--- + +SLASHED — **S**tandalone · **L**ean · **A**gnostic · **S**tructured · **H**ybrid · **E**xplicit · **D**eterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet: + +```html + +``` + +Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile: + +```css +:root { + --sf-color-primary-source-light: #3b5bdb; + --sf-color-secondary-source-light: #5c677d; + --sf-color-tertiary-source-light: #0c8599; + --sf-color-action-source-light: #0ca678; + --sf-color-neutral-source-light: #495057; + --sf-color-base-source-light: #f8f9fa; +} +``` + +Each color takes an optional `-source-dark` counterpart for per-mode control, and the derived status colors (`success` / `warning` / `danger` / `info`) can be overridden individually — up to 20 color knobs in total. Or use the `light-dark()` shorthand: + +```css +:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } +``` + +To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links. + +## What's inside + +- **685 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** — `.is-*` classes mapped to ARIA semantics ([docs/states.md](docs/states.md)). +- **A fluid engine** — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build ([docs/theming.md](docs/theming.md#fluid-engine)). +- **Classless form styling**, motion, accessibility, and print modules. + +SLASHED is BEM-first: the token API is the product, and you build components on top. It ships **no utility classes in 0.x**, and the component classes (`.sf-btn`, `.sf-card`, …) are staged in source — commented out until they land in v0.8. What you get today is the foundation, honestly labelled. + +## Dark mode + +Pure CSS — no script, no flash: + +```html + + +
    +``` + +## Cascade layers + +Every rule lives in one of fifteen named `@layer`s with a fixed order, declared in [`core/layers.css`](core/layers.css): + +```text +slashed.tokens → reset → base → forms → layout → components → macros → +utilities → states → themes → motion → accessibility → print → legacy → +overrides +``` + +Later layers win, regardless of selector specificity. `slashed.overrides` is reserved for you and sits last — your customisations always beat framework defaults, no `!important` required. + +## Bundles + +Pre-built bundles ship with every [release](https://github.com/codeslash-dev/SLASHED/releases) and on the [CDN](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/), each as readable, minified (+ source map), and layer-flattened `.flat` variants: + +| Bundle | Contents | +| --- | --- | +| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** | +| `slashed.optimal-components.css` | optimal + the staged component layer *(inert until v0.8)* | +| `slashed.optimal-utilities.css` | optimal + the staged utility layer *(inert in 0.x)* | +| `slashed.full.css` | optimal + both staged layers | + +
    +À la carte loading (individual source files) + +`core/layers.css` must load **first**; `optional/legacy.css` is not bundled by default — add it explicitly if you need back-compat shims and load it **last**: + +```html + + + + + + + + + + + + + + + + + + + + +``` + +
    + +## Browser support + +**Floor: Chrome 125+, Safari 18.0+, Firefox 129+** (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback: + +| Feature | Used for | Chrome | Safari | Firefox | +|---|---|---|---|---| +| `light-dark()` | every resolved color token | 123 | 17.5 | 120 | +| `@property` with `inherits: true` | animatable brand/status colors, `initial` reset | 85 | 16.4 | 128 | +| `oklch(from …)` relative color | hover/tint/shade/dark derivation | 119 | 16.4 | 128 | +| `pow()` math function | generative fluid type/space scales | 125 | 15.4 | 118 | +| `animation-timeline: view()` | scroll-driven animations | 115 | 18.0 | 114 | +| `@starting-style` | dialog / modal entry animations | 117 | 17.5 | 129 | + +`optional/legacy.css` smooths a few property-level gaps within that window but does **not** lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly. + +## Documentation + +| Guide | What's inside | +| --- | --- | +| [Architecture](docs/architecture.md) | layers, file structure, class taxonomy, bundles, token contract, performance | +| [Theming](docs/theming.md) | rebrand in 6 tokens, dark mode, multi-brand, contrast | +| [Layout primitives](docs/layout.md) | every `.sf-*` layout class + tokens | +| [Macros / recipes](docs/macros.md) | every `.sf-*` macro class + tokens | +| [Components](docs/components.md) | reserved component names + roadmap | +| [State classes](docs/states.md) | every `.is-*` + ARIA mapping + overlap semantics | +| [Motion](docs/motion.md) | animation classes, tokens, reduced motion | +| [Class reference](docs/classes.md) | every shipped class (generated) | +| [Token reference](docs/tokens.md) | all `--sf-*` tokens + defaults (generated) | +| [LLM guide](docs/llm-guide.md) | compact API reference for AI-assisted development | +| [Migration](docs/migration.md) | upgrading SLASHED + migrating from other frameworks | + +## WordPress + +The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: [SLASHED-Plugins](https://github.com/codeslash-dev/SLASHED-Plugins). + +## Development + +```sh +npm run build # build all badges/ bundles + docs +npm run watch # rebuild on change +npm run lint:css # stylelint all CSS +npm test # full suite (unit + Playwright, light + dark) +npm run test:install # one-time: install the test browsers +``` + +Commits follow [Conventional Commits](https://www.conventionalcommits.org/); see [CONTRIBUTING.md](CONTRIBUTING.md) for setup and conventions. + +## License + +[MIT](LICENSE) © CODE/ diff --git a/index.md b/index.md index 4e675e5a..37572f26 100644 --- a/index.md +++ b/index.md @@ -121,9 +121,9 @@ title: Home
    - Latest release — see what's new → -

    The framework is
    just a stylesheet

    -

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

    + v0.6.19 — see what's new → +

    CSS that gets out
    of your way

    +

    A cascade-layer framework with 840 design tokens, automatic dark mode, fluid type & spacing — and zero JavaScript, zero build step.

    Open Configurator → View Demo @@ -136,32 +136,32 @@ title: Home
    🎨

    OKLCH Color Engine

    -

    Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette derive automatically in plain CSS.

    +

    840+ tokens derived from a handful of source colors. Full palette, dark mode, and semantic roles — all automatic.

    📐

    Fluid Type & Space

    -

    Modular scales computed in the browser from 12 dials using pow() and clamp() — smooth from phone to 4K, no breakpoints.

    +

    Type and spacing scales that flow smoothly from mobile to 4K using CSS clamp() — no breakpoints needed.

    🌗

    Automatic Dark Mode

    -

    Follows the OS by default. Force it — or mix light and dark sections on one page — with data-theme. No script, no flash.

    +

    Light and dark palettes are derived from a single source color. Section-level theming with [data-theme].

    ⚡

    Zero Build Step

    -

    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no Sass, no purge step.

    +

    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no bundler.

    🔩

    @layer Architecture

    -

    Fifteen named cascade layers in a fixed order. Your overrides sit in the top layer and always win — no !important, no specificity wars.

    +

    Sixteen explicit cascade layers keep specificity predictable and your overrides always on top.

    🛠️

    Visual Configurator

    -

    Tune every token with a live light/dark preview, export override CSS, or share a config link — all in the browser, nothing to install.

    +

    Live-preview every token, export override CSS, or share a config URL — all from the browser with no install.

    @@ -184,14 +184,12 @@ title: Home | Bundle | Includes | |--------|----------| -| `slashed.optimal.css` | Everything live today: core + classless forms — **recommended** | -| `slashed.optimal-components.css` | Optimal + the staged component layer *(inert until v0.8)* | -| `slashed.optimal-utilities.css` | Optimal + the staged utility layer *(inert in 0.x)* | -| `slashed.full.css` | Optimal + both staged layers | +| `slashed.optimal.css` | Core + classless forms — **recommended** | +| `slashed.optimal-components.css` | Optimal + component stubs | +| `slashed.optimal-utilities.css` | Optimal + utility classes | +| `slashed.full.css` | Everything | -SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property`, `pow()` — so the browser floor is **Chrome 125+, Safari 18+, Firefox 129+**. - -[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) +[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) · [npm](https://www.npmjs.com/package/slashed)
    @@ -212,10 +210,10 @@ SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property

    Reference

    @@ -226,7 +224,7 @@ SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property
  • LLM Guide AI-assisted development reference
  • API Index machine-readable catalogue
  • Comment Policy contributor conventions
    • -
  • Demo live showcase
    • +
  • Demo full component showcase
  • Full API Demo every class & token, live · dark mode
  • Full API Demo — overridden ultimate-override.css applied
  • Test Coverage visual regression suite
    • @@ -241,6 +239,6 @@ SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property Contributing CI status GitHub - WordPress plugin - MIT · © CODE/ + npm + MIT · © CodeSlash
    From 38e7ac2fc223494a5f008ea39dce17d56b161c99 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 14:51:36 +0000 Subject: [PATCH 03/10] fix: exclude copy-wip drafts from the GitHub Pages build The draft landing page in copy-wip/ carries Jekyll front matter and the site uses jekyll-optional-front-matter, so without the exclusion both drafts would be rendered and served publicly under /copy-wip/. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- _config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/_config.yml b/_config.yml index 0fc30763..d7746e08 100644 --- a/_config.yml +++ b/_config.yml @@ -7,6 +7,7 @@ plugins: exclude: - node_modules + - copy-wip - configurator - configurator-archive - core From f1c6c8c170ab3f35cce175b51eba7926cf829a8d Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 15:03:07 +0000 Subject: [PATCH 04/10] feat: rebuild landing page draft on the framework's own CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the hand-styled copy-wip landing draft with a standalone page styled entirely by slashed.optimal.css: layout via sf-section / sf-container / sf-stack / sf-cluster / sf-grid, macros (sf-prose, sf-surface, sf-text-gradient, sf-divider), scroll-driven sf-entrance animations, and base element styling for code blocks and tables. The only page-specific rules live in the reserved slashed.overrides layer and compose framework tokens exclusively — no raw colors, sizes, or fonts. Dark mode, fluid type, and pre overflow all come from the framework; a small nav toggle demos data-theme. Now .html with layout:null front matter since the page carries its own document shell (the default layout's hardcoded styles would fight it). Verified with Playwright against a local build of badges/: light, dark, and 390px mobile all render clean with no console errors. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- copy-wip/github-pages-index.html | 294 +++++++++++++++++++++++++++++++ copy-wip/github-pages-index.md | 246 -------------------------- 2 files changed, 294 insertions(+), 246 deletions(-) create mode 100644 copy-wip/github-pages-index.html delete mode 100644 copy-wip/github-pages-index.md diff --git a/copy-wip/github-pages-index.html b/copy-wip/github-pages-index.html new file mode 100644 index 00000000..03ef87e8 --- /dev/null +++ b/copy-wip/github-pages-index.html @@ -0,0 +1,294 @@ +--- +layout: null +--- + + + + + + SLASHED — a cascade-layer CSS framework + + + + + + + + + + + + +
    + +
    + + + +
    + + +
    +
    + Latest release — see what's new → +

    The framework is just a stylesheet

    +

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

    +
    + Open Configurator → + View Demo + Full API Demo + GitHub +
    +

    This page is styled by slashed.optimal.css itself — switch your OS to dark mode and watch it follow.

    +
    +
    + + +
    +
    +
    +

    🎨 OKLCH Color Engine

    +

    Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette derive automatically in plain CSS.

    +
    +
    +

    📐 Fluid Type & Space

    +

    Modular scales computed in the browser from 12 dials using pow() and clamp() — smooth from phone to 4K, no breakpoints.

    +
    +
    +

    🌗 Automatic Dark Mode

    +

    Follows the OS by default. Force it — or mix light and dark sections on one page — with data-theme. No script, no flash.

    +
    +
    +

    ⚡ Zero Build Step

    +

    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no Sass, no purge step.

    +
    +
    +

    🔩 @layer Architecture

    +

    Fifteen named cascade layers in a fixed order. Your overrides sit in the top layer and always win — no !important, no specificity wars.

    +
    +
    +

    🛠️ Visual Configurator

    +

    Tune every token with a live light/dark preview, export override CSS, or share a config link — all in the browser, nothing to install.

    +
    +
    +
    + + +
    +
    +

    Install

    + +
    /* jsDelivr CDN — drop into your CSS */
+@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
    + +
    <!-- or a <link> tag -->
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
    + +
    + + + + + + + + + + +
    BundleIncludes
    slashed.optimal.cssEverything live today: core + classless forms — recommended
    slashed.optimal-components.cssOptimal + the staged component layer (inert until v0.8)
    slashed.optimal-utilities.cssOptimal + the staged utility layer (inert in 0.x)
    slashed.full.cssOptimal + both staged layers
    +

    SLASHED relies on 2024 CSS — light-dark(), OKLCH relative colors, @property, pow() — so the browser floor is Chrome 125+, Safari 18+, Firefox 129+.

    +
    + +

    + All CDN bundles → + GitHub Releases +

    +
    +
    + + +
    +
    +

    Documentation

    +
    +
    +

    Guides

    + Architecture layers, cascade, bundle structure + Theming dark mode, overrides, fluid engine + Migration upgrade across versions + Roadmap planned features +
    +
    +

    Reference

    + Tokens every design token + defaults + Token Index browseable index + Classes every shipped class + Layout container, stack, grid, cluster… + Macros prose, flow, aspect, scroll-shadow + Motion animation & transition tokens +
    +
    +

    Developer

    + LLM Guide AI-assisted development reference + API Index machine-readable catalogue + Comment Policy contributor conventions + Demo live showcase + Full API Demo every class & token, live · dark mode + Test Coverage visual regression suite +
    +
    +
    +
    + +
    + + + + + + diff --git a/copy-wip/github-pages-index.md b/copy-wip/github-pages-index.md deleted file mode 100644 index 4e675e5a..00000000 --- a/copy-wip/github-pages-index.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -layout: default -title: Home ---- - - - -
    - Latest release — see what's new → -

    The framework is
    just a stylesheet

    -

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

    -
    - Open Configurator → - View Demo - Full API Demo - GitHub -
    -
    - -
    -
    -
    🎨
    -

    OKLCH Color Engine

    -

    Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette derive automatically in plain CSS.

    -
    -
    -
    📐
    -

    Fluid Type & Space

    -

    Modular scales computed in the browser from 12 dials using pow() and clamp() — smooth from phone to 4K, no breakpoints.

    -
    -
    -
    🌗
    -

    Automatic Dark Mode

    -

    Follows the OS by default. Force it — or mix light and dark sections on one page — with data-theme. No script, no flash.

    -
    -
    -
    ⚡
    -

    Zero Build Step

    -

    Pure CSS custom properties. Drop in one <link> tag and customise with :root overrides. No Node, no Sass, no purge step.

    -
    -
    -
    🔩
    -

    @layer Architecture

    -

    Fifteen named cascade layers in a fixed order. Your overrides sit in the top layer and always win — no !important, no specificity wars.

    -
    -
    -
    🛠️
    -

    Visual Configurator

    -

    Tune every token with a live light/dark preview, export override CSS, or share a config link — all in the browser, nothing to install.

    -
    -
    - ---- - -## Install - -
    -
    /* jsDelivr CDN — drop into your CSS */
-@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
    -
    - -
    -
    <!-- or a <link> tag -->
-<link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">
    -
    - -
    - -| Bundle | Includes | -|--------|----------| -| `slashed.optimal.css` | Everything live today: core + classless forms — **recommended** | -| `slashed.optimal-components.css` | Optimal + the staged component layer *(inert until v0.8)* | -| `slashed.optimal-utilities.css` | Optimal + the staged utility layer *(inert in 0.x)* | -| `slashed.full.css` | Optimal + both staged layers | - -SLASHED relies on 2024 CSS — `light-dark()`, OKLCH relative colors, `@property`, `pow()` — so the browser floor is **Chrome 125+, Safari 18+, Firefox 129+**. - -[All CDN bundles →](https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/) · [GitHub Releases](https://github.com/codeslash-dev/SLASHED/releases) - -
    - ---- - -## Documentation - -
    -
    -

    Guides

    - -
    -
    -

    Reference

    - -
    -
    -

    Developer

    - -
    -
    - ---- - -
    - Changelog - Contributing - CI status - GitHub - WordPress plugin - MIT · © CODE/ -
    From 36c88d821a5f1371a2a22b9d0a760616643d9be8 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 15:38:42 +0000 Subject: [PATCH 05/10] docs: surface the SLASHED acronym and philosophy in the marketing drafts Add a 'name is the philosophy' section to the README draft and a matching manifesto band to the landing-page draft: one verifiable commitment per letter (Standalone, Lean, Agnostic, Structured, Hybrid, Explicit, Deterministic), each grounded in a documented framework behaviour rather than slogan-ware. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- copy-wip/github-pages-index.html | 54 ++++++++++++++++++++++++++++++++ copy-wip/github-readme.md | 12 +++++++ 2 files changed, 66 insertions(+) diff --git a/copy-wip/github-pages-index.html b/copy-wip/github-pages-index.html index 03ef87e8..6afaf39e 100644 --- a/copy-wip/github-pages-index.html +++ b/copy-wip/github-pages-index.html @@ -112,6 +112,19 @@ text-transform: uppercase; color: var(--sf-color-text--muted); } + + .acronym { margin: 0; } + .acronym dt { + font-size: var(--sf-text-m); + font-weight: var(--sf-font-weight-heading); + color: var(--sf-color-heading); + } + .acronym dt b { color: var(--sf-color-primary); } + .acronym dd { + margin: 0; + font-size: var(--sf-text-s); + color: var(--sf-color-text--secondary); + } } @@ -154,6 +167,47 @@

    The framework is just a stylesheet

    + +
    +
    +
    +

    Philosophy

    +

    The name is the manifesto

    +

    Every letter of SLASHED is a design commitment — and each one is checkable against the source.

    +
    +
    +
    +
    Standalone
    +
    One stylesheet. No build step, no Node, no runtime dependencies.
    +
    +
    +
    Lean
    +
    A foundation, not a kit. No utility bloat, nothing to purge, nothing you didn't ask for.
    +
    +
    +
    Agnostic
    +
    No stack assumptions. Any CMS, any builder, any framework, plain HTML — no vendor lock-in, ever.
    +
    +
    +
    Structured
    +
    Fifteen named cascade layers in a fixed order, and a catalogued token API with stability tiers.
    +
    +
    +
    Hybrid
    +
    Classless where it can be — base elements, opt-in forms — class-based where it counts: layout, macros, states.
    +
    +
    +
    Explicit
    +
    Every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front.
    +
    +
    +
    Deterministic
    +
    Same tokens in, same design out. Load order never changes the cascade; every derived color is computed by formula.
    +
    +
    +
    +
    +
    diff --git a/copy-wip/github-readme.md b/copy-wip/github-readme.md index 5af17c33..e8bcb65a 100644 --- a/copy-wip/github-readme.md +++ b/copy-wip/github-readme.md @@ -53,6 +53,18 @@ Each color takes an optional `-source-dark` counterpart for per-mode control, an To design visually instead, open the [configurator](https://slashed.codeslash.dev/configurator/): live light/dark preview of every token, override-CSS export, and shareable config links. +## The name is the philosophy + +Every letter of SLASHED is a design commitment, and each one is checkable against the source: + +- **Standalone** — one stylesheet. No build step, no Node, no runtime dependencies. +- **Lean** — a foundation, not a kit. No utility-class bloat, nothing to purge, nothing you didn't ask for. +- **Agnostic** — no stack assumptions. Any CMS, any builder, any JS framework, plain HTML — if it renders a stylesheet, SLASHED runs on it. No vendor lock-in, ever. +- **Structured** — fifteen named cascade layers in a fixed order, and a fully catalogued token API with stability tiers (`PUBLIC` / `PUBLIC-ADVANCED` / `INTERNAL`). +- **Hybrid** — classless where it can be (base elements, opt-in form styling), class-based where it counts (layout primitives, macros, `.is-*` states). +- **Explicit** — every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front instead of failing quietly. +- **Deterministic** — same tokens in, same design out. Every rule lives in a layer, so load order never changes the cascade, and every derived color and scale is computed by formula, not hand-picked. + ## What's inside - **685 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). From cd72069f864e6459ff85744271d76c76dc036a9a Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 2 Jul 2026 18:26:47 +0000 Subject: [PATCH 06/10] feat: redesign landing draft around the manifesto hero MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make the philosophy the hero: the wordmark renders as S/L/A/S/H/E/D with gradient initials, and each letter unfolds into its manifesto word on hover (pure CSS — max-width/opacity transitions on framework motion tokens). Add a giant gradient slash watermark, a stats strip (685 tokens / 15 layers / 0 JS / 0 build steps), and rebuild the features section on the framework's own sf-bento grid with live token demos: the real --sf-color-primary 50–950 ramp, hover/active/status chips, side-by-side data-theme panels, the fluid type scale, and a layer-stack visual. The install band is forced dark via data-theme="dark" as a section-theming demo; its code blocks pin to surface/text tokens because code tokens don't yet follow scoped data-theme. Entrances stagger via the framework's scroll-timeline range knobs. Still token-only styling in the slashed.overrides layer. Verified with Playwright: light, dark, hero hover state, and 390px mobile (no horizontal overflow, no console errors). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_019y4H17xqMWoEgvxv3BRM98 --- copy-wip/github-pages-index.html | 364 ++++++++++++++++++++++++------- 1 file changed, 287 insertions(+), 77 deletions(-) diff --git a/copy-wip/github-pages-index.html b/copy-wip/github-pages-index.html index 6afaf39e..d2069fb9 100644 --- a/copy-wip/github-pages-index.html +++ b/copy-wip/github-pages-index.html @@ -18,6 +18,8 @@ framework tokens only — exactly the customisation path the framework documents. No raw colors, sizes, or fonts. */ @layer slashed.overrides { + + /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; @@ -27,23 +29,27 @@ font-weight: var(--sf-font-weight-interactive); font-size: var(--sf-text-s); text-decoration: none; - transition: background-color var(--sf-duration-fast) var(--sf-ease-out); + transition: background-color var(--sf-duration-fast) var(--sf-ease-out), + box-shadow var(--sf-duration-fast) var(--sf-ease-out), + translate var(--sf-duration-fast) var(--sf-ease-out); } .btn--primary { - background: var(--sf-color-primary); - color: var(--sf-color-text--on-primary); + background-image: var(--sf-gradient-brand); + color: var(--sf-color-text--on-primary); } .btn--primary:hover { - background: var(--sf-color-primary--hover); color: var(--sf-color-text--on-primary); + box-shadow: var(--sf-shadow-glow); + translate: 0 -2px; } .btn--quiet { background: var(--sf-color-surface); color: var(--sf-color-text); border: 1px solid var(--sf-color-border); } - .btn--quiet:hover { background: var(--sf-color-bg--hover); } + .btn--quiet:hover { background: var(--sf-color-bg--hover); border-color: var(--sf-color-primary); } + /* ---------- nav ---------- */ .site-nav a { text-decoration: none; color: var(--sf-color-text--secondary); @@ -57,41 +63,189 @@ font-size: var(--sf-text-m); letter-spacing: var(--sf-tracking-tight); } + .site-nav .brand b { color: var(--sf-color-primary); } - .hero h1 { - font-size: var(--sf-text-4xl); - line-height: var(--sf-display-l-line-height); - letter-spacing: var(--sf-tracking-tight); - max-width: 22ch; + /* ---------- hero ---------- */ + .hero { position: relative; overflow: hidden; } + .hero::before { + content: "/"; + position: absolute; + inset-block-start: 50%; + inset-inline-end: 4%; + translate: 0 -54%; + font-size: min(64rem, 130vh); + line-height: 1; + font-weight: var(--sf-font-weight-display); + background-image: var(--sf-gradient-brand); + background-clip: text; + color: transparent; + opacity: 0.08; + pointer-events: none; + user-select: none; + } + + /* The name unfolds into the manifesto. Pure CSS. */ + .acronym-hero { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: baseline; + font-size: var(--sf-text-4xl); + line-height: var(--sf-display-l-line-height); + letter-spacing: var(--sf-tracking-tight); + font-weight: var(--sf-font-weight-display); + color: var(--sf-color-heading); + margin: 0; + } + .al { display: inline-flex; align-items: baseline; white-space: nowrap; cursor: default; } + .al b { + background-image: var(--sf-gradient-brand); + background-clip: text; + color: transparent; + transition: opacity var(--sf-duration-fast) var(--sf-ease-out); + } + .al .rest { + display: inline-block; + max-width: 0; + opacity: 0; + overflow: hidden; + font-weight: var(--sf-font-weight-heading); + transition: max-width var(--sf-duration-slow) var(--sf-ease-out), + opacity var(--sf-duration-normal) var(--sf-ease-out); + } + .al:hover .rest { max-width: 14ch; opacity: 1; } + .acronym-hero:hover .al:not(:hover) b { opacity: 0.35; } + .al + .al::before { + content: "/"; + color: var(--sf-color-border--strong); + font-weight: var(--sf-font-weight-light); + margin-inline: 0.06em; + } + + .tagline { + font-size: var(--sf-text-l); + font-weight: var(--sf-font-weight-semibold); + color: var(--sf-color-heading); } .lede { - font-size: var(--sf-text-l); + font-size: var(--sf-text-m); color: var(--sf-color-text--secondary); - max-width: 52ch; + max-width: 56ch; } .pill { - display: inline-block; - padding: var(--sf-space-px) var(--sf-space-s); - border: 1px solid var(--sf-color-border--subtle); - border-radius: var(--sf-radius-pill); - background: var(--sf-color-surface); - color: var(--sf-color-text--secondary); - font-size: var(--sf-text-xs); - font-weight: var(--sf-font-weight-semibold); + display: inline-block; + padding: var(--sf-space-px) var(--sf-space-s); + border: 1px solid var(--sf-color-border--subtle); + border-radius: var(--sf-radius-pill); + background: var(--sf-color-surface); + color: var(--sf-color-text--secondary); + font-size: var(--sf-text-xs); + font-weight: var(--sf-font-weight-semibold); text-decoration: none; } .pill:hover { border-color: var(--sf-color-primary); color: var(--sf-color-primary); } + /* ---------- stats strip ---------- */ + .stat dt { + font-size: var(--sf-text-3xl); + font-weight: var(--sf-font-weight-display); + letter-spacing: var(--sf-tracking-tight); + line-height: var(--sf-display-s-line-height); + background-image: var(--sf-gradient-brand); + background-clip: text; + color: transparent; + } + .stat dd { + margin: 0; + font-size: var(--sf-text-xs); + font-weight: var(--sf-font-weight-bold); + letter-spacing: var(--sf-tracking-widest); + text-transform: uppercase; + color: var(--sf-color-text--muted); + } + + /* ---------- cards ---------- */ .card { background: var(--sf-color-surface); border: 1px solid var(--sf-color-border--subtle); border-radius: var(--sf-radius-l); padding: var(--sf-space-m); box-shadow: var(--sf-shadow-xs); + transition: box-shadow var(--sf-duration-fast) var(--sf-ease-out), + translate var(--sf-duration-fast) var(--sf-ease-out), + border-color var(--sf-duration-fast) var(--sf-ease-out); } + .card:hover { box-shadow: var(--sf-shadow-l); translate: 0 -3px; border-color: var(--sf-color-border); } .card h3 { font-size: var(--sf-text-m); } .card p { font-size: var(--sf-text-s); color: var(--sf-color-text--secondary); } + .card .demo { margin-block-start: auto; } + /* card demos — every visual below is live framework tokens */ + .ramp { display: flex; gap: var(--sf-space-px); } + .ramp i { flex: 1; height: var(--sf-space-2xl); border-radius: var(--sf-radius-xs); } + .chip { + display: inline-block; padding: var(--sf-space-px) var(--sf-space-xs); + border-radius: var(--sf-radius-s); font-size: var(--sf-text-xs); + font-weight: var(--sf-font-weight-semibold); + } + .mini { + flex: 1; border: 1px solid var(--sf-color-border--subtle); + border-radius: var(--sf-radius-m); padding: var(--sf-space-s); + background: var(--sf-color-bg); color: var(--sf-color-text); + font-weight: var(--sf-font-weight-heading); + } + .mini small { display: block; color: var(--sf-color-text--muted); font-weight: var(--sf-font-weight-normal); } + .type-row { display: flex; align-items: baseline; gap: var(--sf-space-s); color: var(--sf-color-heading); font-weight: var(--sf-font-weight-heading); } + .layer-stack { display: flex; flex-direction: column; gap: var(--sf-space-px); font-size: var(--sf-text-xs); font-weight: var(--sf-font-weight-semibold); } + .layer-stack span { padding: var(--sf-space-px) var(--sf-space-xs); border-radius: var(--sf-radius-xs); } + .card--link { text-decoration: none; display: flex; } + .card--link:hover { box-shadow: var(--sf-shadow-glow); } + + /* Bento featured spans collapse gracefully on narrow containers */ + @container sf-bento (max-width: 29.99em) { + .sf-bento-featured, .sf-bento-wide { grid-column: auto; grid-row: auto; } + } + + /* Staggered scroll-driven entrances, using the framework's own range knobs */ + .sf-bento > :nth-child(2) { --sf-scroll-timeline-range-end: cover 35%; } + .sf-bento > :nth-child(3) { --sf-scroll-timeline-range-end: cover 40%; } + .sf-bento > :nth-child(4) { --sf-scroll-timeline-range-end: cover 45%; } + .sf-bento > :nth-child(5) { --sf-scroll-timeline-range-end: cover 50%; } + .sf-bento > :nth-child(6) { --sf-scroll-timeline-range-end: cover 55%; } + + /* ---------- philosophy ---------- */ + .acronym { margin: 0; } + .acronym dt { + font-size: var(--sf-text-m); + font-weight: var(--sf-font-weight-heading); + color: var(--sf-color-heading); + } + .acronym dt b { + background-image: var(--sf-gradient-brand); + background-clip: text; + color: transparent; + } + .acronym dd { + margin: 0; + font-size: var(--sf-text-s); + color: var(--sf-color-text--secondary); + } + + /* ---------- dark band (data-theme demo) ---------- */ + .band-dark { + background: var(--sf-color-bg); + color: var(--sf-color-text); + } + /* Code tokens don't yet follow section-scoped data-theme (they track the + page scheme), so pin the band's code blocks to theme-safe tokens. */ + .band-dark pre { + background: var(--sf-color-surface); + color: var(--sf-color-text); + border: 1px solid var(--sf-color-border--subtle); + } + .band-dark pre code { color: inherit; background: none; } + + /* ---------- docs ---------- */ .doc-list a { display: block; padding-block: var(--sf-space-2xs); @@ -99,8 +253,10 @@ text-decoration: none; color: var(--sf-color-text); font-size: var(--sf-text-s); + transition: padding-inline-start var(--sf-duration-fast) var(--sf-ease-out), + color var(--sf-duration-fast) var(--sf-ease-out); } - .doc-list a:hover { color: var(--sf-color-primary); } + .doc-list a:hover { color: var(--sf-color-primary); padding-inline-start: var(--sf-space-xs); } .doc-list a small { color: var(--sf-color-text--muted); margin-inline-start: var(--sf-space-2xs); } .footer-meta, .footer-meta a { color: var(--sf-color-text--muted); font-size: var(--sf-text-xs); } @@ -112,19 +268,9 @@ text-transform: uppercase; color: var(--sf-color-text--muted); } + .eyebrow::before { content: "/ "; color: var(--sf-color-primary); } - .acronym { margin: 0; } - .acronym dt { - font-size: var(--sf-text-m); - font-weight: var(--sf-font-weight-heading); - color: var(--sf-color-heading); - } - .acronym dt b { color: var(--sf-color-primary); } - .acronym dd { - margin: 0; - font-size: var(--sf-text-s); - color: var(--sf-color-text--secondary); - } + h2 { letter-spacing: var(--sf-tracking-tight); } } @@ -135,7 +281,7 @@