go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theming: generate alpha scales via compositing inverse (P1-1)

Browse Source 
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 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent ef9f589d4c
commit 98d6799ad0
4 changed files with 368 additions and 321 deletions
Show Stats Download Patch File Download Diff File

4
src/uix/eidos/THEMING_AUDIT_2026-06-01.md
Unescape View File

@ -44,11 +44,11 @@ definiciones vs referencias). Orden de prioridad para empezar a resolver.
## P1 — Correctitud / cobertura ## 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)`. - `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). - 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. - **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 ### 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. - `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.

7
src/uix/eidos/active-eidos-config.test.ts
Unescape View File

@ -959,9 +959,10 @@ describe('ActiveEidos config', () => {
expect(css).toContain(':root {') expect(css).toContain(':root {')
expect(css).toContain('--scale-purple-9: #8e4ec6;') expect(css).toContain('--scale-purple-9: #8e4ec6;')
expect(css).toContain( // Alpha is GENERATED as the compositing inverse of the solid step over the
'--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent);' // 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-9: var(--scale-purple-9);')
expect(css).toContain('--primitive-primary-a9: var(--scale-purple-a9);') expect(css).toContain('--primitive-primary-a9: var(--scale-purple-a9);')
expect(css).toContain('--primitive-tertiary-9: var(--scale-gray-9);') expect(css).toContain('--primitive-tertiary-9: var(--scale-gray-9);')

576
src/uix/eidos/generated/base.css
Unescape View File

@ -4217,18 +4217,18 @@
--scale-gray-10: #838383; --scale-gray-10: #838383;
--scale-gray-11: #646464; --scale-gray-11: #646464;
--scale-gray-12: #202020; --scale-gray-12: #202020;
--scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a1: rgb(0 0 0 / 0.0118);
--scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a2: rgb(0 0 0 / 0.0235);
--scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a3: rgb(0 0 0 / 0.0588);
--scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a4: rgb(0 0 0 / 0.0902);
--scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a5: rgb(0 0 0 / 0.1216);
--scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a6: rgb(0 0 0 / 0.149);
--scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a7: rgb(0 0 0 / 0.1922);
--scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a8: rgb(0 0 0 / 0.2667);
--scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a9: rgb(0 0 0 / 0.4471);
--scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a10: rgb(0 0 0 / 0.4863);
--scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a11: rgb(0 0 0 / 0.6078);
--scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-gray-a12: rgb(0 0 0 / 0.8745);
--scale-slate-1: #fcfcfd; --scale-slate-1: #fcfcfd;
--scale-slate-2: #f9f9fb; --scale-slate-2: #f9f9fb;
--scale-slate-3: #f0f0f3; --scale-slate-3: #f0f0f3;
@ -4241,18 +4241,18 @@
--scale-slate-10: #80838d; --scale-slate-10: #80838d;
--scale-slate-11: #60646c; --scale-slate-11: #60646c;
--scale-slate-12: #1c2024; --scale-slate-12: #1c2024;
--scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a1: rgb(0 0 85 / 0.0118);
--scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a2: rgb(0 0 85 / 0.0235);
--scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a3: rgb(0 0 51 / 0.0588);
--scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a4: rgb(0 0 44 / 0.0902);
--scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a5: rgb(0 8 49 / 0.1216);
--scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a6: rgb(0 0 47 / 0.149);
--scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a7: rgb(0 5 46 / 0.1961);
--scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a8: rgb(0 7 47 / 0.2745);
--scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a9: rgb(0 4 29 / 0.4549);
--scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a10: rgb(0 6 26 / 0.498);
--scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a11: rgb(0 6 19 / 0.6235);
--scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-slate-a12: rgb(0 4 9 / 0.8902);
--scale-blue-1: #fbfdff; --scale-blue-1: #fbfdff;
--scale-blue-2: #f4faff; --scale-blue-2: #f4faff;
--scale-blue-3: #e6f4fe; --scale-blue-3: #e6f4fe;
@ -4265,18 +4265,18 @@
--scale-blue-10: #0588f0; --scale-blue-10: #0588f0;
--scale-blue-11: #0d74ce; --scale-blue-11: #0d74ce;
--scale-blue-12: #113264; --scale-blue-12: #113264;
--scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a1: rgb(0 128 255 / 0.0157);
--scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a2: rgb(0 139 255 / 0.0431);
--scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a3: rgb(0 143 245 / 0.098);
--scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a4: rgb(0 158 255 / 0.1647);
--scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a5: rgb(0 146 255 / 0.2392);
--scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a6: rgb(0 135 246 / 0.3255);
--scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a7: rgb(0 131 235 / 0.4431);
--scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a8: rgb(0 131 230 / 0.6314);
--scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a9: rgb(0 144 255 / 1);
--scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a10: rgb(0 134 240 / 0.9804);
--scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a11: rgb(0 109 203 / 0.949);
--scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-blue-a12: rgb(0 35 89 / 0.9333);
--scale-cyan-1: #fafdfe; --scale-cyan-1: #fafdfe;
--scale-cyan-2: #f2fafb; --scale-cyan-2: #f2fafb;
--scale-cyan-3: #def7f9; --scale-cyan-3: #def7f9;
@ -4289,18 +4289,18 @@
--scale-cyan-10: #0797b9; --scale-cyan-10: #0797b9;
--scale-cyan-11: #107d98; --scale-cyan-11: #107d98;
--scale-cyan-12: #0d3c48; --scale-cyan-12: #0d3c48;
--scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a1: rgb(0 153 204 / 0.0196);
--scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a2: rgb(0 157 177 / 0.051);
--scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a3: rgb(0 193 209 / 0.1294);
--scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a4: rgb(0 188 212 / 0.2078);
--scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a5: rgb(0 179 203 / 0.2902);
--scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a6: rgb(0 167 193 / 0.3843);
--scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a7: rgb(0 159 186 / 0.5098);
--scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a8: rgb(0 163 192 / 0.7608);
--scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a9: rgb(0 162 199 / 1);
--scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a10: rgb(0 148 183 / 0.9725);
--scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a11: rgb(0 116 145 / 0.9373);
--scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-cyan-a12: rgb(0 50 62 / 0.949);
--scale-teal-1: #fafefd; --scale-teal-1: #fafefd;
--scale-teal-2: #f3fbf9; --scale-teal-2: #f3fbf9;
--scale-teal-3: #e0f8f3; --scale-teal-3: #e0f8f3;
@ -4313,18 +4313,18 @@
--scale-teal-10: #0d9b8a; --scale-teal-10: #0d9b8a;
--scale-teal-11: #008573; --scale-teal-11: #008573;
--scale-teal-12: #0d3d38; --scale-teal-12: #0d3d38;
--scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a1: rgb(0 204 153 / 0.0196);
--scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a2: rgb(0 170 128 / 0.0471);
--scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a3: rgb(0 197 156 / 0.1216);
--scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a4: rgb(0 195 150 / 0.2);
--scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a5: rgb(0 180 144 / 0.2784);
--scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a6: rgb(0 165 133 / 0.3686);
--scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a7: rgb(0 152 128 / 0.4863);
--scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a8: rgb(0 151 130 / 0.6745);
--scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a9: rgb(0 158 140 / 0.9294);
--scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a10: rgb(0 150 132 / 0.949);
--scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a11: rgb(0 133 115 / 1);
--scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-teal-a12: rgb(0 51 45 / 0.949);
--scale-green-1: #fbfefc; --scale-green-1: #fbfefc;
--scale-green-2: #f4fbf6; --scale-green-2: #f4fbf6;
--scale-green-3: #e6f6eb; --scale-green-3: #e6f6eb;
@ -4337,18 +4337,18 @@
--scale-green-10: #2b9a66; --scale-green-10: #2b9a66;
--scale-green-11: #218358; --scale-green-11: #218358;
--scale-green-12: #193b2d; --scale-green-12: #193b2d;
--scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a1: rgb(0 191 64 / 0.0157);
--scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a2: rgb(0 162 46 / 0.0431);
--scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a3: rgb(0 163 51 / 0.098);
--scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a4: rgb(0 168 56 / 0.1608);
--scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a5: rgb(0 156 56 / 0.2314);
--scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a6: rgb(0 149 59 / 0.3216);
--scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a7: rgb(0 144 63 / 0.4431);
--scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a8: rgb(0 146 75 / 0.6431);
--scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a9: rgb(0 143 74 / 0.8118);
--scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a10: rgb(0 134 71 / 0.8314);
--scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a11: rgb(0 113 63 / 0.8706);
--scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-green-a12: rgb(0 38 22 / 0.902);
--scale-yellow-1: #fdfdf9; --scale-yellow-1: #fdfdf9;
--scale-yellow-2: #fffce8; --scale-yellow-2: #fffce8;
--scale-yellow-3: #fffbd1; --scale-yellow-3: #fffbd1;
@ -4361,18 +4361,18 @@
--scale-yellow-10: #f7ce00; --scale-yellow-10: #f7ce00;
--scale-yellow-11: #946800; --scale-yellow-11: #946800;
--scale-yellow-12: #35290f; --scale-yellow-12: #35290f;
--scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a1: rgb(170 170 0 / 0.0235);
--scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a2: rgb(255 222 0 / 0.0902);
--scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a3: rgb(255 233 0 / 0.1804);
--scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a4: rgb(255 229 0 / 0.2667);
--scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a5: rgb(252 219 0 / 0.3569);
--scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a6: rgb(242 200 0 / 0.451);
--scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a7: rgb(227 179 0 / 0.5765);
--scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a8: rgb(235 188 0 / 1);
--scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a9: rgb(245 215 0 / 0.9608);
--scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a10: rgb(247 206 0 / 1);
--scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a11: rgb(148 104 0 / 1);
--scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-yellow-a12: rgb(40 28 0 / 0.9412);
--scale-amber-1: #fefdfb; --scale-amber-1: #fefdfb;
--scale-amber-2: #fefbe9; --scale-amber-2: #fefbe9;
--scale-amber-3: #fff7c2; --scale-amber-3: #fff7c2;
@ -4385,18 +4385,18 @@
--scale-amber-10: #ffba18; --scale-amber-10: #ffba18;
--scale-amber-11: #ab6400; --scale-amber-11: #ab6400;
--scale-amber-12: #4f3422; --scale-amber-12: #4f3422;
--scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a1: rgb(191 128 0 / 0.0157);
--scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a2: rgb(243 209 0 / 0.0863);
--scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a3: rgb(255 222 0 / 0.2392);
--scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a4: rgb(255 211 0 / 0.3882);
--scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a5: rgb(248 206 0 / 0.5333);
--scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a6: rgb(233 180 0 / 0.549);
--scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a7: rgb(219 154 0 / 0.6157);
--scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a8: rgb(218 138 0 / 0.7882);
--scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a9: rgb(255 179 0 / 0.7608);
--scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a10: rgb(255 179 0 / 0.9059);
--scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a11: rgb(171 100 0 / 1);
--scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-amber-a12: rgb(52 21 0 / 0.8667);
--scale-orange-1: #fefcfb; --scale-orange-1: #fefcfb;
--scale-orange-2: #fff7ed; --scale-orange-2: #fff7ed;
--scale-orange-3: #ffefd6; --scale-orange-3: #ffefd6;
@ -4409,18 +4409,18 @@
--scale-orange-10: #ef5f00; --scale-orange-10: #ef5f00;
--scale-orange-11: #cc4e00; --scale-orange-11: #cc4e00;
--scale-orange-12: #582d1d; --scale-orange-12: #582d1d;
--scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a1: rgb(191 64 0 / 0.0157);
--scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a2: rgb(255 142 0 / 0.0706);
--scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a3: rgb(255 155 0 / 0.1608);
--scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a4: rgb(255 145 0 / 0.2902);
--scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a5: rgb(255 139 0 / 0.3961);
--scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a6: rgb(255 129 0 / 0.4902);
--scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a7: rgb(237 107 0 / 0.549);
--scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a8: rgb(227 94 0 / 0.6667);
--scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a9: rgb(246 94 0 / 0.9176);
--scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a10: rgb(239 95 0 / 1);
--scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a11: rgb(204 78 0 / 1);
--scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-orange-a12: rgb(67 18 0 / 0.8863);
--scale-red-1: #fffcfc; --scale-red-1: #fffcfc;
--scale-red-2: #fff7f7; --scale-red-2: #fff7f7;
--scale-red-3: #feebec; --scale-red-3: #feebec;
@ -4433,18 +4433,18 @@
--scale-red-10: #dc3e42; --scale-red-10: #dc3e42;
--scale-red-11: #ce2c31; --scale-red-11: #ce2c31;
--scale-red-12: #641723; --scale-red-12: #641723;
--scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a1: rgb(255 0 0 / 0.0118);
--scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a2: rgb(255 0 0 / 0.0314);
--scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a3: rgb(242 0 13 / 0.0784);
--scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a4: rgb(255 0 7 / 0.1412);
--scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a5: rgb(255 0 5 / 0.1961);
--scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a6: rgb(247 0 4 / 0.2588);
--scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a7: rgb(222 0 3 / 0.3373);
--scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a8: rgb(210 0 5 / 0.4431);
--scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a9: rgb(219 0 7 / 0.7176);
--scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a10: rgb(209 0 5 / 0.7569);
--scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a11: rgb(196 0 6 / 0.8275);
--scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-red-a12: rgb(85 0 13 / 0.9098);
--scale-pink-1: #fffcfe; --scale-pink-1: #fffcfe;
--scale-pink-2: #fff7fc; --scale-pink-2: #fff7fc;
--scale-pink-3: #feeef8; --scale-pink-3: #feeef8;
@ -4457,18 +4457,18 @@
--scale-pink-10: #d23197; --scale-pink-10: #d23197;
--scale-pink-11: #cd1d8d; --scale-pink-11: #cd1d8d;
--scale-pink-12: #651249; --scale-pink-12: #651249;
--scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a1: rgb(255 0 170 / 0.0118);
--scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a2: rgb(255 0 159 / 0.0314);
--scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a3: rgb(240 0 150 / 0.0667);
--scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a4: rgb(226 0 137 / 0.102);
--scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a5: rgb(216 0 131 / 0.1529);
--scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a6: rgb(201 0 125 / 0.2235);
--scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a7: rgb(196 0 121 / 0.3216);
--scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a8: rgb(192 0 120 / 0.4431);
--scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a9: rgb(200 0 127 / 0.749);
--scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a10: rgb(199 0 126 / 0.8078);
--scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a11: rgb(199 0 126 / 0.8863);
--scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-pink-a12: rgb(89 0 59 / 0.9294);
--scale-purple-1: #fefcfe; --scale-purple-1: #fefcfe;
--scale-purple-2: #fbf7fe; --scale-purple-2: #fbf7fe;
--scale-purple-3: #f7edfe; --scale-purple-3: #f7edfe;
@ -4481,18 +4481,18 @@
--scale-purple-10: #8347b9; --scale-purple-10: #8347b9;
--scale-purple-11: #8145b5; --scale-purple-11: #8145b5;
--scale-purple-12: #402060; --scale-purple-12: #402060;
--scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a1: rgb(170 0 170 / 0.0118);
--scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a2: rgb(128 0 223 / 0.0314);
--scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a3: rgb(142 0 241 / 0.0706);
--scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a4: rgb(141 0 229 / 0.1137);
--scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a5: rgb(128 0 219 / 0.1647);
--scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a6: rgb(121 0 207 / 0.2314);
--scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a7: rgb(108 0 194 / 0.3137);
--scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a8: rgb(102 0 191 / 0.4235);
--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a9: rgb(92 0 173 / 0.6941);
--scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a10: rgb(83 0 158 / 0.7216);
--scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a11: rgb(82 0 154 / 0.7294);
--scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --scale-purple-a12: rgb(37 0 73 / 0.8745);
--primitive-primary-1: var(--scale-purple-1); --primitive-primary-1: var(--scale-purple-1);
--primitive-primary-2: var(--scale-purple-2); --primitive-primary-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3); --primitive-primary-3: var(--scale-purple-3);
@ -4831,18 +4831,18 @@
--scale-gray-10: #7b7b7b; --scale-gray-10: #7b7b7b;
--scale-gray-11: #b4b4b4; --scale-gray-11: #b4b4b4;
--scale-gray-12: #eeeeee; --scale-gray-12: #eeeeee;
--scale-gray-a1: color-mix(in srgb, var(--scale-gray-9) 3%, transparent); --scale-gray-a1: rgb(255 255 255 / 0.0667);
--scale-gray-a2: color-mix(in srgb, var(--scale-gray-9) 5%, transparent); --scale-gray-a2: rgb(255 255 255 / 0.098);
--scale-gray-a3: color-mix(in srgb, var(--scale-gray-9) 8%, transparent); --scale-gray-a3: rgb(255 255 255 / 0.1333);
--scale-gray-a4: color-mix(in srgb, var(--scale-gray-9) 12%, transparent); --scale-gray-a4: rgb(255 255 255 / 0.1647);
--scale-gray-a5: color-mix(in srgb, var(--scale-gray-9) 16%, transparent); --scale-gray-a5: rgb(255 255 255 / 0.1922);
--scale-gray-a6: color-mix(in srgb, var(--scale-gray-9) 22%, transparent); --scale-gray-a6: rgb(255 255 255 / 0.2275);
--scale-gray-a7: color-mix(in srgb, var(--scale-gray-9) 30%, transparent); --scale-gray-a7: rgb(255 255 255 / 0.2824);
--scale-gray-a8: color-mix(in srgb, var(--scale-gray-9) 40%, transparent); --scale-gray-a8: rgb(255 255 255 / 0.3765);
--scale-gray-a9: color-mix(in srgb, var(--scale-gray-9) 56%, transparent); --scale-gray-a9: rgb(255 255 255 / 0.4314);
--scale-gray-a10: color-mix(in srgb, var(--scale-gray-9) 68%, transparent); --scale-gray-a10: rgb(255 255 255 / 0.4824);
--scale-gray-a11: color-mix(in srgb, var(--scale-gray-9) 80%, transparent); --scale-gray-a11: rgb(255 255 255 / 0.7059);
--scale-gray-a12: color-mix(in srgb, var(--scale-gray-9) 92%, transparent); --scale-gray-a12: rgb(255 255 255 / 0.9333);
--scale-slate-1: #111113; --scale-slate-1: #111113;
--scale-slate-2: #18191b; --scale-slate-2: #18191b;
--scale-slate-3: #212225; --scale-slate-3: #212225;
@ -4855,18 +4855,18 @@
--scale-slate-10: #777b84; --scale-slate-10: #777b84;
--scale-slate-11: #b0b4ba; --scale-slate-11: #b0b4ba;
--scale-slate-12: #edeef0; --scale-slate-12: #edeef0;
--scale-slate-a1: color-mix(in srgb, var(--scale-slate-9) 3%, transparent); --scale-slate-a1: rgb(228 228 255 / 0.0745);
--scale-slate-a2: color-mix(in srgb, var(--scale-slate-9) 5%, transparent); --scale-slate-a2: rgb(227 236 255 / 0.1059);
--scale-slate-a3: color-mix(in srgb, var(--scale-slate-9) 8%, transparent); --scale-slate-a3: rgb(227 234 255 / 0.1451);
--scale-slate-a4: color-mix(in srgb, var(--scale-slate-9) 12%, transparent); --scale-slate-a4: rgb(221 238 255 / 0.1765);
--scale-slate-a5: color-mix(in srgb, var(--scale-slate-9) 16%, transparent); --scale-slate-a5: rgb(221 236 255 / 0.2078);
--scale-slate-a6: color-mix(in srgb, var(--scale-slate-9) 22%, transparent); --scale-slate-a6: rgb(219 235 255 / 0.2471);
--scale-slate-a7: color-mix(in srgb, var(--scale-slate-9) 30%, transparent); --scale-slate-a7: rgb(219 235 255 / 0.3059);
--scale-slate-a8: color-mix(in srgb, var(--scale-slate-9) 40%, transparent); --scale-slate-a8: rgb(219 236 255 / 0.4118);
--scale-slate-a9: color-mix(in srgb, var(--scale-slate-9) 56%, transparent); --scale-slate-a9: rgb(225 236 255 / 0.4667);
--scale-slate-a10: color-mix(in srgb, var(--scale-slate-9) 68%, transparent); --scale-slate-a10: rgb(230 238 255 / 0.5176);
--scale-slate-a11: color-mix(in srgb, var(--scale-slate-9) 80%, transparent); --scale-slate-a11: rgb(241 247 255 / 0.7294);
--scale-slate-a12: color-mix(in srgb, var(--scale-slate-9) 92%, transparent); --scale-slate-a12: rgb(252 253 255 / 0.9412);
--scale-blue-1: #0d1520; --scale-blue-1: #0d1520;
--scale-blue-2: #111927; --scale-blue-2: #111927;
--scale-blue-3: #0d2847; --scale-blue-3: #0d2847;
@ -4879,18 +4879,18 @@
--scale-blue-10: #3b9eff; --scale-blue-10: #3b9eff;
--scale-blue-11: #70b8ff; --scale-blue-11: #70b8ff;
--scale-blue-12: #c2e6ff; --scale-blue-12: #c2e6ff;
--scale-blue-a1: color-mix(in srgb, var(--scale-blue-9) 3%, transparent); --scale-blue-a1: rgb(104 167 255 / 0.1255);
--scale-blue-a2: color-mix(in srgb, var(--scale-blue-9) 5%, transparent); --scale-blue-a2: rgb(111 163 255 / 0.1529);
--scale-blue-a3: color-mix(in srgb, var(--scale-blue-9) 8%, transparent); --scale-blue-a3: rgb(47 144 255 / 0.2784);
--scale-blue-a4: color-mix(in srgb, var(--scale-blue-9) 12%, transparent); --scale-blue-a4: rgb(0 133 255 / 0.3843);
--scale-blue-a5: color-mix(in srgb, var(--scale-blue-9) 16%, transparent); --scale-blue-a5: rgb(0 141 255 / 0.4549);
--scale-blue-a6: color-mix(in srgb, var(--scale-blue-9) 22%, transparent); --scale-blue-a6: rgb(30 145 255 / 0.5294);
--scale-blue-a7: color-mix(in srgb, var(--scale-blue-9) 30%, transparent); --scale-blue-a7: rgb(52 150 255 / 0.6196);
--scale-blue-a8: color-mix(in srgb, var(--scale-blue-9) 40%, transparent); --scale-blue-a8: rgb(54 151 255 / 0.7412);
--scale-blue-a9: color-mix(in srgb, var(--scale-blue-9) 56%, transparent); --scale-blue-a9: rgb(0 144 255 / 1);
--scale-blue-a10: color-mix(in srgb, var(--scale-blue-9) 68%, transparent); --scale-blue-a10: rgb(59 158 255 / 1);
--scale-blue-a11: color-mix(in srgb, var(--scale-blue-9) 80%, transparent); --scale-blue-a11: rgb(112 184 255 / 1);
--scale-blue-a12: color-mix(in srgb, var(--scale-blue-9) 92%, transparent); --scale-blue-a12: rgb(194 230 255 / 1);
--scale-cyan-1: #0b161a; --scale-cyan-1: #0b161a;
--scale-cyan-2: #101b20; --scale-cyan-2: #101b20;
--scale-cyan-3: #082c36; --scale-cyan-3: #082c36;
@ -4903,18 +4903,18 @@
--scale-cyan-10: #23afd0; --scale-cyan-10: #23afd0;
--scale-cyan-11: #4ccce6; --scale-cyan-11: #4ccce6;
--scale-cyan-12: #b6ecf7; --scale-cyan-12: #b6ecf7;
--scale-cyan-a1: color-mix(in srgb, var(--scale-cyan-9) 3%, transparent); --scale-cyan-a1: rgb(108 216 255 / 0.102);
--scale-cyan-a2: color-mix(in srgb, var(--scale-cyan-9) 5%, transparent); --scale-cyan-a2: rgb(128 215 255 / 0.1255);
--scale-cyan-a3: color-mix(in srgb, var(--scale-cyan-9) 8%, transparent); --scale-cyan-a3: rgb(38 208 255 / 0.2118);
--scale-cyan-a4: color-mix(in srgb, var(--scale-cyan-9) 12%, transparent); --scale-cyan-a4: rgb(0 198 255 / 0.2824);
--scale-cyan-a5: color-mix(in srgb, var(--scale-cyan-9) 16%, transparent); --scale-cyan-a5: rgb(0 200 255 / 0.3451);
--scale-cyan-a6: color-mix(in srgb, var(--scale-cyan-9) 22%, transparent); --scale-cyan-a6: rgb(10 206 255 / 0.4078);
--scale-cyan-a7: color-mix(in srgb, var(--scale-cyan-9) 30%, transparent); --scale-cyan-a7: rgb(36 208 255 / 0.4941);
--scale-cyan-a8: color-mix(in srgb, var(--scale-cyan-9) 40%, transparent); --scale-cyan-a8: rgb(28 209 255 / 0.6118);
--scale-cyan-a9: color-mix(in srgb, var(--scale-cyan-9) 56%, transparent); --scale-cyan-a9: rgb(0 208 255 / 0.7804);
--scale-cyan-a10: color-mix(in srgb, var(--scale-cyan-9) 68%, transparent); --scale-cyan-a10: rgb(43 215 255 / 0.8157);
--scale-cyan-a11: color-mix(in srgb, var(--scale-cyan-9) 80%, transparent); --scale-cyan-a11: rgb(84 226 255 / 0.902);
--scale-cyan-a12: color-mix(in srgb, var(--scale-cyan-9) 92%, transparent); --scale-cyan-a12: rgb(188 244 255 / 0.9686);
--scale-teal-1: #0d1514; --scale-teal-1: #0d1514;
--scale-teal-2: #111c1b; --scale-teal-2: #111c1b;
--scale-teal-3: #0d2d2a; --scale-teal-3: #0d2d2a;
@ -4927,18 +4927,18 @@
--scale-teal-10: #0eb39e; --scale-teal-10: #0eb39e;
--scale-teal-11: #0bd8b6; --scale-teal-11: #0bd8b6;
--scale-teal-12: #adf0dd; --scale-teal-12: #adf0dd;
--scale-teal-a1: color-mix(in srgb, var(--scale-teal-9) 3%, transparent); --scale-teal-a1: rgb(158 255 243 / 0.0824);
--scale-teal-a2: color-mix(in srgb, var(--scale-teal-9) 5%, transparent); --scale-teal-a2: rgb(155 255 246 / 0.1098);
--scale-teal-a3: color-mix(in srgb, var(--scale-teal-9) 8%, transparent); --scale-teal-a3: rgb(74 255 238 / 0.1765);
--scale-teal-a4: color-mix(in srgb, var(--scale-teal-9) 12%, transparent); --scale-teal-a4: rgb(9 255 238 / 0.2314);
--scale-teal-a5: color-mix(in srgb, var(--scale-teal-9) 16%, transparent); --scale-teal-a5: rgb(28 255 237 / 0.2824);
--scale-teal-a6: color-mix(in srgb, var(--scale-teal-9) 22%, transparent); --scale-teal-a6: rgb(59 255 234 / 0.3412);
--scale-teal-a7: color-mix(in srgb, var(--scale-teal-9) 30%, transparent); --scale-teal-a7: rgb(68 255 236 / 0.4118);
--scale-teal-a8: color-mix(in srgb, var(--scale-teal-9) 40%, transparent); --scale-teal-a8: rgb(65 255 233 / 0.4941);
--scale-teal-a9: color-mix(in srgb, var(--scale-teal-9) 56%, transparent); --scale-teal-a9: rgb(28 255 229 / 0.6471);
--scale-teal-a10: color-mix(in srgb, var(--scale-teal-9) 68%, transparent); --scale-teal-a10: rgb(20 255 225 / 0.702);
--scale-teal-a11: color-mix(in srgb, var(--scale-teal-9) 80%, transparent); --scale-teal-a11: rgb(13 255 215 / 0.8471);
--scale-teal-a12: color-mix(in srgb, var(--scale-teal-9) 92%, transparent); --scale-teal-a12: rgb(184 255 235 / 0.9412);
--scale-green-1: #0e1512; --scale-green-1: #0e1512;
--scale-green-2: #121b17; --scale-green-2: #121b17;
--scale-green-3: #132d21; --scale-green-3: #132d21;
@ -4951,18 +4951,18 @@
--scale-green-10: #33b074; --scale-green-10: #33b074;
--scale-green-11: #3dd68c; --scale-green-11: #3dd68c;
--scale-green-12: #b1f1cb; --scale-green-12: #b1f1cb;
--scale-green-a1: color-mix(in srgb, var(--scale-green-9) 3%, transparent); --scale-green-a1: rgb(170 255 219 / 0.0824);
--scale-green-a2: color-mix(in srgb, var(--scale-green-9) 5%, transparent); --scale-green-a2: rgb(170 255 217 / 0.1059);
--scale-green-a3: color-mix(in srgb, var(--scale-green-9) 8%, transparent); --scale-green-a3: rgb(108 255 187 / 0.1765);
--scale-green-a4: color-mix(in srgb, var(--scale-green-9) 12%, transparent); --scale-green-a4: rgb(73 255 177 / 0.2314);
--scale-green-a5: color-mix(in srgb, var(--scale-green-9) 16%, transparent); --scale-green-a5: rgb(80 255 178 / 0.2863);
--scale-green-a6: color-mix(in srgb, var(--scale-green-9) 22%, transparent); --scale-green-a6: rgb(94 255 182 / 0.3412);
--scale-green-a7: color-mix(in srgb, var(--scale-green-9) 30%, transparent); --scale-green-a7: rgb(98 255 181 / 0.4078);
--scale-green-a8: color-mix(in srgb, var(--scale-green-9) 40%, transparent); --scale-green-a8: rgb(97 255 179 / 0.4863);
--scale-green-a9: color-mix(in srgb, var(--scale-green-9) 56%, transparent); --scale-green-a9: rgb(75 255 168 / 0.6431);
--scale-green-a10: color-mix(in srgb, var(--scale-green-9) 68%, transparent); --scale-green-a10: rgb(74 255 168 / 0.6902);
--scale-green-a11: color-mix(in srgb, var(--scale-green-9) 80%, transparent); --scale-green-a11: rgb(73 255 167 / 0.8392);
--scale-green-a12: color-mix(in srgb, var(--scale-green-9) 92%, transparent); --scale-green-a12: rgb(187 255 215 / 0.9451);
--scale-yellow-1: #14120b; --scale-yellow-1: #14120b;
--scale-yellow-2: #1b180f; --scale-yellow-2: #1b180f;
--scale-yellow-3: #2d2305; --scale-yellow-3: #2d2305;
@ -4975,18 +4975,18 @@
--scale-yellow-10: #ffff57; --scale-yellow-10: #ffff57;
--scale-yellow-11: #f5e147; --scale-yellow-11: #f5e147;
--scale-yellow-12: #f6eeb4; --scale-yellow-12: #f6eeb4;
--scale-yellow-a1: color-mix(in srgb, var(--scale-yellow-9) 3%, transparent); --scale-yellow-a1: rgb(255 230 140 / 0.0784);
--scale-yellow-a2: color-mix(in srgb, var(--scale-yellow-9) 5%, transparent); --scale-yellow-a2: rgb(255 227 142 / 0.1059);
--scale-yellow-a3: color-mix(in srgb, var(--scale-yellow-9) 8%, transparent); --scale-yellow-a3: rgb(255 198 28 / 0.1765);
--scale-yellow-a4: color-mix(in srgb, var(--scale-yellow-9) 12%, transparent); --scale-yellow-a4: rgb(255 203 0 / 0.2118);
--scale-yellow-a5: color-mix(in srgb, var(--scale-yellow-9) 16%, transparent); --scale-yellow-a5: rgb(255 202 0 / 0.2627);
--scale-yellow-a6: color-mix(in srgb, var(--scale-yellow-9) 22%, transparent); --scale-yellow-a6: rgb(255 205 6 / 0.3216);
--scale-yellow-a7: color-mix(in srgb, var(--scale-yellow-9) 30%, transparent); --scale-yellow-a7: rgb(255 210 58 / 0.4);
--scale-yellow-a8: color-mix(in srgb, var(--scale-yellow-9) 40%, transparent); --scale-yellow-a8: rgb(255 206 64 / 0.5137);
--scale-yellow-a9: color-mix(in srgb, var(--scale-yellow-9) 56%, transparent); --scale-yellow-a9: rgb(255 230 41 / 1);
--scale-yellow-a10: color-mix(in srgb, var(--scale-yellow-9) 68%, transparent); --scale-yellow-a10: rgb(255 255 87 / 1);
--scale-yellow-a11: color-mix(in srgb, var(--scale-yellow-9) 80%, transparent); --scale-yellow-a11: rgb(255 234 74 / 0.9608);
--scale-yellow-a12: color-mix(in srgb, var(--scale-yellow-9) 92%, transparent); --scale-yellow-a12: rgb(255 247 187 / 0.9647);
--scale-amber-1: #16120c; --scale-amber-1: #16120c;
--scale-amber-2: #1d180f; --scale-amber-2: #1d180f;
--scale-amber-3: #302008; --scale-amber-3: #302008;
@ -4999,18 +4999,18 @@
--scale-amber-10: #ffd60a; --scale-amber-10: #ffd60a;
--scale-amber-11: #ffca16; --scale-amber-11: #ffca16;
--scale-amber-12: #ffe7b3; --scale-amber-12: #ffe7b3;
--scale-amber-a1: color-mix(in srgb, var(--scale-amber-9) 3%, transparent); --scale-amber-a1: rgb(255 209 139 / 0.0863);
--scale-amber-a2: color-mix(in srgb, var(--scale-amber-9) 5%, transparent); --scale-amber-a2: rgb(255 211 132 / 0.1137);
--scale-amber-a3: color-mix(in srgb, var(--scale-amber-9) 8%, transparent); --scale-amber-a3: rgb(255 170 43 / 0.1882);
--scale-amber-a4: color-mix(in srgb, var(--scale-amber-9) 12%, transparent); --scale-amber-a4: rgb(255 158 0 / 0.2471);
--scale-amber-a5: color-mix(in srgb, var(--scale-amber-9) 16%, transparent); --scale-amber-a5: rgb(255 159 0 / 0.302);
--scale-amber-a6: color-mix(in srgb, var(--scale-amber-9) 22%, transparent); --scale-amber-a6: rgb(255 169 14 / 0.3608);
--scale-amber-a7: color-mix(in srgb, var(--scale-amber-9) 30%, transparent); --scale-amber-a7: rgb(255 178 56 / 0.4431);
--scale-amber-a8: color-mix(in srgb, var(--scale-amber-9) 40%, transparent); --scale-amber-a8: rgb(255 178 64 / 0.5608);
--scale-amber-a9: color-mix(in srgb, var(--scale-amber-9) 56%, transparent); --scale-amber-a9: rgb(255 197 61 / 1);
--scale-amber-a10: color-mix(in srgb, var(--scale-amber-9) 68%, transparent); --scale-amber-a10: rgb(255 214 10 / 1);
--scale-amber-a11: color-mix(in srgb, var(--scale-amber-9) 80%, transparent); --scale-amber-a11: rgb(255 202 22 / 1);
--scale-amber-a12: color-mix(in srgb, var(--scale-amber-9) 92%, transparent); --scale-amber-a12: rgb(255 231 179 / 1);
--scale-orange-1: #17120e; --scale-orange-1: #17120e;
--scale-orange-2: #1e160f; --scale-orange-2: #1e160f;
--scale-orange-3: #331e0b; --scale-orange-3: #331e0b;
@ -5023,18 +5023,18 @@
--scale-orange-10: #ff801f; --scale-orange-10: #ff801f;
--scale-orange-11: #ffa057; --scale-orange-11: #ffa057;
--scale-orange-12: #ffe0c2; --scale-orange-12: #ffe0c2;
--scale-orange-a1: color-mix(in srgb, var(--scale-orange-9) 3%, transparent); --scale-orange-a1: rgb(255 200 155 / 0.0902);
--scale-orange-a2: color-mix(in srgb, var(--scale-orange-9) 5%, transparent); --scale-orange-a2: rgb(255 187 128 / 0.1176);
--scale-orange-a3: color-mix(in srgb, var(--scale-orange-9) 8%, transparent); --scale-orange-a3: rgb(255 150 55 / 0.2);
--scale-orange-a4: color-mix(in srgb, var(--scale-orange-9) 12%, transparent); --scale-orange-a4: rgb(255 120 0 / 0.2745);
--scale-orange-a5: color-mix(in srgb, var(--scale-orange-9) 16%, transparent); --scale-orange-a5: rgb(255 119 0 / 0.3373);
--scale-orange-a6: color-mix(in srgb, var(--scale-orange-9) 22%, transparent); --scale-orange-a6: rgb(255 133 30 / 0.4);
--scale-orange-a7: color-mix(in srgb, var(--scale-orange-9) 30%, transparent); --scale-orange-a7: rgb(255 140 59 / 0.4941);
--scale-orange-a8: color-mix(in srgb, var(--scale-orange-9) 40%, transparent); --scale-orange-a8: rgb(255 138 64 / 0.6392);
--scale-orange-a9: color-mix(in srgb, var(--scale-orange-9) 56%, transparent); --scale-orange-a9: rgb(255 110 22 / 0.9686);
--scale-orange-a10: color-mix(in srgb, var(--scale-orange-9) 68%, transparent); --scale-orange-a10: rgb(255 128 31 / 1);
--scale-orange-a11: color-mix(in srgb, var(--scale-orange-9) 80%, transparent); --scale-orange-a11: rgb(255 160 87 / 1);
--scale-orange-a12: color-mix(in srgb, var(--scale-orange-9) 92%, transparent); --scale-orange-a12: rgb(255 224 194 / 1);
--scale-red-1: #191111; --scale-red-1: #191111;
--scale-red-2: #201314; --scale-red-2: #201314;
--scale-red-3: #3b1219; --scale-red-3: #3b1219;
@ -5047,18 +5047,18 @@
--scale-red-10: #ec5d5e; --scale-red-10: #ec5d5e;
--scale-red-11: #ff9592; --scale-red-11: #ff9592;
--scale-red-12: #ffd1d9; --scale-red-12: #ffd1d9;
--scale-red-a1: color-mix(in srgb, var(--scale-red-9) 3%, transparent); --scale-red-a1: rgb(255 173 173 / 0.098);
--scale-red-a2: color-mix(in srgb, var(--scale-red-9) 5%, transparent); --scale-red-a2: rgb(255 151 159 / 0.1255);
--scale-red-a3: color-mix(in srgb, var(--scale-red-9) 8%, transparent); --scale-red-a3: rgb(255 78 108 / 0.2314);
--scale-red-a4: color-mix(in srgb, var(--scale-red-9) 12%, transparent); --scale-red-a4: rgb(255 48 89 / 0.3137);
--scale-red-a5: color-mix(in srgb, var(--scale-red-9) 16%, transparent); --scale-red-a5: rgb(255 58 92 / 0.3804);
--scale-red-a6: color-mix(in srgb, var(--scale-red-9) 22%, transparent); --scale-red-a6: rgb(255 78 101 / 0.4471);
--scale-red-a7: color-mix(in srgb, var(--scale-red-9) 30%, transparent); --scale-red-a7: rgb(255 93 106 / 0.549);
--scale-red-a8: color-mix(in srgb, var(--scale-red-9) 40%, transparent); --scale-red-a8: rgb(255 97 101 / 0.7098);
--scale-red-a9: color-mix(in srgb, var(--scale-red-9) 56%, transparent); --scale-red-a9: rgb(255 80 86 / 0.898);
--scale-red-a10: color-mix(in srgb, var(--scale-red-9) 68%, transparent); --scale-red-a10: rgb(255 100 102 / 0.9255);
--scale-red-a11: color-mix(in srgb, var(--scale-red-9) 80%, transparent); --scale-red-a11: rgb(255 149 146 / 1);
--scale-red-a12: color-mix(in srgb, var(--scale-red-9) 92%, transparent); --scale-red-a12: rgb(255 209 217 / 1);
--scale-pink-1: #191117; --scale-pink-1: #191117;
--scale-pink-2: #21121d; --scale-pink-2: #21121d;
--scale-pink-3: #37172f; --scale-pink-3: #37172f;
@ -5071,18 +5071,18 @@
--scale-pink-10: #de51a8; --scale-pink-10: #de51a8;
--scale-pink-11: #ff8dcc; --scale-pink-11: #ff8dcc;
--scale-pink-12: #fdd1ea; --scale-pink-12: #fdd1ea;
--scale-pink-a1: color-mix(in srgb, var(--scale-pink-9) 3%, transparent); --scale-pink-a1: rgb(255 173 235 / 0.098);
--scale-pink-a2: color-mix(in srgb, var(--scale-pink-9) 5%, transparent); --scale-pink-a2: rgb(255 139 224 / 0.1294);
--scale-pink-a3: color-mix(in srgb, var(--scale-pink-9) 8%, transparent); --scale-pink-a3: rgb(255 107 218 / 0.2157);
--scale-pink-a4: color-mix(in srgb, var(--scale-pink-9) 12%, transparent); --scale-pink-a4: rgb(255 68 207 / 0.2941);
--scale-pink-a5: color-mix(in srgb, var(--scale-pink-9) 16%, transparent); --scale-pink-a5: rgb(255 80 203 / 0.349);
--scale-pink-a6: color-mix(in srgb, var(--scale-pink-9) 22%, transparent); --scale-pink-a6: rgb(255 100 206 / 0.4118);
--scale-pink-a7: color-mix(in srgb, var(--scale-pink-9) 30%, transparent); --scale-pink-a7: rgb(255 109 204 / 0.5137);
--scale-pink-a8: color-mix(in srgb, var(--scale-pink-9) 40%, transparent); --scale-pink-a8: rgb(255 109 202 / 0.6588);
--scale-pink-a9: color-mix(in srgb, var(--scale-pink-9) 56%, transparent); --scale-pink-a9: rgb(255 76 189 / 0.8392);
--scale-pink-a10: color-mix(in srgb, var(--scale-pink-9) 68%, transparent); --scale-pink-a10: rgb(255 93 193 / 0.8706);
--scale-pink-a11: color-mix(in srgb, var(--scale-pink-9) 80%, transparent); --scale-pink-a11: rgb(255 141 204 / 1);
--scale-pink-a12: color-mix(in srgb, var(--scale-pink-9) 92%, transparent); --scale-pink-a12: rgb(255 211 236 / 0.9922);
--scale-purple-1: #18111b; --scale-purple-1: #18111b;
--scale-purple-2: #1e1523; --scale-purple-2: #1e1523;
--scale-purple-3: #301c3b; --scale-purple-3: #301c3b;
@ -5095,18 +5095,18 @@
--scale-purple-10: #9a5cd0; --scale-purple-10: #9a5cd0;
--scale-purple-11: #d19dff; --scale-purple-11: #d19dff;
--scale-purple-12: #ecd9fa; --scale-purple-12: #ecd9fa;
--scale-purple-a1: color-mix(in srgb, var(--scale-purple-9) 3%, transparent); --scale-purple-a1: rgb(227 161 255 / 0.1059);
--scale-purple-a2: color-mix(in srgb, var(--scale-purple-9) 5%, transparent); --scale-purple-a2: rgb(219 153 255 / 0.1373);
--scale-purple-a3: color-mix(in srgb, var(--scale-purple-9) 8%, transparent); --scale-purple-a3: rgb(207 121 255 / 0.2314);
--scale-purple-a4: color-mix(in srgb, var(--scale-purple-9) 12%, transparent); --scale-purple-a4: rgb(199 111 255 / 0.3059);
--scale-purple-a5: color-mix(in srgb, var(--scale-purple-9) 16%, transparent); --scale-purple-a5: rgb(200 114 255 / 0.3608);
--scale-purple-a6: color-mix(in srgb, var(--scale-purple-9) 22%, transparent); --scale-purple-a6: rgb(200 124 255 / 0.4196);
--scale-purple-a7: color-mix(in srgb, var(--scale-purple-9) 30%, transparent); --scale-purple-a7: rgb(200 129 255 / 0.5098);
--scale-purple-a8: color-mix(in srgb, var(--scale-purple-9) 40%, transparent); --scale-purple-a8: rgb(198 131 255 / 0.6667);
--scale-purple-a9: color-mix(in srgb, var(--scale-purple-9) 56%, transparent); --scale-purple-a9: rgb(183 100 255 / 0.7765);
--scale-purple-a10: color-mix(in srgb, var(--scale-purple-9) 68%, transparent); --scale-purple-a10: rgb(189 113 255 / 0.8157);
--scale-purple-a11: color-mix(in srgb, var(--scale-purple-9) 80%, transparent); --scale-purple-a11: rgb(209 157 255 / 1);
--scale-purple-a12: color-mix(in srgb, var(--scale-purple-9) 92%, transparent); --scale-purple-a12: rgb(241 221 255 / 0.9804);
--primitive-primary-1: var(--scale-purple-1); --primitive-primary-1: var(--scale-purple-1);
--primitive-primary-2: var(--scale-purple-2); --primitive-primary-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3); --primitive-primary-3: var(--scale-purple-3);

102
src/uix/eidos/lib/render-css.ts
Unescape View File

@ -272,7 +272,7 @@ export function renderThemeCss(
for (const scaleName of scaleNames) { for (const scaleName of scaleNames) {
const scale = color.scales[scaleName] const scale = color.scales[scaleName]
if (scale) appendColorScaleDeclarations(declarations, scaleName, scale) 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) { 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. * Alpha (translucent) variants of a color scale.
* *
* If a theme provides explicit `alphaScales` for this scale, those values are * If a theme provides explicit `alphaScales` for this scale they win (verbatim).
* used verbatim — author them when you need Radix-grade alpha that *reproduces * Otherwise each `aN` is GENERATED as the compositing inverse of the solid step
* the solid scale* over an arbitrary background (`aN` composited over the page * `N` over the scale's background polarity (white for light scales, black for
* bg ≈ solid `N`). * dark — decided by step 1's luminance): `aN` painted over that background
* * reproduces solid `N`. This keeps the alpha ramp consistent-by-construction
* Otherwise we synthesize: each `aN` is the scale's SOLID color (step 9) at an * with the solid scale (no drift, Radix-style fidelity) for every theme, not
* increasing opacity (`DEFAULT_COLOR_ALPHA_PERCENTAGES`). This is a deliberate * just the base. Non-hex solids (e.g. `var()`) fall back to the legacy
* "accent-at-opacity" ramp — one hue at 12 opacity levels — useful for * step-9-at-opacity `color-mix` ramp. (audit P1-1)
* 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.
*/ */
function appendColorAlphaScaleDeclarations( function appendColorAlphaScaleDeclarations(
declarations: string[], declarations: string[],
scaleName: string, scaleName: string,
scale: ColorAlphaScale | undefined solidScale: ColorScale | undefined,
alphaScale: ColorAlphaScale | undefined
): void { ): 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) { for (const step of COLOR_ALPHA_STEPS) {
declarations.push( const authored = alphaScale?.[step]
cssVar( const solid = solidScale?.[step]
`scale-${scaleName}-a${step}`, const computed =
scale?.[step] ?? authored === undefined && solid ? alphaColorOverBackground(solid, bg) : null
`color-mix(in srgb, var(--scale-${scaleName}-9) ${ const value =
DEFAULT_COLOR_ALPHA_PERCENTAGES[step] authored ??
}, transparent)` computed ??
) `color-mix(in srgb, var(--scale-${scaleName}-9) ${
) DEFAULT_COLOR_ALPHA_PERCENTAGES[step]
}, transparent)`
declarations.push(cssVar(`scale-${scaleName}-a${step}`, value))
} }
} }

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.