diff --git a/src/uix/eidos/THEMING.md b/src/uix/eidos/THEMING.md index f51feb591..207c7a63d 100644 --- a/src/uix/eidos/THEMING.md +++ b/src/uix/eidos/THEMING.md @@ -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)`. --- diff --git a/src/uix/eidos/components/combobox/combobox.css b/src/uix/eidos/components/combobox/combobox.css index ad269e214..6a849b8a9 100644 --- a/src/uix/eidos/components/combobox/combobox.css +++ b/src/uix/eidos/components/combobox/combobox.css @@ -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'] { diff --git a/src/uix/eidos/components/command/command.css b/src/uix/eidos/components/command/command.css index 42fb512bf..bddb280cd 100644 --- a/src/uix/eidos/components/command/command.css +++ b/src/uix/eidos/components/command/command.css @@ -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; } diff --git a/src/uix/eidos/components/link-preview/link-preview.css b/src/uix/eidos/components/link-preview/link-preview.css index dcb749e80..273240e92 100644 --- a/src/uix/eidos/components/link-preview/link-preview.css +++ b/src/uix/eidos/components/link-preview/link-preview.css @@ -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; diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css index ca7bb52ec..859b25293 100644 --- a/src/uix/eidos/components/navigation-menu/navigation-menu.css +++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css @@ -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; } diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 4da5884a3..79ea13d80 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -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); } diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index 8898f59ac..b7cace221 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -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; diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 3592fd055..c2cf641b8 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -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',