mirrors/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-11-14 03:56:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): use base menu selection styling (#47786)

Browse Source
This commit is contained in:
usrnk1
2026-09-09 23:54:41 +02:00
committed by GitHub
Unverified
parent a0a0e3271c
commit 0bbf29fea6
3 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/forms/select/select.css
+4 -5
View File
@@ -260,20 +260,19 @@
--menu-v2-fg-muted: var(--v2-text-text-faint);
--menu-v2-fg-subtle: var(--v2-text-text-muted);
--menu-v2-icon: var(--v2-icon-icon-base);
--menu-v2-accent: var(--v2-text-text-accent);
--menu-v2-badge-bg: var(--v2-background-bg-layer-02);
--menu-v2-badge-border: var(--v2-border-border-base);
--menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
}
/* Listbox uses data-selected; menu item CSS uses data-checked — mirror accent */
/* Listbox uses data-selected; menu item CSS uses data-checked — mirror selection styling */
[data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-content"] {
font-weight: 530;
color: var(--menu-v2-accent);
font-weight: 440;
color: var(--menu-v2-fg);
}
[data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-indicator"] {
color: var(--menu-v2-accent);
color: var(--menu-v2-icon);
}
[data-slot="select-v2-listbox"]
packages/ui/src/navigation/menu/menu.css
+3 -4
View File
@@ -40,7 +40,6 @@
--menu-v2-fg-muted: var(--v2-text-text-faint);
--menu-v2-fg-subtle: var(--v2-text-text-muted);
--menu-v2-icon: var(--v2-icon-icon-base);
--menu-v2-accent: var(--v2-text-text-accent);
--menu-v2-badge-bg: var(--v2-background-bg-layer-02);
--menu-v2-badge-border: var(--v2-border-border-base);
--menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
@@ -146,12 +145,12 @@
}
&[data-checked] [data-slot="menu-v2-item-content"] {
font-weight: 530;
color: var(--menu-v2-accent);
font-weight: 440;
color: var(--menu-v2-fg);
}
&[data-checked] [data-slot="menu-v2-item-indicator"] {
color: var(--menu-v2-accent);
color: var(--menu-v2-icon);
}
&[data-disabled] {
packages/ui/src/navigation/menu/menu.stories.tsx
+2 -2
View File
@@ -13,12 +13,12 @@ Composable menu primitive built on Kobalte's \`DropdownMenu\` and \`ContextMenu\
- \`Menu.Context\` namespace mirrors the same shape for right-click menus.
- \`appearance\`: \`compact\` (default) or \`standard\`.
- \`Menu.Item\` — supports a freeform \`children\` slot (avatar, icon, text — whatever) plus \`shortcut\` and \`badge\` props.
- \`Menu.CheckboxItem\` / \`Menu.RadioItem\` — same item shape; auto-render a check indicator that turns blue when selected.
- \`Menu.CheckboxItem\` / \`Menu.RadioItem\` — same item shape; auto-render a check indicator when selected.
- \`Menu.Sub\` / \`Menu.SubTrigger\` / \`Menu.SubContent\` — nested submenus; \`SubTrigger\` auto-renders the trailing chevron.
### Behavior
- Items expose Kobalte's data attributes — \`data-highlighted\`, \`data-checked\`, \`data-disabled\`.
- Blue selected state is reserved for \`CheckboxItem\` / \`RadioItem\` (the rest just highlight on hover).
- Selected state is reserved for \`CheckboxItem\` / \`RadioItem\` (the rest just highlight on hover).
- Chevron is only rendered on \`SubTrigger\`.
`