diff --git a/src/uix/eidos/active-eidos-config.test.ts b/src/uix/eidos/active-eidos-config.test.ts index fb421069a..035bf9766 100644 --- a/src/uix/eidos/active-eidos-config.test.ts +++ b/src/uix/eidos/active-eidos-config.test.ts @@ -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);') diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 7146777f8..9e80c9eb0 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -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); diff --git a/src/uix/eidos/lib/themes/base.ts b/src/uix/eidos/lib/themes/base.ts index 71996243f..69ff05286 100644 --- a/src/uix/eidos/lib/themes/base.ts +++ b/src/uix/eidos/lib/themes/base.ts @@ -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