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

fix(eidos): base theme tertiary gray->indigo, distinct from secondary/neutral

Browse Source 
Tertiary was `gray` — literally the same scale as neutral, and secondary
(slate) is a near-gray too, so the three desaturated roles blurred together.
Per Material 3's tertiary rule (rotate the primary hue ~60deg), tertiary now
uses `indigo`: purple's cool neighbor, saturated enough to be distinct, in a
hue band no intent occupies. Updated the one test that pinned tertiary=gray;
regenerated base.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 8e3221f158
commit 2d1ccfbeab
3 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File

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

@ -972,7 +972,7 @@ describe('ActiveEidos config', () => {
expect(css).toContain('--scale-purple-a9: rgb(92 0 173 / 0.6941);')
expect(css).toContain('--primitive-primary-9: var(--scale-purple-9);')
expect(css).toContain('--primitive-primary-a9: var(--scale-purple-a9);')
expect(css).toContain('--primitive-tertiary-9: var(--scale-gray-9);')
expect(css).toContain('--primitive-tertiary-9: var(--scale-indigo-9);')
expect(css).toContain('--color-primary-solid: var(--primitive-primary-9);')
expect(css).toContain('--color-primary-solid-hover: var(--primitive-primary-10);')
expect(css).toContain('--color-surface-default: var(--primitive-neutral-1);')

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

@ -5736,30 +5736,30 @@
--color-secondary-contrast: var(--color-content-on-solid, var(--primitive-secondary-12));
--color-secondary-surface: var(--primitive-secondary-a2);
--color-secondary-surface-hover: var(--primitive-secondary-a3);
--primitive-tertiary-1: var(--scale-gray-1);
--primitive-tertiary-2: var(--scale-gray-2);
--primitive-tertiary-3: var(--scale-gray-3);
--primitive-tertiary-4: var(--scale-gray-4);
--primitive-tertiary-5: var(--scale-gray-5);
--primitive-tertiary-6: var(--scale-gray-6);
--primitive-tertiary-7: var(--scale-gray-7);
--primitive-tertiary-8: var(--scale-gray-8);
--primitive-tertiary-9: var(--scale-gray-9);
--primitive-tertiary-10: var(--scale-gray-10);
--primitive-tertiary-11: var(--scale-gray-11);
--primitive-tertiary-12: var(--scale-gray-12);
--primitive-tertiary-a1: var(--scale-gray-a1);
--primitive-tertiary-a2: var(--scale-gray-a2);
--primitive-tertiary-a3: var(--scale-gray-a3);
--primitive-tertiary-a4: var(--scale-gray-a4);
--primitive-tertiary-a5: var(--scale-gray-a5);
--primitive-tertiary-a6: var(--scale-gray-a6);
--primitive-tertiary-a7: var(--scale-gray-a7);
--primitive-tertiary-a8: var(--scale-gray-a8);
--primitive-tertiary-a9: var(--scale-gray-a9);
--primitive-tertiary-a10: var(--scale-gray-a10);
--primitive-tertiary-a11: var(--scale-gray-a11);
--primitive-tertiary-a12: var(--scale-gray-a12);
--primitive-tertiary-1: var(--scale-indigo-1);
--primitive-tertiary-2: var(--scale-indigo-2);
--primitive-tertiary-3: var(--scale-indigo-3);
--primitive-tertiary-4: var(--scale-indigo-4);
--primitive-tertiary-5: var(--scale-indigo-5);
--primitive-tertiary-6: var(--scale-indigo-6);
--primitive-tertiary-7: var(--scale-indigo-7);
--primitive-tertiary-8: var(--scale-indigo-8);
--primitive-tertiary-9: var(--scale-indigo-9);
--primitive-tertiary-10: var(--scale-indigo-10);
--primitive-tertiary-11: var(--scale-indigo-11);
--primitive-tertiary-12: var(--scale-indigo-12);
--primitive-tertiary-a1: var(--scale-indigo-a1);
--primitive-tertiary-a2: var(--scale-indigo-a2);
--primitive-tertiary-a3: var(--scale-indigo-a3);
--primitive-tertiary-a4: var(--scale-indigo-a4);
--primitive-tertiary-a5: var(--scale-indigo-a5);
--primitive-tertiary-a6: var(--scale-indigo-a6);
--primitive-tertiary-a7: var(--scale-indigo-a7);
--primitive-tertiary-a8: var(--scale-indigo-a8);
--primitive-tertiary-a9: var(--scale-indigo-a9);
--primitive-tertiary-a10: var(--scale-indigo-a10);
--primitive-tertiary-a11: var(--scale-indigo-a11);
--primitive-tertiary-a12: var(--scale-indigo-a12);
--color-tertiary-track: var(--primitive-tertiary-1);
--color-tertiary-element: var(--primitive-tertiary-3);
--color-tertiary-hover: var(--primitive-tertiary-4);
@ -6825,30 +6825,30 @@
--color-secondary-contrast: var(--color-content-on-solid, var(--primitive-secondary-12));
--color-secondary-surface: var(--primitive-secondary-a2);
--color-secondary-surface-hover: var(--primitive-secondary-a3);
--primitive-tertiary-1: var(--scale-gray-1);
--primitive-tertiary-2: var(--scale-gray-2);
--primitive-tertiary-3: var(--scale-gray-3);
--primitive-tertiary-4: var(--scale-gray-4);
--primitive-tertiary-5: var(--scale-gray-5);
--primitive-tertiary-6: var(--scale-gray-6);
--primitive-tertiary-7: var(--scale-gray-7);
--primitive-tertiary-8: var(--scale-gray-8);
--primitive-tertiary-9: var(--scale-gray-9);
--primitive-tertiary-10: var(--scale-gray-10);
--primitive-tertiary-11: var(--scale-gray-11);
--primitive-tertiary-12: var(--scale-gray-12);
--primitive-tertiary-a1: var(--scale-gray-a1);
--primitive-tertiary-a2: var(--scale-gray-a2);
--primitive-tertiary-a3: var(--scale-gray-a3);
--primitive-tertiary-a4: var(--scale-gray-a4);
--primitive-tertiary-a5: var(--scale-gray-a5);
--primitive-tertiary-a6: var(--scale-gray-a6);
--primitive-tertiary-a7: var(--scale-gray-a7);
--primitive-tertiary-a8: var(--scale-gray-a8);
--primitive-tertiary-a9: var(--scale-gray-a9);
--primitive-tertiary-a10: var(--scale-gray-a10);
--primitive-tertiary-a11: var(--scale-gray-a11);
--primitive-tertiary-a12: var(--scale-gray-a12);
--primitive-tertiary-1: var(--scale-indigo-1);
--primitive-tertiary-2: var(--scale-indigo-2);
--primitive-tertiary-3: var(--scale-indigo-3);
--primitive-tertiary-4: var(--scale-indigo-4);
--primitive-tertiary-5: var(--scale-indigo-5);
--primitive-tertiary-6: var(--scale-indigo-6);
--primitive-tertiary-7: var(--scale-indigo-7);
--primitive-tertiary-8: var(--scale-indigo-8);
--primitive-tertiary-9: var(--scale-indigo-9);
--primitive-tertiary-10: var(--scale-indigo-10);
--primitive-tertiary-11: var(--scale-indigo-11);
--primitive-tertiary-12: var(--scale-indigo-12);
--primitive-tertiary-a1: var(--scale-indigo-a1);
--primitive-tertiary-a2: var(--scale-indigo-a2);
--primitive-tertiary-a3: var(--scale-indigo-a3);
--primitive-tertiary-a4: var(--scale-indigo-a4);
--primitive-tertiary-a5: var(--scale-indigo-a5);
--primitive-tertiary-a6: var(--scale-indigo-a6);
--primitive-tertiary-a7: var(--scale-indigo-a7);
--primitive-tertiary-a8: var(--scale-indigo-a8);
--primitive-tertiary-a9: var(--scale-indigo-a9);
--primitive-tertiary-a10: var(--scale-indigo-a10);
--primitive-tertiary-a11: var(--scale-indigo-a11);
--primitive-tertiary-a12: var(--scale-indigo-a12);
--color-tertiary-track: var(--primitive-tertiary-1);
--color-tertiary-element: var(--primitive-tertiary-3);
--color-tertiary-hover: var(--primitive-tertiary-4);

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

@ -18,7 +18,11 @@ import { BUILTIN_KEYFRAMES, BUILTIN_SIGNATURES, BUILTIN_CSS_PRESETS } from '../m
export const THEME_BASE_COLOR_ROLES: ColorRoleMap = {
primary: 'purple',
secondary: 'slate',
tertiary: 'gray',
// Tertiary is a SATURATED accent — distinct from the near-gray secondary (slate)
// and the gray neutral. Indigo is purple's cool ~60° neighbor (Material 3's
// tertiary-hue rule) and sits in a hue band no intent occupies, so it reads as
// hierarchy, not a signal. (Was `gray` — collided with neutral.)
tertiary: 'indigo',
// `gray-9` (el sólido neutral) es un gris medio: ni blanco ni negro
// contrastan por defecto. El slot `contrast` se fija al step 12 — casi-negro
// en light, casi-blanco en dark — para que el texto sobre el sólido neutral

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.