Merge pull request #13821 from ethereum/colors-1

Design system color theming updates

Author: pettinarip

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/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)",
 }

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

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>

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,65 @@ 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",
+        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>
   )

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>
           )}

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>