fix(tokens): unify status -subtle alpha to 0.12; drop dev-notes from manual

- core/tokens.css: --sf-color-info-subtle and --sf-color-danger-subtle were
  0.10 alpha while success/warning were 0.12, so danger/info alert backgrounds
  rendered slightly fainter than success/warning at the same content. Unify all
  four status -subtle washes to 0.12 (the finding documented while writing the
  colour manual). Regenerated value-bearing docs.
- user-manual/system-kolorow.md: remove the "Znalezione nieścisłości we
  frameworku" section (§9) — maintainer-facing findings don't belong in a user
  manual (PR #627 review); renumber the cheatsheet §10 → §9. Also refresh one
  stale §8 rationale ("ramp computed for a specific background") to the new
  solid-colour-doesn't-blend wording.
- CHANGELOG: note the status -subtle alpha fix.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012X2fkd5DbmNJywKcNy6NjF

Author: claude

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ## [0.7.19] - 2026-07-16
 
 ### Bug Fixes
+- **tokens:** `--sf-color-info-subtle` and `--sf-color-danger-subtle` were `0.10` alpha while `--sf-color-success-subtle` / `--sf-color-warning-subtle` were `0.12`, so a `danger`/`info` alert-box background rendered slightly fainter than a `success`/`warning` one at the same content. Unified all four status `-subtle` washes to `0.12` (the `-muted` `0.3` and `-tint` `0.05` rungs were already consistent).
 - **tokens:** the numeric brand ramps (`--sf-color-{primary,secondary,tertiary,action,neutral}-50…950`) no longer fold into a "U". The previous model generated each step with `color-mix()` toward the theme's `--sf-color-surface` (tints) / `--sf-color-text` (shades) — so when a chosen source colour fell outside the band between those two anchors (e.g. a brand darker than the text colour, or a project that lightened `--sf-color-neutral`), the shade half inverted and climbed back up: steps 600–950 came out *lighter* than 500, and 50 ≈ 950. The ramp is now generated in OKLCH by pulling the family colour's own lightness a fixed fraction toward an **absolute** target — `--sf-palette-tint-l` (tints) / `--sf-palette-shade-l` (shades) — clamped with `max()`/`min()` so a tint can never end darker than the base nor a shade lighter. The ladder is therefore monotonic light→dark for **any** source colour and any anchor configuration. Chroma is tapered toward the extremes to avoid oversaturation. For default-palette colours (which already sat inside the safe band) the output is visually unchanged; only out-of-band / moved-anchor cases are corrected. `base` is unchanged (it already used absolute lightness steps). New parametric test `tests/ramp-monotonic.spec.js` sweeps the lightness axis for all five families and asserts the ramp never folds and no step is transparent.
 - **configurator:** the Colors panel's "Palette ramp" section now edits the two lightness anchors (`--sf-palette-tint-l` / `--sf-palette-shade-l`) with two `0–1` sliders instead of the ten removed `--sf-palette-mix-*` percentage sliders; the Softer/Default/Punchy presets and the live palette preview were rewired to the absolute-anchor model so the preview matches the framework and stays monotonic.
 - **layout:** `@container` breakpoints for `.sf-grid-cols-*`, `.sf-bento` and `.sf-alternate` now use `rem` instead of `em`. Inside a container query an `em` resolves against the query container's own font-size, which under the default fluid type scale is inherited from `body` (a `clamp()` over `100vw`, ~16–20px) — so the same fixed-width container rendered a different column count depending on the *viewport*: an 800px container showed `.sf-grid-cols-3` as 3 columns at a 500px viewport but 1 column at 1200px+. `rem` resolves against the fixed root (`html` stays 16px; fluid type is applied to `body`), restoring the documented "responds to its own container width, not the viewport" contract. Thresholds are unchanged numerically (30rem = 480px, 48rem = 768px) and still honour user zoom / root-font-size. Also corrects `docs/architecture.md`, which wrongly listed `.sf-grid` / `.sf-sidebar` as `@container` primitives (both are intrinsic and carry no container query).

configurator/src/data/api-index.generated.json

@@ -2,7 +2,7 @@
   "_sync": {
     "generatedBy": "configurator/scripts/sync-api.mjs",
     "source": "docs/api-index.json",
-    "tokensHash": "5c5b69ba4fa3",
+    "tokensHash": "fb3441987ce7",
     "bundles": [
       "full",
       "optimal"
@@ -3727,7 +3727,7 @@
       "group": "Status triplets",
       "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.",
       "note": "Light danger tint for error row backgrounds and alert container fills.",
-      "value": "oklch(from var(--sf-color-danger) l c h / 0.1)",
+      "value": "oklch(from var(--sf-color-danger) l c h / 0.12)",
       "aliasOf": null,
       "registered": false,
       "syntax": null,
@@ -3916,7 +3916,7 @@
       "group": "Status triplets",
       "description": "Three-shade status triplets (subtle / muted / strong) for each status role. Use subtle for backgrounds, muted for fills, strong for text on light surfaces.",
       "note": "Light info tint for informational note backgrounds.",
-      "value": "oklch(from var(--sf-color-info) l c h / 0.1)",
+      "value": "oklch(from var(--sf-color-info) l c h / 0.12)",
       "aliasOf": null,
       "registered": false,
       "syntax": null,

core/tokens.css

@@ -608,11 +608,11 @@
       --sf-color-warning-muted:  oklch(from var(--sf-color-warning) l c h / 0.3);
       --sf-color-warning-tint:   oklch(from var(--sf-color-warning) l c h / 0.05);
 
-      --sf-color-info-subtle:    oklch(from var(--sf-color-info) l c h / 0.1);
+      --sf-color-info-subtle:    oklch(from var(--sf-color-info) l c h / 0.12);
       --sf-color-info-muted:     oklch(from var(--sf-color-info) l c h / 0.3);
       --sf-color-info-tint:      oklch(from var(--sf-color-info) l c h / 0.05);
 
-      --sf-color-danger-subtle:  oklch(from var(--sf-color-danger) l c h / 0.1);
+      --sf-color-danger-subtle:  oklch(from var(--sf-color-danger) l c h / 0.12);
       --sf-color-danger-muted:   oklch(from var(--sf-color-danger) l c h / 0.3);
       --sf-color-danger-tint:    oklch(from var(--sf-color-danger) l c h / 0.05);
 

dist/css-custom-data.json

@@ -893,7 +893,7 @@
     },
     {
       "name": "--sf-color-danger-subtle",
-      "description": "Light danger tint for error row backgrounds and alert container fills.\n\nDefault: `oklch(from var(--sf-color-danger) l c h / 0.1)`",
+      "description": "Light danger tint for error row backgrounds and alert container fills.\n\nDefault: `oklch(from var(--sf-color-danger) l c h / 0.12)`",
       "syntax": "*"
     },
     {
@@ -938,7 +938,7 @@
     },
     {
       "name": "--sf-color-info-subtle",
-      "description": "Light info tint for informational note backgrounds.\n\nDefault: `oklch(from var(--sf-color-info) l c h / 0.1)`",
+      "description": "Light info tint for informational note backgrounds.\n\nDefault: `oklch(from var(--sf-color-info) l c h / 0.12)`",
       "syntax": "*"
     },
     {

docs/api-index.json

@@ -4684,7 +4684,7 @@
       "area": "core",
       "group": "Status triplets",
       "description": "Light danger tint for error row backgrounds and alert container fills.",
-      "value": "oklch(from var(--sf-color-danger) l c h / 0.1)",
+      "value": "oklch(from var(--sf-color-danger) l c h / 0.12)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,
@@ -4918,7 +4918,7 @@
       "area": "core",
       "group": "Status triplets",
       "description": "Light info tint for informational note backgrounds.",
-      "value": "oklch(from var(--sf-color-info) l c h / 0.1)",
+      "value": "oklch(from var(--sf-color-info) l c h / 0.12)",
       "aliasOf": null,
       "registered": false,
       "animatable": false,

docs/api-index.md

@@ -188,7 +188,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-danger-source-dark` | PUBLIC | knob | color | `oklch(0.71 0.198 12)` | Registered <color> dark counterpart of --sf-color-danger. |
 | `--sf-color-danger-source-light` | PUBLIC | knob | color | `oklch(0.48 0.22 12)` | OKLCH lightness source for the danger status color (covers destructive actions and form validation errors). |
 | `--sf-color-danger-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )` | High-contrast danger color for alert body text and icons. |
-| `--sf-color-danger-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.1)` | Light danger tint for error row backgrounds and alert container fills. |
+| `--sf-color-danger-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.12)` | Light danger tint for error row backgrounds and alert container fills. |
 | `--sf-color-danger-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-danger) l c h / 0.05)` | Near-transparent danger tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
 | `--sf-color-dim` | PUBLIC | knob | color | `oklch(0 0 0 / 0.5)` | Backdrop overlay color for modals, drawers, and lightboxes. |
 | `--sf-color-heading` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` | Heading text color. Slightly stronger contrast than body text for visual hierarchy. |
