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
> **Estado: PROPUESTA — no implementada.** (2026-06-01)
> El modelo vigente sigue siendo el de `THEMING.md` (rol → escala de 12 pasos).
> Este documento captura el diseño para decidir/implementar más adelante.
> **Estado: RESUELTO (2026-06-02).** El modelo de color quedó decidido — la
> referencia canónica es **THEMING.md §25**.
>
> **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

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
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
el código, el código gana — pero abre un issue para que actualicemos
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()
expect(eidos.validate()).toEqual({ ok: true, issues: [] })
@ -133,8 +133,15 @@ describe('ActiveEidos config', () => {
const tooltipTokens = eidos.getRecipeTokens('tooltip') as Record<string, string>
tooltipTokens['content-z'] = '1'
expect(eidos.getRecipeTokens('tooltip')?.['content-z']).toBe('76')
expect(Object.keys(THEME_BASE_LIGHT_COLOR_SCALES)).toHaveLength(12)
expect(Object.keys(THEME_BASE_DARK_COLOR_SCALES)).toHaveLength(12)
// Palette library at Radix parity: 12 original + 19 added Radix scales.
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(
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-a11: rgb(82 0 154 / 0.7294);
--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-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3);
@ -5136,6 +5592,462 @@
--scale-purple-a10: rgb(189 113 255 / 0.8157);
--scale-purple-a11: rgb(209 157 255 / 1);
--scale-purple-a12: rgb(241 221 255 / 0.9804);
--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-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3);

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

@ -116,6 +116,7 @@ export type {
Density,
DensityKey,
DensityPrimitiveSet,
ScalingKey,
EidosCssContract,
EidosCssContractScope,
EidosCssContractToken,
@ -189,6 +190,7 @@ export {
MOTION_SCALE_KEYS,
OPACITY_KEYS,
RADIUS_KEYS,
SCALING_KEYS,
SHADOW_KEYS,
SHADOW_PHYSICAL_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>>;
}
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 {
readonly scales: ColorScales;

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

@ -4,6 +4,8 @@ import {
BORDER_STYLE_KEYS,
BORDER_WIDTH_KEYS,
COLOR_ROLES,
HIERARCHY_COLOR_ROLES,
CANONICAL_INTENT_SCALES,
COLOR_ROLE_SLOTS,
COLOR_SCALE_STEPS,
CONTAINER_WIDTH_KEYS,
@ -37,6 +39,7 @@ import {
type RecipeTokenMap,
type ThemeDefinition
} from './config-types'
import { INTENTS } from '$uix/intent'
import { createEidosCssContract } from './contract'
import {
createEidosConfigDocument as createEidosConfigDocumentEnvelope,
@ -368,15 +371,31 @@ function validateColorRoles(options: EidosConfig, issues: EidosValidationIssue[]
const globalScales = options.primitives.color?.scales ?? {}
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)) {
issues.push({
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)) {
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,
SCALING_KEYS,
DEFAULT_SCALING,
completeColorRoleMap,
type ColorRoleDefinition,
type ColorRoleSlot,
type ColorRoleMap,
@ -281,8 +282,13 @@ export function renderThemeCss(
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) {
const definition = color.roles[role]
const definition = completedRoles[role]
const scaleName = getColorRoleScaleName(definition)
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
} from '../config-types'
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 = {
primary: 'purple',
@ -197,7 +198,8 @@ export const THEME_BASE_LIGHT_COLOR_SCALES: ColorScales = {
10: '#8347b9',
11: '#8145b5',
12: '#402060'
}
},
...RADIX_EXTRA_LIGHT_SCALES
}
export const THEME_BASE_DARK_COLOR_SCALES: ColorScales = {
@ -368,7 +370,8 @@ export const THEME_BASE_DARK_COLOR_SCALES: ColorScales = {
10: '#9a5cd0',
11: '#d19dff',
12: '#ecd9fa'
}
},
...RADIX_EXTRA_DARK_SCALES
}
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.