sheleg-design-skill 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -4,6 +4,58 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.22.0] - 2026-08-13
+
+The palette gate learns two colour forms it had been refusing, and the refusal turns
+out to have been the reason eight token layers restate a token's channels by hand.
+
+### Added
+
+- **`color-mix()` and relative colour are computable, so they are no longer banned.**
+  The gate parses `color-mix(in srgb | srgb-linear | oklab | oklch, A p%, B q%)` —
+  premultiplied, shorter hue arc — and `rgb(from <colour> r g b / a)`, with `var()`
+  now resolved **inside** a value rather than only as a whole value. Verified against
+  Chrome 151's own computed values across eleven cases at a **worst ΔE of 0.004**,
+  which is the browser's six-digit serialisation rather than a disagreement.
+- **Four self-test plants, two of which prove the new paths are checked rather than
+  tolerated.** A `color-mix()` and a relative colour whose ink misses AA must fail on
+  the *ratio* — only possible if the parser really computed them. The other two prove
+  the refusals still refuse: an unimplemented mix space, and a `calc()` inside a
+  channel. Half-implemented CSS maths is worse than an honest refusal.
+- **Rule 5 in the pack skeleton** replaces the ban with the limits and one migration
+  rule: relative colour is Baseline 2024, so where a token feeds an
+  accessibility-critical property — a focus ring above all — the literal ships first
+  and the derived value second, because a dropped declaration on a focus ring is an
+  invisible focus indicator.
+- **`docs/audit/2026-08-13-modern-css-audit.md`** — the whole measurement: what the
+  library is ahead on (OKLab dichromacy checks, `color-scheme` in 16/16,
+  `text-wrap: balance` in 13/16 kits, `tabular-nums` in 10/16), what is a deliberate
+  position rather than a gap, and ten findings with counts.
+
+### Fixed
+
+- **`showroom`'s focus ring now tracks its accent.** `rgba(38, 109, 240, 0.35)` was
+  the accent's channels written out by hand; it is now
+  `rgb(from var(--accent) r g b / 0.35)`, measured **ΔE 0.00** from the literal, with
+  the literal kept as the preceding declaration. Re-tinting `--accent` used to leave
+  the ring on the old blue silently — the live mechanism behind B-023/B-024.
+- **A blind spot closed in the same commit that opened its cause.** `themes()` decided
+  whether a block was a theme by testing for a `#` or an `oklch(` prefix, so a dark
+  theme written in `color-mix()` would have been read as "overrides no colour" and
+  skipped entirely. It asks `COLOR_SHAPED` now.
+
+### Notes
+
+- **The migration itself is not in this release.** 42 declarations across eight token
+  layers are ΔE 0.00 from a token in their own file and could migrate with no visible
+  change; 13 more sit within ΔE 2 without equalling one, and *near is not drift* — a
+  white at 80% beside an off-white field may be deliberately white. The first set is
+  B-027 and needs a per-property support decision; the second is B-028 and needs its
+  author, not a script.
+- Also filed: B-029 (container queries in the kits — 0 of 16, against 7 viewport
+  blocks), B-030 (`text-box-trim`, measure in `ch`, metric-matched fallbacks,
+  `@property`, fluid spacing), B-031 (a DTCG export for the Figma seam).
+
 ## [1.21.0] - 2026-08-12
 
 A sixteenth style pack, whose eleven pastel hues are a filing scheme rather than a

package/kits/showroom/src/styles.css

@@ -73,7 +73,18 @@
     0 8px 16px -4px rgba(28, 29, 31, 0.04),
     0 16px 32px -8px rgba(28, 29, 31, 0.05),
     0 32px 64px -8px rgba(28, 29, 31, 0.06);
+  /* The ring is the accent at 35%, and it now says so instead of restating the
+     accent's channels by hand. Measured equal: rgba(38, 109, 240, 0.35) and
+     `rgb(from var(--accent) r g b / .35)` are ΔE 0.00 apart, so nothing a reader
+     sees changes — what changes is that re-tinting --accent now re-tints the ring,
+     where before it kept the old blue silently (board B-023/B-024).
+     The literal stays as the first declaration on purpose: relative colour is
+     Baseline 2024, and a browser that does not parse the second line keeps the
+     first. For an ordinary colour that would be belt-and-braces; for a FOCUS RING
+     a dropped declaration is an invisible focus indicator, which is the one
+     degradation this library may not ship. */
   --ring-focus: 0 0 0 3px rgba(38, 109, 240, 0.35);