@@ -197,7 +197,7 @@ and a short description. The machine-readable companion (with all columns) is
 | `--sf-color-info-source-dark` | PUBLIC | knob | color | `oklch(0.71 0.162 235)` | Registered <color> dark counterpart of --sf-color-info. |
 | `--sf-color-info-source-light` | PUBLIC | knob | color | `oklch(0.48 0.18 235)` | OKLCH lightness source for the info status color. |
 | `--sf-color-info-strong` | PUBLIC | consumption | color | `light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )` | High-contrast info color for hint body text. |
-| `--sf-color-info-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.1)` | Light info tint for informational note backgrounds. |
+| `--sf-color-info-subtle` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.12)` | Light info tint for informational note backgrounds. |
 | `--sf-color-info-tint` | PUBLIC | consumption | color | `oklch(from var(--sf-color-info) l c h / 0.05)` | Near-transparent info tint (5% alpha) for hover-state washes and the most subtle backgrounds. |
 | `--sf-color-inset` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(l - 0.02) c h)` | Slightly inset surface for nested areas — inputs, code blocks, sidebar panels. |
 | `--sf-color-inverse` | PUBLIC | consumption | color | `oklch(from var(--sf-color-base) calc(1 - l) c h)` | Inverted (dark-on-light / light-on-dark) surface for high-contrast banners or tooltips. |

