From f12c471b1e69c4fd0b0931c19138b34ef84e0d0c Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 6 Sep 2024 16:02:44 -0700
Subject: [PATCH 01/28] deprecate: inverted token

---
 src/@chakra-ui/semanticTokens.ts          | 2 --
 src/@chakra-ui/stories/Colors.stories.tsx | 2 +-
 tailwind.config.ts                        | 1 +
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/@chakra-ui/semanticTokens.ts b/src/@chakra-ui/semanticTokens.ts
index 7d3a68a0a18..974c08bb1d9 100644
--- a/src/@chakra-ui/semanticTokens.ts
+++ b/src/@chakra-ui/semanticTokens.ts
@@ -55,8 +55,6 @@ const semanticTokens = {
       base: { _light: "gray.800", _dark: "gray.100" },
       medium: { _light: "gray.500", _dark: "gray.400" },
       light: { _light: "gray.200", _dark: "gray.600" },
-      // ! Deprecating body.inverted
-      inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
       base: { _light: "white", _dark: "gray.950" },
diff --git a/src/@chakra-ui/stories/Colors.stories.tsx b/src/@chakra-ui/stories/Colors.stories.tsx
index bfefcbe5ac7..ddaf32ef76d 100644
--- a/src/@chakra-ui/stories/Colors.stories.tsx
+++ b/src/@chakra-ui/stories/Colors.stories.tsx
@@ -113,7 +113,7 @@ export const SemanticScheme: StoryObj = {
     ] as const
     const deprecatedTokens: Record<(typeof tokenNames)[number], string[]> = {
       primary: ["light", "dark", "pressed"],
-      body: ["inverted"],
+      body: [],
       background: [],
       disabled: [],
       success: ["neutral", "outline"],
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9e0bb7b8948..8c7873bf93e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -145,6 +145,7 @@ const config = {
           DEFAULT: "hsla(var(--body))",
           medium: "hsla(var(--body-medium))",
           light: "hsla(var(--body-light))",
+          inverse: "hsla(var(--body-inverse))",
         },
         background: {
           DEFAULT: "hsla(var(--background))",

From 9313c222a928d3025b46103991f015ebed7c2b28 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 6 Sep 2024 16:13:44 -0700
Subject: [PATCH 02/28] theme: update gray palette with lum margin

each lum percentage correlates to a small range of hex codes that  all round to the lum value in Figma, shows range in comments for rough equivalency
---
 src/styles/colors.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/styles/colors.css b/src/styles/colors.css
index 46942217230..2891d05df55 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -4,19 +4,19 @@
 
 @layer base {
   :root {
-    --white: 0, 0%, 100%; /* #ffffff */
-    --gray-50: 0, 0%, 97%; /* #f7f7f7 */
-    --gray-100: 0, 0%, 93%; /* #eeeeee */
-    --gray-150: 0, 0%, 93%; /* #ececec */ /* TODO: Confirm this shade, used in nav menu */
-    --gray-200: 0, 0%, 81%; /*#cecece */
-    --gray-300: 0, 0%, 67%; /* #acacac */
-    --gray-400: 0, 0%, 55%; /* #8C8C8C */
-    --gray-500: 0, 0%, 38%; /* #616161 */
-    --gray-600: 0, 0%, 20%; /* #333333 */
-    --gray-700: 0, 0%, 13%; /* #222222 */
-    --gray-800: 0, 0%, 11%; /* #1b1b1b */
-    --gray-900: 0, 0%, 7%; /* #121212 */
-    --gray-950: 0, 0%, 4%; /* #0a0a0a */
+    --white: 0, 0%, 100%; /* #FFFFFF */
+    --gray-50: 0, 0%, 97%; /* #F7F7F7 +1 */
+    --gray-100: 0, 0%, 93%; /* #EDEDED ±1 */ /* TODO: Confirm */
+    --gray-150: 0, 0%, 87%; /* #DEDEDE ±1 */ /*  TODO: Confirm */
+    --gray-200: 0, 0%, 81%; /* #CECECE +1 */
+    --gray-300: 0, 0%, 67%; /* #ABABAB ±1 */
+    --gray-400: 0, 0%, 55%; /* #8C8C8C ±1 */
+    --gray-500: 0, 0%, 38%; /* #616161 ±1 */
+    --gray-600: 0, 0%, 20%; /* #333333 ±1 */
+    --gray-700: 0, 0%, 13%; /* #222222 -2 */
+    --gray-800: 0, 0%, 11%; /* #1B1B1B +2 */
+    --gray-900: 0, 0%, 7%; /* #121212 ±1 */
+    --gray-950: 0, 0%, 4%; /* #0A0A0A ±1 */
     --black: 0, 0%, 0%; /* #000000 */
 
     --purple-50: 262, 100%, 96%; /* #F3ECFF */
@@ -82,6 +82,5 @@
     --green-900: 140, 37%, 6%; /* #0a160e */
     --yellow-200: 47, 100%, 94%; /* #fff8df */
     --yellow-500: 42, 100%, 37%; /* #bd8400 */
-
   }
 }

From 4f7b6e61b8819416b11712bfbb68c709406aec29 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 6 Sep 2024 16:14:16 -0700
Subject: [PATCH 03/28] fix: contrast with lang picker menu selected bg

---
 src/components/ui/command.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index df1325e4c94..426ce68958b 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -136,7 +136,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-low-contrast aria-selected:text-body data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-body-inverse aria-selected:text-body data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}

From 9255c6313e2fbbfc324e14d7d134b0fa9b31617f Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:20:24 -0700
Subject: [PATCH 04/28] fix: progress bar component and colors for quizzes

---
 src/components/Quiz/QuizzesStats.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Quiz/QuizzesStats.tsx b/src/components/Quiz/QuizzesStats.tsx
index f016a822bad..0b77a3a02c0 100644
--- a/src/components/Quiz/QuizzesStats.tsx
+++ b/src/components/Quiz/QuizzesStats.tsx
@@ -9,7 +9,6 @@ import {
   Highlight,
   HStack,
   ListItem,
-  Progress,
   SimpleGrid,
   Stack,
   Text,
@@ -24,6 +23,7 @@ import { ethereumBasicsQuizzes, usingEthereumQuizzes } from "../../data/quizzes"
 import { Button } from "../Buttons"
 import { TrophyIcon } from "../icons/quiz"
 import Translation from "../Translation"
+import { Progress } from "../ui/progress"
 
 import {
   getFormattedStats,
@@ -131,6 +131,7 @@ const QuizzesStats = ({
 
               <Progress
                 value={(totalCorrectAnswers / totalQuizzesPoints) * 100}
+                className="h-2.5 bg-primary-low-contrast [&>div]:bg-primary"
               />
 
               <Flex columnGap="10" direction={{ base: "column", lg: "row" }}>

From 128a41db5d469b6fa3ab9b94552daafa1227d165 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 15:24:25 -0700
Subject: [PATCH 05/28] chore: update button-hover color to DS

---
 tailwind.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8c7873bf93e..9a1edf1cb1e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -203,7 +203,7 @@ const config = {
           0px -3px 2px 0px rgba(0, 0, 0, 0.14) inset`,
         // TODO: From current theme. Deprecate for 'button-hover'
         primary: "4px 4px 0px 0px hsla(var(--primary))",
-        "button-hover": "4px 4px 0 0 hsla(var(--primary-low-contrast))",
+        "button-hover": "4px 4px 0 0 hsla(var(--orange-900))",
         tooltip: "0 0 16px var(--tooltip-shadow)",
         "svg-button-link": `
           var(--shadow-svg-button-link-1), var(--shadow-svg-button-link-2),

From 038eaad6898a38f2a14ab61e8e54112816877348 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 15:25:26 -0700
Subject: [PATCH 06/28] feat: update all button variants to match DS

---
 src/components/ui/buttons/Button.tsx | 35 +++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index fbf4e1278d8..fc2c91dda55 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -9,20 +9,37 @@ import { scrollIntoView } from "@/lib/utils/scrollIntoView"
 import { BaseLink, type LinkProps } from "../Link"
 
 const buttonVariants = cva(
-  "pointer inline-flex gap-2 items-center justify-center rounded border border-solid border-current text-primary transition focus-visible:outline focus-visible:outline-4 focus-visible:outline-primary-hover focus-visible:-outline-offset-1 disabled:text-disabled disabled:pointer-events-none hover:text-primary-hover [&[data-secondary='true']]:text-body [&>svg]:flex-shrink-0",
+  cn(
+    // Sizing and positioning classes:
+    "inline-flex gap-2 items-center justify-center rounded border border-solid transition [&>svg]:flex-shrink-0",
+    // Base default styling is "outline" pattern, primary color for text, border matches, no bg
+    "text-primary border-current",
+    // Hover: Default hover adds button-hover shadow, text (border) to --primary-hover
+    "hover:!text-primary-hover hover:shadow-button-hover",
+    // Focus: Add 4px outline to all buttons, --primary-hover
+    "focus-visible:outline focus-visible:outline-primary-hover focus-visible:outline-4 focus-visible:-outline-offset-1",
+    // Active: text (border) to --primary-hover instead of primary, hide shadow
+    "active:text-primary-hover active:shadow-none",
+    // Disabled: Pointer events none, text (border) to --disabled
+    "disabled:pointer-events-none disabled:text-disabled",
+    // isSecondary: Switch text (border) to --body instead of --primary
+    "[&[data-secondary='true']]:text-body"
+  ),
   {
     variants: {
       variant: {
-        solid:
-          "text-white bg-primary-action border-transparent disabled:bg-disabled disabled:text-background hover:text-white hover:bg-primary-action-hover hover:shadow-button-hover active:shadow-none",
-        outline: "hover:shadow-button-hover active:shadow-none text-body",
-        "outline-color":
-          "hover:shadow-button-hover active:shadow-none border-primary",
-        ghost: "border-transparent",
-        link: "border-transparent font-bold underline py-0 px-1 active:text-primary",
+        solid: cn(
+          "text-white bg-primary-action !border-transparent",
+          "hover:!text-white hover:bg-primary-action-hover", // Hover
+          "active:bg-primary-action-hover", // Active
+          "disabled:bg-disabled disabled:text-background" // Disabled
+        ),
+        outline: "", // Base styling
+        ghost: "border-transparent hover:shadow-none",
+        link: "border-transparent hover:shadow-none underline py-0 px-1 active:text-primary",
       },
       size: {
-        lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg",
+        lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",
         md: "min-h-10.5 px-4 py-2 [&>svg]:text-2xl",
         sm: "text-xs min-h-[31px] py-1.5 px-2 [&>svg]:text-md",
       },

From 71d7b3cf9a1aea663093abf572b2322860c7bbb2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 15:27:14 -0700
Subject: [PATCH 07/28] fix: button variants to use latest updates

"solid" default variant, "outline" includes color, `isSecondary` removes color from default outline/ghost states
---
 src/components/FeedbackCard.tsx | 12 +++---------
 src/pages/index.tsx             | 10 +++++++++-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/FeedbackCard.tsx b/src/components/FeedbackCard.tsx
index 190325d2fb4..4caf5327c24 100644
--- a/src/components/FeedbackCard.tsx
+++ b/src/components/FeedbackCard.tsx
@@ -75,23 +75,17 @@ const FeedbackCard = ({ prompt, isArticle, ...props }: FeedbackCardProps) => {
         <div className="flex gap-4">
           {!feedbackSubmitted ? (
             <>
-              <Button
-                variant="outline-color"
-                onClick={() => handleSubmit(true)}
-              >
+              <Button variant="outline" onClick={() => handleSubmit(true)}>
                 <FeedbackThumbsUpIcon className="h-6 w-6" />
                 {t("yes")}
               </Button>
-              <Button
-                variant="outline-color"
-                onClick={() => handleSubmit(false)}
-              >
+              <Button variant="outline" onClick={() => handleSubmit(false)}>
                 <FeedbackThumbsUpIcon className="-scale-y-100" />
                 {t("no")}
               </Button>
             </>
           ) : (
-            <Button variant="outline-color" onClick={handleSurveyOpen}>
+            <Button variant="outline" onClick={handleSurveyOpen}>
               {t("feedback-widget-thank-you-cta")}
             </Button>
           )}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a294aac62e2..d98a59dc038 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -327,7 +327,12 @@ const HomePage = ({
                   ))}
                 </div>
                 <div className="flex justify-center py-8 md:justify-start">
-                  <ButtonLink href="/learn/" size="lg" variant="outline">
+                  <ButtonLink
+                    href="/learn/"
+                    size="lg"
+                    variant="outline"
+                    isSecondary
+                  >
                     {t("page-index:page-index-popular-topics-action")}{" "}
                     <ChevronNext />
                   </ButtonLink>
@@ -362,6 +367,7 @@ const HomePage = ({
                 href="/developers/docs/"
                 size="lg"
                 variant="outline"
+                isSecondary
                 className="w-fit"
               >
                 {t("page-index:page-index-builders-action-secondary")}
@@ -437,6 +443,7 @@ const HomePage = ({
                   href="/discord/"
                   size="lg"
                   variant="outline"
+                  isSecondary
                   hideArrow
                 >
                   <FaDiscord />
@@ -445,6 +452,7 @@ const HomePage = ({
                   href={GITHUB_REPO_URL}
                   size="lg"
                   variant="outline"
+                  isSecondary
                   hideArrow
                 >
                   <FaGithub />

From bbcf48c3f2568da8af0eb7e0fab77da0e123de87 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 16:28:54 -0700
Subject: [PATCH 08/28] feat: sync Chakra-UI button variant styles to DS

---
 src/@chakra-ui/components/Button.ts | 52 +++++++++++++++++------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/@chakra-ui/components/Button.ts b/src/@chakra-ui/components/Button.ts
index c0741641a70..eeecbe3153c 100644
--- a/src/@chakra-ui/components/Button.ts
+++ b/src/@chakra-ui/components/Button.ts
@@ -11,27 +11,40 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
 const ICON_SELECTOR = "& svg"
 
 const baseStyle = defineStyle({
+  // Sizing and positioning classes:
   borderRadius: "base",
   border: "1px",
-  color: "primary.base",
   fontWeight: "normal",
   lineHeight: "1.6",
   transitionProperty: "common",
   transitionDuration: "normal",
   whiteSpace: "normal",
   p: "unset",
+  // Base default styling is "outline" pattern, primary color for text, border matches, no bg
+  borderColor: "currentColor",
+  color: "primary.base",
+  // Hover: Default hover adds button-hover shadow, text (border) to --primary-hover
+  _hover: {
+    color: "primary.hover",
+    boxShadow: "buttonHover",
+  },
+  // Focus: Add 4px outline to all buttons, --primary-hover
   _focusVisible: {
     outline: "4px solid",
     outlineColor: "primary.hover",
     outlineOffset: -1,
   },
+  // Active: text (border) to --primary-hover instead of primary, hide shadow
+  _active: {
+    color: "primary.hover",
+    boxShadow: "none",
+  },
+  // Disabled: Pointer events none, text (border) to --disabled
   _disabled: {
     color: "disabled",
     pointerEvents: "none",
   },
-  _hover: {
-    color: "primary.hover",
-  },
+  // isSecondary: Switch text (border) to --body instead of --primary
   "&[data-secondary='true']": {
     color: "body.base",
   },
@@ -41,42 +54,39 @@ const baseStyle = defineStyle({
       textDecoration: "none",
     },
   },
+  [ICON_SELECTOR]: {
+    flexShrink: 0,
+  },
 })
 
 const variantSolid = defineStyle({
   color: "white",
   bg: "primary.action",
-  borderColor: "transparent",
-  _disabled: {
-    bg: "disabled",
-    color: "background.base",
-  },
+  borderColor: "transparent !important",
   _hover: {
-    color: "white",
+    color: "white !important",
     bg: "primary.actionHover",
-    boxShadow: "buttonHover",
   },
   _active: {
-    boxShadow: "none",
-  },
-})
-
-const variantOutline = defineStyle({
-  _hover: {
-    boxShadow: "buttonHover",
+    bg: "primary.actionHover",
   },
-  _active: {
-    boxShadow: "none",
+  _disabled: {
+    bg: "disabled",
+    color: "background.base",
   },
 })
 
+const variantOutline = defineStyle({}) // "outline" is base styling above
+
 const variantGhost = {
   borderColor: "transparent",
+  _hover: { shadow: "none" },
 }
 
 const variantLink = defineStyle({
   borderColor: "transparent",
-  fontWeight: 700,
+  // fontWeight: 700, // TODO: Not in DS; confirm then remove
+  _hover: { shadow: "none" },
   textDecor: "underline",
   py: 0,
   px: 1,

From 02d9a3fc0f640df7454835d89c1f21e3096a467a Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 16:29:22 -0700
Subject: [PATCH 09/28] patch: primary.hover _dark value

---
 src/@chakra-ui/semanticTokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@chakra-ui/semanticTokens.ts b/src/@chakra-ui/semanticTokens.ts
index 974c08bb1d9..0fd3a3f63cd 100644
--- a/src/@chakra-ui/semanticTokens.ts
+++ b/src/@chakra-ui/semanticTokens.ts
@@ -40,7 +40,7 @@ const semanticTokens = {
       base: { _light: "purple.600", _dark: "purple.400" },
       highContrast: { _light: "purple.800", _dark: "purple.200" },
       lowContrast: { _light: "purple.100", _dark: "purple.900" },
-      hover: { _light: "purple.500", _dark: "purple.500" },
+      hover: { _light: "purple.500", _dark: "purple.300" },
       visited: { _light: "purple.700", _dark: "purple.300" },
       action: { _light: "purple.600", _dark: "purple.600" },
       actionHover: { _light: "purple.500", _dark: "purple.500" },

From 5cdb1c06faa01f640eda55abb5ce21164df0686d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:04:23 -0700
Subject: [PATCH 10/28] fix: dark chakra background color

---
 src/@chakra-ui/semanticTokens.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/@chakra-ui/semanticTokens.ts b/src/@chakra-ui/semanticTokens.ts
index 0fd3a3f63cd..b1d447bd07b 100644
--- a/src/@chakra-ui/semanticTokens.ts
+++ b/src/@chakra-ui/semanticTokens.ts
@@ -57,7 +57,7 @@ const semanticTokens = {
       light: { _light: "gray.200", _dark: "gray.600" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.950" },
+      base: { _light: "white", _dark: "black" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },

From 46cc6fb2861b62f4534c9a8209a478d72dcc21b1 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:06:02 -0700
Subject: [PATCH 11/28] feat: migrate nav element, add border-b

---
 src/components/Nav/index.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
index da8f00c4202..10c79de2de8 100644
--- a/src/components/Nav/index.tsx
+++ b/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>
   )
 }

From 0e92088b0c8b7383075e7f2c91646b036f98a584 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:35:28 -0700
Subject: [PATCH 12/28] fix: rm focus styling

consistent with other nav items
---
 src/components/Nav/Desktop/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 92214ca540c..7f02b966e41 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/src/components/Nav/Desktop/index.tsx
@@ -22,6 +22,7 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
 
   const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
   const themeIconAriaLabel = useColorModeValue(
+    // TODO: add i18n support
     "Switch to Dark Theme",
     "Switch to Light Theme"
   )
@@ -65,7 +66,6 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
           },
         }}
         _hover={desktopHoverFocusStyles}
-        _focus={desktopHoverFocusStyles}
         onClick={toggleColorMode}
       />
 

From 5d551cb856dbe8cb1e4065adbd465af17cd5754c Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 7 Sep 2024 18:49:55 -0700
Subject: [PATCH 13/28] fix: nav button styling consistency

---
 src/components/Nav/Desktop/index.tsx   | 44 ++++++++++++--------------
 src/components/Search/SearchButton.tsx |  2 +-
 src/components/Search/index.tsx        |  2 +-
 src/styles/docsearch.css               |  4 +--
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
index 7f02b966e41..a16e131116b 100644
--- a/src/components/Nav/Desktop/index.tsx
+++ b/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,21 +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
+    // 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 (\).
@@ -54,20 +46,26 @@ 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}
+        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>
@@ -75,7 +73,7 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
           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">
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx
index 19ae404f87c..a475d2111de 100644
--- a/src/components/Search/SearchButton.tsx
+++ b/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
       >
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 1ff7b8e88b3..8e8f74b7e74 100644
--- a/src/components/Search/index.tsx
+++ b/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={() => {
diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
index 91f6906a80d..8fda310acde 100644
--- a/src/styles/docsearch.css
+++ b/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 {

From 1da596b1ad361eaac1c5aa8ef7b987b19fb1d644 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:03:37 -0700
Subject: [PATCH 14/28] chore: use "warning" naming per design system

---
 src/components/ui/alert.tsx | 2 +-
 src/styles/global.css       | 8 ++++----
 tailwind.config.ts          | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 98bf3af0e4b..1089cf47068 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -17,7 +17,7 @@ const alertVariants = cva(
         success:
           "border-success bg-success-light [&_h6]:text-success [&_svg]:text-success text-gray-800",
         warning:
-          "border-attention-outline bg-attention-light [&_h6]:text-attention [&_svg]:text-attention text-gray-800",
+          "border-warning-outline bg-warning-light [&_h6]:text-warning [&_svg]:text-warning text-gray-800",
         update:
           "bg-primary-low-contrast border-primary-high-contrast [&_h6]:text-primary-high-contrast [&_svg]:text-primary-high-contrast",
       },
diff --git a/src/styles/global.css b/src/styles/global.css
index 2a7cc970e30..5d0654231c4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -22,9 +22,9 @@
     --neutral: var(--white);
 
     /* Complementary Set */
-    --attention: var(--yellow-500);
-    --attention-light: var(--yellow-200);
-    --attention-outline: var(--attention);
+    --warning: var(--yellow-500);
+    --warning-light: var(--yellow-200);
+    --warning-outline: var(--warning);
 
     /* ? Keep "error" or rename to "fail" ? */
     --error: var(--red-500);
@@ -82,7 +82,7 @@
     --neutral: var(--gray-900);
 
     /* Complementary Set */
-    --attention-outline: var(--attention-light);
+    --warning-outline: var(--warning-light);
 
     --error: var(--red-500);
     --error-light: var(--red-100);
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8c7873bf93e..07ff923aa93 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -159,10 +159,10 @@ const config = {
         "tooltip-shadow": "var(--tooltip-shadow)",
         "hub-hero-content-bg": "var(--hub-hero-content-bg)",
         "search-background": "var(--search-background)",
-        attention: {
-          DEFAULT: "hsla(var(--attention))",
-          light: "hsla(var(--attention-light))",
-          outline: "hsla(var(--attention-outline))",
+        warning: {
+          DEFAULT: "hsla(var(--warning))",
+          light: "hsla(var(--warning-light))",
+          outline: "hsla(var(--warning-outline))",
         },
         error: {
           DEFAULT: "hsla(var(--error))",

From 93a2e4e12f86bf59fc0a026e41b8c55724790ffa Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:50:40 -0700
Subject: [PATCH 15/28] theme: update color palettes to new theming

preserve/sync order shown in Figma. Orange palette no longer needed, but three shades still being used
---
 src/styles/colors.css | 74 +++++++++++++++++++++++++++----------------
 1 file changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/styles/colors.css b/src/styles/colors.css
index 2891d05df55..757da8e11d2 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -5,6 +5,8 @@
 @layer base {
   :root {
     --white: 0, 0%, 100%; /* #FFFFFF */
+    --black: 0, 0%, 0%; /* #000000 */
+
     --gray-50: 0, 0%, 97%; /* #F7F7F7 +1 */
     --gray-100: 0, 0%, 93%; /* #EDEDED ±1 */ /* TODO: Confirm */
     --gray-150: 0, 0%, 87%; /* #DEDEDE ±1 */ /*  TODO: Confirm */
@@ -17,7 +19,6 @@
     --gray-800: 0, 0%, 11%; /* #1B1B1B +2 */
     --gray-900: 0, 0%, 7%; /* #121212 ±1 */
     --gray-950: 0, 0%, 4%; /* #0A0A0A ±1 */
-    --black: 0, 0%, 0%; /* #000000 */
 
     --purple-50: 262, 100%, 96%; /* #F3ECFF */
     --purple-100: 263, 100%, 94%; /* #EDE2FF */
@@ -30,17 +31,6 @@
     --purple-800: 263, 77%, 31%; /* #41128B */
     --purple-900: 263, 86%, 15%; /* #1E0546 */
 
-    --pink-50: 325, 63%, 93%; /* #F8E0EE */
-    --pink-100: 322, 78%, 87%; /* #F8C5E5 */
-    --pink-200: 323, 100%, 85%; /* #FFB2E2 */
-    --pink-300: 323, 100%, 83%; /* #FFA6DD */
-    --pink-400: 323, 91%, 75%; /* #F986CD */
-    --pink-500: 323, 100%, 66%; /* #FF51BC */
-    --pink-600: 323, 93%, 51%; /* #F6109E */
-    --pink-700: 323, 99%, 39%; /* #C7017B */
-    --pink-800: 323, 87%, 29%; /* #8C0A5A */
-    --pink-900: 323, 82%, 18%; /* #530836 */
-
     --blue-50: 214, 100%, 99%; /* #F8FBFF */
     --blue-100: 217, 100%, 95%; /* #E8F1FF */
     --blue-200: 214, 86%, 89%; /* #CADFFB */
@@ -52,6 +42,17 @@
     --blue-800: 231, 53%, 29%; /* #232F71 */
     --blue-900: 217, 36%, 17%; /* #1B273A */
 
+    --pink-50: 325, 63%, 93%; /* #F8E0EE */
+    --pink-100: 322, 78%, 87%; /* #F8C5E5 */
+    --pink-200: 323, 100%, 85%; /* #FFB2E2 */
+    --pink-300: 323, 100%, 83%; /* #FFA6DD */
+    --pink-400: 323, 91%, 75%; /* #F986CD */
+    --pink-500: 323, 100%, 66%; /* #FF51BC */
+    --pink-600: 323, 93%, 51%; /* #F6109E */
+    --pink-700: 323, 99%, 39%; /* #C7017B */
+    --pink-800: 323, 87%, 29%; /* #8C0A5A */
+    --pink-900: 323, 82%, 18%; /* #530836 */
+
     --teal-50: 164, 100%, 98%; /* #F4FFFC */
     --teal-100: 164, 79%, 95%; /* #E6FCF6 */
     --teal-200: 163, 81%, 85%; /* #BBF8E7 */
@@ -63,24 +64,41 @@
     --teal-800: 163, 93%, 21%; /* #04674B */
     --teal-900: 162, 97%, 13%; /* #01422F */
 
+    --yellow-50: 48, 100%, 96%; /* #FFFBEB */
+    --yellow-100: 48, 96%, 89%; /* #FEF3C7 */
+    --yellow-200: 48, 97%, 77%; /* #FDE68A */
+    --yellow-300: 46, 97%, 65%; /* #FCD34D */
+    --yellow-400: 43, 96%, 56%; /* #FBBF24 */
+    --yellow-500: 38, 92%, 50%; /* #F59E0B */
+    --yellow-600: 32, 95%, 44%; /* #D97706 */
+    --yellow-700: 26, 90%, 37%; /* #B45309 */
+    --yellow-800: 23, 83%, 31%; /* #92400E */
+    --yellow-900: 22, 78%, 26%; /* #78350F */
+
+    --red-50: 0, 86%, 97%; /* #fef2f2 */
+    --red-100: 0, 93%, 94%; /* #fee2e2 */
+    --red-200: 0, 96%, 89%; /* #fecaca */
+    --red-300: 0, 94%, 82%; /* #fca5a5 */
+    --red-400: 0, 91%, 71%; /* #f87171 */
+    --red-500: 0, 84%, 60%; /* #ef4444 */
+    --red-600: 0, 72%, 51%; /* #dc2626 */
+    --red-700: 0, 74%, 42%; /* #b91c1c */
+    --red-800: 0, 70%, 35%; /* #991b1b */
+    --red-900: 0, 63%, 31%; /* #7f1d1d */
+
+    --green-50: 138, 76%, 97%; /* #F0FDF4 */
+    --green-100: 141, 84%, 93%; /* #DCFCE7 */
+    --green-200: 141, 79%, 85%; /* #BBF7D0 */
+    --green-300: 142, 77%, 73%; /* #86EFAC */
+    --green-400: 142, 69%, 58%; /* #4ADE80 */
+    --green-500: 142, 71%, 45%; /* #22C55E */
+    --green-600: 142, 76%, 36%; /* #16A34A */
+    --green-700: 142, 72%, 29%; /* #15803D */
+    --green-800: 143, 64%, 24%; /* #166534 */
+    --green-900: 144, 61%, 20%; /* #14532D */
+
     --orange-100: 30, 100%, 94%; /* #FFF0DB */
-    --orange-200: 30, 100%, 82%; /* #FFD7A7 */
-    --orange-300: 30, 98%, 70%; /* #FEB077 */
-    --orange-400: 30, 97%, 58%; /* #FD8640 */
-    --orange-500: 30, 95%, 51%; /* #FB610E */
-    --orange-600: 20, 95%, 47%; /* #EC4A0A */
-    --orange-700: 15, 90%, 39%; /* #C4350A */
     --orange-800: 10, 76%, 28%; /* #7D2711 */
     --orange-900: 20, 33%, 15%; /* #3A291D */
-
-    /* TODO: Update to new color theming */
-    --red-100: 0, 75%, 88%; /* #f7c8c8 */
-    --red-500: 0, 100%, 36%; /* #b80000 */
-    --red-800: 0, 33%, 7%; /* #180c0c */
-    --green-100: 138, 51%, 91%; /* #ddf4e4 */
-    --green-500: 155, 84%, 24%; /* #0a7146 */
-    --green-900: 140, 37%, 6%; /* #0a160e */
-    --yellow-200: 47, 100%, 94%; /* #fff8df */
-    --yellow-500: 42, 100%, 37%; /* #bd8400 */
   }
 }

From 4e757d9854fef4225a54ddd3bb5baf3426c40741 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:51:32 -0700
Subject: [PATCH 16/28] theme: update semantic tokens

complementaries; preserve/sync order from Figma
---
 src/styles/semantic-tokens.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/styles/semantic-tokens.css b/src/styles/semantic-tokens.css
index e8400ac7236..e3a25f6e175 100644
--- a/src/styles/semantic-tokens.css
+++ b/src/styles/semantic-tokens.css
@@ -9,10 +9,14 @@
     --body-medium: var(--gray-500);
     --body-light: var(--gray-200);
     --body-inverse: var(--white);
+
     --disabled: var(--gray-400);
+
     --background: var(--white);
     --background-highlight: var(--gray-50);
 
+    /* TODO: Add border color tokens to match DS */
+
     --primary: var(--purple-600);
     --primary-high-contrast: var(--purple-800);
     --primary-low-contrast: var(--purple-100);
@@ -30,6 +34,15 @@
     --accent-c: var(--teal-700);
     --accent-c-hover: var(--teal-600);
 
+    --success: var(--green-600);
+    --success-light: var(--green-100);
+
+    --error: var(--red-700);
+    --error-light: var(--red-100);
+
+    --warning: var(--yellow-400);
+    --warning-light: var(--yellow-100);
+
     /**
     /* Gradients (radial, conic)
     /* For linear-gradient, Tailwind classes preferred
@@ -84,11 +97,14 @@
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);
     --body-inverse: var(--black);
+
     --disabled: var(--gray-500);
 
     --background: var(--black);
     --background-highlight: var(--gray-900);
 
+    /* TODO: Add border color tokens to match DS */
+
     --primary: var(--purple-400);
     --primary-high-contrast: var(--purple-200);
     --primary-low-contrast: var(--purple-900);
@@ -105,6 +121,8 @@
     --accent-c: var(--teal-400);
     --accent-c-hover: var(--teal-300);
 
+    --warning: var(--yellow-300);
+
     /* Gradients (dark mode adjustments) */
     --radial-a-opacity-1: 0.16;
     --radial-a-opacity-2: 0.48;

From 0aa9f793758745663267fd445f341ba27b4d1aef Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:52:27 -0700
Subject: [PATCH 17/28] theme: update tailwind config with latest tokens

---
 tailwind.config.ts | 100 ++++++++++++++++++++++++++++-----------------
 1 file changed, 62 insertions(+), 38 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 07ff923aa93..f1d6efa6c29 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -103,19 +103,54 @@ const config = {
           900: "hsla(var(--blue-900))",
         },
 
+        pink: {
+          50: "hsla(var(--pink-50))",
+          100: "hsla(var(--pink-100))",
+          200: "hsla(var(--pink-200))",
+          300: "hsla(var(--pink-300))",
+          400: "hsla(var(--pink-400))",
+          500: "hsla(var(--pink-500))",
+          600: "hsla(var(--pink-600))",
+          700: "hsla(var(--pink-700))",
+          800: "hsla(var(--pink-800))",
+          900: "hsla(var(--pink-900))",
+        },
+
+        teal: {
+          50: "hsla(var(--teal-50))",
+          100: "hsla(var(--teal-100))",
+          200: "hsla(var(--teal-200))",
+          300: "hsla(var(--teal-300))",
+          400: "hsla(var(--teal-400))",
+          500: "hsla(var(--teal-500))",
+          600: "hsla(var(--teal-600))",
+          700: "hsla(var(--teal-700))",
+          800: "hsla(var(--teal-800))",
+          900: "hsla(var(--teal-900))",
+        },
+
         orange: {
-          50: "hsla(var(--orange-50))",
           100: "hsla(var(--orange-100))",
-          200: "hsla(var(--orange-200))",
-          300: "hsla(var(--orange-300))",
-          400: "hsla(var(--orange-400))",
-          500: "hsla(var(--orange-500))",
-          550: "hsla(var(--orange-550))",
-          600: "hsla(var(--orange-600))",
-          700: "hsla(var(--orange-700))",
           800: "hsla(var(--orange-800))",
           900: "hsla(var(--orange-900))",
         },
+
+        body: {
+          DEFAULT: "hsla(var(--body))",
+          medium: "hsla(var(--body-medium))",
+          light: "hsla(var(--body-light))",
+          inverse: "hsla(var(--body-inverse))",
+        },
+
+        disabled: "hsla(var(--disabled))",
+
+        background: {
+          DEFAULT: "hsla(var(--background))",
+          highlight: "hsla(var(--background-highlight))",
+        },
+
+        // TODO: Add border color tokens to match DS
+
         primary: {
           DEFAULT: "hsla(var(--primary))",
           "high-contrast": "hsla(var(--primary-high-contrast))",
@@ -124,9 +159,12 @@ const config = {
           visited: "hsla(var(--primary-visited))",
           action: "hsla(var(--primary-action))",
           "action-hover": "hsla(var(--primary-action-hover))",
-          light: "hsla(var(--primary-light))" /* TODO: Migrate/deprecate */,
-          dark: "hsla(var(--primary-dark))" /* TODO: Migrate/deprecate */,
+          /** @deprecated */
+          light: "hsla(var(--primary-light))",
+          /** @deprecated */
+          dark: "hsla(var(--primary-dark))",
         },
+
         accent: {
           a: {
             DEFAULT: "hsla(var(--accent-a))",
@@ -141,41 +179,27 @@ const config = {
             hover: "hsla(var(--accent-c-hover))",
           },
         },
-        body: {
-          DEFAULT: "hsla(var(--body))",
-          medium: "hsla(var(--body-medium))",
-          light: "hsla(var(--body-light))",
-          inverse: "hsla(var(--body-inverse))",
+
+        success: {
+          DEFAULT: "hsla(var(--success))",
+          light: "hsla(var(--success-light))",
         },
-        background: {
-          DEFAULT: "hsla(var(--background))",
-          highlight: "hsla(var(--background-highlight))",
+
+        error: {
+          DEFAULT: "hsla(var(--error))",
+          light: "hsla(var(--error-light))",
         },
-        /** @deprecated */
-        neutral: "hsla(var(--neutral))", // TODO: Migrate
+
+        warning: {
+          DEFAULT: "hsla(var(--warning))",
+          light: "hsla(var(--warning-light))",
+        },
+
         /** @deprecated */
         "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
-        disabled: "hsla(var(--disabled))",
         "tooltip-shadow": "var(--tooltip-shadow)",
         "hub-hero-content-bg": "var(--hub-hero-content-bg)",
         "search-background": "var(--search-background)",
-        warning: {
-          DEFAULT: "hsla(var(--warning))",
-          light: "hsla(var(--warning-light))",
-          outline: "hsla(var(--warning-outline))",
-        },
-        error: {
-          DEFAULT: "hsla(var(--error))",
-          light: "hsla(var(--error-light))",
-          outline: "hsla(var(--error-outline))",
-          neutral: "hsla(var(--error-neutral))",
-        },
-        success: {
-          DEFAULT: "hsla(var(--success))",
-          light: "hsla(var(--success-light))",
-          outline: "hsla(var(--success-outline))",
-          neutral: "hsla(var(--success-neutral))",
-        },
       },
       backgroundImage: {
         "gradient-main": "var(--gradient-main)",

From dea38fc542c761ed0fa6c454c374900d6a21dfca Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:53:08 -0700
Subject: [PATCH 18/28] refactor: update use of deprecated tokens

---
 src/components/ui/alert.tsx | 2 +-
 src/styles/docsearch.css    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 1089cf47068..f1a5dc3c1b7 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -17,7 +17,7 @@ const alertVariants = cva(
         success:
           "border-success bg-success-light [&_h6]:text-success [&_svg]:text-success text-gray-800",
         warning:
-          "border-warning-outline bg-warning-light [&_h6]:text-warning [&_svg]:text-warning text-gray-800",
+          "border-warning bg-warning-light [&_h6]:text-warning [&_svg]:text-warning text-gray-800",
         update:
           "bg-primary-low-contrast border-primary-high-contrast [&_h6]:text-primary-high-contrast [&_svg]:text-primary-high-contrast",
       },
diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
index 91f6906a80d..613114c6861 100644
--- a/src/styles/docsearch.css
+++ b/src/styles/docsearch.css
@@ -58,7 +58,7 @@
 .DocSearch-SearchBar form {
   --docsearch-searchbox-shadow: inset 0 0 0 1px
     theme(colors.primary.high-contrast);
-  @apply bg-neutral py-3;
+  @apply bg-body-inverse py-3;
 }
 .DocSearch-SearchBar label,
 .DocSearch-SearchBar input {

From c9e1ca6a697952a96396c3d08ea34ec5889a0d3d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:53:32 -0700
Subject: [PATCH 19/28] chore: remove deprecated css variables from global

required tokens have been migrated. deprecates remaining -neutral variables
---
 src/styles/global.css | 36 ------------------------------------
 1 file changed, 36 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 5d0654231c4..31fb8690d8b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,26 +19,6 @@
     /* ! Deprecating primary-dark */
     --primary-dark: var(--blue-700);
 
-    --neutral: var(--white);
-
-    /* Complementary Set */
-    --warning: var(--yellow-500);
-    --warning-light: var(--yellow-200);
-    --warning-outline: var(--warning);
-
-    /* ? Keep "error" or rename to "fail" ? */
-    --error: var(--red-500);
-    --error-light: var(--red-100);
-    --error-outline: var(--error);
-    /* ! Deprecating error-neutral */
-    --error-neutral: var(--red-100);
-
-    --success: var(--green-500);
-    --success-light: var(--green-100);
-    --success-outline: var(--success);
-    /* ! Deprecating success-neutral */
-    --success-neutral: var(--green-100);
-
     /* Misc sematics: light mode */
     --tooltip-shadow: rgba(0, 0, 0, 0.24);
     --switch-background: var(--gray-300);
@@ -78,22 +58,6 @@
     /* ! Deprecating primary-dark */
     --primary-dark: hsla(var(--orange-800));
 
-    /* ! Deprecating neutral */
-    --neutral: var(--gray-900);
-
-    /* Complementary Set */
-    --warning-outline: var(--warning-light);
-
-    --error: var(--red-500);
-    --error-light: var(--red-100);
-    --error-outline: var(--error);
-    /* ! Deprecating error-neutral */
-    --error-netural: var(--red-900);
-
-    --success-outline: var(--success-light);
-    /* ! Deprecating success-neutral */
-    --success-neutral: var(--green-900);
-
     /* Misc sematics: dark mode */
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);

From 0a32fb6244e6ee4b70ae2ec5d4794223445ab4b2 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 16:29:35 -0700
Subject: [PATCH 20/28] refactor: EthPriceCard to tailwind

---
 src/components/EthPriceCard.tsx | 130 ++++++++++++--------------------
 src/pages/eth.tsx               |   2 +-
 2 files changed, 50 insertions(+), 82 deletions(-)

diff --git a/src/components/EthPriceCard.tsx b/src/components/EthPriceCard.tsx
index f2cc64cfde7..1071f6f2dbd 100644
--- a/src/components/EthPriceCard.tsx
+++ b/src/components/EthPriceCard.tsx
@@ -2,19 +2,15 @@ import { useEffect, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { MdInfoOutline } from "react-icons/md"
-import {
-  Box,
-  Flex,
-  type FlexProps,
-  Heading,
-  Icon,
-  Text,
-} from "@chakra-ui/react"
 
 import type { LoadingState } from "@/lib/types"
 
-import InlineLink from "@/components/Link"
 import Tooltip from "@/components/Tooltip"
+import InlineLink from "@/components/ui/Link"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "./ui/flex"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
@@ -30,17 +26,16 @@ type EthPriceState = {
   percentChangeUSD: number
 }
 
-export type EthPriceCardProps = FlexProps & {
-  isLeftAlign?: boolean
-}
-
-const EthPriceCard = ({ isLeftAlign = false, ...props }: EthPriceCardProps) => {
+const EthPriceCard = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
   const { locale } = useRouter()
   const { t } = useTranslation()
   const [state, setState] = useState<LoadingState<EthPriceState>>({
     loading: true,
   })
-  const { flipForRtl } = useRtlFlip()
+  const { isRtl } = useRtlFlip()
 
   useEffect(() => {
     const fetchData = async () => {
@@ -100,93 +95,66 @@ const EthPriceCard = ({ isLeftAlign = false, ...props }: EthPriceCardProps) => {
   const change = hasData ? formatPercentage(state.data.percentChangeUSD) : ""
 
   const tooltipContent = (
-    <Box>
+    <div>
       {t("data-provided-by")}{" "}
       <InlineLink href="https://www.coingecko.com/en/coins/ethereum">
         coingecko.com
       </InlineLink>
-    </Box>
+    </div>
   )
 
   return (
     <Flex
-      direction="column"
-      align={isLeftAlign ? "flex-start" : "center"}
-      justify="space-between"
-      background={
+      className={cn(
+        "max-h-48 w-full max-w-[420px] flex-col items-center justify-between rounded border p-6",
         isNegativeChange
-          ? "priceCardBackgroundNegative"
-          : "priceCardBackgroundPositive"
-      }
-      border="1px solid"
-      borderColor={
-        isNegativeChange ? "priceCardBorderNegative" : "priceCardBorder"
-      }
-      p={6}
-      w="full"
-      maxW="420px"
-      maxH="192px"
-      borderRadius="base"
+          ? "bg-gradient-to-b from-error/10 dark:border-error/50"
+          : "bg-gradient-to-t from-success/20 dark:border-success/50",
+        "dark:from-transparent",
+        className
+      )}
       {...props}
     >
-      <Heading
-        as="h4"
-        color="text200"
-        m={0}
-        fontSize="sm"
-        fontWeight="medium"
-        lineHeight="140%"
-        letterSpacing="0.04em"
-        textTransform="uppercase"
-      >
+      <h4 className="m-0 flex items-center text-sm font-medium uppercase leading-xs tracking-wider">
         {t("eth-current-price")}
         <Tooltip content={tooltipContent}>
-          <Box as="span" ms={2}>
-            <Icon as={MdInfoOutline} boxSize="14px" />
-          </Box>
+          <MdInfoOutline className="ms-2 size-[14px]" />
         </Tooltip>
-      </Heading>
+      </h4>
 
-      <Box
-        m={hasError ? "1rem 0" : 0}
-        lineHeight="1.4"
-        fontSize={hasError ? "md" : "5xl"}
-        color={hasError ? "fail" : "text"}
+      <div
+        className={cn(
+          "text-5xl leading-xs",
+          hasError && "my-4 text-md text-error"
+        )}
       >
         {price}
-      </Box>
-      <Flex
-        w="full"
-        align="center"
-        justify={isLeftAlign ? "flex-start" : "center"}
-        minH="33px" /* prevents jump when price loads*/
-      >
-        <Box
-          fontSize="2xl"
-          lineHeight="140%"
-          me={4}
-          color={isNegativeChange ? "fail300" : "success.base"}
+      </div>
+
+      {/* min-h-[33px] prevents jump when price loads */}
+      <Flex className="min-h-[33px] w-full items-center justify-center">
+        <div
+          className={cn(
+            "me-4 text-2xl leading-xs",
+            isNegativeChange ? "text-error" : "text-success"
+          )}
         >
-          <Text
-            as="span"
-            _after={{
-              content: isNegativeChange ? '"↘"' : '"↗"',
-              transform: flipForRtl,
-              display: "inline-block",
-            }}
+          <span
+            className={cn(
+              isNegativeChange
+                ? "after:content-['↘']"
+                : "after:content-['↗']",
+              "after:inline-block",
+              /* Cannot string-interpolate 'after:', using isRtl instead */
+              isRtl ? "after:-scale-x-100" : ""
+            )}
           >
             {change}
-          </Text>
-        </Box>
-        <Box
-          fontSize="sm"
-          lineHeight="140%"
-          letterSpacing="0.04em"
-          textTransform="uppercase"
-          color="text300"
-        >
+          </span>
+        </div>
+        <div className="text-sm uppercase leading-xs tracking-wider text-body-medium">
           ({t("last-24-hrs")})
-        </Box>
+        </div>
       </Flex>
     </Flex>
   )
diff --git a/src/pages/eth.tsx b/src/pages/eth.tsx
index 7f062c0899c..3bd2d7de6ab 100644
--- a/src/pages/eth.tsx
+++ b/src/pages/eth.tsx
@@ -393,7 +393,7 @@ const EthPage = () => {
             <Slogan>{t("page-eth-currency-for-future")}</Slogan>
             <Subtitle>{t("page-eth-is-money")}</Subtitle>
             <SubtitleTwo>{t("page-eth-currency-for-apps")}</SubtitleTwo>
-            <EthPriceCard isLeftAlign={false} mb={8} />
+            <EthPriceCard className="mb-8" />
             <ButtonLink href="/get-eth/">
               {t("page-eth-button-buy-eth")}
             </ButtonLink>

From 069f28c36c1ac173ede261011948c10bfeb9be21 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 16:30:22 -0700
Subject: [PATCH 21/28] theme: deprecate priceCard tokens from src/theme

---
 src/theme.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/theme.ts b/src/theme.ts
index 0848488ba33..1ac0870d544 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -170,12 +170,6 @@ const lightColors = {
   primaryHover: "rgba(28, 28, 225, 0.8)",
   primaryActive: primaryLight600,
   lightBorder: "#ececec",
-  priceCardBackgroundPositive:
-    "linear-gradient( 0, rgba(207, 236, 224, 0.6) 0%, rgba(207, 236, 224, 0) 100%)",
-  priceCardBackgroundNegative:
-    "linear-gradient(180deg, rgba(241, 204, 204, 0.4) 0%, rgba(241, 204, 204, 0) 100%)",
-  priceCardBorder: "#ececec",
-  priceCardBorderNegative: "#ececec",
   searchBorder: "#7f7f7f",
   searchBackground: white,
   searchBackgroundEmpty: "#f2f2f2",
@@ -289,11 +283,6 @@ const darkColors = {
   primary200: primaryDark200,
   primary100: primaryDark100,
   lightBorder: "#404040",
-  priceCardBackgroundPositive: "transparent",
-  priceCardBackgroundNegative: "transparent",
-  priceCardBackground: "transparent",
-  priceCardBorder: success700,
-  priceCardBorderNegative: fail300,
   searchBorder: "#b2b2b2",
   searchBackground: "#4c4c4c",
   searchBackgroundEmpty: "#333333",

From 840856170d5e013778b09c69aef9820279f2fb3d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sun, 8 Sep 2024 22:29:11 -0700
Subject: [PATCH 22/28] fix: apply isSecondary to BentoCard button

---
 src/components/Homepage/BentoCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Homepage/BentoCard.tsx b/src/components/Homepage/BentoCard.tsx
index 1ff68bb53cb..969c797e415 100644
--- a/src/components/Homepage/BentoCard.tsx
+++ b/src/components/Homepage/BentoCard.tsx
@@ -43,7 +43,7 @@ const BentoCard = ({
         {title}
       </CardTitle>
       <p className="mb-8 text-md">{children}</p>
-      <ButtonLink href={href} variant="outline">
+      <ButtonLink href={href} variant="outline" isSecondary>
         {action} <ChevronNext />
       </ButtonLink>
     </div>

From cf3814158da52882659375021a527555e120e3cd Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:54:42 -0700
Subject: [PATCH 23/28] fix: button-hover shadow color

deprecate single-use `button-hover` tailwind token; applied directly at ui/button component level
---
 src/@chakra-ui/components/Button.ts  | 2 +-
 src/components/ui/buttons/Button.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/@chakra-ui/components/Button.ts b/src/@chakra-ui/components/Button.ts
index eeecbe3153c..5d46960d242 100644
--- a/src/@chakra-ui/components/Button.ts
+++ b/src/@chakra-ui/components/Button.ts
@@ -23,7 +23,7 @@ const baseStyle = defineStyle({
   // Base default styling is "outline" pattern, primary color for text, border matches, no bg
   borderColor: "currentColor",
   color: "primary.base",
-  // Hover: Default hover adds button-hover shadow, text (border) to --primary-hover
+  // Hover: Default hover adds box-shadow, text (border) to --primary-hover
   _hover: {
     color: "primary.hover",
     boxShadow: "buttonHover",
diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index fc2c91dda55..9d089a1698d 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -14,8 +14,8 @@ const buttonVariants = cva(
     "inline-flex gap-2 items-center justify-center rounded border border-solid transition [&>svg]:flex-shrink-0",
     // Base default styling is "outline" pattern, primary color for text, border matches, no bg
     "text-primary border-current",
-    // Hover: Default hover adds button-hover shadow, text (border) to --primary-hover
-    "hover:!text-primary-hover hover:shadow-button-hover",
+    // Hover: Default hover adds box-shadow, text (border) to --primary-hover
+    "hover:!text-primary-hover hover:shadow-[4px_4px_theme('colors.primary.low-contrast')]",
     // Focus: Add 4px outline to all buttons, --primary-hover
     "focus-visible:outline focus-visible:outline-primary-hover focus-visible:outline-4 focus-visible:-outline-offset-1",
     // Active: text (border) to --primary-hover instead of primary, hide shadow

From 488f32eb8ca14bd490934c62f3e06e92861e2782 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 9 Sep 2024 10:56:00 -0700
Subject: [PATCH 24/28] deprecate: unused shadow tokens

tw `primary`, `button-hover` shadow tokens; chakra `primary` shadow token
---
 src/@chakra-ui/foundations/shadows.ts | 3 +--
 tailwind.config.ts                    | 3 ---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/@chakra-ui/foundations/shadows.ts b/src/@chakra-ui/foundations/shadows.ts
index ee4ff14e936..15190c39b41 100644
--- a/src/@chakra-ui/foundations/shadows.ts
+++ b/src/@chakra-ui/foundations/shadows.ts
@@ -20,8 +20,7 @@ const shadows = {
   gridBlueBowShadow: "8px 8px 0px 0px var(--eth-colors-gridBlue)",
 
   // * Part of new DS
-  // TODO: From current theme. Deprecate for 'buttonHover'
-  primary: "4px 4px 0px 0px var(--eth-colors-primary-light)",
+  // TODO: Deprecate buttonHover when all buttons migrated to tailwind
   buttonHover: "4px 4px 0 0 var(--eth-colors-primary-lowContrast)",
   tooltip: "0 0 16px var(--eth-colors-tooltipShadow)",
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9a1edf1cb1e..109602192f2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -201,9 +201,6 @@ const config = {
         "menu-accordion": `
           0px 2px 2px 0px rgba(0, 0, 0, 0.12) inset,
           0px -3px 2px 0px rgba(0, 0, 0, 0.14) inset`,
-        // TODO: From current theme. Deprecate for 'button-hover'
-        primary: "4px 4px 0px 0px hsla(var(--primary))",
-        "button-hover": "4px 4px 0 0 hsla(var(--orange-900))",
         tooltip: "0 0 16px var(--tooltip-shadow)",
         "svg-button-link": `
           var(--shadow-svg-button-link-1), var(--shadow-svg-button-link-2),

From 6f724bd50e8a09e7b03f3997b16c8c8995c1788f Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:43:38 -0700
Subject: [PATCH 25/28] chore: persist gradient for bg in dark mode

---
 src/components/EthPriceCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EthPriceCard.tsx b/src/components/EthPriceCard.tsx
index 1071f6f2dbd..3b3ab3670f5 100644
--- a/src/components/EthPriceCard.tsx
+++ b/src/components/EthPriceCard.tsx
@@ -110,7 +110,6 @@ const EthPriceCard = ({
         isNegativeChange
           ? "bg-gradient-to-b from-error/10 dark:border-error/50"
           : "bg-gradient-to-t from-success/20 dark:border-success/50",
-        "dark:from-transparent",
         className
       )}
       {...props}

From 9fe7aaa2fa7b6260ba90210ea54440953467f5d8 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:41:51 -0700
Subject: [PATCH 26/28] fix: close button styling on DismissableBanner

---
 src/components/Banners/DismissableBanner/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Banners/DismissableBanner/index.tsx b/src/components/Banners/DismissableBanner/index.tsx
index 47acac35b38..1384c497572 100644
--- a/src/components/Banners/DismissableBanner/index.tsx
+++ b/src/components/Banners/DismissableBanner/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react"
+import { useTranslation } from "next-i18next"
 import { MdClose } from "react-icons/md"
 
 import { Button } from "@/components/ui/buttons/Button"
@@ -17,6 +18,7 @@ const DismissableBanner = ({
   storageKey,
   className,
 }: DismissableBannerProps) => {
+  const { t } = useTranslation("common")
   const [show, setShow] = useState<boolean>(false)
 
   useEffect(() => {
@@ -33,10 +35,10 @@ const DismissableBanner = ({
     <BannerNotification shouldShow={show} className={cn("gap-8", className)}>
       <Center className="ms-auto">{children}</Center>
       <Button
-        className="ms-auto"
+        className="ms-auto hover:shadow-none"
         onClick={onClose}
-        aria-label="Close Banner"
-        variant="ghost"
+        aria-label={t("close")}
+        size="sm"
       >
         <MdClose />
       </Button>

From 08b816b8a5cd5c67a5bdeb2360aa7753b55ded39 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:19:19 -0700
Subject: [PATCH 27/28] rm: unused and unavaiable styling

---
 src/styles/docsearch.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/styles/docsearch.css b/src/styles/docsearch.css
index a5ccb736cce..791511b60c8 100644
--- a/src/styles/docsearch.css
+++ b/src/styles/docsearch.css
@@ -112,11 +112,6 @@
   @apply text-body;
 }
 
-.DocSearch-Hit-Select-Icon:focus,
-.DocSearch-Hit-Select-Icon:hover {
-  @apply text-switch-background;
-}
-
 .DocSearch-Footer {
   --docsearch-footer-height: theme(spacing.10);
   --docsearch-logo-color: theme(textColor.body.light);

From 594cddc380d0fc2360009f44b2b9cb42e9107890 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 10 Sep 2024 19:47:54 -0700
Subject: [PATCH 28/28] fix: declare group; align component name

---
 src/components/Search/SearchInputButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/SearchInputButton.tsx b/src/components/Search/SearchInputButton.tsx
index 8959f776510..fc278e2ad09 100644
--- a/src/components/Search/SearchInputButton.tsx
+++ b/src/components/Search/SearchInputButton.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils/cn"
 
 import { Button, type ButtonProps } from "../ui/buttons/Button"
 
-const SearchButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const SearchInputButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, ...props }, ref) => {
     const { t } = useTranslation("common")
 
@@ -16,7 +16,7 @@ const SearchButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
         aria-label={t("aria-toggle-search-button")}
         variant="ghost"
         className={cn(
-          "me-3 border border-disabled hover:border-primary-hover",
+          "group me-3 border border-disabled hover:border-primary-hover",
           className
         )}
         {...props}
@@ -33,6 +33,6 @@ const SearchButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 )
 
-SearchButton.displayName = "SearchButton"
+SearchInputButton.displayName = "SearchButton"
 
-export default SearchButton
+export default SearchInputButton