+  --ring-focus: 0 0 0 3px rgb(from var(--accent) r g b / 0.35);
 
   /* ---- Radii ------------------------------------------------------------ */
   --radius-xs: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, a motion doctrine that decides whether to animate before it decides how, three calibration dials, and sixteen locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage and pigeonhole. Colour, slop and fork-reciprocity gates run as scripts, not opinions. Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
   "bin": {
     "sheleg-design-skill": "bin/cli.js"

package/plugins/sheleg-design/.claude-plugin/plugin.json

@@ -2,7 +2,7 @@
   "name": "sheleg-design",
   "displayName": "SHELEG Design",
   "description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and sixteen pluggable visual style packs — instrument-console (dark console), editorial-luxury (warm editorial), workbench (light/dark product UI for dashboards and tools), briefing-room (dark 16:9 deck), atrium (warm consumer health), orchard (friendly consumer biotech), field-notes (warm paper for dev tools sold on auditability), cyclorama (a pastel field on a 32s cycle), showroom (the product as the exhibit), blueprint (a drawing sheet, zero radius), prism (one iridescent wash over mono body), maquette (cream axonometric models on a dark table), scoreboard (warm paper, pixel numerals, a dark ledger of results), datasheet (an off-white spec sheet whose live instrument goes dark when it detects the reader is hiding), manpage (a developer landing page set in the reader's own system monospace on cream paper, with coral label chips that are real headings and a dark code frame as the argument), pigeonhole (a white sorting wall whose nine pastel categories are a filing scheme rather than a mood, each a two-layer chip whose label word is mandatory). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, style packs with ready-made token CSS, and the /sheleg-design command.",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "author": {
     "name": "ssheleg",
     "url": "https://x.com/sshlg93"

package/plugins/sheleg-design/skills/sheleg-design/SKILL.md

@@ -3,7 +3,7 @@ name: sheleg-design
 description: Use when building or upgrading a cinematic scroll-driven landing page, marketing site or hero (particle/WebGL background, scroll-linked animation, parallax, scrubbed sections) — when such a page feels busy or janky or its motion layers drift out of sync — or when styling product UI with its style packs - dashboards, admin panels, internal/dev tools, mobile app screens, design tokens, light/dark themes - or when carrying a visual system across the Figma border (publishing tokens as variables, implementing a design without importing raw values). Triggers - "cinematic landing" / "кинематографичный лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables / figma to code" / "переменные фигмы, фигма в код", "chat/agent UI" / "интерфейс чата или агента", "streaming output" / "стриминг ответа", "mobile screen" / "мобильный экран".
 license: MIT
 metadata:
-  version: 1.21.0
+  version: 1.22.0
 ---
 
 # SHELEG Design

package/plugins/sheleg-design/skills/sheleg-design/styles/STYLE_PACK_TEMPLATE.md

@@ -48,9 +48,36 @@ and no clone.
    you state recomputed from your token layer, plus OKLab separation under
    protanopia / deuteranopia / tritanopia), and slop lint (the skill obeying its
    own bans). Two consequences while authoring: the palette gate cannot compute
-   a value it cannot parse, so keep `color-mix()` and `lab()` out of the token
-   layer; and a markdown link from your pack to another must be reciprocated, so
-   do not fork against a pack you are not also editing.
+   a value it cannot parse, so a colour it cannot read is a **failure** rather
+   than a skip (see rule 5 for what it can read now); and a markdown link from
+   your pack to another must be reciprocated, so do not fork against a pack you
+   are not also editing.
+5. **Derive a colour from a token instead of restating its channels.** Until
+   1.22.0 this rule was the opposite one — `color-mix()` was banned from the token
+   layer — and the reason was never a design position, it was the gate's parser.
+   It parses both now, verified against Chrome's own computed values across eleven
+   cases at a worst ΔE of 0.004:
+
+   - `color-mix(in srgb | srgb-linear | oklab | oklch, A p%, B q%)` — premultiplied,
+     shorter hue arc in the polar space. **Any other space still fails**, because
+     mixing in `srgb` and mixing in `oklab` give visibly different midpoints and a
+     gate that guessed would certify a colour nobody rendered.
+   - `rgb(from <colour> r g b / a)` — the alpha-variant form. `oklch(from …)` and a
+     `calc()` inside a channel still fail: half-implemented CSS maths is worse than
+     an honest refusal.
+   - `var()` now resolves **inside** a value, so `rgb(from var(--accent) r g b / .35)`
+     is readable by the gate.
+
+   Why it matters: 42 declarations across eight shipped token layers restate a
+   token's channels by hand, and a hand-derived literal stops tracking its source
+   the moment either one moves — which is the live defect behind board B-023/B-024.
+   `showroom`'s focus ring is the worked example.
+
+   **One rule when you migrate.** Relative colour is Baseline 2024, so a browser
+   that cannot parse it drops the declaration. Where the token feeds an
+   accessibility-critical property — a focus ring above all — ship the literal
+   first and the derived value second, so the old browser keeps the literal. For
+   an ordinary decorative tint the derived value alone is fine.
 
 ## Register
 

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/showroom.css

@@ -73,7 +73,18 @@
     0 8px 16px -4px rgba(28, 29, 31, 0.04),
     0 16px 32px -8px rgba(28, 29, 31, 0.05),
     0 32px 64px -8px rgba(28, 29, 31, 0.06);
+  /* The ring is the accent at 35%, and it now says so instead of restating the
+     accent's channels by hand. Measured equal: rgba(38, 109, 240, 0.35) and
+     `rgb(from var(--accent) r g b / .35)` are ΔE 0.00 apart, so nothing a reader
+     sees changes — what changes is that re-tinting --accent now re-tints the ring,
+     where before it kept the old blue silently (board B-023/B-024).
+     The literal stays as the first declaration on purpose: relative colour is
+     Baseline 2024, and a browser that does not parse the second line keeps the
+     first. For an ordinary colour that would be belt-and-braces; for a FOCUS RING
+     a dropped declaration is an invisible focus indicator, which is the one
+     degradation this library may not ship. */
   --ring-focus: 0 0 0 3px rgba(38, 109, 240, 0.35);
+  --ring-focus: 0 0 0 3px rgb(from var(--accent) r g b / 0.35);
 
   /* ---- Radii ------------------------------------------------------------ */
   --radius-xs: 2px;