Command menu (docs) hardcodes neutral-* colors instead of theme tokens
**Change type:** Correction
**File:** `docs/src/lib/components/command-menu/command-menu.svelte`
The docs-site command menu (the Cmd+K palette) hardcodes `neutral-*` palette utilities for the dialog chrome and the footer bar instead of the theme tokens the rest of the components build on. The inner `Command.Root` already uses `bg-popover`, but the surrounding `Dialog.Content` and the footer use raw palette colors.
`Dialog.Content` (line 154):
```
rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800
```
Footer bar (line 266):
```
text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800
```
### Why this matters
On the docs site itself it is invisible, because the default theme uses `neutral` as its base palette, so the hardcoded values happen to track the tokens. The problem shows up downstream. The command menu is one of the components people copy out of the docs into their own app, since the registry only ships the unstyled `command-dialog` primitive, not the styled Cmd+K palette. Increasingly that copying is done by AI coding agents that lift the component wholesale. The hardcoded `neutral-*` values then no longer follow the consumer theme, so under any custom-tinted `--popover` / `--muted` / `--border` the palette renders off-theme while every other surface adapts correctly. It is easy to miss in review because the class names look intentional.
Using tokens keeps the exact same default appearance and makes the component theme-safe when adopted.
### Proposed fix
`Dialog.Content`:
```
rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl bg-popover ring-4 ring-foreground/5 dark:ring-foreground/10
```
`Command.Root` is `bg-transparent`, so the explicit `bg-popover` provides the surface and `dark:bg-neutral-900` can be dropped.
Footer bar:
```
text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-border bg-muted/50 px-4 text-xs font-medium
```
All four tokens (`popover`, `muted`, `border`, `foreground`) are part of the default theme, so the rendered result on the docs site is unchanged. Happy to open a PR.
0 条评论