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

Theming: Radix-parity palette + intent auto-derivation + color-model docs

Browse Source 
Two-level color model settled (THEMING.md section 25), replacing the anchor RFC:
the palette is the source (scales, directly usable, designable); hierarchy roles
alias scales explicitly; intents auto-derive from the palette by the book's
canonical convention.

- Palette library expanded 12 -> 31 scales at Radix Colors parity (exact values):
  radix-scales.ts (19 added: mauve/sage/olive/sand/tomato/ruby/crimson/plum/
  violet/iris/indigo/jade/grass/brown/sky/mint/lime/gold/bronze) spread into
  base.ts. Each directly usable as --scale-{name}-{step}.
- Intent auto-derivation: CANONICAL_INTENT_SCALES (neutral->gray, affirm->teal,
  fulfill->green, risk->amber, threat->red, loss->plum) + completeColorRoleMap.
  Intents omitted from a theme role map fill from the convention (identity =
  step 9); slots derive normally; override optional. ColorRoleMap: hierarchy
  required, intents optional.
- Validation: hierarchy roles required; omitted intents validate the canonical
  scale exists in the palette.
- index: export ScalingKey / SCALING_KEYS.
- docs: THEMING.md section 25 (full color model + decisions), section 21 marked
  resolved, COLOR_MODEL_RFC resolved (anchor rejected).
- test: base library asserts 31 scales x 12 steps.

Verified: npm run check (0 new errors), vitest eidos (0 new regressions),
browser (intents auto-derive: affirm=teal #0E9384, risk=amber #DC6803,
loss=plum #7A3AAD at step 9).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 66ce4f354d
commit 152d2ad960
10 changed files with 1168 additions and 13 deletions
Show Stats Download Patch File Download Diff File

17
src/uix/eidos/COLOR_MODEL_RFC.md
Unescape View File

@ -1,8 +1,19 @@
# RFC — Modelo de color: accents ricos + intents de un solo ancla # RFC — Modelo de color: accents ricos + intents de un solo ancla
> **Estado: PROPUESTA — no implementada.** (2026-06-01) > **Estado: RESUELTO (2026-06-02).** El modelo de color quedó decidido — la
> El modelo vigente sigue siendo el de `THEMING.md` (rol → escala de 12 pasos). > referencia canónica es **THEMING.md §25**.
> Este documento captura el diseño para decidir/implementar más adelante. >
> **Qué se adoptó**: paleta rica (librería ampliada a 31 escalas Radix) + capa
> semántica de alias, y los **intents auto-derivan de la paleta por convención
> del libro** (`CANONICAL_INTENT_SCALES`, identidad = step 9). Roles de jerarquía
> = alias explícito. Override por componente vía prop `color`.
>
> **Qué se DESCARTÓ**: el "intent = ancla de un solo color" con slots derivados
> inline (este documento, §4-5). Radix no lo hace (genera una *escala* desde un
> hex y la aliasa), y con la paleta rica el problema que lo motivaba (autorar 12
> pasos para `loss`) desaparece — `loss` aliasa la escala `plum` de la paleta.
>
> Lo de abajo se conserva como registro histórico de la propuesta original.
## 0. Origen ## 0. Origen

91
src/uix/eidos/THEMING.md
Unescape View File

@ -1841,7 +1841,13 @@ step 11).
--- ---
## 21. Propuesta abierta — modelo de color de dos niveles (RFC, NO implementado) ## 21. Modelo de color de dos niveles (RFC — RESUELTO en §25)
> **Resuelto (2026-06-02).** El modelo de color quedó decidido — ver **§25**.
> Se adoptó "paleta rica + capa semántica de alias / auto-derivación" y se
> **descartó** "intent = ancla de un solo color" (Radix no lo hace, y con una
> paleta rica el problema que motivaba el ancla desaparece). Lo de abajo se
> conserva como registro histórico de la propuesta original.
Tras el sprint de theming surgió una observación de fondo (comparando con Tras el sprint de theming surgió una observación de fondo (comparando con
Radix Themes): hoy **cada rol de color exige una escala de 12 pasos**, incluidos Radix Themes): hoy **cada rol de color exige una escala de 12 pasos**, incluidos
@ -2018,6 +2024,89 @@ ven casi idénticos (a2 ≈ el step-1 anterior); sobre fondos no uniformes ahora
--- ---
## 25. Modelo de color — paleta + roles/intents derivados (2026-06-02)
Decisiones **cerradas** sobre el modelo de color. Resuelve el RFC §21. Es, 1:1,
el modelo de **Radix Themes**: una **paleta** de escalas + una **capa semántica**
de alias + **override por componente**. Lo único propio es que los **intents**
(capa del libro) **auto-derivan** de la paleta por convención.
### 25.1 — Las tres capas
| Capa | Qué es | Cómo se define |
| --- | --- | --- |
| **Paleta** | librería de escalas de 12 pasos | `--scale-{name}-{step}` (+ alpha `--scale-{name}-a{step}`) · directamente usable · **diseñable por el tema** |
| **Roles** (jerarquía) | `primary` · `secondary` · `tertiary` | **alias explícito** a una escala (decisión de marca · obligatorio) |
| **Intents** | `neutral` + `affirm`/`fulfill`/`risk`/`threat`/`loss` | **auto-derivados** de la paleta por convención del libro · identidad = step 9 · slots derivan normal · override opcional |
Los componentes consumen la capa semántica (`--color-{role}-{slot}`) y pueden
**override** su color a cualquier escala vía la prop `color` / `data-color`.
### 25.2 — Paleta (la fuente, diseñable)
- Escalas **funcionales** de 12 pasos: `1-2` fondos · `3-5` componente · `6-8`
bordes · **`9` sólido** · `10` hover · `11-12` texto. El **representativo** de
una escala es el **step 9** (el sólido), NO el medio geométrico (step 6, que es
un tono de borde lavado).
- **Directamente usable**: cualquier paso es `var(--scale-{name}-{step})`
(p. ej. `var(--scale-green-10)`). **No** existe alias corto `--{name}-{step}`:
dos formas para el mismo valor crearían ambigüedad sobre cuál es la canónica.
- **Diseñable**: la paleta la trae el tema (dominio del diseñador). El framework
envía una paleta por defecto de **31 escalas** (valores exactos de Radix
Colors, en `lib/themes/radix-scales.ts` + `base.ts`) — pero es "la paleta", no
"la de Radix": un tema la reemplaza/amplía. Un color de marca se añade como
**una escala** (autorada o generada), nunca como un valor inline suelto.
### 25.3 — Roles de jerarquía (alias explícito)
`primary` / `secondary` / `tertiary` son decisiones de marca sin color canónico:
el tema **DEBE** mapearlos a una escala de la paleta. Pueden llevar override de
slots (p. ej. un primario monocromo con `slots: { contrast: '1' }`).
### 25.4 — Intents auto-derivados (convención del libro)
- Los 6 intents tienen color canónico definido en el libro *Diseñando lo que
ocurre*. La convención `INTENT → escala` vive en `CANONICAL_INTENT_SCALES`
(`lib/config-types.ts`):
`neutral→gray · affirm→teal · fulfill→green · risk→amber · threat→red · loss→plum`.
- Un intent **omitido** del mapa de roles **auto-deriva** de la paleta por esa
convención (`completeColorRoleMap`, consumido por `render-css` y la validación).
Su **identidad es el sólido (step 9)**; los 9 slots derivan normal. La paleta
debe proveer esas escalas (o el tema overridea el intent mapeándolo explícito).
- **Tipos**: en `ColorRoleMap` la jerarquía es **obligatoria** y los intents
**opcionales** — `Record<HierarchyColorRole, V> & Partial<Record<Intent, V>>`.
- **`neutral`** es el 6º intent pero **sin valencia**: funciona como gris de
superficies/bordes/texto, por eso auto-deriva a una escala gris (no es una
señal valenced). Las 5 valenced llevan la carga.
- Doctrina: **el color EXPRESA el intent, no lo define** — la valencia/activación
la lleva la capa **sema** (sonido/haptic/motion); el color solo aporta la
identidad de hue.
### 25.5 — Override por componente
Cualquier componente acepta `color="..."` (cualquier escala de la paleta) → la
cascada `_accent-*` del recipe remapea sus tokens a esa escala para esa
instancia. Equivalente a `<Button color="grass">` de Radix.
### 25.6 — Por qué se DESCARTÓ el "ancla por rol"
El RFC §21 proponía declarar un intent como un solo hex (`{ anchor }`) y derivar
los slots inline con `color-mix()`. Se **descartó**: Radix no lo hace (genera una
*escala* desde un hex y la aliasa), y con una **paleta rica** el problema que lo
motivaba (autorar 12 pasos a mano para `loss` → el bug de loss=azul) **desaparece
solo**: `loss` simplemente aliasa la escala `plum`, que ya existe en la paleta.
El modelo final es **paleta rica + alias / auto-derivación**, no ancla.
### 25.7 — Framework vs tema
- **Framework**: envía la paleta por defecto (31 escalas Radix) — para el tema
base y para quien no traiga la suya.
- **Tema de marca** (p. ej. Grafito): trae **su propia paleta** + mapea la
jerarquía; los intents auto-derivan. (= Radix Themes: Radix trae su paleta, tú
puedes traer la tuya.)
---
**Última revisión**: 2026-06-02. Si algo en este doc no coincide con **Última revisión**: 2026-06-02. Si algo en este doc no coincide con
el código, el código gana — pero abre un issue para que actualicemos el código, el código gana — pero abre un issue para que actualicemos
el doc. el doc.

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

