diff --git a/packages/ui/src/forms/select/select.css b/packages/ui/src/forms/select/select.css index ed92313788c..1361ce20c01 100644 --- a/packages/ui/src/forms/select/select.css +++ b/packages/ui/src/forms/select/select.css @@ -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"] diff --git a/packages/ui/src/navigation/menu/menu.css b/packages/ui/src/navigation/menu/menu.css index ccae2b64c38..b78bb2f8c16 100644 --- a/packages/ui/src/navigation/menu/menu.css +++ b/packages/ui/src/navigation/menu/menu.css @@ -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] { diff --git a/packages/ui/src/navigation/menu/menu.stories.tsx b/packages/ui/src/navigation/menu/menu.stories.tsx index 7813ca4e2bf..4f8d85d5ae9 100644 --- a/packages/ui/src/navigation/menu/menu.stories.tsx +++ b/packages/ui/src/navigation/menu/menu.stories.tsx @@ -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\`. `