diff --git a/README.md b/README.md index 7b655aa8..07c39f56 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,94 @@ -# SLASHED CSS Framework -logo +

+ SLASHED +

+ +

+ A cascade-layer CSS framework you never compile.
+ 720 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 +--- -A cascade-layer CSS framework. No build step. No Node. No runtime dependencies. +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: -[![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/) +```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: -## Quick start +```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; +} +``` -Use a pre-built bundle (see [Releases](https://github.com/codeslash-dev/SLASHED/releases)): +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: -```html - - +```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. - - +## The name is the philosophy - - -``` +Every letter of SLASHED is a design commitment, and each one is checkable against the source: -À la carte is also supported. When wiring up individual files, `core/layers.css` -must load **first** — it declares the `@layer` order once, and that order (not -`` order) controls the cascade, so the snippet below simply mirrors it -for readability. `optional/legacy.css` is not bundled by default — add it -explicitly if you need back-compat shims and load it **last**: +- **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. -```html - - - - - - - - - - - - - - +## 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). +- **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 a **curated subset of utility classes** in 0.x — heading (`.sf-h1`–`.sf-h6`), text-size (`.sf-text-*`), hover-transform (`.sf-hover-*`), list-reset, marker-colour, selection, and sticky helpers — with the rest staged. It ships exactly **two components** — `.sf-btn` and `.sf-card`, live since v0.7.0 (in the `-components` and `full` bundles); by design there is no broad component library. What you get is the foundation plus those two components, honestly labelled. + +## Dark mode + +Pure CSS — no script, no flash: + +```html + + +
``` -`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 layers -## Cascade layer order +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 → @@ -74,129 +96,63 @@ utilities → states → themes → motion → accessibility → print → legac 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. +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 `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; -} -``` +| `slashed.optimal.css` | all of `core/` + classless forms — **recommended** | +| `slashed.optimal-components.css` | optimal + the component layer — `.sf-btn` and `.sf-card` (the only two components) | +| `slashed.optimal-utilities.css` | optimal + the utility layer — curated helpers active (heading, text-size, hover, list-reset, marker, selection, sticky), rest staged | +| `slashed.full.css` | optimal + the component and utility layers | -Or shorthand with `light-dark()`: +
+À la carte loading (individual source files) -```css -:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); } -``` +`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**: -## Fluid engine +```html + + + + + + + + + + + + + + -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 @@ -205,23 +161,20 @@ 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). ## Editor integration A generated [VS Code CSS Custom Data](https://github.com/microsoft/vscode-css-languageservice/blob/main/docs/customData.md) file ships alongside the bundles, so every `--sf-*` token autocompletes with -its description and default value in any editor that supports the format. +its description and default value in any editor that supports the format: ```json // .vscode/settings.json @@ -230,20 +183,22 @@ its description and default value in any editor that supports the format. } ``` +## 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/_config.yml b/_config.yml index d7746e08..0fc30763 100644 --- a/_config.yml +++ b/_config.yml @@ -7,7 +7,6 @@ plugins: exclude: - node_modules - - copy-wip - configurator - configurator-archive - core diff --git a/copy-wip/github-readme.md b/copy-wip/github-readme.md deleted file mode 100644 index e8bcb65a..00000000 --- a/copy-wip/github-readme.md +++ /dev/null @@ -1,191 +0,0 @@ -

- 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. - -## 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). -- **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/demos/full-api-demo-with-overrides.html b/demos/full-api-demo-with-overrides.html index 8ddbe48a..53df2eae 100644 --- a/demos/full-api-demo-with-overrides.html +++ b/demos/full-api-demo-with-overrides.html @@ -122,7 +122,7 @@

SLASHED Full API Demo

-

v0.7.0 · optimal-components bundle from jsDelivr CDN · 308 classes · 711 tokens (225 configurable)

+

v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 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.
@@ -150,7 +150,7 @@

Shadow

Interactive functions motion · transitions · gradients

Animations

