From 98d6799ad07ef53afcbc4d2bf008bd6e9d49fd65 Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 1 Jun 2026 23:05:08 +0200 Subject: [PATCH] Theming: generate alpha scales via compositing inverse (P1-1) Replace the synthetic step-9-at-opacity alpha ramp with a real compositing inverse: each --scale-X-aN is the translucent color that, painted over the scale's background (white for light scales, black for dark, by step-1 luminance), reproduces the opaque solid step N (Radix model). Computed in render-css.ts for ANY theme (base + custom), so alpha is consistent-by-construction with the solid scale and cannot drift. alphaScales opt-in still wins verbatim; non-hex solids fall back to the legacy color-mix ramp. Verified: --scale-purple-a9 = rgb(92 0 173 / 0.6941) over white = #8e4ec6. Co-Authored-By: Claude Opus 4.8 --- src/uix/eidos/THEMING_AUDIT_2026-06-01.md | 4 +- src/uix/eidos/active-eidos-config.test.ts | 7 +- src/uix/eidos/generated/base.css | 576 +++++++++++----------- src/uix/eidos/lib/render-css.ts | 102 ++-- 4 files changed, 368 insertions(+), 321 deletions(-) diff --git a/src/uix/eidos/THEMING_AUDIT_2026-06-01.md b/src/uix/eidos/THEMING_AUDIT_2026-06-01.md index adce2cf56..462af3f27 100644 --- a/src/uix/eidos/THEMING_AUDIT_2026-06-01.md +++ b/src/uix/eidos/THEMING_AUDIT_2026-06-01.md @@ -44,11 +44,11 @@ definiciones vs referencias). Orden de prioridad para empezar a resolver. ## P1 — Correctitud / cobertura -### ✅ P1-1 · Las alpha scales no se autoran — se fabrican desde el step 9 en sRGB *(reframe + documentado; generador diferido)* +### ✅ P1-1 · Las alpha scales no se autoran — se fabrican desde el step 9 en sRGB *(resuelto: generador compositing-inverse)* - `themes/base.ts:28-368` define escalas sólidas; **sin `alphaScales`**. `render-css.ts:1336-1346`: cada `--scale-*-a{n}` = `color-mix(in srgb, var(--scale-*-9) {pct}, transparent)`. - Derivar las 12 alfas de un único step (9) da una rampa monocroma que no sigue la progresión de luminosidad de la escala sólida → a1–a4 sobre superficie clara se ven como tinte del step-9, no como el tinte cercano-a-superficie esperado. **Mina el plan §22-#2 "surface vía alpha"** (las alfas que lo arreglarían son de baja fidelidad). - **Fix**: autorar `alphaScales` reales por paso (Radix las trae), o documentar que la alfa es sintética. -- **✅ Hecho** (reframe + documentación): **hallazgo clave — ningún recipe/componente consume los alpha steps hoy** (solo un test + el README; emitidos para uso futuro). La síntesis (hue del step-9 a 12 niveles de opacidad) es un ramp *acento-a-opacidad* **válido** como default, no un bug — lo que no es es una reproducción Radix de la escala sólida. Documentado el modelo + el límite + el opt-in `alphaScales` (ya cableado en `render-css.ts:1340`, con test) en un comentario del propio `appendColorAlphaScaleDeclarations`. **Diferido a propósito**: el generador compositing-inverse (alpha que reproduce la sólida para toda escala automáticamente) hasta que el alpha se consuma de verdad — así se diseña la fidelidad contra uso real, no especulativamente para tokens inertes. +- **✅ Hecho** (generador, no diferido): el alpha ahora se **genera** como la inversa de composición de cada step sólido sobre el fondo de la escala (blanco para escalas claras / negro para oscuras, según la luminancia del step 1): `aN` pintado sobre ese fondo **reproduce el sólido `N`** (modelo Radix). Implementado en `render-css.ts` (`parseHexColor` + `alphaColorOverBackground` + `appendColorAlphaScaleDeclarations`), **para cualquier tema** (base + custom, p.ej. untitled-ui), no solo el base — el alpha queda **consistente por construcción** con el sólido, no puede desincronizarse. Verificado en navegador: `--scale-purple-a9: rgb(92 0 173 / 0.6941)` sobre blanco = `#8e4ec6` (= purple-9); los grises salen negro/blanco puro a opacidad (modelo correcto). El opt-in `alphaScales` sigue ganando (verbatim); sólidos no-hex (`var()`) caen al ramp `color-mix` legacy. Decisión del usuario: hacerlo bien y dejarlo cerrado como parte del framework, generado para evitar/detectar inconsistencias. ### P1-2 · Tokens de densidad muertos; tipografía/iconos/radios no escalan - `render-css.ts:348,376` emite `--density-content-scale` y el maestro `--density-scale`, se redeclaran por `[data-density]`, y están en el **contrato público** (`contract.ts:257-284`) — pero **cero consumidores** (grep de `var(--density-content-scale)`/`var(--density-scale)` = 0). Solo `space` y `control-height` escalan. diff --git a/src/uix/eidos/active-eidos-config.test.ts b/src/uix/eidos/active-eidos-config.test.ts index 5fd15b0d2..fd95002bb 100644 --- a/src/uix/eidos/active-eidos-config.test.ts +++ b/src/uix/eidos/active-eidos-config.test.ts @@ -959,9 +959,10 @@ describe('ActiveEidos config', () => { expect(css).toContain(':root {') expect(css).toContain('--scale-purple-9: #8e4ec6;') - expect(css).toContain( - '--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent);' - ) + // Alpha is GENERATED as the compositing inverse of the solid step over the + // scale's background (white for light scales): rgb(92 0 173 / 0.6941) over + // white reproduces purple-9 (#8e4ec6). (audit P1-1) + expect(css).toContain('--scale-purple-a9: rgb(92 0 173 / 0.6941);') expect(css).toContain('--primitive-primary-9: var(--scale-purple-9);') expect(css).toContain('--primitive-primary-a9: var(--scale-purple-a9);') expect(css).toContain('--primitive-tertiary-9: var(--scale-gray-9);') diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 7523a7887..7cdcf3931 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -4217,18 +4217,18 @@ --scale-gray-10: #838383; --scale-gray-11: #646464; --scale-gray-12: #202020; - --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); - --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); - --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); - --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); - --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); - --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); - --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); - --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); - --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); - --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); - --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); - --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); + --scale-gray-a1: rgb(0 0 0 / 0.0118); + --scale-gray-a2: rgb(0 0 0 / 0.0235); + --scale-gray-a3: rgb(0 0 0 / 0.0588); + --scale-gray-a4: rgb(0 0 0 / 0.0902); + --scale-gray-a5: rgb(0 0 0 / 0.1216); + --scale-gray-a6: rgb(0 0 0 / 0.149); + --scale-gray-a7: rgb(0 0 0 / 0.1922); + --scale-gray-a8: rgb(0 0 0 / 0.2667); + --scale-gray-a9: rgb(0 0 0 / 0.4471); + --scale-gray-a10: rgb(0 0 0 / 0.4863); + --scale-gray-a11: rgb(0 0 0 / 0.6078); + --scale-gray-a12: rgb(0 0 0 / 0.8745); --scale-slate-1: #fcfcfd; --scale-slate-2: #f9f9fb; --scale-slate-3: #f0f0f3; @@ -4241,18 +4241,18 @@ --scale-slate-10: #80838d; --scale-slate-11: #60646c; --scale-slate-12: #1c2024; - --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); - --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); - --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); - --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); - --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); - --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); - --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); - --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); - --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); - --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); - --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); - --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); + --scale-slate-a1: rgb(0 0 85 / 0.0118); + --scale-slate-a2: rgb(0 0 85 / 0.0235); + --scale-slate-a3: rgb(0 0 51 / 0.0588); + --scale-slate-a4: rgb(0 0 44 / 0.0902); + --scale-slate-a5: rgb(0 8 49 / 0.1216); + --scale-slate-a6: rgb(0 0 47 / 0.149); + --scale-slate-a7: rgb(0 5 46 / 0.1961); + --scale-slate-a8: rgb(0 7 47 / 0.2745); + --scale-slate-a9: rgb(0 4 29 / 0.4549); + --scale-slate-a10: rgb(0 6 26 / 0.498); + --scale-slate-a11: rgb(0 6 19 / 0.6235); + --scale-slate-a12: rgb(0 4 9 / 0.8902); --scale-blue-1: #fbfdff; --scale-blue-2: #f4faff; --scale-blue-3: #e6f4fe; @@ -4265,18 +4265,18 @@ --scale-blue-10: #0588f0; --scale-blue-11: #0d74ce; --scale-blue-12: #113264; - --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); - --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); - --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); - --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); - --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); - --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); - --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); - --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); - --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); - --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); - --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); - --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); + --scale-blue-a1: rgb(0 128 255 / 0.0157); + --scale-blue-a2: rgb(0 139 255 / 0.0431); + --scale-blue-a3: rgb(0 143 245 / 0.098); + --scale-blue-a4: rgb(0 158 255 / 0.1647); + --scale-blue-a5: rgb(0 146 255 / 0.2392); + --scale-blue-a6: rgb(0 135 246 / 0.3255); + --scale-blue-a7: rgb(0 131 235 / 0.4431); + --scale-blue-a8: rgb(0 131 230 / 0.6314); + --scale-blue-a9: rgb(0 144 255 / 1); + --scale-blue-a10: rgb(0 134 240 / 0.9804); + --scale-blue-a11: rgb(0 109 203 / 0.949); + --scale-blue-a12: rgb(0 35 89 / 0.9333); --scale-cyan-1: #fafdfe; --scale-cyan-2: #f2fafb; --scale-cyan-3: #def7f9; @@ -4289,18 +4289,18 @@ --scale-cyan-10: #0797b9; --scale-cyan-11: #107d98; --scale-cyan-12: #0d3c48; - --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); - --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); - --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); - --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); - --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); - --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); - --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); - --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); - --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); - --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); - --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); - --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); + --scale-cyan-a1: rgb(0 153 204 / 0.0196); + --scale-cyan-a2: rgb(0 157 177 / 0.051); + --scale-cyan-a3: rgb(0 193 209 / 0.1294); + --scale-cyan-a4: rgb(0 188 212 / 0.2078); + --scale-cyan-a5: rgb(0 179 203 / 0.2902); + --scale-cyan-a6: rgb(0 167 193 / 0.3843); + --scale-cyan-a7: rgb(0 159 186 / 0.5098); + --scale-cyan-a8: rgb(0 163 192 / 0.7608); + --scale-cyan-a9: rgb(0 162 199 / 1); + --scale-cyan-a10: rgb(0 148 183 / 0.9725); + --scale-cyan-a11: rgb(0 116 145 / 0.9373); + --scale-cyan-a12: rgb(0 50 62 / 0.949); --scale-teal-1: #fafefd; --scale-teal-2: #f3fbf9; --scale-teal-3: #e0f8f3; @@ -4313,18 +4313,18 @@ --scale-teal-10: #0d9b8a; --scale-teal-11: #008573; --scale-teal-12: #0d3d38; - --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); - --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); - --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); - --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); - --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); - --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); - --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); - --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); - --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); - --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); - --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); - --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); + --scale-teal-a1: rgb(0 204 153 / 0.0196); + --scale-teal-a2: rgb(0 170 128 / 0.0471); + --scale-teal-a3: rgb(0 197 156 / 0.1216); + --scale-teal-a4: rgb(0 195 150 / 0.2); + --scale-teal-a5: rgb(0 180 144 / 0.2784); + --scale-teal-a6: rgb(0 165 133 / 0.3686); + --scale-teal-a7: rgb(0 152 128 / 0.4863); + --scale-teal-a8: rgb(0 151 130 / 0.6745); + --scale-teal-a9: rgb(0 158 140 / 0.9294); + --scale-teal-a10: rgb(0 150 132 / 0.949); + --scale-teal-a11: rgb(0 133 115 / 1); + --scale-teal-a12: rgb(0 51 45 / 0.949); --scale-green-1: #fbfefc; --scale-green-2: #f4fbf6; --scale-green-3: #e6f6eb; @@ -4337,18 +4337,18 @@ --scale-green-10: #2b9a66; --scale-green-11: #218358; --scale-green-12: #193b2d; - --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); - --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); - --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); - --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); - --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); - --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); - --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); - --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); - --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); - --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); - --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); - --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); + --scale-green-a1: rgb(0 191 64 / 0.0157); + --scale-green-a2: rgb(0 162 46 / 0.0431); + --scale-green-a3: rgb(0 163 51 / 0.098); + --scale-green-a4: rgb(0 168 56 / 0.1608); + --scale-green-a5: rgb(0 156 56 / 0.2314); + --scale-green-a6: rgb(0 149 59 / 0.3216); + --scale-green-a7: rgb(0 144 63 / 0.4431); + --scale-green-a8: rgb(0 146 75 / 0.6431); + --scale-green-a9: rgb(0 143 74 / 0.8118); + --scale-green-a10: rgb(0 134 71 / 0.8314); + --scale-green-a11: rgb(0 113 63 / 0.8706); + --scale-green-a12: rgb(0 38 22 / 0.902); --scale-yellow-1: #fdfdf9; --scale-yellow-2: #fffce8; --scale-yellow-3: #fffbd1; @@ -4361,18 +4361,18 @@ --scale-yellow-10: #f7ce00; --scale-yellow-11: #946800; --scale-yellow-12: #35290f; - --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); - --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); - --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); - --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); - --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); - --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); - --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); - --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); - --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); - --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); - --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); - --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); + --scale-yellow-a1: rgb(170 170 0 / 0.0235); + --scale-yellow-a2: rgb(255 222 0 / 0.0902); + --scale-yellow-a3: rgb(255 233 0 / 0.1804); + --scale-yellow-a4: rgb(255 229 0 / 0.2667); + --scale-yellow-a5: rgb(252 219 0 / 0.3569); + --scale-yellow-a6: rgb(242 200 0 / 0.451); + --scale-yellow-a7: rgb(227 179 0 / 0.5765); + --scale-yellow-a8: rgb(235 188 0 / 1); + --scale-yellow-a9: rgb(245 215 0 / 0.9608); + --scale-yellow-a10: rgb(247 206 0 / 1); + --scale-yellow-a11: rgb(148 104 0 / 1); + --scale-yellow-a12: rgb(40 28 0 / 0.9412); --scale-amber-1: #fefdfb; --scale-amber-2: #fefbe9; --scale-amber-3: #fff7c2; @@ -4385,18 +4385,18 @@ --scale-amber-10: #ffba18; --scale-amber-11: #ab6400; --scale-amber-12: #4f3422; - --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); - --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); - --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); - --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); - --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); - --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); - --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); - --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); - --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); - --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); - --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); - --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); + --scale-amber-a1: rgb(191 128 0 / 0.0157); + --scale-amber-a2: rgb(243 209 0 / 0.0863); + --scale-amber-a3: rgb(255 222 0 / 0.2392); + --scale-amber-a4: rgb(255 211 0 / 0.3882); + --scale-amber-a5: rgb(248 206 0 / 0.5333); + --scale-amber-a6: rgb(233 180 0 / 0.549); + --scale-amber-a7: rgb(219 154 0 / 0.6157); + --scale-amber-a8: rgb(218 138 0 / 0.7882); + --scale-amber-a9: rgb(255 179 0 / 0.7608); + --scale-amber-a10: rgb(255 179 0 / 0.9059); + --scale-amber-a11: rgb(171 100 0 / 1); + --scale-amber-a12: rgb(52 21 0 / 0.8667); --scale-orange-1: #fefcfb; --scale-orange-2: #fff7ed; --scale-orange-3: #ffefd6; @@ -4409,18 +4409,18 @@ --scale-orange-10: #ef5f00; --scale-orange-11: #cc4e00; --scale-orange-12: #582d1d; - --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); - --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); - --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); - --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); - --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); - --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); - --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); - --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); - --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); - --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); - --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); - --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); + --scale-orange-a1: rgb(191 64 0 / 0.0157); + --scale-orange-a2: rgb(255 142 0 / 0.0706); + --scale-orange-a3: rgb(255 155 0 / 0.1608); + --scale-orange-a4: rgb(255 145 0 / 0.2902); + --scale-orange-a5: rgb(255 139 0 / 0.3961); + --scale-orange-a6: rgb(255 129 0 / 0.4902); + --scale-orange-a7: rgb(237 107 0 / 0.549); + --scale-orange-a8: rgb(227 94 0 / 0.6667); + --scale-orange-a9: rgb(246 94 0 / 0.9176); + --scale-orange-a10: rgb(239 95 0 / 1); + --scale-orange-a11: rgb(204 78 0 / 1); + --scale-orange-a12: rgb(67 18 0 / 0.8863); --scale-red-1: #fffcfc; --scale-red-2: #fff7f7; --scale-red-3: #feebec; @@ -4433,18 +4433,18 @@ --scale-red-10: #dc3e42; --scale-red-11: #ce2c31; --scale-red-12: #641723; - --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); - --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); - --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); - --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); - --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); - --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); - --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); - --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); - --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); - --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); - --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); - --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); + --scale-red-a1: rgb(255 0 0 / 0.0118); + --scale-red-a2: rgb(255 0 0 / 0.0314); + --scale-red-a3: rgb(242 0 13 / 0.0784); + --scale-red-a4: rgb(255 0 7 / 0.1412); + --scale-red-a5: rgb(255 0 5 / 0.1961); + --scale-red-a6: rgb(247 0 4 / 0.2588); + --scale-red-a7: rgb(222 0 3 / 0.3373); + --scale-red-a8: rgb(210 0 5 / 0.4431); + --scale-red-a9: rgb(219 0 7 / 0.7176); + --scale-red-a10: rgb(209 0 5 / 0.7569); + --scale-red-a11: rgb(196 0 6 / 0.8275); + --scale-red-a12: rgb(85 0 13 / 0.9098); --scale-pink-1: #fffcfe; --scale-pink-2: #fff7fc; --scale-pink-3: #feeef8; @@ -4457,18 +4457,18 @@ --scale-pink-10: #d23197; --scale-pink-11: #cd1d8d; --scale-pink-12: #651249; - --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); - --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); - --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); - --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); - --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); - --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); - --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); - --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); - --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); - --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); - --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); - --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); + --scale-pink-a1: rgb(255 0 170 / 0.0118); + --scale-pink-a2: rgb(255 0 159 / 0.0314); + --scale-pink-a3: rgb(240 0 150 / 0.0667); + --scale-pink-a4: rgb(226 0 137 / 0.102); + --scale-pink-a5: rgb(216 0 131 / 0.1529); + --scale-pink-a6: rgb(201 0 125 / 0.2235); + --scale-pink-a7: rgb(196 0 121 / 0.3216); + --scale-pink-a8: rgb(192 0 120 / 0.4431); + --scale-pink-a9: rgb(200 0 127 / 0.749); + --scale-pink-a10: rgb(199 0 126 / 0.8078); + --scale-pink-a11: rgb(199 0 126 / 0.8863); + --scale-pink-a12: rgb(89 0 59 / 0.9294); --scale-purple-1: #fefcfe; --scale-purple-2: #fbf7fe; --scale-purple-3: #f7edfe; @@ -4481,18 +4481,18 @@ --scale-purple-10: #8347b9; --scale-purple-11: #8145b5; --scale-purple-12: #402060; - --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); - --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); - --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); - --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); - --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); - --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); - --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); - --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); - --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); - --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); - --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); - --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); + --scale-purple-a1: rgb(170 0 170 / 0.0118); + --scale-purple-a2: rgb(128 0 223 / 0.0314); + --scale-purple-a3: rgb(142 0 241 / 0.0706); + --scale-purple-a4: rgb(141 0 229 / 0.1137); + --scale-purple-a5: rgb(128 0 219 / 0.1647); + --scale-purple-a6: rgb(121 0 207 / 0.2314); + --scale-purple-a7: rgb(108 0 194 / 0.3137); + --scale-purple-a8: rgb(102 0 191 / 0.4235); + --scale-purple-a9: rgb(92 0 173 / 0.6941); + --scale-purple-a10: rgb(83 0 158 / 0.7216); + --scale-purple-a11: rgb(82 0 154 / 0.7294); + --scale-purple-a12: rgb(37 0 73 / 0.8745); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); @@ -4831,18 +4831,18 @@ --scale-gray-10: #7b7b7b; --scale-gray-11: #b4b4b4; --scale-gray-12: #eeeeee; - --scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); - --scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); - --scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); - --scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); - --scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); - --scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); - --scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); - --scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); - --scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); - --scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); - --scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); - --scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); + --scale-gray-a1: rgb(255 255 255 / 0.0667); + --scale-gray-a2: rgb(255 255 255 / 0.098); + --scale-gray-a3: rgb(255 255 255 / 0.1333); + --scale-gray-a4: rgb(255 255 255 / 0.1647); + --scale-gray-a5: rgb(255 255 255 / 0.1922); + --scale-gray-a6: rgb(255 255 255 / 0.2275); + --scale-gray-a7: rgb(255 255 255 / 0.2824); + --scale-gray-a8: rgb(255 255 255 / 0.3765); + --scale-gray-a9: rgb(255 255 255 / 0.4314); + --scale-gray-a10: rgb(255 255 255 / 0.4824); + --scale-gray-a11: rgb(255 255 255 / 0.7059); + --scale-gray-a12: rgb(255 255 255 / 0.9333); --scale-slate-1: #111113; --scale-slate-2: #18191b; --scale-slate-3: #212225; @@ -4855,18 +4855,18 @@ --scale-slate-10: #777b84; --scale-slate-11: #b0b4ba; --scale-slate-12: #edeef0; - --scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); - --scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); - --scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); - --scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); - --scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); - --scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); - --scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); - --scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); - --scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); - --scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); - --scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); - --scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); + --scale-slate-a1: rgb(228 228 255 / 0.0745); + --scale-slate-a2: rgb(227 236 255 / 0.1059); + --scale-slate-a3: rgb(227 234 255 / 0.1451); + --scale-slate-a4: rgb(221 238 255 / 0.1765); + --scale-slate-a5: rgb(221 236 255 / 0.2078); + --scale-slate-a6: rgb(219 235 255 / 0.2471); + --scale-slate-a7: rgb(219 235 255 / 0.3059); + --scale-slate-a8: rgb(219 236 255 / 0.4118); + --scale-slate-a9: rgb(225 236 255 / 0.4667); + --scale-slate-a10: rgb(230 238 255 / 0.5176); + --scale-slate-a11: rgb(241 247 255 / 0.7294); + --scale-slate-a12: rgb(252 253 255 / 0.9412); --scale-blue-1: #0d1520; --scale-blue-2: #111927; --scale-blue-3: #0d2847; @@ -4879,18 +4879,18 @@ --scale-blue-10: #3b9eff; --scale-blue-11: #70b8ff; --scale-blue-12: #c2e6ff; - --scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); - --scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); - --scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); - --scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); - --scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); - --scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); - --scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); - --scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); - --scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); - --scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); - --scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); - --scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); + --scale-blue-a1: rgb(104 167 255 / 0.1255); + --scale-blue-a2: rgb(111 163 255 / 0.1529); + --scale-blue-a3: rgb(47 144 255 / 0.2784); + --scale-blue-a4: rgb(0 133 255 / 0.3843); + --scale-blue-a5: rgb(0 141 255 / 0.4549); + --scale-blue-a6: rgb(30 145 255 / 0.5294); + --scale-blue-a7: rgb(52 150 255 / 0.6196); + --scale-blue-a8: rgb(54 151 255 / 0.7412); + --scale-blue-a9: rgb(0 144 255 / 1); + --scale-blue-a10: rgb(59 158 255 / 1); + --scale-blue-a11: rgb(112 184 255 / 1); + --scale-blue-a12: rgb(194 230 255 / 1); --scale-cyan-1: #0b161a; --scale-cyan-2: #101b20; --scale-cyan-3: #082c36; @@ -4903,18 +4903,18 @@ --scale-cyan-10: #23afd0; --scale-cyan-11: #4ccce6; --scale-cyan-12: #b6ecf7; - --scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); - --scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); - --scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); - --scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); - --scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); - --scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); - --scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); - --scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); - --scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); - --scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); - --scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); - --scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); + --scale-cyan-a1: rgb(108 216 255 / 0.102); + --scale-cyan-a2: rgb(128 215 255 / 0.1255); + --scale-cyan-a3: rgb(38 208 255 / 0.2118); + --scale-cyan-a4: rgb(0 198 255 / 0.2824); + --scale-cyan-a5: rgb(0 200 255 / 0.3451); + --scale-cyan-a6: rgb(10 206 255 / 0.4078); + --scale-cyan-a7: rgb(36 208 255 / 0.4941); + --scale-cyan-a8: rgb(28 209 255 / 0.6118); + --scale-cyan-a9: rgb(0 208 255 / 0.7804); + --scale-cyan-a10: rgb(43 215 255 / 0.8157); + --scale-cyan-a11: rgb(84 226 255 / 0.902); + --scale-cyan-a12: rgb(188 244 255 / 0.9686); --scale-teal-1: #0d1514; --scale-teal-2: #111c1b; --scale-teal-3: #0d2d2a; @@ -4927,18 +4927,18 @@ --scale-teal-10: #0eb39e; --scale-teal-11: #0bd8b6; --scale-teal-12: #adf0dd; - --scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); - --scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); - --scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); - --scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); - --scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); - --scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); - --scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); - --scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); - --scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); - --scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); - --scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); - --scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); + --scale-teal-a1: rgb(158 255 243 / 0.0824); + --scale-teal-a2: rgb(155 255 246 / 0.1098); + --scale-teal-a3: rgb(74 255 238 / 0.1765); + --scale-teal-a4: rgb(9 255 238 / 0.2314); + --scale-teal-a5: rgb(28 255 237 / 0.2824); + --scale-teal-a6: rgb(59 255 234 / 0.3412); + --scale-teal-a7: rgb(68 255 236 / 0.4118); + --scale-teal-a8: rgb(65 255 233 / 0.4941); + --scale-teal-a9: rgb(28 255 229 / 0.6471); + --scale-teal-a10: rgb(20 255 225 / 0.702); + --scale-teal-a11: rgb(13 255 215 / 0.8471); + --scale-teal-a12: rgb(184 255 235 / 0.9412); --scale-green-1: #0e1512; --scale-green-2: #121b17; --scale-green-3: #132d21; @@ -4951,18 +4951,18 @@ --scale-green-10: #33b074; --scale-green-11: #3dd68c; --scale-green-12: #b1f1cb; - --scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); - --scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); - --scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); - --scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); - --scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); - --scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); - --scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); - --scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); - --scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); - --scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); - --scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); - --scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); + --scale-green-a1: rgb(170 255 219 / 0.0824); + --scale-green-a2: rgb(170 255 217 / 0.1059); + --scale-green-a3: rgb(108 255 187 / 0.1765); + --scale-green-a4: rgb(73 255 177 / 0.2314); + --scale-green-a5: rgb(80 255 178 / 0.2863); + --scale-green-a6: rgb(94 255 182 / 0.3412); + --scale-green-a7: rgb(98 255 181 / 0.4078); + --scale-green-a8: rgb(97 255 179 / 0.4863); + --scale-green-a9: rgb(75 255 168 / 0.6431); + --scale-green-a10: rgb(74 255 168 / 0.6902); + --scale-green-a11: rgb(73 255 167 / 0.8392); + --scale-green-a12: rgb(187 255 215 / 0.9451); --scale-yellow-1: #14120b; --scale-yellow-2: #1b180f; --scale-yellow-3: #2d2305; @@ -4975,18 +4975,18 @@ --scale-yellow-10: #ffff57; --scale-yellow-11: #f5e147; --scale-yellow-12: #f6eeb4; - --scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); - --scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); - --scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); - --scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); - --scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); - --scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); - --scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); - --scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); - --scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); - --scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); - --scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); - --scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); + --scale-yellow-a1: rgb(255 230 140 / 0.0784); + --scale-yellow-a2: rgb(255 227 142 / 0.1059); + --scale-yellow-a3: rgb(255 198 28 / 0.1765); + --scale-yellow-a4: rgb(255 203 0 / 0.2118); + --scale-yellow-a5: rgb(255 202 0 / 0.2627); + --scale-yellow-a6: rgb(255 205 6 / 0.3216); + --scale-yellow-a7: rgb(255 210 58 / 0.4); + --scale-yellow-a8: rgb(255 206 64 / 0.5137); + --scale-yellow-a9: rgb(255 230 41 / 1); + --scale-yellow-a10: rgb(255 255 87 / 1); + --scale-yellow-a11: rgb(255 234 74 / 0.9608); + --scale-yellow-a12: rgb(255 247 187 / 0.9647); --scale-amber-1: #16120c; --scale-amber-2: #1d180f; --scale-amber-3: #302008; @@ -4999,18 +4999,18 @@ --scale-amber-10: #ffd60a; --scale-amber-11: #ffca16; --scale-amber-12: #ffe7b3; - --scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); - --scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); - --scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); - --scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); - --scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); - --scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); - --scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); - --scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); - --scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); - --scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); - --scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); - --scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); + --scale-amber-a1: rgb(255 209 139 / 0.0863); + --scale-amber-a2: rgb(255 211 132 / 0.1137); + --scale-amber-a3: rgb(255 170 43 / 0.1882); + --scale-amber-a4: rgb(255 158 0 / 0.2471); + --scale-amber-a5: rgb(255 159 0 / 0.302); + --scale-amber-a6: rgb(255 169 14 / 0.3608); + --scale-amber-a7: rgb(255 178 56 / 0.4431); + --scale-amber-a8: rgb(255 178 64 / 0.5608); + --scale-amber-a9: rgb(255 197 61 / 1); + --scale-amber-a10: rgb(255 214 10 / 1); + --scale-amber-a11: rgb(255 202 22 / 1); + --scale-amber-a12: rgb(255 231 179 / 1); --scale-orange-1: #17120e; --scale-orange-2: #1e160f; --scale-orange-3: #331e0b; @@ -5023,18 +5023,18 @@ --scale-orange-10: #ff801f; --scale-orange-11: #ffa057; --scale-orange-12: #ffe0c2; - --scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); - --scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); - --scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); - --scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); - --scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); - --scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); - --scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); - --scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); - --scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); - --scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); - --scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); - --scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); + --scale-orange-a1: rgb(255 200 155 / 0.0902); + --scale-orange-a2: rgb(255 187 128 / 0.1176); + --scale-orange-a3: rgb(255 150 55 / 0.2); + --scale-orange-a4: rgb(255 120 0 / 0.2745); + --scale-orange-a5: rgb(255 119 0 / 0.3373); + --scale-orange-a6: rgb(255 133 30 / 0.4); + --scale-orange-a7: rgb(255 140 59 / 0.4941); + --scale-orange-a8: rgb(255 138 64 / 0.6392); + --scale-orange-a9: rgb(255 110 22 / 0.9686); + --scale-orange-a10: rgb(255 128 31 / 1); + --scale-orange-a11: rgb(255 160 87 / 1); + --scale-orange-a12: rgb(255 224 194 / 1); --scale-red-1: #191111; --scale-red-2: #201314; --scale-red-3: #3b1219; @@ -5047,18 +5047,18 @@ --scale-red-10: #ec5d5e; --scale-red-11: #ff9592; --scale-red-12: #ffd1d9; - --scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); - --scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); - --scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); - --scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); - --scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); - --scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); - --scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); - --scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); - --scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); - --scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); - --scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); - --scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); + --scale-red-a1: rgb(255 173 173 / 0.098); + --scale-red-a2: rgb(255 151 159 / 0.1255); + --scale-red-a3: rgb(255 78 108 / 0.2314); + --scale-red-a4: rgb(255 48 89 / 0.3137); + --scale-red-a5: rgb(255 58 92 / 0.3804); + --scale-red-a6: rgb(255 78 101 / 0.4471); + --scale-red-a7: rgb(255 93 106 / 0.549); + --scale-red-a8: rgb(255 97 101 / 0.7098); + --scale-red-a9: rgb(255 80 86 / 0.898); + --scale-red-a10: rgb(255 100 102 / 0.9255); + --scale-red-a11: rgb(255 149 146 / 1); + --scale-red-a12: rgb(255 209 217 / 1); --scale-pink-1: #191117; --scale-pink-2: #21121d; --scale-pink-3: #37172f; @@ -5071,18 +5071,18 @@ --scale-pink-10: #de51a8; --scale-pink-11: #ff8dcc; --scale-pink-12: #fdd1ea; - --scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); - --scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); - --scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); - --scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); - --scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); - --scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); - --scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); - --scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); - --scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); - --scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); - --scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); - --scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); + --scale-pink-a1: rgb(255 173 235 / 0.098); + --scale-pink-a2: rgb(255 139 224 / 0.1294); + --scale-pink-a3: rgb(255 107 218 / 0.2157); + --scale-pink-a4: rgb(255 68 207 / 0.2941); + --scale-pink-a5: rgb(255 80 203 / 0.349); + --scale-pink-a6: rgb(255 100 206 / 0.4118); + --scale-pink-a7: rgb(255 109 204 / 0.5137); + --scale-pink-a8: rgb(255 109 202 / 0.6588); + --scale-pink-a9: rgb(255 76 189 / 0.8392); + --scale-pink-a10: rgb(255 93 193 / 0.8706); + --scale-pink-a11: rgb(255 141 204 / 1); + --scale-pink-a12: rgb(255 211 236 / 0.9922); --scale-purple-1: #18111b; --scale-purple-2: #1e1523; --scale-purple-3: #301c3b; @@ -5095,18 +5095,18 @@ --scale-purple-10: #9a5cd0; --scale-purple-11: #d19dff; --scale-purple-12: #ecd9fa; - --scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); - --scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); - --scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); - --scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); - --scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); - --scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); - --scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); - --scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); - --scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); - --scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); - --scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); - --scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); + --scale-purple-a1: rgb(227 161 255 / 0.1059); + --scale-purple-a2: rgb(219 153 255 / 0.1373); + --scale-purple-a3: rgb(207 121 255 / 0.2314); + --scale-purple-a4: rgb(199 111 255 / 0.3059); + --scale-purple-a5: rgb(200 114 255 / 0.3608); + --scale-purple-a6: rgb(200 124 255 / 0.4196); + --scale-purple-a7: rgb(200 129 255 / 0.5098); + --scale-purple-a8: rgb(198 131 255 / 0.6667); + --scale-purple-a9: rgb(183 100 255 / 0.7765); + --scale-purple-a10: rgb(189 113 255 / 0.8157); + --scale-purple-a11: rgb(209 157 255 / 1); + --scale-purple-a12: rgb(241 221 255 / 0.9804); --primitive-primary-1: var(--scale-purple-1); --primitive-primary-2: var(--scale-purple-2); --primitive-primary-3: var(--scale-purple-3); diff --git a/src/uix/eidos/lib/render-css.ts b/src/uix/eidos/lib/render-css.ts index c0aa04524..0e7fee3cf 100644 --- a/src/uix/eidos/lib/render-css.ts +++ b/src/uix/eidos/lib/render-css.ts @@ -272,7 +272,7 @@ export function renderThemeCss( for (const scaleName of scaleNames) { const scale = color.scales[scaleName] if (scale) appendColorScaleDeclarations(declarations, scaleName, scale) - appendColorAlphaScaleDeclarations(declarations, scaleName, color.alphaScales[scaleName]) + appendColorAlphaScaleDeclarations(declarations, scaleName, scale, color.alphaScales[scaleName]) } for (const role of COLOR_ROLES) { @@ -1328,42 +1328,88 @@ function appendColorScaleDeclarations( } } +function parseHexColor(value: string): { r: number; g: number; b: number } | null { + const text = value.trim() + if (!text.startsWith('#')) return null + const hex = text.slice(1) + let r: number, g: number, b: number + if (hex.length === 3) { + r = parseInt(hex[0] + hex[0], 16) + g = parseInt(hex[1] + hex[1], 16) + b = parseInt(hex[2] + hex[2], 16) + } else if (hex.length === 6 || hex.length === 8) { + r = parseInt(hex.slice(0, 2), 16) + g = parseInt(hex.slice(2, 4), 16) + b = parseInt(hex.slice(4, 6), 16) + } else { + return null + } + if ([r, g, b].some(Number.isNaN)) return null + return { r, g, b } +} + +/** sRGB relative luminance (0..1) — enough to pick the alpha background polarity. */ +function srgbLuminance({ r, g, b }: { r: number; g: number; b: number }): number { + return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 +} + +/** + * Compositing inverse: the translucent color that, painted over a solid + * background `bg` (255 = white, 0 = black), reproduces the opaque `solidHex`. + * Solves `solid = a·c + (1-a)·bg` for the minimum alpha `a` (max saturation), + * per channel. Returns `null` when the solid isn't a plain hex (caller keeps + * the synthetic ramp for non-hex values). + */ +function alphaColorOverBackground(solidHex: string, bg: 0 | 255): string | null { + const t = parseHexColor(solidHex) + if (!t) return null + let a = 0 + for (const c of [t.r, t.g, t.b]) { + if (c === bg) continue + const channelAlpha = bg === 255 ? (255 - c) / 255 : c / 255 + if (channelAlpha > a) a = channelAlpha + } + if (a <= 0) return `rgb(${t.r} ${t.g} ${t.b} / 0)` + const resolve = (c: number) => + Math.min(255, Math.max(0, Math.round((c - bg * (1 - a)) / a))) + const alpha = Math.round(a * 10000) / 10000 + return `rgb(${resolve(t.r)} ${resolve(t.g)} ${resolve(t.b)} / ${alpha})` +} + /** * Alpha (translucent) variants of a color scale. * - * If a theme provides explicit `alphaScales` for this scale, those values are - * used verbatim — author them when you need Radix-grade alpha that *reproduces - * the solid scale* over an arbitrary background (`aN` composited over the page - * bg ≈ solid `N`). - * - * Otherwise we synthesize: each `aN` is the scale's SOLID color (step 9) at an - * increasing opacity (`DEFAULT_COLOR_ALPHA_PERCENTAGES`). This is a deliberate - * "accent-at-opacity" ramp — one hue at 12 opacity levels — useful for - * translucent accent tints, hover washes and overlays. It is NOT a per-step - * reproduction of the solid scale (e.g. `a3` over white is a faint step-9 tint, - * not step-3). For that fidelity, provide `alphaScales`. - * - * NOTE (audit P1-1): these tokens are emitted for consumers / future use (the - * "surface via alpha" idea, §22) but no recipe consumes them today. A build-time - * compositing-inverse generator would give solid-scale-reproduction alpha for - * every scale automatically — deferred until alpha is actually consumed, so the - * fidelity can be designed against real usage rather than speculatively. + * If a theme provides explicit `alphaScales` for this scale they win (verbatim). + * Otherwise each `aN` is GENERATED as the compositing inverse of the solid step + * `N` over the scale's background polarity (white for light scales, black for + * dark — decided by step 1's luminance): `aN` painted over that background + * reproduces solid `N`. This keeps the alpha ramp consistent-by-construction + * with the solid scale (no drift, Radix-style fidelity) for every theme, not + * just the base. Non-hex solids (e.g. `var()`) fall back to the legacy + * step-9-at-opacity `color-mix` ramp. (audit P1-1) */ function appendColorAlphaScaleDeclarations( declarations: string[], scaleName: string, - scale: ColorAlphaScale | undefined + solidScale: ColorScale | undefined, + alphaScale: ColorAlphaScale | undefined ): void { + const step1 = solidScale?.['1'] + const parsedStep1 = step1 ? parseHexColor(step1) : null + const bg: 0 | 255 = parsedStep1 && srgbLuminance(parsedStep1) < 0.5 ? 0 : 255 + for (const step of COLOR_ALPHA_STEPS) { - declarations.push( - cssVar( - `scale-${scaleName}-a${step}`, - scale?.[step] ?? - `color-mix(in srgb, var(--scale-${scaleName}-9) ${ - DEFAULT_COLOR_ALPHA_PERCENTAGES[step] - }, transparent)` - ) - ) + const authored = alphaScale?.[step] + const solid = solidScale?.[step] + const computed = + authored === undefined && solid ? alphaColorOverBackground(solid, bg) : null + const value = + authored ?? + computed ?? + `color-mix(in srgb, var(--scale-${scaleName}-9) ${ + DEFAULT_COLOR_ALPHA_PERCENTAGES[step] + }, transparent)` + declarations.push(cssVar(`scale-${scaleName}-a${step}`, value)) } }