add missing color token updates

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Tag/utils.ts

@@ -92,7 +92,7 @@ export const STATUS_COLORS = {
         _focusWithin: {
           [$badgeBg.variable]: "colors.primary.hover",
           [$badgeColor.variable]: "colors.background.base",
-          outlineColor: "primary",
+          outlineColor: "primary.base",
         },
         _active: {
           boxShadow: "none",
@@ -112,7 +112,7 @@ export const STATUS_COLORS = {
         _focusWithin: {
           [$badgeBg.variable]: "colors.primary.hover",
           [$badgeColor.variable]: "colors.background.base",
-          outlineColor: "primary",
+          outlineColor: "primary.base",
         },
         _active: {
           boxShadow: "none",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -53,7 +53,7 @@ const semanticTokens = {
       base: { _light: "gray.700", _dark: "gray.100" },
       medium: { _light: "gray.500", _dark: "gray.300" },
       light: { _light: "gray.200", _dark: "gray.600" },
-      // ! Deprecating bodyInverted
+      // ! Deprecating body.inverted
       inverted: { _light: "gray.100", _dark: "gray.700" },
     },
     background: {
@@ -75,7 +75,7 @@ const semanticTokens = {
       base: "red.500",
       light: "red.100",
       outline: { _light: "error.base", _dark: "error.light" },
-      // ! Deprecating errorNeutral
+      // ! Deprecating error.neutral
       neutral: { _light: "red.100", _dark: "red.900" },
     },
     success: {

src/components/EthPriceCard.tsx

@@ -128,7 +128,7 @@ const EthPriceCard: React.FC<IProps> = ({ className, isLeftAlign = false }) => {
           fontSize="2xl"
           lineHeight="140%"
           mr={4}
-          color={isNegativeChange ? "fail300" : "success"}
+          color={isNegativeChange ? "fail300" : "success.base"}
         >
           {change}
         </Box>

src/components/Staking/WithdrawalCredentials.tsx

@@ -80,7 +80,7 @@ const WithdrawalCredentials: FC<IProps> = () => {
     if (hasError)
       return (
         <Flex bg="error.neutral" p={4}>
-          <Text m={0} color="error">
+          <Text m={0} color="error.base">
             <Translation id="comp-withdrawal-credentials-error" />
           </Text>
         </Flex>
@@ -89,7 +89,7 @@ const WithdrawalCredentials: FC<IProps> = () => {
     if (validator.isUpgraded)
       return (
         <Flex bg="success.neutral" p={4}>
-          <Text m={0} color="success">
+          <Text m={0} color="success.base">
             <Text as="span" fontWeight="bold">
               <Translation
                 id="comp-withdrawal-credentials-upgraded-1"
@@ -121,7 +121,7 @@ const WithdrawalCredentials: FC<IProps> = () => {
       )
     return (
       <Flex bg="error.neutral" p={4}>
-        <Text m={0} color="error">
+        <Text m={0} color="error.base">
           <Text as="span" fontWeight="bold">
             {validator.isTestnet ? (
               <Translation id="comp-withdrawal-credentials-not-upgraded-1-testnet" />

src/pages/quizzes.tsx

@@ -121,12 +121,12 @@ const QuizzesHubPage = ({ data }: PageProps<Queries.QuizzesHubPageQuery>) => {
               <Box px={{ base: 8, lg: 0 }}>
                 <Heading
                   fontSize={{ base: "1.75rem", lg: "2rem" }}
-                  color="body"
+                  color="body.base"
                 >
                   <Translation id="basics" />
                 </Heading>
 
-                <Text mb={8} color="body">
+                <Text mb={8} color="body.base">
                   <Translation id="basics-description" />
                 </Text>
 
@@ -140,12 +140,12 @@ const QuizzesHubPage = ({ data }: PageProps<Queries.QuizzesHubPageQuery>) => {
               <Box px={{ base: 8, lg: 0 }} mb={10}>
                 <Heading
                   fontSize={{ base: "1.75rem", lg: "2rem" }}
-                  color="body"
+                  color="body.base"
                 >
                   <Translation id="using-ethereum" />
                 </Heading>
 
-                <Text mb={8} color="body">
+                <Text mb={8} color="body.base">
                   <Translation id="using-ethereum-description" />
                 </Text>
 
@@ -169,13 +169,16 @@ const QuizzesHubPage = ({ data }: PageProps<Queries.QuizzesHubPageQuery>) => {
                   <Text
                     align={{ base: "center", xl: "left" }}
                     fontWeight="bold"
-                    color="body"
+                    color="body.base"
                     mb={-2}
                   >
                     <Translation id="want-more-quizzes" />
                   </Text>
 
-                  <Text align={{ base: "center", xl: "left" }} color="body">
+                  <Text
+                    align={{ base: "center", xl: "left" }}
+                    color="body.base"
+                  >
                     <Translation id="contribute" />
                   </Text>
                 </Stack>