-
animation-blink
animation-color-pulse
animation-fade-in
animation-fade-out
animation-float
animation-ping
animation-scale-down
animation-scale-up
animation-shimmer
animation-slide-in-down
animation-slide-in-left
animation-slide-in-right
animation-slide-in-up
animation-spin
+
animation-blink
animation-color-pulse
animation-fade-in
animation-fade-out
animation-float
animation-ping
animation-scale-down
animation-scale-up
animation-shimmer
animation-slide-in-down
animation-slide-in-left
animation-slide-in-right
animation-slide-in-up
animation-slide-out-down
animation-slide-out-left
animation-slide-out-right
animation-slide-out-up
animation-spin

Easing curves

ease-bounce
ease-elastic
ease-in
ease-in-out
ease-linear
ease-out
ease-overshoot
ease-spring
@@ -169,7 +169,7 @@

Drop shadows (filter)

-

Layout primitives 136

+

Layout primitives 143

.sf-alternate
@@ -331,6 +331,14 @@

Layout primitives 136

.sf-cq
1
2
3
4
+
+
.sf-divide
+
1
2
3
4
+
+
+
.sf-divide--vertical
+
1
2
3
4
+
.sf-divider

above

below

@@ -547,6 +555,26 @@

Layout primitives 136

.sf-grid-flex--xs
1
2
3
4
+
+
.sf-header--l
+
1
2
3
4
+
+
+
.sf-header--m
+
1
2
3
4
+
+
+
.sf-header--s
+
1
2
3
4
+
+
+
.sf-header--xl
+
1
2
3
4
+
+
+
.sf-header--xs
+
1
2
3
4
+
.sf-icon
inline icon
@@ -951,7 +979,7 @@

Macro classes 57

-

State classes 40

+

State classes 29

.is-active
@@ -961,14 +989,6 @@

State classes 40

.is-busy
is-busy
-
-
.is-clickable
-
is-clickable
-
-
-
.is-clipped
-
is-clipped
-
.is-collapsed
@@ -1009,18 +1029,6 @@

State classes 40

.is-expanded
is-expanded
-
-
.is-fixed
-
is-fixed
-
-
-
.is-focused
-
is-focused
-
-
-
.is-fullscreen
-
is-fullscreen
-
.is-hidden
@@ -1057,10 +1065,6 @@

State classes 40

.is-pending
is-pending
-
-
.is-pinned
-
is-pinned
-
.is-pressed
is-pressed
@@ -1069,14 +1073,6 @@

State classes 40

.is-readonly
is-readonly
-
-
.is-resizable
-
is-resizable
-
-
-
.is-scrollable
-
is-scrollable
-
.is-selected
is-selected
@@ -1085,22 +1081,10 @@

State classes 40

.is-skeleton
is-skeleton
-
-
.is-sticky
-
is-sticky
-
.is-success
is-success
-
-
.is-truncated
-
is-truncated
-
-
-
.is-unselectable
-
is-unselectable
-
.is-valid
is-valid
@@ -1116,7 +1100,7 @@

State classes 40

-

Motion / animation 15

+

Motion / animation 21

.sf-color-pulse
@@ -1146,6 +1130,30 @@

Motion / animation 15

.sf-entrance--scale-up
entrance--scale-up
+
+
.sf-exit--fade
+
exit--fade
+
+
+
.sf-exit--fade-down
+
exit--fade-down
+
+
+
.sf-exit--fade-left
+
exit--fade-left
+
+
+
.sf-exit--fade-right
+
exit--fade-right
+
+
+
.sf-exit--fade-up
+
exit--fade-up
+
+
+
.sf-exit--scale-down
+
exit--scale-down
+
.sf-fade-in
fade-in
@@ -1249,10 +1257,10 @@

Theme 1

-

Part 2 — Complete token reference 711 tokens · live values

+

Part 2 — Complete token reference 720 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 249

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

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
…

gradient 9

--sf-gradient-brand
…
--sf-gradient-fade--b
…
--sf-gradient-fade--l
…
--sf-gradient-fade--r
…
--sf-gradient-fade--t
…
--sf-gradient-primary
…
--sf-gradient-secondary
…
--sf-gradient-surface
…
--sf-gradient-tertiary
…

shadow 13

@@ -1279,8 +1287,8 @@

ease 8

