From 62815cb485389ac2f0e8062c9b36513e0369369a Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 3 Jul 2026 01:22:01 +0200 Subject: [PATCH] =?UTF-8?q?feat(eidos):=20C6=20=E2=80=94=20universal=20pal?= =?UTF-8?q?ette=20cascade=20moves=20into=20the=20generator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit palette-{slot} is now RESERVED recipe vocabulary: normalizeRecipeTokens (render-css) appends the full per-scale color:{scale} cascade for every donor scale in PALETTE_SCALES to any token named palette-track/element/ border/solid/solid-hover/text/contrast — author-declared color:* declarations win, only absent scales are appended. This is the structural end of the hand-maintained-subset era: a recipe opts into the per-instance palette by naming the token, and the generator guarantees all scales (the 31-vs-33 drift class cannot recur at this layer). Applies to app-config recipes too, since the hook sits where every RecipeTokenSet is normalized. Button's seven manual spreads are gone from base.ts (the helpers moved into the generator); its generated output is byte-identical. Toggle — which already exposed palette-* tokens — universalized itself: +330 generated lines, and / color="steel" verified resolving in a live browser (steel and fuchsia are exactly the two scales the hand-kept lists used to miss). eidos-lint now classifies donor-scale values on data-color as sanctioned eidos-only vocabulary (the TSC color:* axis extension) instead of invalid — the morfo enum keeps declaring the semantic roles, per the pilot's deliberate runtime-open design. Guard: recipe-css-contract pins the LAST scale of PALETTE_SCALES for every palette-bearing recipe in the generated css. Also: the stale '31 physical color scales' test TITLE says 33 (its body already asserted 33). Recorded in the plan: the eidos suite carries 15 pre-existing failures in 6 files (baselined against HEAD before this change) — their triage is its own batch. npm run check at the 61-error baseline; lint toggle baseline green again. Co-Authored-By: Claude Fable 5 --- docs/process/PLAN-component-coherence.md | 12 +- src/uix/eidos/active-eidos-config.test.ts | 2 +- src/uix/eidos/generated/base.css | 330 ++++++++++++++++++++++ src/uix/eidos/lib/recipes/base.ts | 67 +---- src/uix/eidos/lib/render-css.ts | 60 +++- src/uix/eidos/lint.ts | 10 + src/uix/eidos/recipe-css-contract.test.ts | 31 +- 7 files changed, 452 insertions(+), 60 deletions(-) diff --git a/docs/process/PLAN-component-coherence.md b/docs/process/PLAN-component-coherence.md index de9acbdb7..b41f81d85 100644 --- a/docs/process/PLAN-component-coherence.md +++ b/docs/process/PLAN-component-coherence.md @@ -42,7 +42,7 @@ Por dimensión: | **C3** | **R-2.7 tipografía literal HECHA 2026-07-03** — 16 recipes: 8 font-weights → `var(--font-weight-*)` (verificado resolve=500 en navegador); ~13 proporcionales/identidad anotados `/* literal: */` con razón (avatar ∝ diámetro; `calc(1em − (md−sm))` = label one-step-down con delta token-derived; `1em` identidad de contexto; captions ×0.85; optical −1px) | **HECHA** | | **C4** | **A-1.4 APG HECHA 2026-07-03** — 20 morfos con patrón real (pickers/command/search→combobox · date-field→spinbutton espejo de time-field · rating→radio · nav-menu→disclosure · splitter→windowsplitter · tag-group/tags-input/virtual-grid→grid · file-upload/clipboard→button · announce→alert · form→landmark · image-adjustments→slider · table→table); válvula A-1.4 + notas en 5 READMEs (cropper·pagination·stepper·timeline·image-picker — sin patrón APG real). Restan 4 esperados: card/drag-drop/virtual-list (nota aterriza con su README en C8) + media-player (foráneo) | **HECHA** | | **C5** | **Sema `expression:` HECHA 2026-07-03** — los 30 morfos eventful sin declaración TODOS tienen pack en `sema/components/` → `expression: 'pack'` (clasificación sin ambigüedad; D.4). `morfo:vocabulary` limpio (solo warn naming de media-player, foráneo). `persistence`/`a11ySemantic` adicionales NO añadidos de oficio — la tabla D.9 es referencia y los 6 consumidores reales ya declaran; ampliar solo con caso real | **HECHA** | -| **C6** | **Paleta universal** — `paletteScaleDecls` pasa de helper manual (7 usos) a paso del generador para toda recipe con tokens `palette-*` + regen + guard ("data-color sin cascade de paleta = error") | pendiente | +| **C6** | **Paleta universal HECHA 2026-07-03** — `universalPaletteDecls` en el generador (`normalizeRecipeTokens`): `palette-{slot}` = vocabulario reservado → cascade de PALETTE_SCALES completo automático (declaraciones de autor ganan; solo se añaden escalas ausentes). Spreads manuales de button retirados (base.ts); button regenera byte-idéntico; **toggle se universalizó solo** (+330 líneas generadas — ya exponía tokens palette-*). Lint: valores de escala en `data-color` = eidos-only sancionado (la enum del morfo sigue siendo los roles). Guard: test en recipe-css-contract fija la ÚLTIMA escala de la const. Verificado en navegador: toggle color=teal/steel resuelven | **HECHA** | | **C7** | **Size-bundle sweep** (~90 recipes; patrón theming/reference §5, pilot toggle) + guard "recipe que re-declara size→font = warn" | pendiente | | **C8** | **READMEs** — 28 nuevos + F-1.x incompletos (~18). Baseline/Comparativa (≥3 refs reales)/Decisiones/Gaps; passive → justificación. El más pesado: requiere investigación por componente | pendiente | | **C9** | **Motion eventful gap** — decidir qué interactivos deben expresar firma de evento (hoy 10) y cablearla; criterio: alta frecuencia = sobrio (doctrina D.5) | pendiente | @@ -51,6 +51,16 @@ Por dimensión: FASE SIGUIENTE (no aquí): ficha canónica generada por componente, demos v3 (D-*), web de docs. Ver conversación 2026-07-02. +## Hallazgo (fuera de fase, registrado 2026-07-03) + +La suite eidos tiene **15 fallos preexistentes** en 6 archivos (verificado +contra HEAD sin C6): create-icon (1) · component-api-contract (3) · +recipe-css-contract (3: "declares every public component variable" · "raw +colors" · "orphaned") · lint (2: morfo-file coverage · dialog drift-detector) +· active-eidos-config (4) · active-eidos (2). Necesita su propia tanda de +triage — NO se tocó aquí salvo el título stale "31 scales"→33 (el cuerpo ya +afirmaba 33; su fallo es otra causa). + ## Verificación de cierre de fase `npm run component:audit` → 0 BROKEN, NEEDS-WORK solo por reglas D-* (demos, diff --git a/src/uix/eidos/active-eidos-config.test.ts b/src/uix/eidos/active-eidos-config.test.ts index 7e5c4c60a..d5cff875a 100644 --- a/src/uix/eidos/active-eidos-config.test.ts +++ b/src/uix/eidos/active-eidos-config.test.ts @@ -122,7 +122,7 @@ describe('ActiveEidos config', () => { ]) }) - it('ships a base theme pair with 31 physical color scales of 12 steps', () => { + it('ships a base theme pair with 33 physical color scales of 12 steps', () => { const eidos = createThemeBaseEidos() expect(eidos.validate()).toEqual({ ok: true, issues: [] }) diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 69c8a08e5..97573fe86 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -4746,6 +4746,336 @@ --toggle-palette-contrast: var(--toggle-threat-contrast); } +[data-toggle][data-color='gray'] { + --toggle-palette-track: var(--scale-gray-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-gray-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-gray-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-gray-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-gray-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-gray-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='slate'] { + --toggle-palette-track: var(--scale-slate-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-slate-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-slate-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-slate-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-slate-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-slate-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='blue'] { + --toggle-palette-track: var(--scale-blue-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-blue-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-blue-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-blue-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-blue-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-blue-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='cyan'] { + --toggle-palette-track: var(--scale-cyan-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-cyan-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-cyan-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-cyan-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-cyan-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-cyan-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='teal'] { + --toggle-palette-track: var(--scale-teal-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-teal-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-teal-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-teal-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-teal-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-teal-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='green'] { + --toggle-palette-track: var(--scale-green-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-green-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-green-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-green-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-green-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-green-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='yellow'] { + --toggle-palette-track: var(--scale-yellow-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-yellow-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-yellow-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-yellow-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-yellow-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-yellow-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='amber'] { + --toggle-palette-track: var(--scale-amber-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-amber-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-amber-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-amber-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-amber-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-amber-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='orange'] { + --toggle-palette-track: var(--scale-orange-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-orange-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-orange-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-orange-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-orange-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-orange-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='red'] { + --toggle-palette-track: var(--scale-red-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-red-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-red-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-red-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-red-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-red-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='pink'] { + --toggle-palette-track: var(--scale-pink-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-pink-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-pink-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-pink-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-pink-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-pink-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='purple'] { + --toggle-palette-track: var(--scale-purple-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-purple-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-purple-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-purple-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-purple-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-purple-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='mauve'] { + --toggle-palette-track: var(--scale-mauve-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-mauve-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-mauve-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-mauve-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-mauve-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-mauve-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='sage'] { + --toggle-palette-track: var(--scale-sage-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-sage-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-sage-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-sage-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-sage-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-sage-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='olive'] { + --toggle-palette-track: var(--scale-olive-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-olive-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-olive-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-olive-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-olive-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-olive-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='sand'] { + --toggle-palette-track: var(--scale-sand-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-sand-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-sand-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-sand-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-sand-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-sand-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='tomato'] { + --toggle-palette-track: var(--scale-tomato-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-tomato-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-tomato-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-tomato-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-tomato-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-tomato-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='ruby'] { + --toggle-palette-track: var(--scale-ruby-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-ruby-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-ruby-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-ruby-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-ruby-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-ruby-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='crimson'] { + --toggle-palette-track: var(--scale-crimson-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-crimson-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-crimson-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-crimson-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-crimson-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-crimson-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='plum'] { + --toggle-palette-track: var(--scale-plum-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-plum-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-plum-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-plum-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-plum-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-plum-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='fuchsia'] { + --toggle-palette-track: var(--scale-fuchsia-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-fuchsia-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-fuchsia-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-fuchsia-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-fuchsia-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-fuchsia-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='violet'] { + --toggle-palette-track: var(--scale-violet-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-violet-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-violet-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-violet-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-violet-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-violet-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='iris'] { + --toggle-palette-track: var(--scale-iris-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-iris-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-iris-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-iris-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-iris-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-iris-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='indigo'] { + --toggle-palette-track: var(--scale-indigo-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-indigo-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-indigo-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-indigo-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-indigo-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-indigo-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='jade'] { + --toggle-palette-track: var(--scale-jade-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-jade-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-jade-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-jade-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-jade-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-jade-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='grass'] { + --toggle-palette-track: var(--scale-grass-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-grass-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-grass-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-grass-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-grass-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-grass-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='brown'] { + --toggle-palette-track: var(--scale-brown-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-brown-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-brown-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-brown-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-brown-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-brown-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='sky'] { + --toggle-palette-track: var(--scale-sky-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-sky-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-sky-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-sky-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-sky-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-sky-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='mint'] { + --toggle-palette-track: var(--scale-mint-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-mint-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-mint-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-mint-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-mint-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-mint-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='lime'] { + --toggle-palette-track: var(--scale-lime-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-lime-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-lime-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-lime-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-lime-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-lime-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='gold'] { + --toggle-palette-track: var(--scale-gold-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-gold-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-gold-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-gold-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-gold-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-gold-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid-contrast); +} + +[data-toggle][data-color='bronze'] { + --toggle-palette-track: var(--scale-bronze-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-bronze-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-bronze-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-bronze-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-bronze-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-bronze-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + +[data-toggle][data-color='steel'] { + --toggle-palette-track: var(--scale-steel-1, var(--color-primary-track)); + --toggle-palette-element: var(--scale-steel-3, var(--color-primary-element)); + --toggle-palette-border: var(--scale-steel-7, var(--color-primary-border)); + --toggle-palette-solid: var(--scale-steel-9, var(--color-primary-solid)); + --toggle-palette-solid-hover: var(--scale-steel-10, var(--color-primary-solid-hover)); + --toggle-palette-text: var(--scale-steel-11, var(--color-primary-text)); + --toggle-palette-contrast: var(--color-content-on-solid); +} + [data-toggle-group][data-color='primary'] [data-toggle-group-item] { --toggle-palette-track: var(--toggle-primary-track); --toggle-palette-element: var(--toggle-primary-element); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 01a7fdf1c..cc8862b6f 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -4,51 +4,13 @@ import type { RecipeTokenMultiDeclaration, RecipeTokenDeclaration } from '../config-types'; -import { PALETTE_SCALES } from '../types'; // ── Per-instance palette cascade (THEMING §25.5) ────────────────────────── // -// A component whose recipe exposes the `palette-{slot}` indirection can let an -// instance borrow ANY donor scale via `color="teal"` — a per-instance color -// override (`