Merge branch 'dev' into gradients

Author: pettinarip

package.json

@@ -84,6 +84,7 @@
     "remark-gfm": "^3.0.1",
     "swiper": "^11.1.10",
     "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"

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 box-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,

src/@chakra-ui/components/ReactSelect.ts

@@ -22,7 +22,6 @@ import { Modal } from "./Modal"
 import { Popover } from "./Popover"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
-import { ReactSelect } from "./ReactSelect"
 import { Switch } from "./Switch"
 import { Table } from "./Table"
 import { Tabs } from "./Tabs"
@@ -52,7 +51,6 @@ export default {
   Popover,
   Progress,
   Radio,
-  ReactSelect,
   Spinner: spinnerDefaultTheme,
   Switch,
   Table,

src/@chakra-ui/components/index.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)",
 }

src/@chakra-ui/foundations/shadows.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" },
@@ -55,11 +55,9 @@ 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" },
+      base: { _light: "white", _dark: "black" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },

src/@chakra-ui/semanticTokens.ts

@@ -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"],

src/@chakra-ui/stories/Colors.stories.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>

src/components/Banners/DismissableBanner/index.tsx

@@ -9,7 +9,7 @@ import Emoji from "@/components/Emoji"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
-import Select from "@/components/Select"
+import Select from "@/components/ui/Select"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"