Merge pull request #13828 from ethereum/c1-pricecard

Migrate EthPriceCard, update associate color tokens

Author: pettinarip

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

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>

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 */
   }
 }

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 {

src/styles/global.css

@@ -19,26 +19,6 @@
     /* ! Deprecating primary-dark */
     --primary-dark: var(--blue-700);
 
-    --neutral: var(--white);
-
-    /* Complementary Set */
-    --attention: var(--yellow-500);
-    --attention-light: var(--yellow-200);
-    --attention-outline: var(--attention);
-
-    /* ? 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 */
-    --attention-outline: var(--attention-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);