Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: menu color tokens #13926

Merged
merged 2 commits into from
Sep 23, 2024
Merged

refactor: menu color tokens #13926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3788ef4
refactor: menu color tokens
wackerow Sep 21, 2024
d589a91
chore: rm TODOs, rearrange to match DS
wackerow Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions src/components/Nav/Menu/MenuContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,35 @@ export const navMenuVariants = tv({
slots: {
base: "text-body",
item: "has-[button[data-state=open]]:rounded-s-md has-[button[data-state=open]]:rounded-e-none has-[button[data-state=open]]:-me-2 has-[button[data-state=open]]:pe-2",
link: "group w-full relative py-4 hover:text-menu-active [&:hover_p]:text-menu-active focus-visible:text-menu-active [&:focus-visible_p]:text-menu-active hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
link: "group w-full relative py-4 hover:text-primary [&:hover_p]:text-primary focus-visible:text-primary [&:focus-visible_p]:text-primary hover:outline-0 rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none",
linkSubtext: "text-sm",
submenu: "grid h-full w-full grid-cols-1",
},
variants: {
level: {
1: {
submenu: "grid-cols-3 bg-menu-1-background",
item: "has-[button[data-state=open]]:bg-menu-1-active-background",
link: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background",
linkSubtext: "group-[data-active=true]:text-menu-1-subtext",
submenu: "grid-cols-3 bg-background",
item: "has-[button[data-state=open]]:bg-background-low",
link: "data-[active=true]:bg-background-low hover:bg-background-low focus-visible:bg-background-low",
linkSubtext: "group-[data-active=true]:text-body-menu",
},
2: {
submenu: "grid-cols-2 bg-menu-2-background",
item: "has-[button[data-state=open]]:bg-menu-2-active-background",
link: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background",
linkSubtext: "group-[data-active=true]:text-menu-2-subtext",
submenu: "grid-cols-2 bg-background-low",
item: "has-[button[data-state=open]]:bg-background-medium",
link: "hover:bg-background-medium focus-visible:bg-background-medium data-[active=true]:bg-background-medium",
linkSubtext: "group-[data-active=true]:text-body-menu-low",
},
3: {
submenu: "grid-cols-1 bg-menu-3-background",
item: "has-[button[data-state=open]]:bg-menu-3-active-background",
link: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background",
linkSubtext: "group-[data-active=true]:text-menu-3-subtext",
submenu: "grid-cols-1 bg-background-medium",
item: "has-[button[data-state=open]]:bg-background-low`",
link: "data-[active=true]:bg-background-low hover:bg-background-low",
linkSubtext: "group-[data-active=true]:text-body-menu-medium",
},
4: {
submenu: "grid-cols-1 bg-menu-4-background",
item: "has-[button[data-state=open]]:bg-menu-4-active-background",
link: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background",
linkSubtext: "group-[data-active=true]:text-menu-4-subtext",
submenu: "grid-cols-1 bg-background-high",
item: "has-[button[data-state=open]]:bg-background-medium",
link: "data-[active=true]:bg-background-medium hover:bg-background-medium",
linkSubtext: "group-[data-active=true]:text-body-menu-high",
},
},
},
Expand All @@ -62,7 +62,7 @@ const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => {
<Content asChild>
<motion.div
className={cn(
"absolute inset-x-0 top-19 border border-body-light bg-menu-1-background shadow-md",
"absolute inset-x-0 top-19 border border-body-light bg-background shadow-md",
base()
)}
variants={containerVariants}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Nav/Mobile/LvlAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ const subtextColorPerLevel = {
}

const backgroundColorPerLevel = {
1: "bg-menu-1-background",
2: "bg-menu-2-background",
3: "bg-menu-3-background",
4: "bg-menu-4-background",
1: "bg-background",
2: "bg-background-low",
3: "bg-background-medium",
4: "bg-background-high",
}

const LvlAccordion = ({
Expand Down
2 changes: 1 addition & 1 deletion src/components/Nav/Mobile/MenuBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const MenuBody = ({ linkSections, onToggle }: MenuBodyProps) => {

<AccordionContent
className={cn(
"mt-0 bg-menu-2-background p-0",
"mt-0 bg-background-low p-0",
isExpanded && "border-t border-disabled"
)}
>
Expand Down
54 changes: 16 additions & 38 deletions src/styles/semantic-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,18 @@
--body-light: var(--gray-200);
--body-inverse: var(--white);

--body-menu: var(--gray-400);
--body-menu-low: var(--gray-400);
--body-menu-medium: var(--gray-500);
--body-menu-high: var(--gray-700);

--disabled: var(--gray-400);

--background: var(--white);
--background-highlight: var(--gray-50);
--background-medium: var(--gray-200); /* TODO: VERIFY */
--background-low: var(--gray-100);
--background-medium: var(--gray-200);
--background-high: var(--gray-300);

/* TODO: Add border color tokens to match DS */

Expand Down Expand Up @@ -101,24 +108,6 @@
--shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
--shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
--shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity));

/* Menu colors */
--menu: var(--body);
--menu-hover: var(--gray-200);
--menu-active: var(--primary);
--menu-active-background: var(--primary-high-contrast);
--menu-1-subtext: var(--gray-400);
--menu-1-background: var(--white);
--menu-1-active-background: var(--gray-150);
--menu-2-subtext: var(--gray-400);
--menu-2-background: var(--gray-150);
--menu-2-active-background: var(--gray-200);
--menu-3-subtext: var(--gray-500);
--menu-3-background: var(--gray-200);
--menu-3-active-background: var(--gray-100);
--menu-4-subtext: var(--gray-700);
--menu-4-background: var(--gray-300);
--menu-4-active-background: var(--gray-200);
}

/* Dark mode token declarations */
Expand All @@ -128,11 +117,18 @@
--body-light: var(--gray-600);
--body-inverse: var(--black);

--body-menu: var(--gray-400);
--body-menu-low: var(--gray-300);
--body-menu-medium: var(--gray-300);
--body-menu-high: var(--gray-300);

--disabled: var(--gray-500);

--background: var(--black);
--background-highlight: var(--gray-900);
--background-medium: var(--gray-950); /* TODO: VERIFY */
--background-low: var(--gray-700);
--background-medium: var(--gray-600);
--background-high: var(--gray-800);

/* TODO: Add border color tokens to match DS */

Expand Down Expand Up @@ -186,23 +182,5 @@
--shadow-window-box-3-opacity: 0.16;
--shadow-window-box-4-opacity: 0.06;
--shadow-window-box-5-opacity: 0.06;

/* Menu colors */
--menu: var(--body);
--menu-hover: var(--gray-200);
--menu-active: var(--primary);
--menu-active-background: var(--primary-high-contrast);
--menu-1-subtext: var(--gray-400);
--menu-1-background: var(--black);
--menu-1-active-background: var(--gray-700);
--menu-2-subtext: var(--gray-300);
--menu-2-background: var(--gray-700);
--menu-2-active-background: var(--gray-600);
--menu-3-subtext: var(--gray-300);
--menu-3-background: var(--gray-600);
--menu-3-active-background: var(--gray-700);
--menu-4-subtext: var(--gray-300);
--menu-4-background: var(--gray-700);
--menu-4-active-background: var(--gray-800);
}
}
36 changes: 9 additions & 27 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,13 +136,22 @@ const config = {
medium: "hsla(var(--body-medium))",
light: "hsla(var(--body-light))",
inverse: "hsla(var(--body-inverse))",
menu: {
DEFAULT: "hsla(var(--body-menu))",
low: "hsla(var(--body-menu-low))",
medium: "hsla(var(--body-menu-medium))",
high: "hsla(var(--body-menu-high))",
},
},

disabled: "hsla(var(--disabled))",

background: {
DEFAULT: "hsla(var(--background))",
highlight: "hsla(var(--background-highlight))",
low: "hsla(var(--background-low))",
medium: "hsla(var(--background-medium))",
high: "hsla(var(--background-high))",
},

// TODO: Add border color tokens to match DS
Expand Down Expand Up @@ -192,33 +201,6 @@ const config = {
light: "hsla(var(--warning-light))",
},

menu: {
DEFAULT: "hsla(var(--menu))",
hover: "hsla(var(--menu-hover))",
active: "hsla(var(--menu-active))",
"active-background": "hsla(var(--menu-active-background))",
1: {
subtext: "hsla(var(--menu-1-subtext))",
background: "hsla(var(--menu-1-background))",
"active-background": "hsla(var(--menu-1-active-background))",
},
2: {
subtext: "hsla(var(--menu-2-subtext))",
background: "hsla(var(--menu-2-background))",
"active-background": "hsla(var(--menu-2-active-background))",
},
3: {
subtext: "hsla(var(--menu-3-subtext))",
background: "hsla(var(--menu-3-background))",
"active-background": "hsla(var(--menu-3-active-background))",
},
4: {
subtext: "hsla(var(--menu-4-subtext))",
background: "hsla(var(--menu-4-background))",
"active-background": "hsla(var(--menu-4-active-background))",
},
},

/** @deprecated */
"switch-background": "hsla(var(--switch-background))", // TODO: Migrate
"tooltip-shadow": "var(--tooltip-shadow)",
Expand Down
Loading