Design system: nav bar/button theming

src/components/Nav/Desktop/index.tsx

@@ -5,10 +5,11 @@ 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 { cn } from "@/lib/utils/cn"
+
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
 type DesktopNavMenuProps = {
@@ -20,20 +21,12 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
   const { locale } = useRouter()
   const languagePickerRef = useRef<HTMLButtonElement>(null)
 
-  const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
   const themeIconAriaLabel = useColorModeValue(
+    // TODO: Add i18n support
     "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 (\).
@@ -53,29 +46,34 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
 
   return (
     <HStack hideBelow="md" gap="0">
-      <IconButton
-        icon={ThemeIcon}
-        aria-label={themeIconAriaLabel}
+      <Button
         variant="ghost"
         isSecondary
-        px={{ base: "2", xl: "3" }}
-        sx={{
-          "& > svg": {
-            transition: "transform 0.5s, color 0.2s",
-          },
-        }}
-        _hover={desktopHoverFocusStyles}
-        _focus={desktopHoverFocusStyles}
+        className="group p-2 hover:!text-primary-hover xl:p-3"
         onClick={toggleColorMode}
-      />
+        aria-label={themeIconAriaLabel}
+      >
+        <MdBrightness2
+          className={cn(
+            "dark:hidden",
+            "transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500"
+          )}
+        />
+        <MdWbSunny
+          className={cn(
+            "hidden dark:block",
+            "transform-transform duration-500 group-hover:rotate-12 group-hover:transition-transform group-hover:duration-500"
+          )}
+        />
+      </Button>
 
       {/* Locale-picker menu */}
       <LanguagePicker>
         <Button
           name={DESKTOP_LANGUAGE_BUTTON_NAME}
           ref={languagePickerRef}
           variant="ghost"
-          className="gap-0 px-2 text-body transition-colors duration-200 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover xl:px-3 [&>svg]:transition-transform [&>svg]:duration-500 [&_svg]:hover:rotate-12"
+          className="gap-0 px-2 text-body transition-colors duration-500 active:bg-primary-low-contrast active:text-primary-hover data-[state='open']:bg-primary-low-contrast data-[state='open']:text-primary-hover xl:px-3 [&_svg]:transition-transform [&_svg]:duration-500 [&_svg]:hover:rotate-12"
         >
           <BsTranslate className="me-2 align-middle text-2xl" />
           <span className="hidden lg:inline-block">

src/components/Nav/index.tsx

@@ -8,8 +8,6 @@ import Search from "@/components/Search"
 
 import { isDesktop } from "@/lib/utils/isDesktop"
 
-import { NAV_PY } from "@/lib/constants"
-
 import DesktopNavMenu from "./Desktop"
 import Menu from "./Menu"
 import { useNav } from "./useNav"
@@ -30,17 +28,10 @@ const Nav = () => {
 
   return (
     <Box position="sticky" top={0} zIndex="sticky" width="full">
-      <Flex
+      <nav
+        className="flex h-19 justify-center border-b border-b-disabled bg-background p-4 xl:px-8"
         ref={navWrapperRef}
-        as="nav"
         aria-label={t("nav-primary")}
-        bg="background.base"
-        borderBottom="1px"
-        borderColor="rgba(0, 0, 0, 0.1)"
-        height="4.75rem"
-        justifyContent="center"
-        py={NAV_PY}
-        px={{ base: 4, xl: 8 }}
       >
         <Flex
           alignItems={{ base: "center", md: "normal" }}
@@ -94,7 +85,7 @@ const Nav = () => {
             </Flex>
           </Flex>
         </Flex>
-      </Flex>
+      </nav>
     </Box>
   )
 }

src/components/Search/SearchButton.tsx

@@ -12,7 +12,7 @@ const SearchButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Button
         ref={ref}
         variant="ghost"
-        className="me-3 border border-disabled hover:border-primary-hover"
+        className="group me-3 border border-disabled hover:border-primary-hover"
         {...props}
         asChild
       >

src/components/Search/index.tsx

@@ -59,7 +59,7 @@ const Search = forwardRef<HTMLButtonElement, Props>(
         <div className="block xl:hidden">
           <Button
             ref={mergedButtonRefs}
-            className="px-2 transition-transform duration-200 ease-in-out hover:rotate-6 hover:text-primary"
+            className="px-2 transition-transform duration-200 hover:rotate-12 hover:!text-primary focus:text-primary"
             variant="ghost"
             isSecondary
             onClick={() => {

src/styles/docsearch.css

@@ -7,12 +7,12 @@
 }
 
 .DocSearch-Button-Container svg {
-  @apply size-3.5;
+  @apply size-3.5 group-hover:rotate-12 transition-transform duration-500 group-hover:transition-transform group-hover:duration-500;
 }
 
 .DocSearch-Search-Icon,
 .DocSearch-Button-Placeholder {
-  @apply text-body;
+  @apply text-body group-hover:text-primary-hover;
 }
 
 .DocSearch-Button-Placeholder {