@ -122,7 +122,7 @@ describe('ActiveEidos config', () => {
]) ])
}) })
it('ships a base theme pair with 12 physical color scales of 12 steps', () => { it('ships a base theme pair with 31 physical color scales of 12 steps', () => {
const eidos = createThemeBaseEidos() const eidos = createThemeBaseEidos()
expect(eidos.validate()).toEqual({ ok: true, issues: [] }) expect(eidos.validate()).toEqual({ ok: true, issues: [] })
@ -133,8 +133,15 @@ describe('ActiveEidos config', () => {
const tooltipTokens = eidos.getRecipeTokens('tooltip') as Record<string, string> const tooltipTokens = eidos.getRecipeTokens('tooltip') as Record<string, string>
tooltipTokens['content-z'] = '1' tooltipTokens['content-z'] = '1'
expect(eidos.getRecipeTokens('tooltip')?.['content-z']).toBe('76') expect(eidos.getRecipeTokens('tooltip')?.['content-z']).toBe('76')
expect(Object.keys(THEME_BASE_LIGHT_COLOR_SCALES)).toHaveLength(12) // Palette library at Radix parity: 12 original + 19 added Radix scales.
expect(Object.keys(THEME_BASE_DARK_COLOR_SCALES)).toHaveLength(12) expect(Object.keys(THEME_BASE_LIGHT_COLOR_SCALES)).toHaveLength(31)
expect(Object.keys(THEME_BASE_DARK_COLOR_SCALES)).toHaveLength(31)
for (const scale of [
...Object.values(THEME_BASE_LIGHT_COLOR_SCALES),
...Object.values(THEME_BASE_DARK_COLOR_SCALES)
]) {
expect(Object.keys(scale)).toHaveLength(12)
}
expect(eidos.getColorRoleScale('primary', 'base-light')).toEqual( expect(eidos.getColorRoleScale('primary', 'base-light')).toEqual(
THEME_BASE_LIGHT_COLOR_SCALES.purple THEME_BASE_LIGHT_COLOR_SCALES.purple
) )

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

@ -4503,6 +4503,462 @@
--scale-purple-a10: rgb(83 0 158 / 0.7216); --scale-purple-a10: rgb(83 0 158 / 0.7216);
--scale-purple-a11: rgb(82 0 154 / 0.7294); --scale-purple-a11: rgb(82 0 154 / 0.7294);
--scale-purple-a12: rgb(37 0 73 / 0.8745); --scale-purple-a12: rgb(37 0 73 / 0.8745);
--scale-mauve-1: #fdfcfd;
--scale-mauve-2: #faf9fb;
--scale-mauve-3: #f2eff3;
--scale-mauve-4: #eae7ec;
--scale-mauve-5: #e3dfe6;
--scale-mauve-6: #dbd8e0;
--scale-mauve-7: #d0cdd7;
--scale-mauve-8: #bcbac7;
--scale-mauve-9: #8e8c99;
--scale-mauve-10: #84828e;
--scale-mauve-11: #65636d;
--scale-mauve-12: #211f26;
--scale-mauve-a1: rgb(85 0 85 / 0.0118);
--scale-mauve-a2: rgb(43 0 85 / 0.0235);
--scale-mauve-a3: rgb(48 0 64 / 0.0627);
--scale-mauve-a4: rgb(32 0 53 / 0.0941);
--scale-mauve-a5: rgb(32 0 56 / 0.1255);
--scale-mauve-a6: rgb(20 0 52 / 0.1529);
--scale-mauve-a7: rgb(15 0 51 / 0.1961);
--scale-mauve-a8: rgb(7 0 48 / 0.2706);
--scale-mauve-a9: rgb(4 0 29 / 0.451);
--scale-mauve-a10: rgb(4 0 24 / 0.4902);
--scale-mauve-a11: rgb(3 0 16 / 0.6118);
--scale-mauve-a12: rgb(2 0 8 / 0.8784);
--scale-sage-1: #fbfdfc;
--scale-sage-2: #f7f9f8;
--scale-sage-3: #eef1f0;
--scale-sage-4: #e6e9e8;
--scale-sage-5: #dfe2e0;
--scale-sage-6: #d7dad9;
--scale-sage-7: #cbcfcd;
--scale-sage-8: #b8bcba;
--scale-sage-9: #868e8b;
--scale-sage-10: #7c8481;
--scale-sage-11: #5f6563;
--scale-sage-12: #1a211e;
--scale-sage-a1: rgb(0 128 64 / 0.0157);
--scale-sage-a2: rgb(0 64 32 / 0.0314);
--scale-sage-a3: rgb(0 45 30 / 0.0667);
--scale-sage-a4: rgb(0 31 20 / 0.098);
--scale-sage-a5: rgb(0 24 8 / 0.1255);
--scale-sage-a6: rgb(0 19 13 / 0.1569);
--scale-sage-a7: rgb(0 20 10 / 0.2039);
--scale-sage-a8: rgb(0 14 7 / 0.2784);
--scale-sage-a9: rgb(0 17 11 / 0.4745);
--scale-sage-a10: rgb(0 16 10 / 0.5137);
--scale-sage-a11: rgb(0 10 6 / 0.6275);
--scale-sage-a12: rgb(0 8 4 / 0.898);
--scale-olive-1: #fcfdfc;
--scale-olive-2: #f8faf8;
--scale-olive-3: #eff1ef;
--scale-olive-4: #e7e9e7;
--scale-olive-5: #dfe2df;
--scale-olive-6: #d7dad7;
--scale-olive-7: #cccfcc;
--scale-olive-8: #b9bcb8;
--scale-olive-9: #898e87;
--scale-olive-10: #7f847d;
--scale-olive-11: #60655f;
--scale-olive-12: #1d211c;
--scale-olive-a1: rgb(0 85 0 / 0.0118);
--scale-olive-a2: rgb(0 73 0 / 0.0275);
--scale-olive-a3: rgb(0 32 0 / 0.0627);
--scale-olive-a4: rgb(0 21 0 / 0.0941);
--scale-olive-a5: rgb(0 24 0 / 0.1255);
--scale-olive-a6: rgb(0 19 0 / 0.1569);
--scale-olive-a7: rgb(0 15 0 / 0.2);
--scale-olive-a8: rgb(4 14 0 / 0.2784);
--scale-olive-a9: rgb(4 15 0 / 0.4706);
--scale-olive-a10: rgb(4 14 0 / 0.5098);
--scale-olive-a11: rgb(2 10 0 / 0.6275);
--scale-olive-a12: rgb(1 6 0 / 0.8902);
--scale-sand-1: #fdfdfc;
--scale-sand-2: #f9f9f8;
--scale-sand-3: #f1f0ef;
--scale-sand-4: #e9e8e6;
--scale-sand-5: #e2e1de;
--scale-sand-6: #dad9d6;
--scale-sand-7: #cfceca;
--scale-sand-8: #bcbbb5;
--scale-sand-9: #8d8d86;
--scale-sand-10: #82827c;
--scale-sand-11: #63635e;
--scale-sand-12: #21201c;
--scale-sand-a1: rgb(85 85 0 / 0.0118);
--scale-sand-a2: rgb(36 36 0 / 0.0275);
--scale-sand-a3: rgb(32 16 0 / 0.0627);
--scale-sand-a4: rgb(31 20 0 / 0.098);
--scale-sand-a5: rgb(31 23 0 / 0.1294);
--scale-sand-a6: rgb(25 19 0 / 0.1608);
--scale-sand-a7: rgb(24 19 0 / 0.2078);
--scale-sand-a8: rgb(24 21 0 / 0.2902);
--scale-sand-a9: rgb(15 15 0 / 0.4745);
--scale-sand-a10: rgb(12 12 0 / 0.5137);
--scale-sand-a11: rgb(8 8 0 / 0.6314);
--scale-sand-a12: rgb(6 4 0 / 0.8902);
--scale-tomato-1: #fffcfc;
--scale-tomato-2: #fff8f7;
--scale-tomato-3: #feebe7;
--scale-tomato-4: #ffdcd3;
--scale-tomato-5: #ffcdc2;
--scale-tomato-6: #fdbdaf;
--scale-tomato-7: #f5a898;
--scale-tomato-8: #ec8e7b;
--scale-tomato-9: #e54d2e;
--scale-tomato-10: #dd4425;
--scale-tomato-11: #d13415;
--scale-tomato-12: #5c271f;
--scale-tomato-a1: rgb(255 0 0 / 0.0118);
--scale-tomato-a2: rgb(255 32 0 / 0.0314);
--scale-tomato-a3: rgb(244 43 0 / 0.0941);
--scale-tomato-a4: rgb(255 52 0 / 0.1725);
--scale-tomato-a5: rgb(255 46 0 / 0.2392);
--scale-tomato-a6: rgb(249 45 0 / 0.3137);
--scale-tomato-a7: rgb(230 40 0 / 0.4039);
--scale-tomato-a8: rgb(218 37 0 / 0.5176);
--scale-tomato-a9: rgb(223 38 0 / 0.8196);
--scale-tomato-a10: rgb(215 36 0 / 0.8549);
--scale-tomato-a11: rgb(205 34 0 / 0.9176);
--scale-tomato-a12: rgb(69 9 0 / 0.8784);
--scale-ruby-1: #fffcfd;
--scale-ruby-2: #fff7f8;
--scale-ruby-3: #feeaed;
--scale-ruby-4: #ffdce1;
--scale-ruby-5: #ffced6;
--scale-ruby-6: #f8bfc8;
--scale-ruby-7: #efacb8;
--scale-ruby-8: #e592a3;
--scale-ruby-9: #e54666;
--scale-ruby-10: #dc3b5d;
--scale-ruby-11: #ca244d;
--scale-ruby-12: #64172b;
--scale-ruby-a1: rgb(255 0 85 / 0.0118);
--scale-ruby-a2: rgb(255 0 32 / 0.0314);
--scale-ruby-a3: rgb(243 0 36 / 0.0824);
--scale-ruby-a4: rgb(255 0 36 / 0.1373);
--scale-ruby-a5: rgb(255 0 42 / 0.1922);
--scale-ruby-a6: rgb(227 0 36 / 0.251);
--scale-ruby-a7: rgb(206 0 37 / 0.3255);
--scale-ruby-a8: rgb(194 0 40 / 0.4275);
--scale-ruby-a9: rgb(219 0 44 / 0.7255);
--scale-ruby-a10: rgb(209 0 44 / 0.7686);
--scale-ruby-a11: rgb(193 0 48 / 0.8588);
--scale-ruby-a12: rgb(85 0 22 / 0.9098);
--scale-crimson-1: #fffcfd;
--scale-crimson-2: #fef7f9;
--scale-crimson-3: #ffe9f0;
--scale-crimson-4: #fedce7;
--scale-crimson-5: #facedd;
--scale-crimson-6: #f3bed1;
--scale-crimson-7: #eaacc3;
--scale-crimson-8: #e093b2;
--scale-crimson-9: #e93d82;
--scale-crimson-10: #df3478;
--scale-crimson-11: #cb1d63;
--scale-crimson-12: #621639;
--scale-crimson-a1: rgb(255 0 85 / 0.0118);
--scale-crimson-a2: rgb(223 0 64 / 0.0314);
--scale-crimson-a3: rgb(255 0 81 / 0.0863);
--scale-crimson-a4: rgb(248 0 80 / 0.1373);
--scale-crimson-a5: rgb(229 0 78 / 0.1922);
--scale-crimson-a6: rgb(208 0 75 / 0.2549);
--scale-crimson-a7: rgb(190 0 71 / 0.3255);
--scale-crimson-a8: rgb(182 0 73 / 0.4235);
--scale-crimson-a9: rgb(226 0 91 / 0.7608);
--scale-crimson-a10: rgb(215 0 85 / 0.7961);
--scale-crimson-a11: rgb(196 0 79 / 0.8863);
--scale-crimson-a12: rgb(83 0 38 / 0.9137);
--scale-plum-1: #fefcff;
--scale-plum-2: #fdf7fd;
--scale-plum-3: #fbebfb;
--scale-plum-4: #f7def8;
--scale-plum-5: #f2d1f3;
--scale-plum-6: #e9c2ec;
--scale-plum-7: #deade3;
--scale-plum-8: #cf91d8;
--scale-plum-9: #ab4aba;
--scale-plum-10: #a144af;
--scale-plum-11: #953ea3;
--scale-plum-12: #53195d;
--scale-plum-a1: rgb(170 0 255 / 0.0118);
--scale-plum-a2: rgb(191 0 191 / 0.0314);
--scale-plum-a3: rgb(204 0 204 / 0.0784);
--scale-plum-a4: rgb(193 0 201 / 0.1294);
--scale-plum-a5: rgb(183 0 188 / 0.1804);
--scale-plum-a6: rgb(163 0 176 / 0.2392);
--scale-plum-a7: rgb(152 0 168 / 0.3216);
--scale-plum-a8: rgb(144 0 165 / 0.4314);
--scale-plum-a9: rgb(137 0 158 / 0.7098);
--scale-plum-a10: rgb(127 0 146 / 0.7333);
--scale-plum-a11: rgb(115 0 133 / 0.7569);
--scale-plum-a12: rgb(64 0 75 / 0.902);
--scale-violet-1: #fdfcfe;
--scale-violet-2: #faf8ff;
--scale-violet-3: #f4f0fe;
--scale-violet-4: #ebe4ff;
--scale-violet-5: #e1d9ff;
--scale-violet-6: #d4cafe;
--scale-violet-7: #c2b5f5;
--scale-violet-8: #aa99ec;
--scale-violet-9: #6e56cf;
--scale-violet-10: #654dc4;
--scale-violet-11: #6550b9;
--scale-violet-12: #2f265f;
--scale-violet-a1: rgb(85 0 170 / 0.0118);
--scale-violet-a2: rgb(73 0 255 / 0.0275);
--scale-violet-a3: rgb(68 0 238 / 0.0588);
--scale-violet-a4: rgb(66 0 255 / 0.1059);
--scale-violet-a5: rgb(54 0 255 / 0.149);
--scale-violet-a6: rgb(48 0 250 / 0.2078);
--scale-violet-a7: rgb(45 0 221 / 0.2902);
--scale-violet-a8: rgb(43 0 208 / 0.4);
--scale-violet-a9: rgb(36 0 183 / 0.6627);
--scale-violet-a10: rgb(34 0 170 / 0.698);
--scale-violet-a11: rgb(31 0 153 / 0.6863);
--scale-violet-a12: rgb(11 0 67 / 0.851);
--scale-iris-1: #fdfdff;
--scale-iris-2: #f8f8ff;
--scale-iris-3: #f0f1fe;
--scale-iris-4: #e6e7ff;
--scale-iris-5: #dadcff;
--scale-iris-6: #cbcdff;
--scale-iris-7: #b8baf8;
--scale-iris-8: #9b9ef0;
--scale-iris-9: #5b5bd6;
--scale-iris-10: #5151cd;
--scale-iris-11: #5753c6;
--scale-iris-12: #272962;
--scale-iris-a1: rgb(0 0 255 / 0.0078);
--scale-iris-a2: rgb(0 0 255 / 0.0275);
--scale-iris-a3: rgb(0 17 238 / 0.0588);
--scale-iris-a4: rgb(0 10 255 / 0.098);
--scale-iris-a5: rgb(0 14 255 / 0.1451);
--scale-iris-a6: rgb(0 10 255 / 0.2039);
--scale-iris-a7: rgb(0 7 230 / 0.2784);
--scale-iris-a8: rgb(0 8 217 / 0.3922);
--scale-iris-a9: rgb(0 0 191 / 0.6431);
--scale-iris-a10: rgb(0 0 182 / 0.6824);
--scale-iris-a11: rgb(6 0 170 / 0.6745);
--scale-iris-a12: rgb(0 2 70 / 0.8471);
--scale-indigo-1: #fdfdfe;
--scale-indigo-2: #f7f9ff;
--scale-indigo-3: #edf2fe;
--scale-indigo-4: #e1e9ff;
--scale-indigo-5: #d2deff;
--scale-indigo-6: #c1d0ff;
--scale-indigo-7: #abbdf9;
--scale-indigo-8: #8da4ef;
--scale-indigo-9: #3e63dd;
--scale-indigo-10: #3358d4;
--scale-indigo-11: #3a5bc7;
--scale-indigo-12: #1f2d5c;
--scale-indigo-a1: rgb(0 0 128 / 0.0078);
--scale-indigo-a2: rgb(0 64 255 / 0.0314);
--scale-indigo-a3: rgb(0 71 241 / 0.0706);
--scale-indigo-a4: rgb(0 68 255 / 0.1176);
--scale-indigo-a5: rgb(0 68 255 / 0.1765);
--scale-indigo-a6: rgb(0 62 255 / 0.2431);
--scale-indigo-a7: rgb(0 55 237 / 0.3294);
--scale-indigo-a8: rgb(0 51 219 / 0.4471);
--scale-indigo-a9: rgb(0 49 210 / 0.7569);
--scale-indigo-a10: rgb(0 46 201 / 0.8);
--scale-indigo-a11: rgb(0 43 183 / 0.7725);
--scale-indigo-a12: rgb(0 16 69 / 0.8784);
--scale-jade-1: #fbfefd;
--scale-jade-2: #f4fbf7;
--scale-jade-3: #e6f7ed;
--scale-jade-4: #d6f1e3;
--scale-jade-5: #c3e9d7;
--scale-jade-6: #acdec8;
--scale-jade-7: #8bceb6;
--scale-jade-8: #56ba9f;
--scale-jade-9: #29a383;
--scale-jade-10: #26997b;
--scale-jade-11: #208368;
--scale-jade-12: #1d3b31;
--scale-jade-a1: rgb(0 191 128 / 0.0157);
--scale-jade-a2: rgb(0 162 70 / 0.0431);
--scale-jade-a3: rgb(0 173 71 / 0.098);
--scale-jade-a4: rgb(0 168 81 / 0.1608);
--scale-jade-a5: rgb(0 162 85 / 0.2353);
--scale-jade-a6: rgb(0 154 86 / 0.3255);
--scale-jade-a7: rgb(0 147 95 / 0.4549);
--scale-jade-a8: rgb(0 151 110 / 0.6627);
--scale-jade-a9: rgb(0 145 107 / 0.8392);
--scale-jade-a10: rgb(0 135 100 / 0.851);
--scale-jade-a11: rgb(0 113 82 / 0.8745);
--scale-jade-a12: rgb(0 34 23 / 0.8863);
--scale-grass-1: #fbfefb;
--scale-grass-2: #f5fbf5;
--scale-grass-3: #e9f6e9;
--scale-grass-4: #daf1db;
--scale-grass-5: #c9e8ca;
--scale-grass-6: #b2ddb5;
--scale-grass-7: #94ce9a;
--scale-grass-8: #65ba74;
--scale-grass-9: #46a758;
--scale-grass-10: #3e9b4f;
--scale-grass-11: #2a7e3b;
--scale-grass-12: #203c25;
--scale-grass-a1: rgb(0 191 0 / 0.0157);
--scale-grass-a2: rgb(0 153 0 / 0.0392);
--scale-grass-a3: rgb(0 151 0 / 0.0863);
--scale-grass-a4: rgb(0 159 7 / 0.1451);
--scale-grass-a5: rgb(0 146 5 / 0.2118);
--scale-grass-a6: rgb(0 142 10 / 0.302);
--scale-grass-a7: rgb(0 138 14 / 0.4196);
--scale-grass-a8: rgb(0 141 25 / 0.6039);
--scale-grass-a9: rgb(0 134 25 / 0.7255);
--scale-grass-a10: rgb(0 123 22 / 0.7569);
--scale-grass-a11: rgb(0 101 20 / 0.8353);
--scale-grass-a12: rgb(0 32 6 / 0.8745);
--scale-brown-1: #fefdfc;
--scale-brown-2: #fcf9f6;
--scale-brown-3: #f6eee7;
--scale-brown-4: #f0e4d9;
--scale-brown-5: #ebdaca;
--scale-brown-6: #e4cdb7;
--scale-brown-7: #dcbc9f;
--scale-brown-8: #cea37e;
--scale-brown-9: #ad7f58;
--scale-brown-10: #a07553;
--scale-brown-11: #815e46;
--scale-brown-12: #3e332e;
--scale-brown-a1: rgb(170 85 0 / 0.0118);
--scale-brown-a2: rgb(170 85 0 / 0.0353);
--scale-brown-a3: rgb(159 74 0 / 0.0941);
--scale-brown-a4: rgb(154 74 0 / 0.149);
--scale-brown-a5: rgb(159 77 0 / 0.2078);
--scale-brown-a6: rgb(159 78 0 / 0.2824);
--scale-brown-a7: rgb(162 77 0 / 0.3765);
--scale-brown-a8: rgb(158 73 0 / 0.5059);
--scale-brown-a9: rgb(130 60 0 / 0.6549);
--scale-brown-a10: rgb(114 50 0 / 0.6745);
--scale-brown-a11: rgb(81 33 0 / 0.7255);
--scale-brown-a12: rgb(20 6 0 / 0.8196);
--scale-sky-1: #f9feff;
--scale-sky-2: #f1fafd;
--scale-sky-3: #e1f6fd;
--scale-sky-4: #d1f0fa;
--scale-sky-5: #bee7f5;
--scale-sky-6: #a9daed;
--scale-sky-7: #8dcae3;
--scale-sky-8: #60b3d7;
--scale-sky-9: #7ce2fe;
--scale-sky-10: #74daf8;
--scale-sky-11: #00749e;
--scale-sky-12: #1d3e56;
--scale-sky-a1: rgb(0 213 255 / 0.0235);
--scale-sky-a2: rgb(0 164 219 / 0.0549);
--scale-sky-a3: rgb(0 179 238 / 0.1176);
--scale-sky-a4: rgb(0 172 227 / 0.1804);
--scale-sky-a5: rgb(0 161 216 / 0.2549);
--scale-sky-a6: rgb(0 145 202 / 0.3373);
--scale-sky-a7: rgb(0 136 192 / 0.4471);
--scale-sky-a8: rgb(0 133 191 / 0.6235);
--scale-sky-a9: rgb(0 199 253 / 0.5137);
--scale-sky-a10: rgb(0 187 242 / 0.5451);
--scale-sky-a11: rgb(0 116 158 / 1);
--scale-sky-a12: rgb(0 37 64 / 0.8863);
--scale-mint-1: #f9fefd;
--scale-mint-2: #f2fbf9;
--scale-mint-3: #ddf9f2;
--scale-mint-4: #c8f4e9;
--scale-mint-5: #b3ecde;
--scale-mint-6: #9ce0d0;
--scale-mint-7: #7ecfbd;
--scale-mint-8: #4cbba5;
--scale-mint-9: #86ead4;
--scale-mint-10: #7de0cb;
--scale-mint-11: #027864;
--scale-mint-12: #16433c;
--scale-mint-a1: rgb(0 213 170 / 0.0235);
--scale-mint-a2: rgb(0 177 137 / 0.051);
--scale-mint-a3: rgb(0 210 158 / 0.1333);
--scale-mint-a4: rgb(0 204 153 / 0.2157);
--scale-mint-a5: rgb(0 191 144 / 0.298);
--scale-mint-a6: rgb(0 175 134 / 0.3882);
--scale-mint-a7: rgb(0 160 125 / 0.5059);
--scale-mint-a8: rgb(0 158 127 / 0.702);
--scale-mint-a9: rgb(0 211 164 / 0.4745);
--scale-mint-a10: rgb(0 194 153 / 0.5098);
--scale-mint-a11: rgb(0 119 99 / 0.9922);
--scale-mint-a12: rgb(0 49 42 / 0.9137);
--scale-lime-1: #fcfdfa;
--scale-lime-2: #f8faf3;
--scale-lime-3: #eef6d6;
--scale-lime-4: #e2f0bd;
--scale-lime-5: #d3e7a6;
--scale-lime-6: #c2da91;
--scale-lime-7: #abc978;
--scale-lime-8: #8db654;
--scale-lime-9: #bdee63;
--scale-lime-10: #b0e64c;
--scale-lime-11: #5c7c2f;
--scale-lime-12: #37401c;
--scale-lime-a1: rgb(102 153 0 / 0.0196);
--scale-lime-a2: rgb(106 149 0 / 0.0471);
--scale-lime-a3: rgb(149 199 0 / 0.1608);
--scale-lime-a4: rgb(143 197 0 / 0.2588);
--scale-lime-a5: rgb(129 186 0 / 0.349);
--scale-lime-a6: rgb(114 169 0 / 0.4314);
--scale-lime-a7: rgb(96 153 0 / 0.5294);
--scale-lime-a8: rgb(85 146 0 / 0.6706);
--scale-lime-a9: rgb(147 227 0 / 0.6118);
--scale-lime-a10: rgb(142 219 0 / 0.702);
--scale-lime-a11: rgb(55 94 0 / 0.8157);
--scale-lime-a12: rgb(30 40 0 / 0.8902);
--scale-gold-1: #fdfdfc;
--scale-gold-2: #faf9f2;
--scale-gold-3: #f2f0e7;
--scale-gold-4: #eae6db;
--scale-gold-5: #e1dccf;
--scale-gold-6: #d8d0bf;
--scale-gold-7: #cbc0aa;
--scale-gold-8: #b9a88d;
--scale-gold-9: #978365;
--scale-gold-10: #8c7a5e;
--scale-gold-11: #71624b;
--scale-gold-12: #3b352b;
--scale-gold-a1: rgb(85 85 0 / 0.0118);
--scale-gold-a2: rgb(157 137 0 / 0.051);
--scale-gold-a3: rgb(117 96 0 / 0.0941);
--scale-gold-a4: rgb(106 78 0 / 0.1412);
--scale-gold-a5: rgb(96 69 0 / 0.1882);
--scale-gold-a6: rgb(100 68 0 / 0.251);
--scale-gold-a7: rgb(99 66 0 / 0.3333);
--scale-gold-a8: rgb(98 60 0 / 0.4471);
--scale-gold-a9: rgb(83 50 0 / 0.6039);
--scale-gold-a10: rgb(73 44 0 / 0.6314);
--scale-gold-a11: rgb(54 33 0 / 0.7059);
--scale-gold-a12: rgb(19 12 0 / 0.8314);
--scale-bronze-1: #fdfcfc;
--scale-bronze-2: #fdf7f5;
--scale-bronze-3: #f6edea;
--scale-bronze-4: #efe4df;
--scale-bronze-5: #e7d9d3;
--scale-bronze-6: #dfcdc5;
--scale-bronze-7: #d3bcb3;
--scale-bronze-8: #c2a499;
--scale-bronze-9: #a18072;
--scale-bronze-10: #957468;
--scale-bronze-11: #7d5e54;
--scale-bronze-12: #43302b;
--scale-bronze-a1: rgb(85 0 0 / 0.0118);
--scale-bronze-a2: rgb(204 51 0 / 0.0392);
--scale-bronze-a3: rgb(146 36 0 / 0.0824);
--scale-bronze-a4: rgb(128 40 0 / 0.1255);
--scale-bronze-a5: rgb(116 35 0 / 0.1725);
--scale-bronze-a6: rgb(114 35 0 / 0.2275);
--scale-bronze-a7: rgb(107 30 0 / 0.298);
--scale-bronze-a8: rgb(103 28 0 / 0.4);
--scale-bronze-a9: rgb(85 25 0 / 0.5529);
--scale-bronze-a10: rgb(76 20 0 / 0.5922);
--scale-bronze-a11: rgb(61 15 0 / 0.6706);
--scale-bronze-a12: rgb(29 6 0 / 0.8314);
--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);
@ -5136,6 +5592,462 @@
--scale-purple-a10: rgb(189 113 255 / 0.8157); --scale-purple-a10: rgb(189 113 255 / 0.8157);
--scale-purple-a11: rgb(209 157 255 / 1); --scale-purple-a11: rgb(209 157 255 / 1);
--scale-purple-a12: rgb(241 221 255 / 0.9804); --scale-purple-a12: rgb(241 221 255 / 0.9804);
--scale-mauve-1: #121113;
--scale-mauve-2: #1a191b;
--scale-mauve-3: #232225;
--scale-mauve-4: #2b292d;
--scale-mauve-5: #323035;
--scale-mauve-6: #3c393f;
--scale-mauve-7: #49474e;
--scale-mauve-8: #625f69;
--scale-mauve-9: #6f6d78;
--scale-mauve-10: #7c7a85;
--scale-mauve-11: #b5b2bc;
--scale-mauve-12: #eeeef0;
--scale-mauve-a1: rgb(242 228 255 / 0.0745);
--scale-mauve-a2: rgb(246 236 255 / 0.1059);
--scale-mauve-a3: rgb(241 234 255 / 0.1451);
--scale-mauve-a4: rgb(244 232 255 / 0.1765);
--scale-mauve-a5: rgb(241 231 255 / 0.2078);
--scale-mauve-a6: rgb(243 231 255 / 0.2471);
--scale-mauve-a7: rgb(239 232 255 / 0.3059);
--scale-mauve-a8: rgb(238 231 255 / 0.4118);
--scale-mauve-a9: rgb(236 232 255 / 0.4706);
--scale-mauve-a10: rgb(238 234 255 / 0.5216);
--scale-mauve-a11: rgb(246 241 255 / 0.7373);
--scale-mauve-a12: rgb(253 253 255 / 0.9412);
--scale-sage-1: #101211;
--scale-sage-2: #171918;
--scale-sage-3: #202221;
--scale-sage-4: #272a29;
--scale-sage-5: #2e3130;
--scale-sage-6: #373b39;
--scale-sage-7: #444947;
--scale-sage-8: #5b625f;
--scale-sage-9: #63706b;
--scale-sage-10: #717d79;
--scale-sage-11: #adb5b2;
--scale-sage-12: #eceeed;
--scale-sage-a1: rgb(227 255 241 / 0.0706);
--scale-sage-a2: rgb(235 255 245 / 0.098);
--scale-sage-a3: rgb(240 255 248 / 0.1333);
--scale-sage-a4: rgb(237 255 249 / 0.1647);
--scale-sage-a5: rgb(239 255 250 / 0.1922);
--scale-sage-a6: rgb(238 255 246 / 0.2314);
--scale-sage-a7: rgb(238 255 248 / 0.2863);
--scale-sage-a8: rgb(237 255 247 / 0.3843);
--scale-sage-a9: rgb(225 255 244 / 0.4392);
--scale-sage-a10: rgb(231 255 247 / 0.4902);
--scale-sage-a11: rgb(244 255 251 / 0.7098);
--scale-sage-a12: rgb(253 255 254 / 0.9333);
--scale-olive-1: #111210;
--scale-olive-2: #181917;
--scale-olive-3: #212220;
--scale-olive-4: #282a27;
--scale-olive-5: #2f312e;
--scale-olive-6: #383a36;
--scale-olive-7: #454843;
--scale-olive-8: #5c625b;
--scale-olive-9: #687066;
--scale-olive-10: #767d74;
--scale-olive-11: #afb5ad;
--scale-olive-12: #eceeec;
--scale-olive-a1: rgb(241 255 227 / 0.0706);
--scale-olive-a2: rgb(245 255 235 / 0.098);
--scale-olive-a3: rgb(248 255 240 / 0.1333);
--scale-olive-a4: rgb(243 255 237 / 0.1647);
--scale-olive-a5: rgb(245 255 239 / 0.1922);
--scale-olive-a6: rgb(246 255 237 / 0.2275);
--scale-olive-a7: rgb(244 255 237 / 0.2824);
--scale-olive-a8: rgb(239 255 237 / 0.3843);
--scale-olive-a9: rgb(237 255 232 / 0.4392);
--scale-olive-a10: rgb(241 255 237 / 0.4902);
--scale-olive-a11: rgb(247 255 244 / 0.7098);
--scale-olive-a12: rgb(253 255 253 / 0.9333);
--scale-sand-1: #111110;
--scale-sand-2: #191918;
--scale-sand-3: #222221;
--scale-sand-4: #2a2a28;
--scale-sand-5: #31312e;
--scale-sand-6: #3b3a37;
--scale-sand-7: #494844;
--scale-sand-8: #62605b;
--scale-sand-9: #6f6d66;
--scale-sand-10: #7c7b74;
--scale-sand-11: #b5b3ad;
--scale-sand-12: #eeeeec;
--scale-sand-a1: rgb(255 255 240 / 0.0667);
--scale-sand-a2: rgb(255 255 245 / 0.098);
--scale-sand-a3: rgb(255 255 248 / 0.1333);
--scale-sand-a4: rgb(255 255 243 / 0.1647);
--scale-sand-a5: rgb(255 255 239 / 0.1922);
--scale-sand-a6: rgb(255 251 238 / 0.2314);
--scale-sand-a7: rgb(255 252 238 / 0.2863);
--scale-sand-a8: rgb(255 250 237 / 0.3843);
--scale-sand-a9: rgb(255 250 234 / 0.4353);
--scale-sand-a10: rgb(255 253 239 / 0.4863);
--scale-sand-a11: rgb(255 252 244 / 0.7098);
--scale-sand-a12: rgb(255 255 253 / 0.9333);
--scale-tomato-1: #181111;
--scale-tomato-2: #1f1513;
--scale-tomato-3: #391714;
--scale-tomato-4: #4e1511;
--scale-tomato-5: #5e1c16;
--scale-tomato-6: #6e2920;
--scale-tomato-7: #853a2d;
--scale-tomato-8: #ac4d39;
--scale-tomato-9: #e54d2e;
--scale-tomato-10: #ec6142;
--scale-tomato-11: #ff977d;
--scale-tomato-12: #fbd3cb;
--scale-tomato-a1: rgb(255 181 181 / 0.0941);
--scale-tomato-a2: rgb(255 173 156 / 0.1216);
--scale-tomato-a3: rgb(255 103 89 / 0.2235);
--scale-tomato-a4: rgb(255 69 56 / 0.3059);
--scale-tomato-a5: rgb(255 76 60 / 0.3686);
--scale-tomato-a6: rgb(255 95 74 / 0.4314);
--scale-tomato-a7: rgb(255 111 86 / 0.5216);
--scale-tomato-a8: rgb(255 114 85 / 0.6745);
--scale-tomato-a9: rgb(255 86 51 / 0.898);
--scale-tomato-a10: rgb(255 105 71 / 0.9255);
--scale-tomato-a11: rgb(255 151 125 / 1);
--scale-tomato-a12: rgb(255 214 206 / 0.9843);
--scale-ruby-1: #191113;
--scale-ruby-2: #1e1517;
--scale-ruby-3: #3a141e;
--scale-ruby-4: #4e1325;
--scale-ruby-5: #5e1a2e;
--scale-ruby-6: #6f2539;
--scale-ruby-7: #883447;
--scale-ruby-8: #b3445a;
--scale-ruby-9: #e54666;
--scale-ruby-10: #ec5a72;
--scale-ruby-11: #ff949d;
--scale-ruby-12: #fed2e1;
--scale-ruby-a1: rgb(255 173 194 / 0.098);
--scale-ruby-a2: rgb(255 179 196 / 0.1176);
--scale-ruby-a3: rgb(255 88 132 / 0.2275);
--scale-ruby-a4: rgb(255 62 121 / 0.3059);
--scale-ruby-a5: rgb(255 71 125 / 0.3686);
--scale-ruby-a6: rgb(255 85 131 / 0.4353);
--scale-ruby-a7: rgb(255 98 133 / 0.5333);
--scale-ruby-a8: rgb(255 97 128 / 0.702);
--scale-ruby-a9: rgb(255 78 114 / 0.898);
--scale-ruby-a10: rgb(255 97 123 / 0.9255);
--scale-ruby-a11: rgb(255 148 157 / 1);
--scale-ruby-a12: rgb(255 211 226 / 0.9961);
--scale-crimson-1: #191114;
--scale-crimson-2: #201318;
--scale-crimson-3: #381525;
--scale-crimson-4: #4d122f;
--scale-crimson-5: #5c1839;
--scale-crimson-6: #6d2545;
--scale-crimson-7: #873356;
--scale-crimson-8: #b0436e;
--scale-crimson-9: #e93d82;
--scale-crimson-10: #ee518a;
--scale-crimson-11: #ff92ad;
--scale-crimson-12: #fdd3e8;
--scale-crimson-a1: rgb(255 173 204 / 0.098);
--scale-crimson-a2: rgb(255 151 191 / 0.1255);
--scale-crimson-a3: rgb(255 96 168 / 0.2196);
--scale-crimson-a4: rgb(255 60 156 / 0.302);
--scale-crimson-a5: rgb(255 67 158 / 0.3608);
--scale-crimson-a6: rgb(255 87 161 / 0.4275);
--scale-crimson-a7: rgb(255 96 162 / 0.5294);
--scale-crimson-a8: rgb(255 97 159 / 0.6902);
--scale-crimson-a9: rgb(255 67 142 / 0.9137);
--scale-crimson-a10: rgb(255 87 148 / 0.9333);
--scale-crimson-a11: rgb(255 146 173 / 1);
--scale-crimson-a12: rgb(255 213 234 / 0.9922);
--scale-plum-1: #181118;
--scale-plum-2: #201320;
--scale-plum-3: #351a35;
--scale-plum-4: #451d47;
--scale-plum-5: #512454;
--scale-plum-6: #5e3061;
--scale-plum-7: #734079;
--scale-plum-8: #92549c;
--scale-plum-9: #ab4aba;
--scale-plum-10: #b658c4;
--scale-plum-11: #e796f3;
--scale-plum-12: #f4d4f4;
--scale-plum-a1: rgb(255 181 255 / 0.0941);
--scale-plum-a2: rgb(255 151 255 / 0.1255);
--scale-plum-a3: rgb(255 125 255 / 0.2078);
--scale-plum-a4: rgb(248 104 255 / 0.2784);
--scale-plum-a5: rgb(246 109 255 / 0.3294);
--scale-plum-a6: rgb(247 126 255 / 0.3804);
--scale-plum-a7: rgb(242 135 255 / 0.4745);
--scale-plum-a8: rgb(239 137 255 / 0.6118);
--scale-plum-a9: rgb(234 101 255 / 0.7294);
--scale-plum-a10: rgb(237 114 255 / 0.7686);
--scale-plum-a11: rgb(242 157 255 / 0.9529);
--scale-plum-a12: rgb(255 222 255 / 0.9569);
--scale-violet-1: #14121f;
--scale-violet-2: #1b1525;
--scale-violet-3: #291f43;
--scale-violet-4: #33255b;
--scale-violet-5: #3c2e69;
--scale-violet-6: #473876;
--scale-violet-7: #56468b;
--scale-violet-8: #6958ad;
--scale-violet-9: #6e56cf;
--scale-violet-10: #7d66d9;
--scale-violet-11: #baa7ff;
--scale-violet-12: #e2ddfe;
--scale-violet-a1: rgb(165 148 255 / 0.1216);
--scale-violet-a2: rgb(186 145 255 / 0.1451);
--scale-violet-a3: rgb(156 118 255 / 0.2627);
--scale-violet-a4: rgb(143 104 255 / 0.3569);
--scale-violet-a5: rgb(146 112 255 / 0.4118);
--scale-violet-a6: rgb(153 121 255 / 0.4627);
--scale-violet-a7: rgb(158 128 255 / 0.5451);
--scale-violet-a8: rgb(155 130 255 / 0.6784);
--scale-violet-a9: rgb(136 106 255 / 0.8118);
--scale-violet-a10: rgb(147 120 255 / 0.851);
--scale-violet-a11: rgb(186 167 255 / 1);
--scale-violet-a12: rgb(227 222 255 / 0.9961);
--scale-iris-1: #13131e;
--scale-iris-2: #171625;
--scale-iris-3: #202248;
--scale-iris-4: #262a65;
--scale-iris-5: #303374;
--scale-iris-6: #3d3e82;
--scale-iris-7: #4a4a95;
--scale-iris-8: #5958b1;
--scale-iris-9: #5b5bd6;
--scale-iris-10: #6e6ade;
--scale-iris-11: #b1a9ff;
--scale-iris-12: #e0dffe;
--scale-iris-a1: rgb(162 162 255 / 0.1176);
--scale-iris-a2: rgb(159 152 255 / 0.1451);
--scale-iris-a3: rgb(113 120 255 / 0.2824);
--scale-iris-a4: rgb(96 106 255 / 0.3961);
--scale-iris-a5: rgb(106 112 255 / 0.4549);
--scale-iris-a6: rgb(120 122 255 / 0.5098);
--scale-iris-a7: rgb(127 127 255 / 0.5843);
--scale-iris-a8: rgb(128 127 255 / 0.6941);
--scale-iris-a9: rgb(108 108 255 / 0.8392);
--scale-iris-a10: rgb(126 122 255 / 0.8706);
--scale-iris-a11: rgb(177 169 255 / 1);
--scale-iris-a12: rgb(225 224 255 / 0.9961);
--scale-indigo-1: #11131f;
--scale-indigo-2: #141726;
--scale-indigo-3: #182449;
--scale-indigo-4: #1d2e62;
--scale-indigo-5: #253974;
--scale-indigo-6: #304384;
--scale-indigo-7: #3a4f97;
--scale-indigo-8: #435db1;
--scale-indigo-9: #3e63dd;
--scale-indigo-10: #5472e4;
--scale-indigo-11: #9eb1ff;
--scale-indigo-12: #d6e1ff;
--scale-indigo-a1: rgb(140 156 255 / 0.1216);
--scale-indigo-a2: rgb(134 154 255 / 0.149);
--scale-indigo-a3: rgb(84 126 255 / 0.2863);
--scale-indigo-a4: rgb(75 120 255 / 0.3843);
--scale-indigo-a5: rgb(81 125 255 / 0.4549);
--scale-indigo-a6: rgb(93 129 255 / 0.5176);
--scale-indigo-a7: rgb(98 133 255 / 0.5922);
--scale-indigo-a8: rgb(97 134 255 / 0.6941);
--scale-indigo-a9: rgb(72 114 255 / 0.8667);
--scale-indigo-a10: rgb(94 128 255 / 0.8941);
--scale-indigo-a11: rgb(158 177 255 / 1);
--scale-indigo-a12: rgb(214 225 255 / 1);
--scale-jade-1: #0d1512;
--scale-jade-2: #121c18;
--scale-jade-3: #0f2e22;
--scale-jade-4: #0b3b2c;
--scale-jade-5: #114837;
--scale-jade-6: #1b5745;
--scale-jade-7: #246854;
--scale-jade-8: #2a7e68;
--scale-jade-9: #29a383;
--scale-jade-10: #27b08b;
--scale-jade-11: #1fd8a4;
--scale-jade-12: #adf0d4;
--scale-jade-a1: rgb(158 255 219 / 0.0824);
--scale-jade-a2: rgb(164 255 219 / 0.1098);
--scale-jade-a3: rgb(83 255 188 / 0.1804);
--scale-jade-a4: rgb(48 255 190 / 0.2314);
--scale-jade-a5: rgb(60 255 195 / 0.2824);
--scale-jade-a6: rgb(79 255 202 / 0.3412);
--scale-jade-a7: rgb(88 255 206 / 0.4078);
--scale-jade-a8: rgb(85 255 210 / 0.4941);
--scale-jade-a9: rgb(64 255 205 / 0.6392);
--scale-jade-a10: rgb(57 255 201 / 0.6902);
--scale-jade-a11: rgb(37 255 194 / 0.8471);
--scale-jade-a12: rgb(184 255 225 / 0.9412);
--scale-grass-1: #0e1511;
--scale-grass-2: #141a15;
--scale-grass-3: #1b2a1e;
--scale-grass-4: #1d3a24;
--scale-grass-5: #25482d;
--scale-grass-6: #2d5736;
--scale-grass-7: #366740;
--scale-grass-8: #3e7949;
--scale-grass-9: #46a758;
--scale-grass-10: #53b365;
--scale-grass-11: #71d083;
--scale-grass-12: #c2f0c2;
--scale-grass-a1: rgb(170 255 206 / 0.0824);
--scale-grass-a2: rgb(196 255 206 / 0.102);
--scale-grass-a3: rgb(164 255 182 / 0.1647);
--scale-grass-a4: rgb(128 255 158 / 0.2275);
--scale-grass-a5: rgb(131 255 159 / 0.2824);
--scale-grass-a6: rgb(132 255 158 / 0.3412);
--scale-grass-a7: rgb(134 255 158 / 0.4039);
--scale-grass-a8: rgb(131 255 154 / 0.4745);
--scale-grass-a9: rgb(107 255 134 / 0.6549);
--scale-grass-a10: rgb(118 255 144 / 0.702);
--scale-grass-a11: rgb(139 255 161 / 0.8157);
--scale-grass-a12: rgb(206 255 206 / 0.9412);
--scale-brown-1: #12110f;
--scale-brown-2: #1c1816;
--scale-brown-3: #28211d;
--scale-brown-4: #322922;
--scale-brown-5: #3e3128;
--scale-brown-6: #4d3c2f;
--scale-brown-7: #614a39;
--scale-brown-8: #7c5f46;
--scale-brown-9: #ad7f58;
--scale-brown-10: #b88c67;
--scale-brown-11: #dbb594;
--scale-brown-12: #f2e1ca;
--scale-brown-a1: rgb(255 241 213 / 0.0706);
--scale-brown-a2: rgb(255 219 200 / 0.1098);
--scale-brown-a3: rgb(255 210 185 / 0.1569);
--scale-brown-a4: rgb(255 209 173 / 0.1961);
--scale-brown-a5: rgb(255 202 165 / 0.2431);
--scale-brown-a6: rgb(255 199 156 / 0.302);
--scale-brown-a7: rgb(255 195 150 / 0.3804);
--scale-brown-a8: rgb(255 195 144 / 0.4863);
--scale-brown-a9: rgb(255 187 130 / 0.6784);
--scale-brown-a10: rgb(255 194 143 / 0.7216);
--scale-brown-a11: rgb(255 211 172 / 0.8588);
--scale-brown-a12: rgb(255 237 213 / 0.949);
--scale-sky-1: #0d141f;
--scale-sky-2: #111a27;
--scale-sky-3: #112840;
--scale-sky-4: #113555;
--scale-sky-5: #154467;
--scale-sky-6: #1b537b;
--scale-sky-7: #1f6692;
--scale-sky-8: #197cae;
--scale-sky-9: #7ce2fe;
--scale-sky-10: #a8eeff;
--scale-sky-11: #75c7f0;
--scale-sky-12: #c2f3ff;
--scale-sky-a1: rgb(107 165 255 / 0.1216);
--scale-sky-a2: rgb(111 170 255 / 0.1529);
--scale-sky-a3: rgb(68 159 255 / 0.251);
--scale-sky-a4: rgb(51 159 255 / 0.3333);
--scale-sky-a5: rgb(52 168 255 / 0.4039);
--scale-sky-a6: rgb(56 172 255 / 0.4824);
--scale-sky-a7: rgb(54 178 255 / 0.5725);
--scale-sky-a8: rgb(37 182 255 / 0.6824);
--scale-sky-a9: rgb(124 227 255 / 0.9961);
--scale-sky-a10: rgb(168 238 255 / 1);
--scale-sky-a11: rgb(124 211 255 / 0.9412);
--scale-sky-a12: rgb(194 243 255 / 1);
--scale-mint-1: #0e1515;
--scale-mint-2: #0f1b1b;
--scale-mint-3: #092c2b;
--scale-mint-4: #003a38;
--scale-mint-5: #004744;
--scale-mint-6: #105650;
--scale-mint-7: #1e685f;
--scale-mint-8: #277f70;
--scale-mint-9: #86ead4;
--scale-mint-10: #a8f5e5;
--scale-mint-11: #58d5ba;
--scale-mint-12: #c4f5e1;
--scale-mint-a1: rgb(170 255 255 / 0.0824);
--scale-mint-a2: rgb(142 255 255 / 0.1059);
--scale-mint-a3: rgb(52 255 249 / 0.1725);
--scale-mint-a4: rgb(0 255 246 / 0.2275);
--scale-mint-a5: rgb(0 255 244 / 0.2784);
--scale-mint-a6: rgb(47 255 237 / 0.3373);
--scale-mint-a7: rgb(74 255 233 / 0.4078);
--scale-mint-a8: rgb(78 255 225 / 0.498);
--scale-mint-a9: rgb(146 255 231 / 0.9176);
--scale-mint-a10: rgb(175 255 238 / 0.9608);
--scale-mint-a11: rgb(105 255 223 / 0.8353);
--scale-mint-a12: rgb(204 255 234 / 0.9608);
--scale-lime-1: #11130c;
--scale-lime-2: #151a10;
--scale-lime-3: #1f2917;
--scale-lime-4: #29371d;
--scale-lime-5: #334423;
--scale-lime-6: #3d522a;
--scale-lime-7: #496231;
--scale-lime-8: #577538;
--scale-lime-9: #bdee63;
--scale-lime-10: #d4ff70;
--scale-lime-11: #bde56c;
--scale-lime-12: #e3f7ba;
--scale-lime-a1: rgb(228 255 161 / 0.0745);
--scale-lime-a2: rgb(206 255 157 / 0.102);
--scale-lime-a3: rgb(193 255 143 / 0.1608);
--scale-lime-a4: rgb(190 255 134 / 0.2157);
--scale-lime-a5: rgb(191 255 131 / 0.2667);
--scale-lime-a6: rgb(190 255 131 / 0.3216);
--scale-lime-a7: rgb(190 255 127 / 0.3843);
--scale-lime-a8: rgb(190 255 122 / 0.4588);
--scale-lime-a9: rgb(203 255 106 / 0.9333);
--scale-lime-a10: rgb(212 255 112 / 1);
--scale-lime-a11: rgb(210 255 120 / 0.898);
--scale-lime-a12: rgb(234 255 192 / 0.9686);
--scale-gold-1: #121211;
--scale-gold-2: #1b1a17;
--scale-gold-3: #24231f;
--scale-gold-4: #2d2b26;
--scale-gold-5: #38352e;
--scale-gold-6: #444039;
--scale-gold-7: #544f46;
--scale-gold-8: #696256;
--scale-gold-9: #978365;
--scale-gold-10: #a39073;
--scale-gold-11: #cbb99f;
--scale-gold-12: #e8e2d9;
--scale-gold-a1: rgb(255 255 241 / 0.0706);
--scale-gold-a2: rgb(255 246 217 / 0.1059);
--scale-gold-a3: rgb(255 248 220 / 0.1412);
--scale-gold-a4: rgb(255 244 215 / 0.1765);
--scale-gold-a5: rgb(255 241 209 / 0.2196);
--scale-gold-a6: rgb(255 240 214 / 0.2667);
--scale-gold-a7: rgb(255 240 213 / 0.3294);
--scale-gold-a8: rgb(255 238 209 / 0.4118);
--scale-gold-a9: rgb(255 221 171 / 0.5922);
--scale-gold-a10: rgb(255 225 180 / 0.6392);
--scale-gold-a11: rgb(255 232 200 / 0.7961);
--scale-gold-a12: rgb(255 248 239 / 0.9098);
--scale-bronze-1: #141110;
--scale-bronze-2: #1c1917;
--scale-bronze-3: #262220;
--scale-bronze-4: #302a27;
--scale-bronze-5: #3b3330;
--scale-bronze-6: #493e3a;
--scale-bronze-7: #5a4c47;
--scale-bronze-8: #6f5f58;
--scale-bronze-9: #a18072;
--scale-bronze-10: #ae8c7e;
--scale-bronze-11: #d4b3a5;
--scale-bronze-12: #ede0d9;
--scale-bronze-a1: rgb(255 217 204 / 0.0784);
--scale-bronze-a2: rgb(255 228 209 / 0.1098);
--scale-bronze-a3: rgb(255 228 215 / 0.149);
--scale-bronze-a4: rgb(255 223 207 / 0.1882);
--scale-bronze-a5: rgb(255 220 207 / 0.2314);
--scale-bronze-a6: rgb(255 217 203 / 0.2863);
--scale-bronze-a7: rgb(255 215 201 / 0.3529);
--scale-bronze-a8: rgb(255 218 202 / 0.4353);
--scale-bronze-a9: rgb(255 203 181 / 0.6314);
--scale-bronze-a10: rgb(255 205 185 / 0.6824);
--scale-bronze-a11: rgb(255 215 198 / 0.8314);
--scale-bronze-a12: rgb(255 241 233 / 0.9294);
--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);

2
src/uix/eidos/index.ts
Unescape View File

@ -116,6 +116,7 @@ export type {
Density, Density,
DensityKey, DensityKey,
DensityPrimitiveSet, DensityPrimitiveSet,
ScalingKey,
EidosCssContract, EidosCssContract,
EidosCssContractScope, EidosCssContractScope,
EidosCssContractToken, EidosCssContractToken,
@ -189,6 +190,7 @@ export {
MOTION_SCALE_KEYS, MOTION_SCALE_KEYS,
OPACITY_KEYS, OPACITY_KEYS,
RADIUS_KEYS, RADIUS_KEYS,
SCALING_KEYS,
SHADOW_KEYS, SHADOW_KEYS,
SHADOW_PHYSICAL_KEYS, SHADOW_PHYSICAL_KEYS,
SHADOW_SEMANTIC_KEYS, SHADOW_SEMANTIC_KEYS,

37
src/uix/eidos/lib/config-types.ts
Unescape View File

@ -55,7 +55,42 @@ export interface ColorRoleDefinition {
readonly slots?: Partial<Record<ColorRoleSlot, ColorScaleStep>>; readonly slots?: Partial<Record<ColorRoleSlot, ColorScaleStep>>;
} }
export type ColorRoleMap = Record<ColorRole, string | ColorRoleDefinition>; export type ColorRoleValue = string | ColorRoleDefinition;
/**
* Hierarchy roles (primary/secondary/tertiary) MUST be mapped by the theme —
* they are brand choices with no canonical color. The 6 intents are OPTIONAL:
* an omitted intent auto-derives from the palette by the book's canonical
* convention (`CANONICAL_INTENT_SCALES`). A theme may still map an intent
* explicitly to override the convention.
*/
export type ColorRoleMap = Record<HierarchyColorRole, ColorRoleValue> &
Partial<Record<Intent, ColorRoleValue>>;
/**
* The book's canonical intent → palette-scale convention ("Diseñando lo que
* ocurre" — color grammar). An intent omitted from a theme's role map
* auto-derives from the palette scale of this name; its identity is the solid
* (step 9) and the slots derive normally. The palette must provide these scale
* names (or the theme overrides the intent with an explicit mapping).
*/
export const CANONICAL_INTENT_SCALES = {
neutral: 'gray',
affirm: 'teal',
fulfill: 'green',
risk: 'amber',
threat: 'red',
loss: 'plum'
} as const satisfies Record<Intent, string>;
/** Fill any intent omitted from a role map with its canonical scale alias. */
export function completeColorRoleMap(roles: ColorRoleMap): Record<ColorRole, ColorRoleValue> {
const complete: Record<string, ColorRoleValue> = { ...roles };
for (const intent of INTENTS) {
if (complete[intent] === undefined) complete[intent] = CANONICAL_INTENT_SCALES[intent];
}
return complete as Record<ColorRole, ColorRoleValue>;
}
export interface ColorPrimitiveSet { export interface ColorPrimitiveSet {
readonly scales: ColorScales; readonly scales: ColorScales;

23
src/uix/eidos/lib/config.ts
Unescape View File

@ -4,6 +4,8 @@ import {
BORDER_STYLE_KEYS, BORDER_STYLE_KEYS,
BORDER_WIDTH_KEYS, BORDER_WIDTH_KEYS,
COLOR_ROLES, COLOR_ROLES,
HIERARCHY_COLOR_ROLES,
CANONICAL_INTENT_SCALES,
COLOR_ROLE_SLOTS, COLOR_ROLE_SLOTS,
COLOR_SCALE_STEPS, COLOR_SCALE_STEPS,
CONTAINER_WIDTH_KEYS, CONTAINER_WIDTH_KEYS,
@ -37,6 +39,7 @@ import {
type RecipeTokenMap, type RecipeTokenMap,
type ThemeDefinition type ThemeDefinition
} from './config-types' } from './config-types'
import { INTENTS } from '$uix/intent'
import { createEidosCssContract } from './contract' import { createEidosCssContract } from './contract'
import { import {
createEidosConfigDocument as createEidosConfigDocumentEnvelope, createEidosConfigDocument as createEidosConfigDocumentEnvelope,
@ -368,15 +371,31 @@ function validateColorRoles(options: EidosConfig, issues: EidosValidationIssue[]
const globalScales = options.primitives.color?.scales ?? {} const globalScales = options.primitives.color?.scales ?? {}
const themes = options.themes ?? {} const themes = options.themes ?? {}
for (const role of COLOR_ROLES) { // Hierarchy roles are brand choices with no canonical color — must be mapped.
for (const role of HIERARCHY_COLOR_ROLES) {
if (!hasOwn(roles, role)) { if (!hasOwn(roles, role)) {
issues.push({ issues.push({
path: `semantics.color.roles.${role}`, path: `semantics.color.roles.${role}`,
message: 'every canonical color role must be mapped to a primitive scale' message: 'hierarchy color roles (primary / secondary / tertiary) must be mapped to a scale'
}) })
} }
} }
// Intents may be omitted — they auto-derive from the palette by the book's
// canonical convention (CANONICAL_INTENT_SCALES). When omitted, validate the
// auto-derive target scale exists, as if the intent were mapped to it.
for (const intent of INTENTS) {
if (hasOwn(roles, intent)) continue
validateColorRole(
`semantics.color.roles.${intent}`,
intent,
CANONICAL_INTENT_SCALES[intent],
globalScales,
themes,
issues
)
}
for (const [role, roleDef] of Object.entries(roles)) { for (const [role, roleDef] of Object.entries(roles)) {
validateColorRole(`semantics.color.roles.${role}`, role, roleDef, globalScales, themes, issues) validateColorRole(`semantics.color.roles.${role}`, role, roleDef, globalScales, themes, issues)
} }

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

@ -5,6 +5,7 @@ import {
DENSITY_KEYS, DENSITY_KEYS,
SCALING_KEYS, SCALING_KEYS,
DEFAULT_SCALING, DEFAULT_SCALING,
completeColorRoleMap,
type ColorRoleDefinition, type ColorRoleDefinition,
type ColorRoleSlot, type ColorRoleSlot,
type ColorRoleMap, type ColorRoleMap,
@ -281,8 +282,13 @@ export function renderThemeCss(
appendColorAlphaScaleDeclarations(declarations, scaleName, scale, color.alphaScales[scaleName]) appendColorAlphaScaleDeclarations(declarations, scaleName, scale, color.alphaScales[scaleName])
} }
// Intents omitted from the theme's role map auto-derive from the palette by
// the book's canonical convention (CANONICAL_INTENT_SCALES). Identity is the
// solid (step 9); slots derive normally below. (color grammar)
const completedRoles = completeColorRoleMap(color.roles)
for (const role of COLOR_ROLES) { for (const role of COLOR_ROLES) {
const definition = color.roles[role] const definition = completedRoles[role]
const scaleName = getColorRoleScaleName(definition) const scaleName = getColorRoleScaleName(definition)
for (const step of COLOR_SCALE_STEPS) { for (const step of COLOR_SCALE_STEPS) {

7
src/uix/eidos/lib/themes/base.ts
Unescape View File

@ -12,6 +12,7 @@ import type {
ThemeColorSet ThemeColorSet
} from '../config-types' } from '../config-types'
import { THEME_BASE_RECIPE_TOKENS } from '../recipes/base' import { THEME_BASE_RECIPE_TOKENS } from '../recipes/base'
import { RADIX_EXTRA_LIGHT_SCALES, RADIX_EXTRA_DARK_SCALES } from './radix-scales'
export const THEME_BASE_COLOR_ROLES: ColorRoleMap = { export const THEME_BASE_COLOR_ROLES: ColorRoleMap = {
primary: 'purple', primary: 'purple',
@ -197,7 +198,8 @@ export const THEME_BASE_LIGHT_COLOR_SCALES: ColorScales = {
10: '#8347b9', 10: '#8347b9',
11: '#8145b5', 11: '#8145b5',
12: '#402060' 12: '#402060'
} },
...RADIX_EXTRA_LIGHT_SCALES
} }
export const THEME_BASE_DARK_COLOR_SCALES: ColorScales = { export const THEME_BASE_DARK_COLOR_SCALES: ColorScales = {
@ -368,7 +370,8 @@ export const THEME_BASE_DARK_COLOR_SCALES: ColorScales = {
10: '#9a5cd0', 10: '#9a5cd0',
11: '#d19dff', 11: '#d19dff',
12: '#ecd9fa' 12: '#ecd9fa'
} },
...RADIX_EXTRA_DARK_SCALES
} }
export const THEME_BASE_LIGHT_COLOR_SEMANTICS: Pick< export const THEME_BASE_LIGHT_COLOR_SEMANTICS: Pick<

71
src/uix/eidos/lib/themes/radix-scales.ts
Unescape View File

@ -0,0 +1,71 @@
/**
* Radix Colors — escalas adicionales para llegar a paridad con la librería de
* Radix (~31 escalas). Valores EXACTOS de `@radix-ui/colors` v3 (no derivados,
* no de memoria). La base ya traía 12 (gray, slate, blue, cyan, teal, green,
* yellow, amber, orange, red, pink, purple); estas 19 completan el set:
* - 4 grises extra : mauve, sage, olive, sand
* - 13 colores : tomato, ruby, crimson, plum, violet, iris, indigo,
* jade, grass, brown, sky, mint, lime
* - 2 metales : gold, bronze
*
* Mapeo funcional de 12 pasos (Radix-style): 1-2 fondos · 3-5 fondos de
* componente · 6-8 bordes · 9 sólido · 10 sólido-hover · 11-12 texto.
*/
import type { ColorScale, ColorScales } from '../config-types'
// prettier-ignore
const s = (
c1: string, c2: string, c3: string, c4: string, c5: string, c6: string,
c7: string, c8: string, c9: string, c10: string, c11: string, c12: string
): ColorScale => ({
'1': c1, '2': c2, '3': c3, '4': c4, '5': c5, '6': c6,
'7': c7, '8': c8, '9': c9, '10': c10, '11': c11, '12': c12
})
// ── Modo claro ────────────────────────────────────────────────────────
// prettier-ignore
export const RADIX_EXTRA_LIGHT_SCALES: ColorScales = {
mauve: s('#fdfcfd','#faf9fb','#f2eff3','#eae7ec','#e3dfe6','#dbd8e0','#d0cdd7','#bcbac7','#8e8c99','#84828e','#65636d','#211f26'),
sage: s('#fbfdfc','#f7f9f8','#eef1f0','#e6e9e8','#dfe2e0','#d7dad9','#cbcfcd','#b8bcba','#868e8b','#7c8481','#5f6563','#1a211e'),
olive: s('#fcfdfc','#f8faf8','#eff1ef','#e7e9e7','#dfe2df','#d7dad7','#cccfcc','#b9bcb8','#898e87','#7f847d','#60655f','#1d211c'),
sand: s('#fdfdfc','#f9f9f8','#f1f0ef','#e9e8e6','#e2e1de','#dad9d6','#cfceca','#bcbbb5','#8d8d86','#82827c','#63635e','#21201c'),
tomato: s('#fffcfc','#fff8f7','#feebe7','#ffdcd3','#ffcdc2','#fdbdaf','#f5a898','#ec8e7b','#e54d2e','#dd4425','#d13415','#5c271f'),
ruby: s('#fffcfd','#fff7f8','#feeaed','#ffdce1','#ffced6','#f8bfc8','#efacb8','#e592a3','#e54666','#dc3b5d','#ca244d','#64172b'),
crimson: s('#fffcfd','#fef7f9','#ffe9f0','#fedce7','#facedd','#f3bed1','#eaacc3','#e093b2','#e93d82','#df3478','#cb1d63','#621639'),
plum: s('#fefcff','#fdf7fd','#fbebfb','#f7def8','#f2d1f3','#e9c2ec','#deade3','#cf91d8','#ab4aba','#a144af','#953ea3','#53195d'),
violet: s('#fdfcfe','#faf8ff','#f4f0fe','#ebe4ff','#e1d9ff','#d4cafe','#c2b5f5','#aa99ec','#6e56cf','#654dc4','#6550b9','#2f265f'),
iris: s('#fdfdff','#f8f8ff','#f0f1fe','#e6e7ff','#dadcff','#cbcdff','#b8baf8','#9b9ef0','#5b5bd6','#5151cd','#5753c6','#272962'),
indigo: s('#fdfdfe','#f7f9ff','#edf2fe','#e1e9ff','#d2deff','#c1d0ff','#abbdf9','#8da4ef','#3e63dd','#3358d4','#3a5bc7','#1f2d5c'),
jade: s('#fbfefd','#f4fbf7','#e6f7ed','#d6f1e3','#c3e9d7','#acdec8','#8bceb6','#56ba9f','#29a383','#26997b','#208368','#1d3b31'),
grass: s('#fbfefb','#f5fbf5','#e9f6e9','#daf1db','#c9e8ca','#b2ddb5','#94ce9a','#65ba74','#46a758','#3e9b4f','#2a7e3b','#203c25'),
brown: s('#fefdfc','#fcf9f6','#f6eee7','#f0e4d9','#ebdaca','#e4cdb7','#dcbc9f','#cea37e','#ad7f58','#a07553','#815e46','#3e332e'),
sky: s('#f9feff','#f1fafd','#e1f6fd','#d1f0fa','#bee7f5','#a9daed','#8dcae3','#60b3d7','#7ce2fe','#74daf8','#00749e','#1d3e56'),
mint: s('#f9fefd','#f2fbf9','#ddf9f2','#c8f4e9','#b3ecde','#9ce0d0','#7ecfbd','#4cbba5','#86ead4','#7de0cb','#027864','#16433c'),
lime: s('#fcfdfa','#f8faf3','#eef6d6','#e2f0bd','#d3e7a6','#c2da91','#abc978','#8db654','#bdee63','#b0e64c','#5c7c2f','#37401c'),
gold: s('#fdfdfc','#faf9f2','#f2f0e7','#eae6db','#e1dccf','#d8d0bf','#cbc0aa','#b9a88d','#978365','#8c7a5e','#71624b','#3b352b'),
bronze: s('#fdfcfc','#fdf7f5','#f6edea','#efe4df','#e7d9d3','#dfcdc5','#d3bcb3','#c2a499','#a18072','#957468','#7d5e54','#43302b')
}
// ── Modo oscuro ───────────────────────────────────────────────────────
// prettier-ignore
export const RADIX_EXTRA_DARK_SCALES: ColorScales = {
mauve: s('#121113','#1a191b','#232225','#2b292d','#323035','#3c393f','#49474e','#625f69','#6f6d78','#7c7a85','#b5b2bc','#eeeef0'),
sage: s('#101211','#171918','#202221','#272a29','#2e3130','#373b39','#444947','#5b625f','#63706b','#717d79','#adb5b2','#eceeed'),
olive: s('#111210','#181917','#212220','#282a27','#2f312e','#383a36','#454843','#5c625b','#687066','#767d74','#afb5ad','#eceeec'),
sand: s('#111110','#191918','#222221','#2a2a28','#31312e','#3b3a37','#494844','#62605b','#6f6d66','#7c7b74','#b5b3ad','#eeeeec'),
tomato: s('#181111','#1f1513','#391714','#4e1511','#5e1c16','#6e2920','#853a2d','#ac4d39','#e54d2e','#ec6142','#ff977d','#fbd3cb'),
ruby: s('#191113','#1e1517','#3a141e','#4e1325','#5e1a2e','#6f2539','#883447','#b3445a','#e54666','#ec5a72','#ff949d','#fed2e1'),
crimson: s('#191114','#201318','#381525','#4d122f','#5c1839','#6d2545','#873356','#b0436e','#e93d82','#ee518a','#ff92ad','#fdd3e8'),
plum: s('#181118','#201320','#351a35','#451d47','#512454','#5e3061','#734079','#92549c','#ab4aba','#b658c4','#e796f3','#f4d4f4'),
violet: s('#14121f','#1b1525','#291f43','#33255b','#3c2e69','#473876','#56468b','#6958ad','#6e56cf','#7d66d9','#baa7ff','#e2ddfe'),
iris: s('#13131e','#171625','#202248','#262a65','#303374','#3d3e82','#4a4a95','#5958b1','#5b5bd6','#6e6ade','#b1a9ff','#e0dffe'),
indigo: s('#11131f','#141726','#182449','#1d2e62','#253974','#304384','#3a4f97','#435db1','#3e63dd','#5472e4','#9eb1ff','#d6e1ff'),
jade: s('#0d1512','#121c18','#0f2e22','#0b3b2c','#114837','#1b5745','#246854','#2a7e68','#29a383','#27b08b','#1fd8a4','#adf0d4'),
grass: s('#0e1511','#141a15','#1b2a1e','#1d3a24','#25482d','#2d5736','#366740','#3e7949','#46a758','#53b365','#71d083','#c2f0c2'),
brown: s('#12110f','#1c1816','#28211d','#322922','#3e3128','#4d3c2f','#614a39','#7c5f46','#ad7f58','#b88c67','#dbb594','#f2e1ca'),
sky: s('#0d141f','#111a27','#112840','#113555','#154467','#1b537b','#1f6692','#197cae','#7ce2fe','#a8eeff','#75c7f0','#c2f3ff'),
mint: s('#0e1515','#0f1b1b','#092c2b','#003a38','#004744','#105650','#1e685f','#277f70','#86ead4','#a8f5e5','#58d5ba','#c4f5e1'),
lime: s('#11130c','#151a10','#1f2917','#29371d','#334423','#3d522a','#496231','#577538','#bdee63','#d4ff70','#bde56c','#e3f7ba'),
gold: s('#121211','#1b1a17','#24231f','#2d2b26','#38352e','#444039','#544f46','#696256','#978365','#a39073','#cbb99f','#e8e2d9'),
bronze: s('#141110','#1c1917','#262220','#302a27','#3b3330','#493e3a','#5a4c47','#6f5f58','#a18072','#ae8c7e','#d4b3a5','#ede0d9')
}
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.