theme: deprecate runNodeGradient

leave TODO for runNodeGradient2 with replacement tw gradient classes; marked as deprecated

Author: wackerow

src/pages/run-a-node.tsx

@@ -87,10 +87,6 @@ const GappedContent = (props: ChildOnlyProp) => (
   />
 )
 
-const HeroContainer = (props: ChildOnlyProp) => (
-  <Box w="full" bg="runNodeGradient" {...props} />
-)
-
 const Content = (props: BoxProps) => <Box w="full" py="4" px="8" {...props} />
 
 const TwoColumnContent = (props: ChildOnlyProp) => (
@@ -443,11 +439,11 @@ const RunANodePage = () => {
         description={t("page-run-a-node-meta-description")}
         image="/images/run-a-node/ethereum-inside.png"
       />
-      <HeroContainer>
-        <Box pb="8">
+      <div className="w-full bg-gradient-to-br from-accent-b/5 via-primary/10 to-accent-b/15 dark:from-accent-b/20 dark:via-primary/15 dark:to-accent-a/20">
+        <div className="pb-8">
           <PageHero content={heroContent} isReverse />
-        </Box>
-      </HeroContainer>
+        </div>
+      </div>
 
       <Content id="what-is-a-node">
         <TwoColumnContent>
@@ -483,6 +479,7 @@ const RunANodePage = () => {
           contentPreview={
             <Translation id="page-run-a-node:page-run-a-node-who-preview" />
           }
+          // TODO: Replace "runNodeGradient2" with classes "bg-gradient-to-br from-blue-500/20 from-10% to-pink-600/20 to-90%" once component supports, and then remove token from src/theme.ts
           background="runNodeGradient2"
           forceOpen
         >

src/theme.ts

@@ -147,8 +147,7 @@ const baseColors = {
 // TODO replace random variables w/ baseColor variables
 const lightColors = {
   buttonColor: white,
-  runNodeGradient:
-    "linear-gradient(0deg, rgba(153, 157, 244, 0.1) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(270.72deg, #FDF0FF 0.62%, rgba(236, 195, 195, 0.557292) 32.61%, rgba(207, 189, 230, 0.296875) 49.67%, rgba(196, 196, 196, 0) 72.88%);",
+  /** @deprecated */
   runNodeGradient2:
     "linear-gradient(135deg, rgba(79, 113, 235, 0.2) 9.8%, rgba(232, 79, 235, 0.2) 92.84%);",
   ghostCardBackground: white,
@@ -262,8 +261,7 @@ const lightColors = {
 // TODO replace random variables w/ baseColor variables
 const darkColors = {
   buttonColor: black300,
-  runNodeGradient:
-    "linear-gradient(0deg, rgba(153, 157, 244, 0.35) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(89.24deg, rgba(253, 240, 255, 0.7) -64.3%, rgba(212, 119, 119, 0.390104) -7.43%, rgba(188, 163, 220, 0.207813) 46.66%, rgba(196, 196, 196, 0) 99.16%);",
+  /** @deprecated */
   runNodeGradient2:
     "linear-gradient(135deg, rgba(79, 113, 235, 0.2) 9.8%, rgba(232, 79, 235, 0.2) 92.84%);",
   primaryHover: primaryDark400,