From 72f52c1ad71ac14d551fc912e3e5057e95f8758e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Sun, 28 Jun 2026 15:41:43 +0200 Subject: [PATCH] Align dropdown menu chrome with Figma design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Soften the popup border to the translucent sand-a2 token and inset the separator (mx-3) so it lines up with item text instead of bleeding to the panel edges, lightening it to sand-a3. Both now track the Figma alpha hairlines and keep their dark-mode values via the Radix alpha scale. Also modernize the existing arbitrary-variant classes in this file to Tailwind's shorthand syntax (data-[x]: -> data-x:, origin-[var(...)] -> origin-(...)). Signed-off-by: Émile Ré --- packages/ui/src/v2/Dropdown/variants.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/v2/Dropdown/variants.ts b/packages/ui/src/v2/Dropdown/variants.ts index 06921000c..96d6a90cf 100644 --- a/packages/ui/src/v2/Dropdown/variants.ts +++ b/packages/ui/src/v2/Dropdown/variants.ts @@ -19,16 +19,16 @@ import { tv } from "tailwind-variants/lite"; export const dropdownPopup = tv({ base: [ - "min-w-40 origin-[var(--transform-origin)] rounded-3 border border-sand-6 bg-sand-1 p-2 shadow-5 outline-none", - "transition-[transform,opacity] data-[starting-style]:scale-95 data-[starting-style]:opacity-0", - "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", + "min-w-40 origin-(--transform-origin) rounded-3 border border-sand-a2 bg-sand-1 p-2 shadow-5 outline-none", + "transition-[transform,opacity] data-starting-style:scale-95 data-starting-style:opacity-0", + "data-ending-style:scale-95 data-ending-style:opacity-0", ], }); export const dropdownItem = tv({ base: [ "group flex cursor-pointer items-center gap-2 rounded-2 outline-none select-none", - "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "data-disabled:pointer-events-none data-disabled:opacity-50", ], variants: { size: { @@ -51,12 +51,12 @@ export const dropdownItem = tv({ }, compoundVariants: [ // accent - { variant: "solid", color: "accent", class: "data-[highlighted]:bg-gold-9 data-[highlighted]:text-white" }, - { variant: "soft", color: "accent", class: "data-[highlighted]:bg-gold-4 data-[highlighted]:text-gold-12" }, + { variant: "solid", color: "accent", class: "data-highlighted:bg-gold-9 data-highlighted:text-white" }, + { variant: "soft", color: "accent", class: "data-highlighted:bg-gold-4 data-highlighted:text-gold-12" }, { color: "accent", highContrast: true, class: "text-sand-12" }, // error - { variant: "solid", color: "error", class: "data-[highlighted]:bg-red-9 data-[highlighted]:text-white" }, - { variant: "soft", color: "error", class: "data-[highlighted]:bg-red-4 data-[highlighted]:text-red-12" }, + { variant: "solid", color: "error", class: "data-highlighted:bg-red-9 data-highlighted:text-white" }, + { variant: "soft", color: "error", class: "data-highlighted:bg-red-4 data-highlighted:text-red-12" }, ], defaultVariants: { size: 2, @@ -73,7 +73,7 @@ export const dropdownItemLabel = tv({ // Keyboard shortcut hint: trailing and muted, but inherits the item's color // once the item is highlighted (so it tracks the contrast text). export const dropdownItemShortcut = tv({ - base: "shrink-0 text-sand-11 group-data-[highlighted]:text-inherit", + base: "shrink-0 text-sand-11 group-data-highlighted:text-inherit", }); export const dropdownItemIndicator = tv({ @@ -85,7 +85,7 @@ export const dropdownSubmenuCaret = tv({ }); export const dropdownSeparator = tv({ - base: "-mx-2 my-1 h-px bg-sand-6", + base: "mx-3 my-1 h-px bg-sand-a3", }); export const dropdownGroupLabel = tv({