From f8e42bdecd3c4d0564c4c6891bc02e7ce0968c95 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Wed, 14 Aug 2024 16:06:30 +0200 Subject: [PATCH 01/11] migrate nav to tailwind and new components --- src/components/Nav/Desktop/index.tsx | 29 ++++------ src/components/Nav/index.tsx | 75 ++++++++++++-------------- src/components/Search/SearchButton.tsx | 2 +- src/components/Search/index.tsx | 56 ++++++------------- 4 files changed, 62 insertions(+), 100 deletions(-) diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx index b5cdf216510..7e8e313bf54 100644 --- a/src/components/Nav/Desktop/index.tsx +++ b/src/components/Nav/Desktop/index.tsx @@ -3,14 +3,16 @@ import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { BsTranslate } from "react-icons/bs" import { MdBrightness2, MdWbSunny } from "react-icons/md" -import { HStack, useColorModeValue, useEventListener } from "@chakra-ui/react" -import { IconButton } from "@/components/Buttons" import LanguagePicker from "@/components/LanguagePicker" import { Button } from "@/components/ui/buttons/Button" +import { HStack } from "@/components/ui/flex" import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants" +import useColorModeValue from "@/hooks/useColorModeValue" +import { useEventListener } from "@/hooks/useEventListener" + type DesktopNavMenuProps = { toggleColorMode: () => void } @@ -20,20 +22,12 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => { const { locale } = useRouter() const languagePickerRef = useRef(null) - const ThemeIcon = useColorModeValue(, ) + const ThemeIcon = useColorModeValue(MdBrightness2, MdWbSunny) const themeIconAriaLabel = useColorModeValue( "Switch to Dark Theme", "Switch to Light Theme" ) - const desktopHoverFocusStyles = { - "& > svg": { - transform: "rotate(10deg)", - color: "primary.hover", - transition: "transform 0.5s, color 0.2s", - }, - } - /** * Adds a keydown event listener to toggle color mode (ctrl|cmd + \) * or open the language picker (\). @@ -52,17 +46,16 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => { }) return ( - - + {/* Locale-picker menu */} diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index da8f00c4202..1f963ae6a51 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -1,14 +1,15 @@ import { lazy, Suspense, useRef } from "react" import { useTranslation } from "next-i18next" -import { Box, Flex, Hide, Show } from "@chakra-ui/react" +import { MdSearch } from "react-icons/md" import { EthHomeIcon } from "@/components/icons" -import { BaseLink } from "@/components/Link" import Search from "@/components/Search" import { isDesktop } from "@/lib/utils/isDesktop" -import { NAV_PY } from "@/lib/constants" +import SearchButton from "../Search/SearchButton" +import { Button } from "../ui/buttons/Button" +import { BaseLink } from "../ui/Link" import DesktopNavMenu from "./Desktop" import Menu from "./Menu" @@ -29,73 +30,63 @@ const Nav = () => { const isDesktopFlag = isDesktop() return ( - - + + ) } diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index e8e9d1e79c1..19ae404f87c 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -1,5 +1,5 @@ import * as React from "react" -import { useTranslation } from "react-i18next" +import { useTranslation } from "next-i18next" import { DocSearchButton } from "@docsearch/react" import { Button, type ButtonProps } from "../ui/buttons/Button" diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 1ff7b8e88b3..f816bf5bf77 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -2,28 +2,24 @@ import { forwardRef, useRef } from "react" import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" -import { MdSearch } from "react-icons/md" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" import { useComposedRefs } from "@radix-ui/react-compose-refs" import * as Portal from "@radix-ui/react-portal" +import { Slot } from "@radix-ui/react-slot" import { trackCustomEvent } from "@/lib/utils/matomo" import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle" import { sanitizeHitUrl } from "@/lib/utils/url" -import { Button } from "../ui/buttons/Button" - -import SearchButton from "./SearchButton" - import { type useDisclosure } from "@/hooks/useDisclosure" const SearchModal = dynamic(() => import("./SearchModal")) -type Props = ReturnType +type Props = ReturnType & { children?: React.ReactNode } const Search = forwardRef( - ({ isOpen, onOpen, onClose }, ref) => { + ({ isOpen, onOpen, onClose, children }, ref) => { const { locale } = useRouter() const searchButtonRef = useRef(null) const mergedButtonRefs = useComposedRefs(ref, searchButtonRef) @@ -43,38 +39,20 @@ const Search = forwardRef( return ( <> -
- { - onOpen() - trackCustomEvent({ - eventCategory: "nav bar", - eventAction: "click", - eventName: "search open", - }) - }} - /> -
-
- -
+ { + onOpen() + trackCustomEvent({ + eventCategory: "nav bar", + eventAction: "click", + eventName: "search open", + }) + }} + > + {children} + {isOpen && ( Date: Wed, 14 Aug 2024 16:15:43 +0200 Subject: [PATCH 02/11] convert eth home icon to svg --- src/components/Nav/index.tsx | 2 +- src/components/icons/EthHomeIcon.tsx | 50 -------------------------- src/components/icons/eth-home-icon.svg | 43 ++++++++++++++++++++++ src/components/icons/index.ts | 2 +- 4 files changed, 45 insertions(+), 52 deletions(-) delete mode 100644 src/components/icons/EthHomeIcon.tsx create mode 100644 src/components/icons/eth-home-icon.svg diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 1f963ae6a51..00ddd7830fa 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -42,7 +42,7 @@ const Nav = () => { aria-label={t("home")} className="inline-flex items-center no-underline" > - + {/* Desktop */}
diff --git a/src/components/icons/EthHomeIcon.tsx b/src/components/icons/EthHomeIcon.tsx deleted file mode 100644 index 7fb0c596791..00000000000 --- a/src/components/icons/EthHomeIcon.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/* eslint-disable react/jsx-key */ -import * as React from "react" -import { createIcon } from "@chakra-ui/react" - -export const EthHomeIcon = createIcon({ - displayName: "EthHomeIcon", - viewBox: "0 0 115 182", - defaultProps: { - width: "22px", - height: "35px", - }, - path: [ - , - , - , - , - , - , - ], -}) diff --git a/src/components/icons/eth-home-icon.svg b/src/components/icons/eth-home-icon.svg new file mode 100644 index 00000000000..734d8cb8b7c --- /dev/null +++ b/src/components/icons/eth-home-icon.svg @@ -0,0 +1,43 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 52ea0779fa3..65b0e0a6f6b 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1,5 +1,5 @@ // General Icons -import { EthHomeIcon } from "./EthHomeIcon" +import EthHomeIcon from "./eth-home-icon.svg" import FeedbackGlyphIcon from "./feedback-glyph-icon.svg" import FeedbackThumbsUpIcon from "./feedback-thumbs-up-icon.svg" import { HighlightDarkIcon } from "./HighlightDarkIcon" From 4153a1f4f4cf3c9bd603d3cb18bcf01ca05dccf5 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 15 Aug 2024 13:30:03 +0200 Subject: [PATCH 03/11] style desktop nav menu using tailwind classes --- package.json | 1 + src/components/Nav/Menu/MenuContent.tsx | 52 ++++++--- src/components/Nav/Menu/SubMenu.tsx | 114 ++++++++----------- src/components/Nav/Menu/useNavMenu.ts | 5 +- src/components/Nav/Menu/useSubMenu.ts | 6 - src/components/Nav/types.ts | 7 +- src/components/Nav/useNav.ts | 2 +- src/components/icons/EthereumIcon.tsx | 17 --- src/components/icons/Icons.stories.tsx | 2 +- src/components/icons/eth-home-icon.svg | 12 +- src/components/icons/ethereum-icon.svg | 13 +++ src/components/icons/feedback-glyph-icon.svg | 12 +- src/styles/global.css | 38 ++++++- tailwind.config.ts | 26 +++++ yarn.lock | 13 +++ 15 files changed, 200 insertions(+), 120 deletions(-) delete mode 100644 src/components/icons/EthereumIcon.tsx create mode 100644 src/components/icons/ethereum-icon.svg diff --git a/package.json b/package.json index fa1080955bc..f5ddf670db9 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "reading-time": "^1.5.0", "remark-gfm": "^3.0.1", "tailwind-merge": "^2.3.0", + "tailwind-variants": "^0.2.1", "tailwindcss-animate": "^1.0.7", "usehooks-ts": "^3.1.0", "yaml-loader": "^0.8.0" diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index 2c075949c23..805c1b669ef 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -1,12 +1,42 @@ import { motion } from "framer-motion" -import { Box } from "@chakra-ui/react" +import { tv } from "tailwind-variants" import { Content } from "@radix-ui/react-navigation-menu" +import { cn } from "@/lib/utils/cn" + import { NavItem, NavSections } from "../types" import SubMenu from "./SubMenu" import { useNavMenu } from "./useNavMenu" +export const navMenu = tv({ + slots: { + base: "text-body", + item: "w-full relative -me-4 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 hover:rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none", + submenu: "grid h-full w-full grid-cols-1", + }, + variants: { + level: { + 1: { + submenu: "grid-cols-3 bg-menu-1-background", + item: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-background", + }, + 2: { + submenu: "grid-cols-2 bg-menu-2-background", + item: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-background", + }, + 3: { + submenu: "grid-cols-1 bg-menu-3-background", + item: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-background", + }, + 4: { + submenu: "grid-cols-1 bg-menu-4-background", + item: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-background", + }, + }, + }, +}) + type MenuContentProps = { items: NavItem[] isOpen: boolean @@ -15,23 +45,19 @@ type MenuContentProps = { // Desktop Menu content const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => { - const { activeSection, containerVariants, menuColors, onClose } = - useNavMenu(sections) + const { activeSection, containerVariants, onClose } = useNavMenu(sections) + const { base } = navMenu() return ( - { activeSection={activeSection} onClose={onClose} /> - + ) } diff --git a/src/components/Nav/Menu/SubMenu.tsx b/src/components/Nav/Menu/SubMenu.tsx index e53f2a0f5ae..29d87a91e54 100644 --- a/src/components/Nav/Menu/SubMenu.tsx +++ b/src/components/Nav/Menu/SubMenu.tsx @@ -1,13 +1,5 @@ import { AnimatePresence, motion } from "framer-motion" import NextLink from "next/link" -import { - Box, - Button, - Grid, - Icon, - ListItem, - UnorderedList, -} from "@chakra-ui/react" import { Content, Item, @@ -18,15 +10,18 @@ import { Viewport, } from "@radix-ui/react-navigation-menu" -import { ButtonProps } from "@/components/Buttons" -import Link from "@/components/Link" +import { Button } from "@/components/ui/buttons/Button" +import { BaseLink } from "@/components/ui/Link" +import { ListItem, UnorderedList } from "@/components/ui/list" +import { cn } from "@/lib/utils/cn" import { trackCustomEvent } from "@/lib/utils/matomo" import { cleanPath } from "@/lib/utils/url" import type { Level, NavItem, NavSectionKey } from "../types" import ItemContent from "./ItemContent" +import { navMenu } from "./MenuContent" import NextChevron from "./NextChevron" import { useSubMenu } from "./useSubMenu" @@ -47,77 +42,56 @@ type LvlContentProps = { * @returns The JSX element representing the menu content. */ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => { - const { asPath, locale, menuColors, menuVariants, PADDING } = useSubMenu() + const { asPath, locale, menuVariants } = useSubMenu() + const { submenu, item: itemClasses } = navMenu({ level: lvl }) if (lvl > 3) return null - const templateColumns = `repeat(${4 - lvl}, 1fr)` - return ( - - + {items.map((item) => { - const { label, icon, ...action } = item + const { label, icon: Icon, ...action } = item const subItems = action.items || [] const isLink = "href" in action const isActivePage = isLink && cleanPath(asPath) === action.href - const activeStyles = { - outline: "none", - rounded: "md", - "p, svg": { color: menuColors.highlight }, - bg: menuColors.lvl[lvl].activeBackground, - boxShadow: "none", - } - const buttonProps: ButtonProps = { - color: menuColors.body, - leftIcon: lvl === 1 && icon ? : undefined, - rightIcon: isLink ? undefined : , - position: "relative", - w: "full", - me: -PADDING, - sx: { - "span:first-of-type": { m: 0, me: 4 }, // Spacing for icon - }, - py: PADDING, - bg: isActivePage - ? menuColors.lvl[lvl].activeBackground - : "none", - _hover: activeStyles, - _focus: activeStyles, - variant: "ghost", - } + + const buttonClasses = cn( + "no-underline text-body", + itemClasses() + ) + return ( {isLink ? ( ) : ( <> - - +
- +
)} @@ -161,7 +143,7 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => { - + ) diff --git a/src/components/Nav/Menu/useNavMenu.ts b/src/components/Nav/Menu/useNavMenu.ts index ffe5071e966..9b25024acc0 100644 --- a/src/components/Nav/Menu/useNavMenu.ts +++ b/src/components/Nav/Menu/useNavMenu.ts @@ -1,6 +1,5 @@ import { useState } from "react" import type { MotionProps } from "framer-motion" -import { useEventListener } from "@chakra-ui/react" import { isModified } from "@/lib/utils/keyboard" @@ -8,12 +7,11 @@ import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants" import type { NavSectionKey, NavSections } from "../types" -import { useNavMenuColors } from "@/hooks/useNavMenuColors" +import { useEventListener } from "@/hooks/useEventListener" import { useRtlFlip } from "@/hooks/useRtlFlip" export const useNavMenu = (sections: NavSections) => { const { direction } = useRtlFlip() - const menuColors = useNavMenuColors() const [activeSection, setActiveSection] = useState(null) // Focus corresponding nav section when number keys pressed @@ -72,7 +70,6 @@ export const useNavMenu = (sections: NavSections) => { direction, handleSectionChange, isOpen, - menuColors, onClose, } } diff --git a/src/components/Nav/Menu/useSubMenu.ts b/src/components/Nav/Menu/useSubMenu.ts index 7d99f4ae67e..b44b39e7999 100644 --- a/src/components/Nav/Menu/useSubMenu.ts +++ b/src/components/Nav/Menu/useSubMenu.ts @@ -1,14 +1,10 @@ import type { MotionProps } from "framer-motion" import { useRouter } from "next/router" -import { useNavMenuColors } from "@/hooks/useNavMenuColors" import { useRtlFlip } from "@/hooks/useRtlFlip" -const PADDING = 4 // Chakra-UI space token - export const useSubMenu = () => { const { asPath, locale } = useRouter() - const menuColors = useNavMenuColors() const { isRtl } = useRtlFlip() const menuVariants: MotionProps["variants"] = { @@ -19,8 +15,6 @@ export const useSubMenu = () => { return { asPath, locale, - menuColors, menuVariants, - PADDING, } } diff --git a/src/components/Nav/types.ts b/src/components/Nav/types.ts index fb78ad871b9..91c4859ec59 100644 --- a/src/components/Nav/types.ts +++ b/src/components/Nav/types.ts @@ -1,4 +1,4 @@ -import type { RefObject } from "react" +import type { FC, RefObject, SVGProps } from "react" import type { IconType } from "react-icons" import type { IconProps } from "@chakra-ui/react" @@ -9,7 +9,10 @@ type LinkXorItems = LinkOnly | ItemsOnly export type NavItem = { label: string description: string - icon?: IconType | ((props: IconProps) => JSX.Element) + icon?: + | IconType + | FC> + | ((props: IconProps) => JSX.Element) } & LinkXorItems export type NavSectionKey = diff --git a/src/components/Nav/useNav.ts b/src/components/Nav/useNav.ts index 4265832f2c9..61b96727033 100644 --- a/src/components/Nav/useNav.ts +++ b/src/components/Nav/useNav.ts @@ -20,7 +20,7 @@ import { import { PiFlask, PiUsersFourLight } from "react-icons/pi" import { useColorMode } from "@chakra-ui/react" -import { EthereumIcon } from "@/components/icons/EthereumIcon" +import EthereumIcon from "@/components/icons/ethereum-icon.svg" import { trackCustomEvent } from "@/lib/utils/matomo" diff --git a/src/components/icons/EthereumIcon.tsx b/src/components/icons/EthereumIcon.tsx deleted file mode 100644 index af51f4545df..00000000000 --- a/src/components/icons/EthereumIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Icon, type IconProps } from "@chakra-ui/react" - -export const EthereumIcon = (props: IconProps) => ( - - - -) diff --git a/src/components/icons/Icons.stories.tsx b/src/components/icons/Icons.stories.tsx index 0600fa1e190..ba5c65f9da8 100644 --- a/src/components/icons/Icons.stories.tsx +++ b/src/components/icons/Icons.stories.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { Center, Flex, Icon, SimpleGrid } from "@chakra-ui/react" import type { Meta, StoryObj } from "@storybook/react" -import { EthHomeIcon } from "./EthHomeIcon" +import EthHomeIcon from "./eth-home-icon.svg" import FeedbackThumbsUpIcon from "./feedback-thumbs-up-icon.svg" import { HighlightDarkIcon } from "./HighlightDarkIcon" import { HighlightIcon } from "./HighlightIcon" diff --git a/src/components/icons/eth-home-icon.svg b/src/components/icons/eth-home-icon.svg index 734d8cb8b7c..0a120cffe0c 100644 --- a/src/components/icons/eth-home-icon.svg +++ b/src/components/icons/eth-home-icon.svg @@ -8,36 +8,36 @@ d="M57.5054 181V135.84L1.64064 103.171L57.5054 181Z" fill="#F0CDC2" stroke="#1616B4" - strokeLinejoin="round" + stroke-linejoin="round" /> \ No newline at end of file diff --git a/src/components/icons/ethereum-icon.svg b/src/components/icons/ethereum-icon.svg new file mode 100644 index 00000000000..d639f9f2f9c --- /dev/null +++ b/src/components/icons/ethereum-icon.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/components/icons/feedback-glyph-icon.svg b/src/components/icons/feedback-glyph-icon.svg index 410ec68f28b..a208df2f8c6 100644 --- a/src/components/icons/feedback-glyph-icon.svg +++ b/src/components/icons/feedback-glyph-icon.svg @@ -1,5 +1,11 @@ - - - + + + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 34b40c21099..9dd49aab4ad 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -116,6 +116,24 @@ --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07), 0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05); --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + + /* 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: 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); } [data-theme="dark"] { @@ -176,6 +194,24 @@ --table-box-shadow: 0 14px 66px hsla(0, 0%, 96.1%, 0.07), 0 10px 17px hsla(0, 0%, 96.1%, 0.03), 0 4px 7px hsla(0, 0%, 96.1%, 0.05); --table-item-box-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1); + + /* 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: 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); } } @@ -185,7 +221,7 @@ } a { - @apply underline-offset-3 text-primary underline hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover; + @apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover; } h1, diff --git a/tailwind.config.ts b/tailwind.config.ts index 6108afb7b72..4dd812c0b61 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -144,6 +144,32 @@ const config = { outline: "var(--success-outline)", neutral: "var(--success-neutral)", }, + menu: { + DEFAULT: "var(--menu)", + hover: "var(--menu-hover)", + active: "var(--menu-active)", + "active-background": "var(--menu-active-background)", + 1: { + subtext: "var(--menu-1-subtext)", + background: "var(--menu-1-background)", + "active-background": "var(--menu-1-active-background)", + }, + 2: { + subtext: "var(--menu-2-subtext)", + background: "var(--menu-2-background)", + "active-background": "var(--menu-2-active-background)", + }, + 3: { + subtext: "var(--menu-3-subtext)", + background: "var(--menu-3-background)", + "active-background": "var(--menu-3-active-background)", + }, + 4: { + subtext: "var(--menu-4-subtext)", + background: "var(--menu-4-background)", + "active-background": "var(--menu-4-active-background)", + }, + }, }, backgroundImage: { "main-gradient": "var(--main-gradient)", diff --git a/yarn.lock b/yarn.lock index dc20a6c8f00..283a5ce1749 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13085,6 +13085,7 @@ prelude-ls@^1.2.1: integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== "prettier-fallback@npm:prettier@^3", prettier@^3.1.1: + name prettier-fallback version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== @@ -14708,11 +14709,23 @@ svgo@^3.0.2: csso "^5.0.5" picocolors "^1.0.0" +tailwind-merge@^2.2.0: + version "2.5.2" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.2.tgz#000f05a703058f9f9f3829c644235f81d4c08a1f" + integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg== + tailwind-merge@^2.3.0: version "2.4.0" resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.4.0.tgz#1345209dc1f484f15159c9180610130587703042" integrity sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A== +tailwind-variants@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.2.1.tgz#132f2537b0150819036f6c4f47d5c50b929b758d" + integrity sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw== + dependencies: + tailwind-merge "^2.2.0" + tailwindcss-animate@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4" From 35370d8598d8bc7960c3b804a802e04824ecaee8 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 19 Aug 2024 15:16:59 +0200 Subject: [PATCH 04/11] set a default bg color to the menu content to avoid flashing color feeling --- src/components/Nav/Menu/MenuContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index 805c1b669ef..33c0b6c16c4 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -52,7 +52,7 @@ const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => { Date: Mon, 19 Aug 2024 15:17:47 +0200 Subject: [PATCH 05/11] define imports outside of component declaration --- src/components/Nav/Menu/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Nav/Menu/index.tsx b/src/components/Nav/Menu/index.tsx index 71c8a954dfb..8322a4a7784 100644 --- a/src/components/Nav/Menu/index.tsx +++ b/src/components/Nav/Menu/index.tsx @@ -18,6 +18,8 @@ import type { NavSections } from "../types" import { useNavMenu } from "./useNavMenu" +const MenuContent = dynamic(() => import("./MenuContent")) + type NavMenuProps = BaseHTMLAttributes & { sections: NavSections } @@ -26,8 +28,6 @@ const Menu = ({ sections, ...props }: NavMenuProps) => { const { activeSection, direction, handleSectionChange, isOpen } = useNavMenu(sections) - const MenuContent = dynamic(() => import("./MenuContent")) - return (
Date: Mon, 19 Aug 2024 15:41:57 +0200 Subject: [PATCH 06/11] refactor nav menu variants and fix gap in active items --- src/components/Nav/Menu/MenuContent.tsx | 19 ++++++++++++------- src/components/Nav/Menu/SubMenu.tsx | 23 ++++------------------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index 33c0b6c16c4..1098a6def75 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -9,29 +9,34 @@ import { NavItem, NavSections } from "../types" import SubMenu from "./SubMenu" import { useNavMenu } from "./useNavMenu" -export const navMenu = tv({ +export const navMenuVariants = tv({ slots: { base: "text-body", - item: "w-full relative -me-4 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 hover:rounded-md hover:shadow-none focus-visible:outline-0 focus-visible:rounded-md focus-visible:shadow-none", + item: "has-[button[data-state=open]]:rounded-s-md has-[button[data-state=open]]:rounded-e-none has-[button[data-state=open]]:-me-4 has-[button[data-state=open]]:pe-4", + link: "w-full relative -me-4 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", submenu: "grid h-full w-full grid-cols-1", }, variants: { level: { 1: { submenu: "grid-cols-3 bg-menu-1-background", - item: "data-[active=true]:bg-menu-1-active-background hover:bg-menu-1-active-background focus-visible:bg-menu-1-active-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", }, 2: { submenu: "grid-cols-2 bg-menu-2-background", - item: "hover:bg-menu-2-active-background focus-visible:bg-menu-2-active-background data-[active=true]:bg-menu-2-active-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", }, 3: { submenu: "grid-cols-1 bg-menu-3-background", - item: "data-[active=true]:bg-menu-3-active-background hover:bg-menu-3-active-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", }, 4: { submenu: "grid-cols-1 bg-menu-4-background", - item: "data-[active=true]:bg-menu-4-active-background hover:bg-menu-4-active-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", }, }, }, @@ -46,7 +51,7 @@ type MenuContentProps = { // Desktop Menu content const MenuContent = ({ items, isOpen, sections }: MenuContentProps) => { const { activeSection, containerVariants, onClose } = useNavMenu(sections) - const { base } = navMenu() + const { base } = navMenuVariants() return ( diff --git a/src/components/Nav/Menu/SubMenu.tsx b/src/components/Nav/Menu/SubMenu.tsx index 29d87a91e54..5c76b12c940 100644 --- a/src/components/Nav/Menu/SubMenu.tsx +++ b/src/components/Nav/Menu/SubMenu.tsx @@ -21,7 +21,7 @@ import { cleanPath } from "@/lib/utils/url" import type { Level, NavItem, NavSectionKey } from "../types" import ItemContent from "./ItemContent" -import { navMenu } from "./MenuContent" +import { navMenuVariants } from "./MenuContent" import NextChevron from "./NextChevron" import { useSubMenu } from "./useSubMenu" @@ -43,7 +43,7 @@ type LvlContentProps = { */ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => { const { asPath, locale, menuVariants } = useSubMenu() - const { submenu, item: itemClasses } = navMenu({ level: lvl }) + const { submenu, item: itemClasses, link } = navMenuVariants({ level: lvl }) if (lvl > 3) return null @@ -65,26 +65,11 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => { const isLink = "href" in action const isActivePage = isLink && cleanPath(asPath) === action.href - const buttonClasses = cn( - "no-underline text-body", - itemClasses() - ) + const buttonClasses = cn("no-underline text-body", link()) return ( - + {isLink ? ( From 480ed435fb6bb93ea7acb91b1b43636bd8588c21 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 19 Aug 2024 16:33:00 +0200 Subject: [PATCH 07/11] refactor search logic --- src/components/Nav/index.tsx | 61 +++--- src/components/Search/SearchButton.tsx | 25 +-- src/components/Search/SearchInputButton.tsx | 38 ++++ src/components/Search/index.tsx | 212 ++++++++++---------- 4 files changed, 181 insertions(+), 155 deletions(-) create mode 100644 src/components/Search/SearchInputButton.tsx diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 00ddd7830fa..081dde81680 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -1,6 +1,5 @@ import { lazy, Suspense, useRef } from "react" import { useTranslation } from "next-i18next" -import { MdSearch } from "react-icons/md" import { EthHomeIcon } from "@/components/icons" import Search from "@/components/Search" @@ -8,14 +7,13 @@ import Search from "@/components/Search" import { isDesktop } from "@/lib/utils/isDesktop" import SearchButton from "../Search/SearchButton" -import { Button } from "../ui/buttons/Button" +import SearchInputButton from "../Search/SearchInputButton" import { BaseLink } from "../ui/Link" import DesktopNavMenu from "./Desktop" import Menu from "./Menu" import { useNav } from "./useNav" -import { useDisclosure } from "@/hooks/useDisclosure" import { useIsClient } from "@/hooks/useIsClient" const MobileNavMenu = lazy(() => import("./Mobile")) @@ -24,7 +22,6 @@ const MobileNavMenu = lazy(() => import("./Mobile")) const Nav = () => { const { toggleColorMode, linkSections } = useNav() const { t } = useTranslation("common") - const searchModalDisclosure = useDisclosure() const navWrapperRef = useRef(null) const isClient = useIsClient() const isDesktopFlag = isDesktop() @@ -53,36 +50,34 @@ const Nav = () => {
)} -
- {/* Desktop */} -
- - - - -
+ + {({ onOpen }) => ( +
+ {/* Desktop */} +
+ + + +
-
- {/* Mobile */} - {/* use Suspense to display the Search & the Menu at the same time */} - - - - - - -
-
+
+ {/* Mobile */} + {/* use Suspense to display the Search & the Menu at the same time */} + + + + +
+
+ )} +
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index 19ae404f87c..e3143d25605 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -1,27 +1,28 @@ -import * as React from "react" +import { forwardRef } from "react" import { useTranslation } from "next-i18next" -import { DocSearchButton } from "@docsearch/react" +import { MdSearch } from "react-icons/md" + +import { cn } from "@/lib/utils/cn" import { Button, type ButtonProps } from "../ui/buttons/Button" -const SearchButton = React.forwardRef( - (props, ref) => { +const SearchButton = forwardRef( + ({ className, ...props }, ref) => { const { t } = useTranslation("common") return ( ) } diff --git a/src/components/Search/SearchInputButton.tsx b/src/components/Search/SearchInputButton.tsx new file mode 100644 index 00000000000..8959f776510 --- /dev/null +++ b/src/components/Search/SearchInputButton.tsx @@ -0,0 +1,38 @@ +import * as React from "react" +import { useTranslation } from "next-i18next" +import { DocSearchButton } from "@docsearch/react" + +import { cn } from "@/lib/utils/cn" + +import { Button, type ButtonProps } from "../ui/buttons/Button" + +const SearchButton = React.forwardRef( + ({ className, ...props }, ref) => { + const { t } = useTranslation("common") + + return ( + + ) + } +) + +SearchButton.displayName = "SearchButton" + +export default SearchButton diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index f816bf5bf77..b1fefabda5c 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -1,132 +1,124 @@ -import { forwardRef, useRef } from "react" +import { useRef } from "react" import dynamic from "next/dynamic" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import { useDocSearchKeyboardEvents } from "@docsearch/react" import { DocSearchHit } from "@docsearch/react/dist/esm/types" -import { useComposedRefs } from "@radix-ui/react-compose-refs" import * as Portal from "@radix-ui/react-portal" -import { Slot } from "@radix-ui/react-slot" import { trackCustomEvent } from "@/lib/utils/matomo" import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle" import { sanitizeHitUrl } from "@/lib/utils/url" -import { type useDisclosure } from "@/hooks/useDisclosure" +import { useDisclosure } from "@/hooks/useDisclosure" const SearchModal = dynamic(() => import("./SearchModal")) -type Props = ReturnType & { children?: React.ReactNode } +type Props = { + children: (props: ReturnType) => React.ReactNode +} -const Search = forwardRef( - ({ isOpen, onOpen, onClose, children }, ref) => { - const { locale } = useRouter() - const searchButtonRef = useRef(null) - const mergedButtonRefs = useComposedRefs(ref, searchButtonRef) - const { t } = useTranslation("common") +const Search = ({ children }: Props) => { + const disclosure = useDisclosure() + const { isOpen, onOpen, onClose } = disclosure - useDocSearchKeyboardEvents({ - isOpen, - onOpen, - onClose, - searchButtonRef, + const { locale } = useRouter() + const searchButtonRef = useRef(null) + const { t } = useTranslation("common") + + const handleOpen = () => { + onOpen() + trackCustomEvent({ + eventCategory: "nav bar", + eventAction: "click", + eventName: "search open", }) + } - const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || "" - const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY || "" - const indexName = - process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || "ethereumorg" + useDocSearchKeyboardEvents({ + isOpen, + onOpen: handleOpen, + onClose, + searchButtonRef, + }) - return ( - <> - { - onOpen() - trackCustomEvent({ - eventCategory: "nav bar", - eventAction: "click", - eventName: "search open", - }) - }} - > - {children} - - - {isOpen && ( - - items.map((item: DocSearchHit) => { - const newItem: DocSearchHit = structuredClone(item) - newItem.url = sanitizeHitUrl(item.url) - const newTitle = sanitizeHitTitle(item.hierarchy.lvl0 || "") - newItem.hierarchy.lvl0 = newTitle - return newItem - }) - } - placeholder={t("search-ethereum-org")} - translations={{ - searchBox: { - resetButtonTitle: t("clear"), - resetButtonAriaLabel: t("clear"), - cancelButtonText: t("close"), - cancelButtonAriaLabel: t("close"), - }, - footer: { - selectText: t("docsearch-to-select"), - selectKeyAriaLabel: t("docsearch-to-select"), - navigateText: t("docsearch-to-navigate"), - navigateUpKeyAriaLabel: t("up"), - navigateDownKeyAriaLabel: t("down"), - closeText: t("docsearch-to-close"), - closeKeyAriaLabel: t("docsearch-to-close"), - searchByText: t("docsearch-search-by"), - }, - errorScreen: { - titleText: t("docsearch-error-title"), - helpText: t("docsearch-error-help"), - }, - startScreen: { - recentSearchesTitle: t( - "docsearch-start-recent-searches-title" - ), - noRecentSearchesText: t("docsearch-start-no-recent-searches"), - saveRecentSearchButtonTitle: t( - "docsearch-start-save-recent-search" - ), - removeRecentSearchButtonTitle: t( - "docsearch-start-remove-recent-search" - ), - favoriteSearchesTitle: t("docsearch-start-favorite-searches"), - removeFavoriteSearchButtonTitle: t( - "docsearch-start-remove-favorite-search" - ), - }, - noResultsScreen: { - noResultsText: t("docsearch-no-results-text"), - suggestedQueryText: t("docsearch-no-results-suggested-query"), - reportMissingResultsText: t("docsearch-no-results-missing"), - reportMissingResultsLinkText: t( - "docsearch-no-results-missing-link" - ), - }, - }} - /> - )} - - - ) - } -) + const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || "" + const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY || "" + const indexName = + process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || "ethereumorg" -Search.displayName = "Search" + return ( + <> + {children({ ...disclosure, onOpen: handleOpen })} + + {isOpen && ( + + items.map((item: DocSearchHit) => { + const newItem: DocSearchHit = structuredClone(item) + newItem.url = sanitizeHitUrl(item.url) + const newTitle = sanitizeHitTitle(item.hierarchy.lvl0 || "") + newItem.hierarchy.lvl0 = newTitle + return newItem + }) + } + placeholder={t("search-ethereum-org")} + translations={{ + searchBox: { + resetButtonTitle: t("clear"), + resetButtonAriaLabel: t("clear"), + cancelButtonText: t("close"), + cancelButtonAriaLabel: t("close"), + }, + footer: { + selectText: t("docsearch-to-select"), + selectKeyAriaLabel: t("docsearch-to-select"), + navigateText: t("docsearch-to-navigate"), + navigateUpKeyAriaLabel: t("up"), + navigateDownKeyAriaLabel: t("down"), + closeText: t("docsearch-to-close"), + closeKeyAriaLabel: t("docsearch-to-close"), + searchByText: t("docsearch-search-by"), + }, + errorScreen: { + titleText: t("docsearch-error-title"), + helpText: t("docsearch-error-help"), + }, + startScreen: { + recentSearchesTitle: t("docsearch-start-recent-searches-title"), + noRecentSearchesText: t("docsearch-start-no-recent-searches"), + saveRecentSearchButtonTitle: t( + "docsearch-start-save-recent-search" + ), + removeRecentSearchButtonTitle: t( + "docsearch-start-remove-recent-search" + ), + favoriteSearchesTitle: t("docsearch-start-favorite-searches"), + removeFavoriteSearchButtonTitle: t( + "docsearch-start-remove-favorite-search" + ), + }, + noResultsScreen: { + noResultsText: t("docsearch-no-results-text"), + suggestedQueryText: t("docsearch-no-results-suggested-query"), + reportMissingResultsText: t("docsearch-no-results-missing"), + reportMissingResultsLinkText: t( + "docsearch-no-results-missing-link" + ), + }, + }} + /> + )} + + + ) +} export default Search From a644466e8f80dcdb34276970404ed31c9b2b5da5 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 22 Aug 2024 13:46:59 +0200 Subject: [PATCH 08/11] fix extra padding in opened submenus --- src/components/Nav/Menu/MenuContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Nav/Menu/MenuContent.tsx b/src/components/Nav/Menu/MenuContent.tsx index 1098a6def75..fb84a89501d 100644 --- a/src/components/Nav/Menu/MenuContent.tsx +++ b/src/components/Nav/Menu/MenuContent.tsx @@ -12,8 +12,8 @@ import { useNavMenu } from "./useNavMenu" 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-4 has-[button[data-state=open]]:pe-4", - link: "w-full relative -me-4 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", + 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: "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", submenu: "grid h-full w-full grid-cols-1", }, variants: { From e39e7bc691e3c00dac5b9b4d0b6fd9c1d7380157 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 22 Aug 2024 13:52:39 +0200 Subject: [PATCH 09/11] fix styles on search button hover effect --- src/components/Search/SearchButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx index e3143d25605..7bfde7b74b8 100644 --- a/src/components/Search/SearchButton.tsx +++ b/src/components/Search/SearchButton.tsx @@ -15,7 +15,7 @@ const SearchButton = forwardRef( ref={ref} aria-label={t("aria-toggle-search-button")} className={cn( - "px-2 transition-transform duration-200 ease-in-out hover:rotate-6 hover:text-primary", + "px-2 ease-in-out [&>svg]:transition-all [&>svg]:duration-500 [&>svg]:hover:rotate-12 [&>svg]:hover:text-primary-hover", className )} variant="ghost" From 5311011cac5e8913dfbfaacba02005f4b4d04df3 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 22 Aug 2024 13:54:11 +0200 Subject: [PATCH 10/11] fix hover color on the mobile hamburger button --- src/components/Nav/Mobile/HamburgerButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Nav/Mobile/HamburgerButton.tsx b/src/components/Nav/Mobile/HamburgerButton.tsx index 3722c1c4617..1bb8c2c484d 100644 --- a/src/components/Nav/Mobile/HamburgerButton.tsx +++ b/src/components/Nav/Mobile/HamburgerButton.tsx @@ -37,7 +37,7 @@ const HamburgerButton = forwardRef( > Date: Mon, 9 Sep 2024 18:22:33 +0200 Subject: [PATCH 11/11] update menu colors to use hsla --- src/styles/global.css | 36 ---------------------------------- src/styles/semantic-tokens.css | 36 ++++++++++++++++++++++++++++++++++ tailwind.config.ts | 32 +++++++++++++++--------------- 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index c8fed045409..2a7cc970e30 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -69,24 +69,6 @@ rgba(145, 234, 228, 0.2) 100% ); --search-background: var(--background); - - /* 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: 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 { @@ -137,24 +119,6 @@ rgba(134, 253, 232, 0.08) 100% ); --search-background: #4c4c4c; - - /* 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: 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); } } diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css index e8400ac7236..f454ac0e2c2 100644 --- a/src/styles/semantic-tokens.css +++ b/src/styles/semantic-tokens.css @@ -76,6 +76,24 @@ --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 */ @@ -127,5 +145,23 @@ --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); } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 7ba12419d5f..bb9070513ae 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -176,29 +176,29 @@ const config = { neutral: "hsla(var(--success-neutral))", }, menu: { - DEFAULT: "var(--menu)", - hover: "var(--menu-hover)", - active: "var(--menu-active)", - "active-background": "var(--menu-active-background)", + DEFAULT: "hsla(var(--menu))", + hover: "hsla(var(--menu-hover))", + active: "hsla(var(--menu-active))", + "active-background": "hsla(var(--menu-active-background))", 1: { - subtext: "var(--menu-1-subtext)", - background: "var(--menu-1-background)", - "active-background": "var(--menu-1-active-background)", + subtext: "hsla(var(--menu-1-subtext))", + background: "hsla(var(--menu-1-background))", + "active-background": "hsla(var(--menu-1-active-background))", }, 2: { - subtext: "var(--menu-2-subtext)", - background: "var(--menu-2-background)", - "active-background": "var(--menu-2-active-background)", + subtext: "hsla(var(--menu-2-subtext))", + background: "hsla(var(--menu-2-background))", + "active-background": "hsla(var(--menu-2-active-background))", }, 3: { - subtext: "var(--menu-3-subtext)", - background: "var(--menu-3-background)", - "active-background": "var(--menu-3-active-background)", + subtext: "hsla(var(--menu-3-subtext))", + background: "hsla(var(--menu-3-background))", + "active-background": "hsla(var(--menu-3-active-background))", }, 4: { - subtext: "var(--menu-4-subtext)", - background: "var(--menu-4-background)", - "active-background": "var(--menu-4-active-background)", + subtext: "hsla(var(--menu-4-subtext))", + background: "hsla(var(--menu-4-background))", + "active-background": "hsla(var(--menu-4-active-background))", }, }, },