fix: tab gradient color

pixel-point · Jan 21, 2025 · 336ecff · 336ecff
1 parent 21c2e36
commit 336ecff
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 29 deletions.
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
@@ -4,7 +4,6 @@ import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { cn } from '@utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
-// TODO: text sizes should be passed as separate fontSize prop
 const tabsListVariants = cva('inline-flex items-center text-foreground-4', {
   variants: {
     variant: {

diff --git a/packages/ui/src/shared-style-variables.css b/packages/ui/src/shared-style-variables.css
@@ -263,6 +263,13 @@
     --canary-box-shadow-1: var(--canary-harness-grey-400) / 0.1;
     --canary-box-shadow-2: var(--canary-harness-grey-400) / 0.1;
     --canary-box-shadow-pagination: var(--canary-harness-grey-400) / 0.1;
+
+    /* Gradient colors */
+    --canary-tab-background-gradient: radial-gradient(
+      50% 50% at 50% 50%,
+      hsl(240deg 6% 20%/40%),
+      hsl(240deg 6% 20%/0%)
+    );
   }
 
   /* Need .light and .dark classes for MFE */
@@ -496,6 +503,9 @@
     --canary-tab-item-gradient-to: var(--canary-harness-grey-400) / 0%;
     --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
       hsla(var(--canary-tab-item-gradient-to));
+
+    /* Gradient colors */
+    --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
   }
   .dark,
   .dark-std-std {
@@ -696,5 +706,12 @@
     --canary-tab-item-gradient-to: var(--canary-grey-20) / 0;
     --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
       hsla(var(--canary-tab-item-gradient-to));
+
+    /* Gradient colors */
+    --canary-tab-background-gradient: radial-gradient(
+      50% 50% at 50% 50%,
+      hsl(240deg 6% 20%/40%),
+      hsl(240deg 6% 20%/0%)
+    );
   }
 }
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
@@ -205,13 +205,6 @@
     --canary-code-background-06: var(--canary-harness-yellow-800) / 0.1;
     --canary-code-background-07: var(--canary-harness-yellow-800) / 0.25;
     --canary-code-background-08: var(--canary-blue) / 0.1;
-
-    /* Gradient colors */
-    --canary-tab-background-gradient: radial-gradient(
-      50% 50% at 50% 50%,
-      hsl(240deg 6% 20%/40%),
-      hsl(240deg 6% 20%/0%)
-    );
   }
   .dark-tri-std {
     --canary-background: var(--canary-grey-6);
@@ -373,13 +366,6 @@
     --canary-code-background-06: var(--canary-harness-yellow-800) / 0.1;
     --canary-code-background-07: var(--canary-harness-yellow-800) / 0.25;
     --canary-code-background-08: var(--canary-blue) / 0.1;
-
-    /* Gradient colors */
-    --canary-tab-background-gradient: radial-gradient(
-      50% 50% at 50% 50%,
-      hsl(240deg 6% 20%/40%),
-      hsl(240deg 6% 20%/0%)
-    );
   }
   .light-pnd-std {
     --canary-background: 0 0% 100%;
@@ -560,13 +546,6 @@
     --canary-code-background-06: var(--canary-harness-yellow-800) / 0.1;
     --canary-code-background-07: var(--canary-harness-yellow-800) / 0.25;
     --canary-code-background-08: var(--canary-blue) / 0.1;
-
-    /* Gradient colors */
-    --canary-tab-background-gradient: radial-gradient(
-      50% 50% at 50% 50%,
-      hsl(240deg 6% 20%/40%),
-      hsl(240deg 6% 20%/0%)
-    );
   }
   .dark-pnd-std {
     --canary-background: var(--canary-grey-6);
@@ -728,13 +707,6 @@
     --canary-code-background-06: var(--canary-harness-yellow-800) / 0.1;
     --canary-code-background-07: var(--canary-harness-yellow-800) / 0.25;
     --canary-code-background-08: var(--canary-blue) / 0.1;
-
-    /* Gradient colors */
-    --canary-tab-background-gradient: radial-gradient(
-      50% 50% at 50% 50%,
-      hsl(240deg 6% 20%/40%),
-      hsl(240deg 6% 20%/0%)
-    );
   }
 }