add staking colors to tw theme

Author: pettinarip

src/components/Staking/StakingComparison.tsx

@@ -40,8 +40,10 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked solo staking",
     },
-    colorClassName: "text-[#be8d10]",
-    glyph: <StakingGlyphCPUIcon className="h-[50px] w-[50px] text-[#be8d10]" />,
+    colorClassName: "text-staking-gold",
+    glyph: (
+      <StakingGlyphCPUIcon className="h-[50px] w-[50px] text-staking-gold" />
+    ),
   }
   const saas: DataType = {
     title: "page-staking-saas-with-abbrev",
@@ -52,9 +54,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked staking as a service",
     },
-    colorClassName: "text-[#129e5b]",
+    colorClassName: "text-staking-green",
     glyph: (
-      <StakingGlyphCloudIcon className="h-[28px] w-[50px] text-[#129e5b]" />
+      <StakingGlyphCloudIcon className="h-[28px] w-[50px] text-staking-green" />
     ),
   }
   const pools: DataType = {
@@ -66,9 +68,9 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
       eventAction: `Clicked`,
       eventName: "clicked pooled staking",
     },
-    colorClassName: "text-[#0b83dc]",
+    colorClassName: "text-staking-blue",
     glyph: (
-      <StakingGlyphTokenWalletIcon className="h-[39px] w-[50px] text-[#0b83dc]" />
+      <StakingGlyphTokenWalletIcon className="h-[39px] w-[50px] text-staking-blue" />
     ),
   }
   const data: {

src/components/Staking/StakingHierarchy.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { useTranslation } from "next-i18next"
+import { IconBase } from "react-icons"
 import {
   Box,
   calc,
@@ -117,19 +118,13 @@ const SectionGrid = ({ number, children }: SectionGridProps) => {
   )
 }
 
-const StyledEtherSvg = ({ size }: { size: string }) => (
-  <Center gridArea="ether" zIndex={2} maxW={20} width="full" mx="auto">
-    <StakingGlyphEtherCircleIcon
-      boxSize={size}
-      color={$colorVar.reference}
-      sx={{
-        "#transparentBackground": {
-          fill: $fillColorVar.reference,
-        },
-      }}
-    />
-  </Center>
-)
+const StyledEtherSvg = ({ className = "size-full" }: { className: string }) => {
+  return (
+    <Center gridArea="ether" zIndex={2} maxW={20} width="full" mx="auto">
+      <StakingGlyphEtherCircleIcon className={className} />
+    </Center>
+  )
+}
 
 const Line = () => {
   // TODO: Remove after completion of the Chakra migration
@@ -211,7 +206,7 @@ const Pills = ({ children }: ChildOnlyProp) => (
   </Flex>
 )
 
-type GlyphProps = { glyphIcon: typeof Icon }
+type GlyphProps = { glyphIcon: typeof IconBase }
 const Glyph = ({ glyphIcon }: GlyphProps) => (
   <Center gridArea={{ base: "content", md: "glyph" }}>
     <Icon
@@ -262,7 +257,7 @@ const StakingHierarchy = () => {
       }}
     >
       <SectionGrid number={1}>
-        <StyledEtherSvg size="100%" />
+        <StyledEtherSvg className="size-[100%] text-staking-gold" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-hierarchy-solo-h2")}</HeadingEl>
@@ -300,7 +295,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={2}>
-        <StyledEtherSvg size="90%" />
+        <StyledEtherSvg className="size-[90%] text-staking-green" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-dropdown-saas")}</HeadingEl>
@@ -333,7 +328,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={3}>
-        <StyledEtherSvg size="80%" />
+        <StyledEtherSvg className="size-[80%] text-staking-blue" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-dropdown-pools")}</HeadingEl>
@@ -378,7 +373,7 @@ const StakingHierarchy = () => {
         </Content>
       </SectionGrid>
       <SectionGrid number={4}>
-        <StyledEtherSvg size="70%" />
+        <StyledEtherSvg className="size-[70%] text-staking-red" />
         <Line />
         <Header>
           <HeadingEl>{t("page-staking-hierarchy-cex-h2")}</HeadingEl>

src/components/icons/staking/StakingGlyphEtherCircleIcon.tsx

@@ -10,6 +10,7 @@ export const StakingGlyphEtherCircleIcon = createIconBase({
       <path
         id="transparentBackground"
         fillRule="nonzero"
+        fill="transparent"
         d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM16.1395 4.17392L8.90476 16.4383L16.1395 20.6261L23.3743 16.4383L16.1395 4.17392ZM8.90476"
       />
       <path

src/styles/semantic-tokens.css

@@ -116,6 +116,16 @@
     --shadow-window-box-3: 0px 32px 24px -6px hsla(var(--purple-800), var(--shadow-window-box-3-opacity));
     --shadow-window-box-4: 0px 40px 40px -12px hsla(var(--purple-700), var(--shadow-window-box-4-opacity));
     --shadow-window-box-5: 0px -64px 120px 80px hsla(var(--purple-100), var(--shadow-window-box-5-opacity));
+
+    /* Staking */
+    --staking-gold: #be8d10;
+    --staking-gold-fill: #fef9ef;
+    --staking-green: #129e5b;
+    --staking-green-fill: #f7faf1;
+    --staking-blue: #0b83dc;
+    --staking-blue-fill: #f1fcf5;
+    --staking-red: #a0524c;
+    --staking-red-fill: #f8fbf9;
   }
 
   /* Dark mode token declarations */
@@ -204,5 +214,15 @@
     --shadow-window-box-3-opacity: 0.16;
     --shadow-window-box-4-opacity: 0.06;
     --shadow-window-box-5-opacity: 0.06;
+
+    /* Staking */
+    --staking-gold: #f2bb2f;
+    --staking-gold-fill: #373228;
+    --staking-green: #49de96;
+    --staking-green-fill: #30342b;
+    --staking-blue: #a9d3f2;
+    --staking-blue-fill: #2b352f;
+    --staking-red: #d6bbb9;
+    --staking-red-fill: #313432;
   }
 }

tailwind.config.ts

@@ -207,6 +207,17 @@ const config = {
           border: "hsla(var(--warning-border))",
         },
 
+        staking: {
+          gold: "var(--staking-gold)",
+          "gold-fill": "var(--staking-gold-fill)",
+          green: "var(--staking-green)",
+          "green-fill": "var(--staking-green-fill)",
+          blue: "var(--staking-blue)",
+          "blue-fill": "var(--staking-blue-fill)",
+          red: "var(--staking-red)",
+          "red-fill": "var(--staking-red-fill)",
+        },
+
         /** @deprecated */
         "switch-background": "hsla(var(--switch-background))", // TODO: Migrate
         "tooltip-shadow": "var(--tooltip-shadow)",