feat(link-preview, command): adopt the `overlay` elevation plane (B2)

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 `<Command.Dialog>` 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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 009f5367a7
commit be5396cecd

@ -46,10 +46,11 @@
font-family: var(--font-ui); font-family: var(--font-ui);
line-height: var(--leading-ui); line-height: var(--leading-ui);
color: var(--color-content-primary); 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 <Command.Dialog> 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); border-radius: var(--_command-radius);
background: var(--color-surface-overlay);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
overflow: hidden; overflow: hidden;
outline: none; outline: none;
} }

@ -69,7 +69,7 @@
}); });
</script> </script>
<Command.Provider {...rest} bind:value bind:search data-list-surface="" data-size={resolvedSize}> <Command.Provider {...rest} bind:value bind:search data-list-surface="" data-depth="overlay" data-size={resolvedSize}>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

@ -22,7 +22,7 @@
const resolvedSize = $derived(eidos.resolve(size, 'md')); const resolvedSize = $derived(eidos.resolve(size, 'md'));
</script> </script>
<LinkPreview.Content {...rest} data-size={resolvedSize}> <LinkPreview.Content data-depth="overlay" {...rest} data-size={resolvedSize}>
{#snippet children(snippetProps)} {#snippet children(snippetProps)}
{@render bodyContent?.(snippetProps)} {@render bodyContent?.(snippetProps)}
{/snippet} {/snippet}

@ -60,11 +60,10 @@
min-inline-size: var(--_link-preview-min-width); min-inline-size: var(--_link-preview-min-width);
max-inline-size: var(--_link-preview-max-width); max-inline-size: var(--_link-preview-max-width);
padding: var(--_link-preview-py) var(--_link-preview-px); 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); border-radius: var(--radius-md);
background: var(--color-surface-overlay);
color: var(--color-content-primary); color: var(--color-content-primary);
box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: var(--_link-preview-font-size); font-size: var(--_link-preview-font-size);
font-weight: 400; font-weight: 400;
@ -115,7 +114,9 @@
/* ── Arrow ──────────────────────────────────────────────────────────── */ /* ── Arrow ──────────────────────────────────────────────────────────── */
[data-link-preview-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 ────────────────────────────── */ /* ── State transitions per anchored side ────────────────────────────── */

Loading…
Cancel
Save

Powered by TurnKey Linux.