deprecate: recently added linear gradient tokens

Author: wackerow

src/styles/global.css

@@ -54,12 +54,6 @@
       0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05);
     --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
-    --primary-highlight-gradient: linear-gradient(
-      180deg,
-      rgba(167, 121, 226, 0.05) 0%,
-      rgba(167, 121, 226, 0) 100%
-    );
-
     --gradient-banner: radial-gradient(
       155% 100% at 50% 0%,
       rgba(201, 179, 245, 0.16) 0%,
@@ -220,7 +214,7 @@
   }
 
   .swiper-pagination {
-    @apply relative mt-8 mx-auto flex h-[26px] max-w-48 items-center justify-center rounded-full bg-background-highlight;
+    @apply relative mx-auto mt-8 flex h-[26px] max-w-48 items-center justify-center rounded-full bg-background-highlight;
   }
 
   .swiper-pagination .swiper-pagination-bullet {

src/styles/semantic-tokens.css

@@ -28,31 +28,11 @@
     --accent-b-hover: var(--pink-500);
     --accent-c-hover: var(--teal-600);
 
-    /* Gradients */
-    --gradient-primary-angle: 90deg;
-    --gradient-primary-opacity-from: 0.1;
-    --gradient-primary-opacity-to: 0.05;
-    --gradient-primary: linear-gradient(
-      var(--gradient-primary-angle),
-      hsla(var(--purple-500), var(--gradient-primary-opacity-from)) 19.09%,
-      hsla(var(--purple-500), var(--gradient-primary-opacity-to)) 40.63%
-    );
-    --gradient-accent-a: linear-gradient(
-      var(--gradient-primary-angle),
-      hsla(var(--blue-500), var(--gradient-primary-opacity-from)) 19.09%,
-      hsla(var(--blue-500), var(--gradient-primary-opacity-to)) 40.63%
-    );
-    --gradient-accent-b: linear-gradient(
-      var(--gradient-primary-angle),
-      hsla(var(--pink-500), var(--gradient-primary-opacity-from)) 19.09%,
-      hsla(var(--pink-500), var(--gradient-primary-opacity-to)) 40.63%
-    );
-    --gradient-accent-c: linear-gradient(
-      var(--gradient-primary-angle),
-      hsla(var(--teal-500), var(--gradient-primary-opacity-from)) 19.09%,
-      hsla(var(--teal-500), var(--gradient-primary-opacity-to)) 40.63%
-    );
-
+    /**
+    /* Gradients (radial, conic)
+    /* For linear-gradient, Tailwind classes preferred
+    /* https://tailwindcss.com/docs/background-image#linear-gradients
+    */
     --radial-a-opacity-1: 0.08;
     --radial-a-opacity-2: 0.24;
     --radial-a: radial-gradient(
@@ -121,9 +101,6 @@
     --accent-c-hover: var(--teal-300);
 
     /* Gradients (dark mode adjustments) */
-    --gradient-primary-angle: 180deg;
-    --gradient-primary-opacity-to: 0.2;
-
     --radial-a-opacity-1: 0.16;
     --radial-a-opacity-2: 0.48;
 

tailwind.config.ts

@@ -177,12 +177,7 @@ const config = {
       },
       backgroundImage: {
         "gradient-main": "var(--gradient-main)",
-        "primary-highlight-gradient": "var(--primary-highlight-gradient)",
         "gradient-banner": "var(--gradient-banner)",
-        "gradient-primary": "var(--gradient-primary)",
-        "gradient-accent-a": "var(--gradient-accent-a)",
-        "gradient-accent-b": "var(--gradient-accent-b)",
-        "gradient-accent-c": "var(--gradient-accent-c)",
         "main-gradient": "var(--gradient-main)", // TODO: Duplicate; remove one
         "feedback-gradient": "var(--feedback-gradient)",
         "banner-grid-gradient": "var(--banner-grid-gradient)",