docs/token-index.json

@@ -1451,7 +1451,7 @@
       "files": [
         "core/tokens.css"
       ],
-      "value": "oklch(from var(--sf-color-danger) l c h / 0.1)"
+      "value": "oklch(from var(--sf-color-danger) l c h / 0.12)"
     },
     "--sf-color-danger-tint": {
       "tier": "PUBLIC",
@@ -1523,7 +1523,7 @@
       "files": [
         "core/tokens.css"
       ],
-      "value": "oklch(from var(--sf-color-info) l c h / 0.1)"
+      "value": "oklch(from var(--sf-color-info) l c h / 0.12)"
     },
     "--sf-color-info-tint": {
       "tier": "PUBLIC",

docs/token-index.md

@@ -266,7 +266,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-color-danger-source-dark` | PUBLIC | knob | Core | `oklch(0.71 0.198 12) (registered)` |
 | `--sf-color-danger-source-light` | PUBLIC | knob | Core | `oklch(0.48 0.22 12)` |
 | `--sf-color-danger-strong` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )` |
-| `--sf-color-danger-subtle` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-danger) l c h / 0.1)` |
+| `--sf-color-danger-subtle` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-danger) l c h / 0.12)` |
 | `--sf-color-danger-tint` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-danger) l c h / 0.05)` |
 | `--sf-color-dim` | PUBLIC | knob | Core | `oklch(0 0 0 / 0.5)` |
 | `--sf-color-heading` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` |
@@ -275,7 +275,7 @@ declared value (a value that references `var(--sf-…)` is a derived output):
 | `--sf-color-info-source-dark` | PUBLIC | knob | Core | `oklch(0.71 0.162 235) (registered)` |
 | `--sf-color-info-source-light` | PUBLIC | knob | Core | `oklch(0.48 0.18 235)` |
 | `--sf-color-info-strong` | PUBLIC | consumption | Core | `light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )` |
-| `--sf-color-info-subtle` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-info) l c h / 0.1)` |
+| `--sf-color-info-subtle` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-info) l c h / 0.12)` |
 | `--sf-color-info-tint` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-info) l c h / 0.05)` |
 | `--sf-color-inset` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-base) calc(l - 0.02) c h)` |
 | `--sf-color-inverse` | PUBLIC | consumption | Core | `oklch(from var(--sf-color-base) calc(1 - l) c h)` |

docs/tokens.md

@@ -130,7 +130,7 @@ rebrand workflow.
 | `--sf-color-danger-source-dark` | `oklch(0.71 0.198 12) *(registered)*` |
 | `--sf-color-danger-source-light` | `oklch(0.48 0.22 12)` |
 | `--sf-color-danger-strong` | `light-dark( oklch(from var(--sf-color-danger-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-danger) clamp(0.70, calc(l + 0.15), 1) c h) )` |
-| `--sf-color-danger-subtle` | `oklch(from var(--sf-color-danger) l c h / 0.1)` |
+| `--sf-color-danger-subtle` | `oklch(from var(--sf-color-danger) l c h / 0.12)` |
 | `--sf-color-danger-tint` | `oklch(from var(--sf-color-danger) l c h / 0.05)` |
 | `--sf-color-dim` | `oklch(0 0 0 / 0.5)` |
 | `--sf-color-heading` | `light-dark( oklch(from var(--sf-color-neutral-source-light) clamp(0.05, calc(l - 0.4 - var(--sf-contrast-bias)), 0.35) c h), oklch(from var(--sf-color-neutral) clamp(0.70, calc(l + 0.25 + var(--sf-contrast-bias)), 1) c h) )` |
@@ -139,7 +139,7 @@ rebrand workflow.
 | `--sf-color-info-source-dark` | `oklch(0.71 0.162 235) *(registered)*` |
 | `--sf-color-info-source-light` | `oklch(0.48 0.18 235)` |
 | `--sf-color-info-strong` | `light-dark( oklch(from var(--sf-color-info-source-light) calc(l - 0.1) c h), oklch(from var(--sf-color-info) clamp(0.70, calc(l + 0.15), 1) c h) )` |
