Merge pull request #15524 from ethereum/tracks-gradients

refactor: use tailwind native bg gradient classes

Author: corwintines

app/[locale]/roadmap/tracks/_components/tracks.tsx

@@ -101,61 +101,61 @@ const RoadmapTracksPage = () => {
   const popoverConfig = {
     endGoal: {
       border: "border-primary",
-      background: "bg-primary-high-contrast-linear-gradient",
+      background: "bg-gradient-to-b from-primary-high-contrast/10",
       pillStyles: "bg-primary text-body-inverse",
       pillText: "END GOAL",
     },
     featureResearch: {
       border: "border-border",
-      background: "bg-background-medium-linear-gradient",
+      background: "bg-gradient-to-b from-background-medium/10",
       pillStyles: "bg-background-medium",
       pillText: "RESEARCH",
     },
     featureScheduled: {
       border: "border-warning",
-      background: "bg-warning-linear-gradient",
+      background: "bg-gradient-to-b from-warning/10",
       pillStyles: "bg-warning",
       pillText: "SCHEDULED",
     },
     featureShipped: {
       border: "border-success",
-      background: "bg-success-linear-gradient",
+      background: "bg-gradient-to-b from-success/10",
       pillStyles: "bg-success",
       pillText: "SHIPPED",
     },
     rollupStage: {
       border: "border-primary-high-contrast",
-      background: "bg-primary-high-contrast-linear-gradient",
+      background: "bg-gradient-to-b from-primary-high-contrast/10",
       pillStyles: "bg-primary-high-contrast text-body-inverse",
       pillText: "STAGE",
     },
     taskIdea: {
       border: "border-background-highlight",
-      background: "bg-background-high-linear-gradient",
+      background: "bg-gradient-to-b from-background-high/10",
       pillStyles: "bg-background-high",
       pillText: "IDEA",
     },
     taskResearch: {
       border: "border-border",
-      background: "bg-background-medium-linear-gradient",
+      background: "bg-gradient-to-b from-medium/10",
       pillStyles: "bg-background-medium",
       pillText: "RESEARCH",
     },
     taskScheduled: {
       border: "border-warning",
-      background: "bg-warning-linear-gradient",
+      background: "bg-gradient-to-b from-warning/10",
       pillStyles: "bg-warning",
       pillText: "SCHEDULED",
     },
     taskShipped: {
       border: "border-success",
-      background: "bg-success-linear-gradient",
+      background: "bg-gradient-to-b from-success/10",
       pillStyles: "bg-success",
       pillText: "SHIPPED",
     },
     track: {
       border: "border-primary",
-      background: "bg-primary-high-contrast-linear-gradient",
+      background: "bg-gradient-to-b from-primary-high-contrast/10",
       pillStyles: "bg-primary-high-contrast text-body-inverse",
       pillText: "TRACK",
     },

src/styles/semantic-tokens.css

@@ -89,12 +89,6 @@
     --card-gradient-secondary: linear-gradient(95deg, rgba(211, 145, 242, 0.12) 0%, rgba(159, 43, 212, 0.12) 102.78%);
     --card-gradient-secondary-hover: linear-gradient(95deg, rgba(211, 145, 242, 0.2) 0%, rgba(159, 43, 212, 0.2) 102.78%);
 
-    --success-linear-gradient: linear-gradient(to bottom, hsla(var(--green-600), 0.10), hsla(var(--white), 1));
-    --warning-linear-gradient: linear-gradient(to bottom, hsla(var(--yellow-300), 0.10), hsla(var(--white), 1));
-    --background-medium-linear-gradient: linear-gradient(to bottom, hsla(var(--background-medium), 0.10), hsla(var(--white), 1));
-    --background-high-linear-gradient: linear-gradient(to bottom, hsla(var(--background-high), 0.10), hsla(var(--white), 1));
-    --primary-high-contrast-linear-gradient: linear-gradient(to bottom, hsla(var(--primary-high-contrast), 0.10), hsla(var(--white), 1));
-
     /* Shadows */
     --shadow-color-a: hsla(var(--purple-800), 0.02);
     --shadow-color-b: hsla(var(--red-800), 0.04);
@@ -210,12 +204,6 @@
 
     --roadmap-card-gradient: linear-gradient(123deg, rgba(34, 34, 34, 0.20) 40.53%, rgba(174, 110, 203, 0.13) 104.05%);
 
-    --success-linear-gradient: linear-gradient(to bottom, hsla(var(--green-600), 0.10), hsla(var(--black), 1));
-    --warning-linear-gradient: linear-gradient(to bottom, hsla(var(--yellow-300), 0.10), hsla(var(--black), 1));
-    --background-medium-linear-gradient: linear-gradient(to bottom, hsla(var(--background-medium), 0.10), hsla(var(--black), 1));
-    --background-high-linear-gradient: linear-gradient(to bottom, hsla(var(--background-high), 0.10), hsla(var(--black), 1));
-    --primary-high-contrast-linear-gradient: linear-gradient(to bottom, hsla(var(--primary-high-contrast), 0.10), hsla(var(--black), 1));
-
     /* Shadows (dark mode adjustments) */
     --shadow-color: hsla(var(--white), 0.04);
     --shadow-svg-button-link-1: -2px 2px 12px 1px var(--shadow-color);

tailwind.config.ts

@@ -234,14 +234,6 @@ const config = {
         "card-gradient": "var(--card-gradient)",
         "card-gradient-secondary": "var(--card-gradient-secondary)",
         "card-gradient-secondary-hover": "var(--card-gradient-secondary-hover)",
-        "success-linear-gradient": "var(--success-linear-gradient)",
-        "warning-linear-gradient": "var(--warning-linear-gradient)",
-        "background-medium-linear-gradient":
-          "var(--background-medium-linear-gradient)",
-        "background-high-linear-gradient":
-          "var(--background-high-linear-gradient)",
-        "primary-high-contrast-linear-gradient":
-          "var(--primary-high-contrast-linear-gradient)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",