--sf-ease-bounce…
--sf-ease-elastic…
--sf-ease-in…
--sf-ease-in-out…
--sf-ease-linear…
--sf-ease-out…
--sf-ease-overshoot…
--sf-ease-spring…

transition 10

--sf-transition-colors…
--sf-transition-enter…
--sf-transition-exit…
--sf-transition-fast…
--sf-transition-form-field…
--sf-transition-opacity…
--sf-transition-overlay…
--sf-transition-shadow…
--sf-transition-slow…
--sf-transition-transform…
-

animation 19

-
--sf-animation-blink
…
--sf-animation-color-pulse
…
--sf-animation-delay-1…
--sf-animation-delay-2…
--sf-animation-delay-3…
--sf-animation-delay-4…
--sf-animation-delay-5…
--sf-animation-fade-in
…
--sf-animation-fade-out
…
--sf-animation-float
…
--sf-animation-ping
…
--sf-animation-scale-down
…
--sf-animation-scale-up
…
--sf-animation-shimmer
…
--sf-animation-slide-in-down
…
--sf-animation-slide-in-left
…
--sf-animation-slide-in-right
…
--sf-animation-slide-in-up
…
--sf-animation-spin
…
+

animation 23

+
--sf-animation-blink
…
--sf-animation-color-pulse
…
--sf-animation-delay-1…
--sf-animation-delay-2…
--sf-animation-delay-3…
--sf-animation-delay-4…
--sf-animation-delay-5…
--sf-animation-fade-in
…
--sf-animation-fade-out
…
--sf-animation-float
…
--sf-animation-ping
…
--sf-animation-scale-down
…
--sf-animation-scale-up
…
--sf-animation-shimmer
…
--sf-animation-slide-in-down
…
--sf-animation-slide-in-left
…
--sf-animation-slide-in-right
…
--sf-animation-slide-in-up
…
--sf-animation-slide-out-down
…
--sf-animation-slide-out-left
…
--sf-animation-slide-out-right
…
--sf-animation-slide-out-up
…
--sf-animation-spin
…

border 10

--sf-border…
--sf-border-scale…
--sf-border-strong…
--sf-border-style…
--sf-border-subtle…
--sf-border-width-1…
--sf-border-width-2…
--sf-border-width-3…
--sf-border-width-4…
--sf-border-width-hairline…

focus 5

@@ -1381,6 +1389,8 @@

lumlocker 1

--sf-lumlocker adv…

mask 2

--sf-mask-scrim-end adv
…
--sf-mask-scrim-start adv
…
+

media 1

+
--sf-media-radius…

motion 1

--sf-motion-scale adv…

object 2

@@ -1403,8 +1413,8 @@

safe 4

--sf-safe-bottom adv…
--sf-safe-left adv…
--sf-safe-right adv…
--sf-safe-top adv…

scrim 4

--sf-scrim-color…
--sf-scrim-direction…
--sf-scrim-gradient
…
--sf-scrim-text-shadow…
-

scroll 3

-
--sf-scroll-shadow-size
…
--sf-scroll-timeline-range-end adv
…
--sf-scroll-timeline-range-start adv
…
+

scroll 5

+
--sf-scroll-shadow-size
…
--sf-scroll-timeline-range-end adv
…
--sf-scroll-timeline-range-exit-end
…
--sf-scroll-timeline-range-exit-start
…
--sf-scroll-timeline-range-start adv
…

scrollbar 2

--sf-scrollbar-thumb…
--sf-scrollbar-track…

section 8

diff --git a/demos/full-api-demo.html b/demos/full-api-demo.html index 8e27bf7c..28eb5123 100644 --- a/demos/full-api-demo.html +++ b/demos/full-api-demo.html @@ -121,7 +121,7 @@

SLASHED Full API Demo

-

v0.7.0 · optimal-components bundle from jsDelivr CDN · 308 classes · 711 tokens (225 configurable)

+

