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

feat(eidos): depth adoption — elevated components consume the channel (shadow + halo)

Browse Source 
The Fase 2 rim halo now reaches real UI, not just the showcase. Each elevated
component's shadow signal (recipe tokens in recipes/base.ts + the few direct
box-shadow uses) now composes `var(--depth-{plane}-shadow), var(--depth-{plane}-halo)`.

Reaches: popover, dialog, drawer, dropdown/context/navigation-menu, menubar,
select, tooltip, card, combobox, command, link-preview, words.

Shadow signal only — z-index stays component-managed (the z bands are finer than
the 5 planos), so zero stacking risk. Verified: dialog keeps its own z-index 71
and composes drop shadow + oklab halo. Retuning a plane now retunes every
component on it.

Verified: npm run check 0 errors; eidos 183/186 (3 pre-existing `words` failures,
unrelated). Regenerated generated/base.css. THEMING 29 updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 0e0fbc05d7
commit 271a2f8ff0
8 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File

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

@ -2288,9 +2288,17 @@ añade/renombra/retunea); los primitivos siguen accesibles (`box-shadow`/`z-inde
paso); la capa eventful es aditiva y anulable (sobreescribe keyframes/signatures). Demo en
vivo: `/temas/profundidad`.
**Adopción** (hecha, 2026-06-05): los componentes elevados consumen el canal — sus tokens de
sombra (`--{c}-…-shadow` en `recipes/base.ts`, o el `box-shadow` directo) componen
`var(--depth-{plane}-shadow), var(--depth-{plane}-halo)`, así que **el halo llega a
popover · dialog · drawer · dropdown/context/navigation-menu · menubar · select · tooltip ·
card · combobox · command · link-preview · words**. La `z-index` la sigue gestionando cada
componente (las bandas z son más finas que los 5 planos) — la adopción es solo de la señal
sombra+halo, **cero riesgo de stacking**. La adopción plena vía atributo `data-depth` (que
unificaría también la z) queda como opción futura.
**Pendiente** (no del núcleo): atmósfera frost/scrim (Fase 4 — requiere superficies
translúcidas) + builder `applyDepth(seed)`, y **adopción por componentes** (hoy
card/dialog/popover cablean sombra/z aparte; migrarlos a `data-depth` es una pasada separada).
translúcidas) + builder `applyDepth(seed)`.
---

6
src/uix/eidos/components/combobox/combobox.css
Unescape View File

@ -278,7 +278,7 @@
border: var(--border-width) solid var(--color-border-default);
border-radius: var(--radius-lg);
background: var(--color-surface-overlay);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
color: var(--color-content-primary);
font-family: var(--font-ui);
font-size: var(--_combobox-font-size);
@ -312,12 +312,12 @@
}
[data-combobox-content][data-variant='outline'] {
box-shadow: var(--shadow-raised);
box-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
}
[data-combobox-content][data-variant='ghost'] {
border-color: transparent;
box-shadow: var(--shadow-raised);
box-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
}
[data-combobox-content][data-state='open'] {

2
src/uix/eidos/components/command/command.css
Unescape View File

@ -36,7 +36,7 @@
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
background: var(--color-surface-overlay);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
overflow: hidden;
outline: none;
}

2
src/uix/eidos/components/link-preview/link-preview.css
Unescape View File

@ -64,7 +64,7 @@
border-radius: var(--radius-md);
background: var(--color-surface-overlay);
color: var(--color-content-primary);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
font-family: var(--font-ui);
font-size: var(--_link-preview-font-size);
font-weight: 400;

2
src/uix/eidos/components/navigation-menu/navigation-menu.css
Unescape View File

@ -169,7 +169,7 @@
border-radius: var(--radius-lg);
background: var(--color-surface-overlay);
color: var(--color-content-primary);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
outline: none;
}

4
src/uix/eidos/components/words/words.css
Unescape View File

@ -221,7 +221,7 @@
background: var(--words-bg);
border: var(--words-border-width) solid var(--words-border);
border-radius: var(--words-radius-md);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
animation: words-bubble-in 120ms var(--words-transition-ease);
}
[data-words-bubble-menu][data-side='top'] {
@ -1007,7 +1007,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
border-inline-start: var(--words-border-width) solid var(--words-border);
border-start-end-radius: var(--_words-radius);
border-end-end-radius: var(--_words-radius);
box-shadow: var(--shadow-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
transform: translateX(100%);
transition: transform var(--words-transition-duration) var(--words-transition-ease);
}

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

@ -807,7 +807,7 @@
--card-emerge-ease: var(--ease-out);
--card-emerge-distance: 8px;
--card-hover-lift: -2px;
--card-hover-shadow: var(--shadow-overlay);
--card-hover-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--card-press-scale: 0.985;
--card-press-duration: 80ms;
--card-selected-ring-width: 2px;
@ -926,7 +926,7 @@
--dialog-content-border: var(--color-border-default);
--dialog-content-border-width: var(--border-width);
--dialog-content-radius: var(--radius-xl);
--dialog-content-shadow: var(--shadow-overlay);
--dialog-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--dialog-content-max-height: calc(100dvh - var(--space-8));
--dialog-content-max-height-sheet: 85dvh;
--dialog-content-width-sm: 420px;
@ -1043,7 +1043,7 @@
--form-panel-padding: var(--space-5);
--form-panel-border: var(--color-border-default);
--form-panel-bg: var(--color-surface-raised);
--form-panel-shadow: var(--shadow-raised);
--form-panel-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
--form-grid-min: 18rem;
--form-grid-column-gap: var(--space-5);
--form-action-height-xs: var(--control-height-xs);
@ -1103,8 +1103,8 @@
--drawer-content-border: var(--color-border-default);
--drawer-content-border-width: var(--border-width);
--drawer-content-radius: var(--radius-xl);
--drawer-content-shadow: var(--shadow-overlay);
--drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--shadow-overlay));
--drawer-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--depth-overlay-shadow)), var(--depth-overlay-halo);
--drawer-content-ring-dragging-width: 2px;
--drawer-content-ring-dragging-color: color-mix( in srgb, var(--color-content-secondary) 32%, transparent );
--drawer-content-ring-dragging-offset: 2px;
@ -1571,7 +1571,7 @@
--calendar-outline-bg: var(--color-surface-default);
--calendar-outline-shadow: none;
--calendar-color: var(--color-content-primary);
--calendar-shadow: var(--shadow-raised);
--calendar-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
--calendar-font-family: var(--font-ui);
--calendar-font-size-xs: var(--font-size-xs);
--calendar-font-size-sm: var(--font-size-xs);
@ -1700,7 +1700,7 @@
--popover-bg: var(--color-surface-overlay);
--popover-color: var(--color-content-primary);
--popover-border: color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) );
--popover-shadow: var(--shadow-overlay);
--popover-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--popover-transition-duration: var(--duration-fast);
--popover-transition-ease: var(--ease-default);
--popover-close-size: var(--control-height-xs);
@ -2013,9 +2013,9 @@
--select-content-radius: var(--radius-lg);
--select-content-bg: var(--color-surface-overlay);
--select-content-color: var(--color-content-primary);
--select-content-shadow: var(--shadow-overlay);
--select-content-outline-shadow: var(--shadow-raised);
--select-content-ghost-shadow: var(--shadow-raised);
--select-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--select-content-outline-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
--select-content-ghost-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
--select-open-duration: var(--duration-normal);
--select-close-duration: var(--duration-fast);
--select-viewport-gap: var(--space-0-5);
@ -2849,7 +2849,7 @@
--toast-provider-py: var(--space-3);
--toast-provider-border-width: var(--border-width);
--toast-provider-radius: var(--radius-lg);
--toast-provider-shadow: var(--shadow-overlay);
--toast-provider-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--toast-accent-width: 3px;
--toast-transition-duration: var(--duration-fast);
--toast-transition-ease: var(--ease-default);
@ -3046,7 +3046,7 @@
--tooltip-bg: var(--color-surface-overlay);
--tooltip-color: var(--color-content-primary);
--tooltip-border: color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) );
--tooltip-shadow: var(--shadow-overlay);
--tooltip-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--box-display: revert-layer;
--box-position: revert-layer;
--box-width: revert-layer;
@ -3221,7 +3221,7 @@
--dropdown-menu-content-border-color: var(--color-border-default);
--dropdown-menu-content-radius: var(--radius-md);
--dropdown-menu-content-bg: var(--color-surface-overlay);
--dropdown-menu-content-shadow: var(--shadow-overlay);
--dropdown-menu-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--dropdown-menu-content-font-size: var(--font-size-sm);
--dropdown-menu-item-gap: var(--space-2);
--dropdown-menu-item-height: 2rem;
@ -3243,7 +3243,7 @@
--context-menu-content-border-color: var(--color-border-default);
--context-menu-content-radius: var(--radius-md);
--context-menu-content-bg: var(--color-surface-overlay);
--context-menu-content-shadow: var(--shadow-overlay);
--context-menu-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
--context-menu-content-font-size: var(--font-size-sm);
--context-menu-item-gap: var(--space-2);
--context-menu-item-height: 2rem;

29
src/uix/eidos/lib/recipes/base.ts
Unescape View File

@ -519,7 +519,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'emerge-ease': 'var(--ease-out)',
'emerge-distance': '8px',
'hover-lift': '-2px',
'hover-shadow': 'var(--shadow-overlay)',
'hover-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'press-scale': '0.985',
'press-duration': '80ms',
'selected-ring-width': '2px',
@ -739,7 +739,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-border': 'var(--color-border-default)',
'content-border-width': 'var(--border-width)',
'content-radius': 'var(--radius-xl)',
'content-shadow': 'var(--shadow-overlay)',
'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'content-max-height': 'calc(100dvh - var(--space-8))',
'content-max-height-sheet': '85dvh',
'content-width-sm': '420px',
@ -861,7 +861,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'panel-padding': 'var(--space-5)',
'panel-border': 'var(--color-border-default)',
'panel-bg': 'var(--color-surface-raised)',
'panel-shadow': 'var(--shadow-raised)',
'panel-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
'grid-min': '18rem',
'grid-column-gap': 'var(--space-5)',
'action-height-xs': 'var(--control-height-xs)',
@ -923,8 +923,9 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-border': 'var(--color-border-default)',
'content-border-width': 'var(--border-width)',
'content-radius': 'var(--radius-xl)',
'content-shadow': 'var(--shadow-overlay)',
'content-shadow-dragging': 'var(--shadow-overlay-strong, var(--shadow-overlay))',
'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'content-shadow-dragging':
'var(--shadow-overlay-strong, var(--depth-overlay-shadow)), var(--depth-overlay-halo)',
'content-ring-dragging-width': '2px',
'content-ring-dragging-color':
'color-mix( in srgb, var(--color-content-secondary) 32%, transparent )',
@ -1543,7 +1544,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'outline-bg': 'var(--color-surface-default)',
'outline-shadow': 'none',
color: 'var(--color-content-primary)',
shadow: 'var(--shadow-raised)',
shadow: 'var(--depth-raised-shadow), var(--depth-raised-halo)',
'font-family': 'var(--font-ui)',
'font-size-xs': 'var(--font-size-xs)',
'font-size-sm': 'var(--font-size-xs)',
@ -1679,7 +1680,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
bg: 'var(--color-surface-overlay)',
color: 'var(--color-content-primary)',
border: 'color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) )',
shadow: 'var(--shadow-overlay)',
shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'transition-duration': 'var(--duration-fast)',
'transition-ease': 'var(--ease-default)',
'close-size': 'var(--control-height-xs)',
@ -2041,9 +2042,9 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-radius': 'var(--radius-lg)',
'content-bg': 'var(--color-surface-overlay)',
'content-color': 'var(--color-content-primary)',
'content-shadow': 'var(--shadow-overlay)',
'content-outline-shadow': 'var(--shadow-raised)',
'content-ghost-shadow': 'var(--shadow-raised)',
'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'content-outline-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
'content-ghost-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
'open-duration': 'var(--duration-normal)',
'close-duration': 'var(--duration-fast)',
'viewport-gap': 'var(--space-0-5)',
@ -3328,7 +3329,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'provider-py': 'var(--space-3)',
'provider-border-width': 'var(--border-width)',
'provider-radius': 'var(--radius-lg)',
'provider-shadow': 'var(--shadow-overlay)',
'provider-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'accent-width': '3px',
'transition-duration': 'var(--duration-fast)',
'transition-ease': 'var(--ease-default)',
@ -3695,7 +3696,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
bg: 'var(--color-surface-overlay)',
color: 'var(--color-content-primary)',
border: 'color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) )',
shadow: 'var(--shadow-overlay)'
shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)'
},
// ─────────────────────────────────────────────────────────────────────
@ -4050,7 +4051,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-border-color': 'var(--color-border-default)',
'content-radius': 'var(--radius-md)',
'content-bg': 'var(--color-surface-overlay)',
'content-shadow': 'var(--shadow-overlay)',
'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'content-font-size': 'var(--font-size-sm)',
'item-gap': 'var(--space-2)',
'item-height': '2rem',
@ -4078,7 +4079,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
'content-border-color': 'var(--color-border-default)',
'content-radius': 'var(--radius-md)',
'content-bg': 'var(--color-surface-overlay)',
'content-shadow': 'var(--shadow-overlay)',
'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
'content-font-size': 'var(--font-size-sm)',
'item-gap': 'var(--space-2)',
'item-height': '2rem',

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.