From be5396cecd78d4683225d6780e5ad61475a64b69 Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 22 Jun 2026 12:31:44 +0200 Subject: [PATCH] feat(link-preview, command): adopt the `overlay` elevation plane (B2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two more single-elevation overlays join the plane: - link-preview: hover-card Content carries `data-depth="overlay"`; drop the hardcoded border / bg / shadow + point the arrow at `--depth-overlay-surface`. - command: the palette panel carries `data-depth="overlay"`; drop its hardcoded border / bg / shadow. Inside `` the existing `[data-dialog-content] [data-command]` override (higher specificity) strips the plane so the dialog panel stays the sole surface — no double-elevation. Verified in-browser: link-preview + inline command paint bg oklch(0.285) + 1px border + shadow/halo from the plane; command-in-dialog is stripped (transparent / border 0 / shadow none); check 0. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/uix/eidos/components/command/command.css | 7 ++++--- src/uix/eidos/components/command/command.svelte | 2 +- .../components/link-preview/link-preview-content.svelte | 2 +- src/uix/eidos/components/link-preview/link-preview.css | 9 +++++---- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/uix/eidos/components/command/command.css b/src/uix/eidos/components/command/command.css index 134f2440e..2d34b9a96 100644 --- a/src/uix/eidos/components/command/command.css +++ b/src/uix/eidos/components/command/command.css @@ -46,10 +46,11 @@ font-family: var(--font-ui); line-height: var(--leading-ui); color: var(--color-content-primary); - border: var(--border-width) solid var(--color-border-default); + /* Elevation — surface · border · shadow — from the `overlay` plane via + `data-depth` (A1). Inside the dialog panel is the surface, + so the `[data-dialog-content] [data-command]` override below (higher + specificity) strips the plane. Radius / overflow stay the panel's own. */ border-radius: var(--_command-radius); - background: var(--color-surface-overlay); - box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo); overflow: hidden; outline: none; } diff --git a/src/uix/eidos/components/command/command.svelte b/src/uix/eidos/components/command/command.svelte index 1f7878da6..125950ad7 100644 --- a/src/uix/eidos/components/command/command.svelte +++ b/src/uix/eidos/components/command/command.svelte @@ -69,7 +69,7 @@ }); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/link-preview/link-preview-content.svelte b/src/uix/eidos/components/link-preview/link-preview-content.svelte index 0b3754277..268e8e4ba 100644 --- a/src/uix/eidos/components/link-preview/link-preview-content.svelte +++ b/src/uix/eidos/components/link-preview/link-preview-content.svelte @@ -22,7 +22,7 @@ const resolvedSize = $derived(eidos.resolve(size, 'md')); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/link-preview/link-preview.css b/src/uix/eidos/components/link-preview/link-preview.css index 59fb6f95e..1d58df7ca 100644 --- a/src/uix/eidos/components/link-preview/link-preview.css +++ b/src/uix/eidos/components/link-preview/link-preview.css @@ -60,11 +60,10 @@ min-inline-size: var(--_link-preview-min-width); max-inline-size: var(--_link-preview-max-width); padding: var(--_link-preview-py) var(--_link-preview-px); - border: var(--border-width) solid var(--color-border-default); + /* Elevation — surface · border · shadow — from the `overlay` plane via + `data-depth` (A1, Decisión 8). Radius / color stay the panel's own. */ border-radius: var(--radius-md); - background: var(--color-surface-overlay); color: var(--color-content-primary); - 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; @@ -115,7 +114,9 @@ /* ── Arrow ──────────────────────────────────────────────────────────── */ [data-link-preview-arrow] { - fill: var(--color-surface-overlay); + /* Part of the elevation surface — consume the `overlay` plane so the arrow + always matches the panel (A1, like popover). */ + fill: var(--depth-overlay-surface); } /* ── State transitions per anchored side ────────────────────────────── */