v0.7.0 · optimal-components bundle from jsDelivr CDN · 320 classes · 720 tokens (229 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.
@@ -149,7 +149,7 @@

Shadow

Interactive functions motion · transitions · gradients

Animations

-
animation-blink
animation-color-pulse
animation-fade-in
animation-fade-out
animation-float
animation-ping
animation-scale-down
animation-scale-up
animation-shimmer
animation-slide-in-down
animation-slide-in-left
animation-slide-in-right
animation-slide-in-up
animation-spin
+
animation-blink
animation-color-pulse
animation-fade-in
animation-fade-out
animation-float
animation-ping
animation-scale-down
animation-scale-up
animation-shimmer
animation-slide-in-down
animation-slide-in-left
animation-slide-in-right
animation-slide-in-up
animation-slide-out-down
animation-slide-out-left
animation-slide-out-right
animation-slide-out-up
animation-spin

Easing curves

ease-bounce
ease-elastic
ease-in
ease-in-out
ease-linear
ease-out
ease-overshoot
ease-spring
@@ -168,7 +168,7 @@

Drop shadows (filter)

-

Layout primitives 136

+

Layout primitives 143

.sf-alternate
@@ -330,6 +330,14 @@

Layout primitives 136

.sf-cq
1
2
3
4
+
+
.sf-divide
+
1
2
3
4
+
+
+
.sf-divide--vertical
+
1
2
3
4
+
.sf-divider

above

below

@@ -546,6 +554,26 @@

Layout primitives 136

.sf-grid-flex--xs
1
2
3
4
+
+
.sf-header--l
+
1
2
3
4
+
+
+
.sf-header--m
+
1
2
3
4
+
+
+
.sf-header--s
+
1
2
3
4
+
+
+
.sf-header--xl
+
1
2
3
4
+
+
+
.sf-header--xs
+
1
2
3
4
+
.sf-icon
inline icon
@@ -950,7 +978,7 @@

Macro classes 57

-

State classes 40

+

State classes 29

.is-active
@@ -960,14 +988,6 @@

State classes 40

.is-busy
is-busy
-
-
.is-clickable
-
is-clickable
-
-
-
.is-clipped
-
is-clipped
-
.is-collapsed
@@ -1008,18 +1028,6 @@

State classes 40

.is-expanded
is-expanded
-
-
.is-fixed
-
is-fixed
-
-
-
.is-focused
-
is-focused
-
-
-
.is-fullscreen
-
is-fullscreen
-
.is-hidden
@@ -1056,10 +1064,6 @@

State classes 40

.is-pending
is-pending
-
-
.is-pinned
-
is-pinned
-
.is-pressed
is-pressed
@@ -1068,14 +1072,6 @@

State classes 40

.is-readonly
is-readonly
-
-
.is-resizable
-
is-resizable
-
-
-
.is-scrollable
-
is-scrollable
-
.is-selected
is-selected
@@ -1084,22 +1080,10 @@

State classes 40

.is-skeleton
is-skeleton
-
-
.is-sticky
-
is-sticky
-
.is-success
is-success
-
-
.is-truncated
-
is-truncated
-
-
-
.is-unselectable
-
is-unselectable
-
.is-valid
is-valid
@@ -1115,7 +1099,7 @@

State classes 40

-

Motion / animation 15

+

Motion / animation 21

.sf-color-pulse
@@ -1145,6 +1129,30 @@

Motion / animation 15

.sf-entrance--scale-up
entrance--scale-up
+
+
.sf-exit--fade
+
exit--fade
+
+
+
.sf-exit--fade-down
+
exit--fade-down
+
+
+
.sf-exit--fade-left
+
exit--fade-left
+
+
+
.sf-exit--fade-right
+
exit--fade-right
+
+
+
.sf-exit--fade-up
+
exit--fade-up
+
+
+
.sf-exit--scale-down
+
exit--scale-down
+
.sf-fade-in
fade-in
@@ -1248,10 +1256,10 @@

Theme 1

-

Part 2 — Complete token reference 711 tokens · live values

+

Part 2 — Complete token reference 720 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 249

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

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
…

gradient 9

--sf-gradient-brand
…
--sf-gradient-fade--b
…
--sf-gradient-fade--l
…
--sf-gradient-fade--r
…
--sf-gradient-fade--t
…
--sf-gradient-primary
…
--sf-gradient-secondary
…
--sf-gradient-surface
…
--sf-gradient-tertiary
…

shadow 13

@@ -1259,7 +1267,7 @@

shadow 13

drop 5

--sf-drop-shadow-l
…
--sf-drop-shadow-m
…
--sf-drop-shadow-s
…
--sf-drop-shadow-xl
…
--sf-drop-shadow-xs
…

radius 14

-
--sf-radius-2xl
…
--sf-radius-2xs
…
--sf-radius-3xl
…
--sf-radius-4xl
…
--sf-radius-full
…
--sf-radius-l
…
--sf-radius-m
…
--sf-radius-none
…
--sf-radius-outer adv
…
--sf-media-radius
…
--sf-radius-pill
…
--sf-radius-s
…
--sf-radius-scale adv…
--sf-radius-xl
…
--sf-radius-xs
…
+
--sf-radius-2xl
…
--sf-radius-2xs
…
--sf-radius-3xl
…
--sf-radius-4xl
…
--sf-radius-full
…
--sf-radius-l
…
--sf-radius-m
…
--sf-radius-none
…
--sf-radius-outer adv
…
--sf-radius-pill
…
--sf-radius-s
…
--sf-radius-scale adv…
--sf-radius-xl
…
--sf-radius-xs
…

space 16

--sf-space-2xl…
--sf-space-2xs…
--sf-space-3xl…
--sf-space-4xl…
--sf-space-base-max adv
…
--sf-space-base-min adv
…
--sf-space-l…
--sf-space-m…
--sf-space-none
…
--sf-space-px
…
--sf-space-ratio-max adv
…
--sf-space-ratio-min adv
…
--sf-space-s…
--sf-space-scale adv
…
--sf-space-xl…
--sf-space-xs…

size 5

@@ -1278,8 +1286,8 @@

ease 8

--sf-ease-bounce…
--sf-ease-elastic…
--sf-ease-in…
--sf-ease-in-out…
--sf-ease-linear…
--sf-ease-out…
--sf-ease-overshoot…
--sf-ease-spring…

transition 10

--sf-transition-colors…
--sf-transition-enter…
--sf-transition-exit…
--sf-transition-fast…
--sf-transition-form-field…
--sf-transition-opacity…
--sf-transition-overlay…
--sf-transition-shadow…
--sf-transition-slow…
--sf-transition-transform…
-

animation 19

-
--sf-animation-blink
…
--sf-animation-color-pulse
…
--sf-animation-delay-1…
--sf-animation-delay-2…
--sf-animation-delay-3…
--sf-animation-delay-4…
--sf-animation-delay-5…
--sf-animation-fade-in
…
--sf-animation-fade-out
…
--sf-animation-float
…
--sf-animation-ping
…
--sf-animation-scale-down
…
--sf-animation-scale-up
…
--sf-animation-shimmer
…
--sf-animation-slide-in-down
…
--sf-animation-slide-in-left
…
--sf-animation-slide-in-right
…
--sf-animation-slide-out-up
…
--sf-animation-slide-out-down
…
--sf-animation-slide-out-left
…
--sf-animation-slide-out-right
…
--sf-animation-slide-in-up
…
--sf-animation-spin
…
+

animation 23

+
--sf-animation-blink
…
--sf-animation-color-pulse
…
--sf-animation-delay-1…
--sf-animation-delay-2…
--sf-animation-delay-3…
--sf-animation-delay-4…
--sf-animation-delay-5…
--sf-animation-fade-in
…
--sf-animation-fade-out
…
--sf-animation-float
…
--sf-animation-ping
…
--sf-animation-scale-down
…
--sf-animation-scale-up
…
--sf-animation-shimmer
…
--sf-animation-slide-in-down
…
--sf-animation-slide-in-left
…
--sf-animation-slide-in-right
…
--sf-animation-slide-in-up
…
--sf-animation-slide-out-down
…
--sf-animation-slide-out-left
…
--sf-animation-slide-out-right
…
--sf-animation-slide-out-up
…
--sf-animation-spin
…

border 10

--sf-border…
--sf-border-scale…
--sf-border-strong…
--sf-border-style…
--sf-border-subtle…
--sf-border-width-1…
--sf-border-width-2…
--sf-border-width-3…
--sf-border-width-4…
--sf-border-width-hairline…

focus 5

@@ -1380,6 +1388,8 @@

lumlocker 1

--sf-lumlocker adv…

mask 2

--sf-mask-scrim-end adv
…
--sf-mask-scrim-start adv
…
+

media 1

+
--sf-media-radius…

motion 1

--sf-motion-scale adv…

object 2

@@ -1402,8 +1412,8 @@

safe 4

--sf-safe-bottom adv…
--sf-safe-left adv…
--sf-safe-right adv…
--sf-safe-top adv…

scrim 4

--sf-scrim-color…
--sf-scrim-direction…
--sf-scrim-gradient
…
--sf-scrim-text-shadow…
-

scroll 3

-
--sf-scroll-shadow-size
…
--sf-scroll-timeline-range-end adv
…
--sf-scroll-timeline-range-exit-start
…
--sf-scroll-timeline-range-exit-end
…
--sf-scroll-timeline-range-start adv
…
+

scroll 5

+
--sf-scroll-shadow-size
…
--sf-scroll-timeline-range-end adv
…
--sf-scroll-timeline-range-exit-end
…
--sf-scroll-timeline-range-exit-start
…
--sf-scroll-timeline-range-start adv
…

scrollbar 2

--sf-scrollbar-thumb…
--sf-scrollbar-track…

section 8

diff --git a/demos/generate.mjs b/demos/generate.mjs index b870b59f..1a936e40 100644 --- a/demos/generate.mjs +++ b/demos/generate.mjs @@ -61,6 +61,7 @@ const CURATED = { // zero-valued lengths → small but visible '--sf-bg-inset': '0.75rem', '--sf-bg-radius': '0.75rem', + '--sf-media-radius': '0.75rem', '--sf-box-border-width': '3px', '--sf-equal-rule-width': '2px', '--sf-radius-none': '0.4rem', @@ -97,10 +98,13 @@ const CURATED = { '--sf-field-required-marker': '" \\2737"', '--sf-color-mark-text': 'oklch(0.45 0.27 320)', '--sf-color-selection-text': 'oklch(0.98 0 0)', + '--sf-color-selection-text--alt': 'oklch(0.9 0.06 300)', '--sf-print-page-size': 'letter', '--sf-shadow-strength': '0.45', '--sf-scroll-timeline-range-start': 'entry 20%', '--sf-scroll-timeline-range-end': 'cover 60%', + '--sf-scroll-timeline-range-exit-start': 'exit 20%', + '--sf-scroll-timeline-range-exit-end': 'exit 80%', // 'none' max-widths → a concrete cap so the constraint is visible '--sf-h1-max-width': '40ch', '--sf-h2-max-width': '40ch', diff --git a/demos/ultimate-override.css b/demos/ultimate-override.css index cc2384c8..45cc9ce3 100644 --- a/demos/ultimate-override.css +++ b/demos/ultimate-override.css @@ -5,7 +5,7 @@ Perturbs every CONFIGURABLE (role: "knob") token to a valid, visibly-distinct value so full-api-demo.html can prove each one is wired end to end. - Coverage: 202 of 225 knob tokens overridden. + Coverage: 206 of 229 knob tokens overridden. 23 knobs are intentionally NOT perturbed (structural / meta / sentinel) — listed with reasons at the bottom of this file. ============================================================================ */ @@ -68,6 +68,7 @@ --sf-color-secondary-source-dark: oklch(from oklch(0.84 0.036 264) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.84 0.036 264) */ --sf-color-secondary-source-light: oklch(from oklch(0.22 0.04 264) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.22 0.04 264) */ --sf-color-selection-text: oklch(0.98 0 0); /* was: inherit */ + --sf-color-selection-text--alt: oklch(0.9 0.06 300); /* was: inherit */ --sf-color-success-source-dark: oklch(from oklch(0.70 0.144 145) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.70 0.144 145) */ --sf-color-success-source-light: oklch(from oklch(0.50 0.16 145) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.50 0.16 145) */ --sf-color-tertiary-source-dark: oklch(from oklch(0.74 0.198 295) calc(l + 0.12) calc(c + 0.12) calc(h + 150) / alpha); /* was: oklch(0.74 0.198 295) */ @@ -213,6 +214,9 @@ /* lumlocker */ --sf-lumlocker: 0.5; /* was: 0.65 */ + /* media */ + --sf-media-radius: 0.75rem; /* was: 0 */ + /* motion */ --sf-motion-scale: 1.6; /* was: 1 */ @@ -270,6 +274,8 @@ /* scroll */ --sf-scroll-shadow-size: 3.2rem; /* was: 2rem */ --sf-scroll-timeline-range-end: cover 60%; /* was: cover 30% */ + --sf-scroll-timeline-range-exit-end: exit 80%; /* was: exit 100% */ + --sf-scroll-timeline-range-exit-start: exit 20%; /* was: cover 70% */ --sf-scroll-timeline-range-start: entry 20%; /* was: entry 0% */ /* scrollbar */ diff --git a/docs/architecture.md b/docs/architecture.md index 7abcf34a..9c9ead41 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -47,23 +47,25 @@ core/ accessibility.css slashed.accessibility print.css slashed.print optional/ - tokens.components.css slashed.tokens (component tokens — incomplete, all commented out) + tokens.components.css slashed.tokens (component tokens for btn + card) 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 (8 components — incomplete, all commented out) - utilities.css slashed.utilities (empty stub) + components.css slashed.components (btn + card — the only two components) + utilities.css slashed.utilities (curated subset active — heading/text-size/hover; rest commented) legacy.css slashed.legacy ``` -`optional/components.css` and `optional/tokens.components.css` are -**not yet complete** (pre-v1.0): their `@layer` declarations are real, but -every class definition and component token is commented out. They will -land incrementally in upcoming minor releases (additive, no breaking -changes). See [`docs/components.md`](components.md) for the eight -taken component names and the roadmap. +`optional/components.css` and `optional/tokens.components.css` ship exactly two +components — `.sf-btn` and `.sf-card`, live since v0.7.0. These are the only +components SLASHED carries: the framework stays BEM-first and token-first and +does not maintain a broad component library. See [`docs/components.md`](components.md) +for the component reference. -`optional/utilities.css` remains an empty stub — SLASHED is BEM-first by -design and ships no utility classes in 0.x. +`optional/utilities.css` ships a curated subset — the heading (`.sf-h1`–`.sf-h6`), +text-size (`.sf-text-*`), hover-transform (`.sf-hover-*`), list-reset, +marker-colour, alternate-selection, and sticky helpers are active; the rest stay +commented out. SLASHED is BEM-first by design, so it ships only this curated +subset of utility classes in 0.x. --- @@ -167,10 +169,9 @@ BEM control. **slashed.layout** — layout primitives: `.sf-stack`, `.sf-cluster`, `.sf-sidebar`, `.sf-cover`, `.sf-grid`, `.sf-container`, `.sf-content-grid`, `.sf-icon`, etc. Layout tokens declared in `tokens.layout.css`, overridable per-instance via `style="--sf-stack-gap: …"`. -**slashed.components** — UI blocks. Not yet complete (pre-v1.0): 8 component -names are taken (`button`, `card`, `badge`, `tag`, `alert`, `avatar`, -`modal`, `skeleton`) but all class definitions are commented out. When -the classes ship, every value goes through `var()`. Requires +**slashed.components** — UI blocks: `.sf-btn` and `.sf-card`, live since v0.7.0. +These are the only two components SLASHED ships — it stays BEM-first and does +not carry a broad component library. Every value goes through `var()`. Requires `tokens.components.css`. **slashed.macros** — recipes / patterns: `.sf-prose`, @@ -375,18 +376,19 @@ so `bundle.config.json` lists eight outputs in total — are built by | 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)* | +| `slashed.optimal-components.css` | optimal + `tokens.components` + `components` *(btn + card — the only two)* | +| `slashed.optimal-utilities.css` | optimal + `utilities` *(curated subset active, rest staged)* | +| `slashed.full.css` | optimal + `tokens.components` + `components` *(btn + card)* + `utilities` *(curated subset active, rest staged)* | `optional/legacy.css` is **not bundled by default** — add it explicitly when you need back-compat shims. Because every rule sits in an `@layer`, concatenation order within a bundle does not affect the cascade. The bundler strips local `@import` statements (the explicit file list resolves them), so the `tokens.components` import inside `components.css` is inlined by listing -the token file first. `components.css` and `tokens.components.css` are -incomplete (every selector/token commented out, no CSS emitted); -`utilities.css` is an empty stub. Consumers can also build à la carte: raw +the token file first. `components.css` and `tokens.components.css` ship +`.sf-btn` / `.sf-card` and their tokens — the only two components; `utilities.css` +ships a curated subset (heading, text-size, hover, list-reset, marker, selection, +and sticky helpers active, rest commented). Consumers can also build à la carte: raw `core/` plus hand-picked optional files. Each bundle also has a layer-flattened `.flat` variant. @@ -445,12 +447,11 @@ Deliberate behaviours, documented so they aren't mistaken for bugs. --- -## Deferred (until the components ship) +## Deferred `@starting-style` and CSS anchor positioning are only meaningful attached to -a specific element/component transition (dialog, popover, tooltip). They -are out of scope while `optional/components.css` is incomplete (every class -commented out) and will be added with the components when they ship in -upcoming 0.x minors. The component-free part — scroll-driven animation -range tokens (`--sf-scroll-timeline-range-*`) — already ships in -`core/tokens.css`. +a specific element/component transition (dialog, popover, tooltip). SLASHED +ships only `.sf-btn` and `.sf-card` and stays BEM-first, so these belong to +consumer components rather than the framework and are out of scope here. The +component-free part — scroll-driven animation range tokens +(`--sf-scroll-timeline-range-*`) — already ships in `core/tokens.css`. diff --git a/copy-wip/github-pages-index.html b/index.html similarity index 98% rename from copy-wip/github-pages-index.html rename to index.html index 6a087c27..d9971142 100644 --- a/copy-wip/github-pages-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: 685 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: 720 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 @@

-
685
design tokens
+
720
design tokens
15
cascade layers
0
lines of frontend JS
0
build steps
@@ -572,13 +572,13 @@

One link tag. That's the toolchain.

By the way: this band is just <section data-theme="dark"> — mixing light and dark sections is one attribute.

-
/* jsDelivr CDN — drop into your CSS */
-@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";
- -
<!-- or a <link> tag -->
+
<!-- jsDelivr CDN — recommended -->
 <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">

 
+
/* or @import — render-blocking & serialized, prefer <link> */
+@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";

+
         

           
@@ -586,9 +586,9 @@ 
One link tag. That's the toolchain.

-              
-              
-              
+              
+              
+              

             
             
             
               
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.optimal-components.cssOptimal + the component layer — .sf-btn and .sf-card (the only two components)
slashed.optimal-utilities.cssOptimal + the utility layer — curated helpers active (heading, text-size, hover, list-reset, marker, selection, sticky), rest staged
slashed.full.cssOptimal + the component and utility layers

             
           

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

diff --git a/index.md b/index.md
deleted file mode 100644
index 37572f26..00000000
--- a/index.md
+++ /dev/null
@@ -1,244 +0,0 @@
----
-layout: default
-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.

-  

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

-

-
-

-  

-    
🎨

-    
OKLCH Color Engine

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

-  

-  

-    
📐

-    
Fluid Type & Space

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

-  

-  

-    
🌗

-    
Automatic Dark Mode

-    
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 bundler.

-  

-  

-    
🔩

-    
@layer Architecture

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

-  

-  

-    
🛠️

-    
Visual Configurator

-    
Live-preview every token, export override CSS, or share a config URL — all from the browser with no 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` | Core + classless forms — **recommended** |
-| `slashed.optimal-components.css` | Optimal + component stubs |
-| `slashed.optimal-utilities.css` | Optimal + utility classes |
-| `slashed.full.css` | Everything |
-
-[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)
-
-

-
----
-
-## Documentation
-
-

-  

-    
Guides

-    
-  

-  

-    
Reference

-    
-  

-  

-    
Developer

-    
-  

-

-
----
-
-

-  Changelog
-  Contributing
-  CI status
-  GitHub
-  npm
-  MIT · © CodeSlash
-