From 3788ef4ae6eb9f779ed1778f6ff20d2fe4fda9ee Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Fri, 20 Sep 2024 19:27:58 -0700 Subject: [PATCH 1/2] refactor: menu color tokens uses a "default, low, medium, high" structure for menu backgrounds and text colors, representing different layers to stacking menu sections. Blends this with existing DS to introduce "low" "medium" and "high" background colors. --- src/components/Nav/Menu/MenuContent.tsx | 36 +++++++-------- src/components/Nav/Mobile/LvlAccordion.tsx | 8 ++-- src/components/Nav/Mobile/MenuBody.tsx | 2 +- src/styles/semantic-tokens.css | 51 ++++++++-------------- tailwind.config.ts | 39 +++++------------ 5 files changed, 52 insertions(+), 84 deletions(-) diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index c3ba06030fb..0aebfd8c44c 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -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", }, }, }, @@ -62,7 +62,7 @@ const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => { { diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index a0b3a5ade94..157c68032f7 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -14,7 +14,10 @@ --background: var(--white); --background-highlight: var(--gray-50); - --background-medium: var(--gray-200); /* TODO: VERIFY */ + /* TODO: Add "low" "medium" and "high" to design system */ + --background-low: var(--gray-100); + --background-medium: var(--gray-200); + --background-high: var(--gray-300); /* TODO: Add border color tokens to match DS */ @@ -103,22 +106,10 @@ --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); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-400); + --body-menu-medium: var(--gray-500); + --body-menu-high: var(--gray-700); } /* Dark mode token declarations */ @@ -132,7 +123,11 @@ --background: var(--black); --background-highlight: var(--gray-900); - --background-medium: var(--gray-950); /* TODO: VERIFY */ + + /* TODO: Add "low" "medium" and "high" to design system */ + --background-low: var(--gray-700); + --background-medium: var(--gray-600); + --background-high: var(--gray-800); /* TODO: Add border color tokens to match DS */ @@ -188,21 +183,9 @@ --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); + --body-menu: var(--gray-400); + --body-menu-low: var(--gray-300); + --body-menu-medium: var(--gray-300); + --body-menu-high: var(--gray-300); } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 63d98546675..a51767283f5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -136,6 +136,14 @@ const config = { medium: "hsla(var(--body-medium))", light: "hsla(var(--body-light))", inverse: "hsla(var(--body-inverse))", + + // TODO: Add "body-menu" to design system + 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))", @@ -143,6 +151,10 @@ const config = { background: { DEFAULT: "hsla(var(--background))", highlight: "hsla(var(--background-highlight))", + // TODO : Add "low" "medium" and "high" to design system + low: "hsla(var(--background-low))", + medium: "hsla(var(--background-medium))", + high: "hsla(var(--background-high))", }, // TODO: Add border color tokens to match DS @@ -192,33 +204,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)", From d589a914d3284ae1dd723eff355908ac1f8a9c1a Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 23 Sep 2024 14:54:12 -0700 Subject: [PATCH 2/2] chore: rm TODOs, rearrange to match DS --- src/styles/semantic-tokens.css | 25 ++++++++++--------------- tailwind.config.ts | 3 --- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index 157c68032f7..ba62942497d 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -10,11 +10,15 @@ --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); - /* TODO: Add "low" "medium" and "high" to design system */ --background-low: var(--gray-100); --background-medium: var(--gray-200); --background-high: var(--gray-300); @@ -104,12 +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 */ - --body-menu: var(--gray-400); - --body-menu-low: var(--gray-400); - --body-menu-medium: var(--gray-500); - --body-menu-high: var(--gray-700); } /* Dark mode token declarations */ @@ -119,12 +117,15 @@ --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); - - /* TODO: Add "low" "medium" and "high" to design system */ --background-low: var(--gray-700); --background-medium: var(--gray-600); --background-high: var(--gray-800); @@ -181,11 +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 */ - --body-menu: var(--gray-400); - --body-menu-low: var(--gray-300); - --body-menu-medium: var(--gray-300); - --body-menu-high: var(--gray-300); } } diff --git a/tailwind.config.ts b/tailwind.config.ts index a51767283f5..e1abb9da45c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -136,8 +136,6 @@ const config = { medium: "hsla(var(--body-medium))", light: "hsla(var(--body-light))", inverse: "hsla(var(--body-inverse))", - - // TODO: Add "body-menu" to design system menu: { DEFAULT: "hsla(var(--body-menu))", low: "hsla(var(--body-menu-low))", @@ -151,7 +149,6 @@ const config = { background: { DEFAULT: "hsla(var(--background))", highlight: "hsla(var(--background-highlight))", - // TODO : Add "low" "medium" and "high" to design system low: "hsla(var(--background-low))", medium: "hsla(var(--background-medium))", high: "hsla(var(--background-high))",