Merge branch 'dev' into refactor/md-components-to-shadcn

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,40 +1,26 @@
-import React from "react"
-import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
+import { cn } from "@/lib/utils/cn"
 
-import { lightTheme as oldTheme } from "../../theme"
-
-export type BannerNotificationProps = FlexProps & {
+export type BannerNotificationProps = React.HTMLAttributes<HTMLDivElement> & {
   shouldShow?: boolean
 }
 
 const BannerNotification = ({
   children,
-  shouldShow = false,
+  shouldShow,
+  className,
   ...props
 }: BannerNotificationProps) => {
-  const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
+  if (!shouldShow) return <></>
   return (
-    <>
-      {shouldShow && (
-        <Center
-          as="aside"
-          maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
-          w="100%"
-          py="4"
-          px="8"
-          bg="primary.base"
-          color="background.base"
-          sx={{
-            a: {
-              color: "background.base",
-            },
-          }}
-          {...props}
-        >
-          {children}
-        </Center>
+    <aside
+      className={cn(
+        "flex items-center justify-center gap-2 bg-primary-action px-8 py-4 text-white [&_a]:text-white [&_a]:hover:text-white/80",
+        className
       )}
-    </>
+      {...props}
+    >
+      {children}
+    </aside>
   )
 }