rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align dropdown menu chrome with Figma design

Browse Source 
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é <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-28 15:41:43 +02:00
parent 2a69129a83
commit 72f52c1ad7
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/v2/Dropdown/variants.ts
View File

@@ -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({