-| `--sf-color-info-subtle` | `oklch(from var(--sf-color-info) l c h / 0.1)` |
+| `--sf-color-info-subtle` | `oklch(from var(--sf-color-info) l c h / 0.12)` |
 | `--sf-color-info-tint` | `oklch(from var(--sf-color-info) l c h / 0.05)` |
 | `--sf-color-inset` | `oklch(from var(--sf-color-base) calc(l - 0.02) c h)` |
 | `--sf-color-inverse` | `oklch(from var(--sf-color-base) calc(1 - l) c h)` |

user-manual/system-kolorow.md

@@ -422,57 +422,12 @@ Te nadpisania trzymaj w warstwie `slashed.overrides`, żeby przetrwały aktualiz
 4. **Użycie `.sf-surface--inverse` na całym ciemnym pasie z kartami i formularzem.**
    → To zadanie dla `data-theme="dark"`; `.sf-surface--*` jest do pojedynczego klocka (§2).
 5. **Rampa numeryczna (`-200`) na elemencie pływającym nad nieznanym tłem.**
-   → Użyj wariantu alfa (`-subtle` / `-tint`), bo rampa jest liczona pod konkretne tło (§6).
+   → Użyj wariantu alfa (`-subtle` / `-tint`), bo krok rampy to kolor jednolity i nie wtapia się w nieznane tło (§6).
 6. **Ręczne dobieranie czerni/bieli na kolorowym tle.** → `--sf-color-text--on-*` (§7).
 
 ---
 
-## 9. Znalezione nieścisłości we frameworku
-
-Podczas pisania tej instrukcji przejrzałem źródła. Poniżej to, co warto poprawić —
-nic krytycznego, ale realne:
-
-### 9.1. Niespójna alfa w `-subtle` dla statusów  *(realna nieścisłość)*
-
-W `core/tokens.css` (blok „Status triplets”) warianty `-subtle` nie mają jednej alfy:
-
-```css
---sf-color-success-subtle: … / 0.12;
---sf-color-warning-subtle: … / 0.12;
---sf-color-info-subtle:    … / 0.1;   /* ← 10%, nie 12% */
---sf-color-danger-subtle:  … / 0.1;   /* ← 10%, nie 12% */
-```
-
-`success` i `warning` mają 12%, a `info` i `danger` 10% — mimo że siedzą pod tym
-samym komentarzem „triplet” i pełnią tę samą rolę (tło alertu). Dokumentacja
-(`user-manual/colors.md`) opisuje je zbiorczo jako „~12% alpha”. Efekt: pudełko
-alertu błędu (`danger`) będzie odrobinę bledsze niż sukcesu przy tej samej treści.
-**Sugestia:** ujednolicić wszystkie cztery do `0.12` (albo świadomie udokumentować
-różnicę). `-muted` (0.3) i `-tint` (0.05) są już spójne we wszystkich czterech.
-
-### 9.2. Kolizja nazwy `-subtle` między marką a statusami  *(pułapka, nie błąd)*
-
-W rampach marki alias `-subtle` = `-a10` = **10%** krycia. W statusach `-subtle`
-(dla success/warning) = **12%**. Ta sama końcówka nazwy, inna nieprzezroczystość.
-Nie jest to błąd, ale łatwo o pomyłkę, gdy myślisz „subtle to zawsze 10%”. Warte
-zdania w dokumentacji.
-
-### 9.3. Degradacja `.sf-surface--*` na starych silnikach  *(świadoma, warto wiedzieć)*
-
-Auto-kontrast wnętrza powierzchni (przepisanie `--sf-color-heading`,
-`--sf-color-link`, obramowań itd. na kolor kontrastowy) siedzi w bloku
-`@supports (color: oklch(from red l c h))` w `core/macros.css`. Reguła bazowa
-poza tym blokiem ustawia tylko `color` na samej płycie (przez `--sf-color-text--on-*`),
-ale **nie** przemapowuje tokenów potomków. Na silnikach bez relatywnego `oklch`
-(Chrome < 119, Safari < 16.4, Firefox < 128) nagłówek lub link *wewnątrz*
-`.sf-surface--primary` może wziąć ciemne tokeny strony i słabo kontrastować z
-kolorowym tłem. To celowa, udokumentowana degradacja — ale jeśli wspierasz stare
-przeglądarki i wkładasz nagłówki/linki do kolorowych płyt, przetestuj to albo
-przypnij kolory jawnie w `slashed.overrides`.
-
----
-
-## 10. Ściąga „potrzebuję…”
+## 9. Ściąga „potrzebuję…”
 
 | Potrzebuję… | Sięgam po |
 |---|---|