Merge pull request #11666 from TylerAPfledderer/fix/hero-text-bg-flash

fix(HubHero): create semantic token for content background color

Author: corwintines

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

@@ -92,6 +92,10 @@ const semanticTokens = {
       _dark: "whiteAlpha.400",
     },
     switchBackground: { _light: "gray.300", _dark: "whiteAlpha.400" },
+    hubHeroContentBg: {
+      _light: "rgba(255, 255, 255, 0.80)",
+      _dark: "rgba(34, 34, 34, 0.80)",
+    },
   },
   gradients: {
     bgMainGradient: {

src/components/Hero/HubHero/index.tsx

@@ -1,12 +1,5 @@
 import * as React from "react"
-import {
-  Box,
-  Heading,
-  HStack,
-  Stack,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Box, Heading, HStack, Stack, Text } from "@chakra-ui/react"
 import GatsbyImage from "../../GatsbyImage"
 import { CallToAction } from "../CallToAction"
 import { CommonHeroProps } from "../utils"
@@ -22,11 +15,6 @@ const HubHero = (props: HubHeroProps) => {
     )
   }
 
-  const largeContentBg = useColorModeValue(
-    "rgba(255, 255, 255, 0.80)",
-    "rgba(34, 34, 34, 0.80)"
-  )
-
   return (
     <Box position="relative">
       <GatsbyImage
@@ -47,7 +35,7 @@ const HubHero = (props: HubHeroProps) => {
         p={{ base: "4", lg: "8" }}
         textAlign={{ base: "center", xl: "start" }}
         borderRadius={{ xl: "base" }}
-        bg={{ xl: largeContentBg }}
+        bg={{ xl: "hubHeroContentBg" }}
         position={{ xl: "absolute" }}
         insetStart={{ xl: "8" }}
         maxW={{ xl: "sm" }}