Add green-blue-purple gradient color variant to Label component

.changeset/short-shoes-train.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Added new `green-blue-purple` `color` option to `Label` component

packages/design-tokens/src/tokens/functional/components/label/colors.json

@@ -37,6 +37,20 @@
           "dark": "var(--base-color-scale-blue-2)"
         }
       },
+      "green-blue-purple": {
+        "1": {
+          "value": "#000AFF"
+        },
+        "2": {
+          "value": "#096BDE"
+        },
+        "3": {
+          "value": "#00FF46"
+        },
+        "4": {
+          "value": "#8250DF"
+        }
+      },
       "gray": {
         "value": "var(--base-color-scale-gray-5)",
         "dark": "var(--base-color-scale-gray-2)"

packages/react/src/EyebrowBanner/EyebrowBanner.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import {Icon as IconProps} from '@primer/octicons-react'
 
 import {Text} from '../Text'
-import {Colors, Gradients} from '../constants'
+import {Colors, BiColorGradients} from '../constants'
 
 import type {BaseProps} from '../component-helpers'
 import {ExpandableArrow} from '../ExpandableArrow'
@@ -197,7 +197,7 @@ const EyebrowBannerVisual = forwardRef<HTMLSpanElement, EyebrowBannerVisual>(
   },
 )
 
-export const EyebrowBannerLabelColors = [...Gradients, ...Colors] as const
+export const EyebrowBannerLabelColors = [...BiColorGradients, ...Colors] as const
 
 type EyebrowBannerLabel = BaseProps<HTMLSpanElement> & {
   /**

packages/react/src/Label/Label.features.stories.tsx

@@ -19,6 +19,7 @@ export const Color = () => (
     <Label color="coral">Coral</Label>
     <Label color="green">Green</Label>
     <Label color="green-blue">Green blue</Label>
+    <Label color="green-blue-purple">Green blue purple</Label>
     <Label color="gray">Gray</Label>
     <Label color="indigo">Indigo</Label>
     <Label color="lemon">Lemon</Label>

packages/react/src/Label/Label.module.css

@@ -1,10 +1,24 @@
 .Label {
-  --brand-Label-gradient: radial-gradient(
+  --brand-Label-gradient-radial: radial-gradient(
     circle at top left,
     var(--brand-Label-color-start),
     var(--brand-Label-color-end)
   );
-  --brand-Label-background: var(--brand-Label-gradient, var(--brand-Label-color, currentColor));
+
+  --brand-Label-gradient-conical: conic-gradient(
+    from 90deg at center,
+    var(--brand-Label-color-stop-1) 0deg,
+    var(--brand-Label-color-stop-2) 160deg,
+    var(--brand-Label-color-stop-3) 175deg,
+    var(--brand-Label-color-stop-4) 200deg,
+    var(--brand-Label-color-stop-4) 350deg,
+    var(--brand-Label-color-stop-1) 360deg
+  );
+
+  --brand-Label-background: var(
+    --brand-Label-gradient-conical,
+    var(--brand-Label-gradient-radial, var(--brand-Label-color, currentColor))
+  );
 
   vertical-align: middle;
   align-items: center;
@@ -98,6 +112,13 @@
   --brand-Label-color-end: var(--brand-Label-color-pink-blue-end);
 }
 
+.Label--color-green-blue-purple {
+  --brand-Label-color-stop-1: var(--brand-Label-color-green-blue-purple-1);
+  --brand-Label-color-stop-2: var(--brand-Label-color-green-blue-purple-2);
+  --brand-Label-color-stop-3: var(--brand-Label-color-green-blue-purple-3);
+  --brand-Label-color-stop-4: var(--brand-Label-color-green-blue-purple-4);
+}
+
 .Label--color-purple {
   --brand-Label-color: var(--brand-Label-color-purple);
 }

packages/react/src/Label/Label.module.css.d.ts

@@ -15,6 +15,7 @@ declare const styles: {
   readonly "Label--color-orange": string;
   readonly "Label--color-pink": string;
   readonly "Label--color-pink-blue": string;
+  readonly "Label--color-green-blue-purple": string;
   readonly "Label--color-purple": string;
   readonly "Label--color-purple-red": string;
   readonly "Label--color-red": string;

packages/react/src/Label/Label.tsx

@@ -5,7 +5,7 @@ import {Text} from '../Text'
 import {useAnimation} from '../animation'
 
 import type {BaseProps} from '../component-helpers'
-import {Colors, Gradients} from '../constants'
+import {Colors, BiColorGradients, TriColorGradients} from '../constants'
 
 /**
  * Design tokens
@@ -15,6 +15,8 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 /** * Main Stylesheet (as a CSS Module) */
 import styles from './Label.module.css'
 
+const Gradients = [...BiColorGradients, ...TriColorGradients] as const
+
 export const LabelColors = [...Colors, ...Gradients] as const
 export const LabelSizes = ['medium', 'large'] as const
 

packages/react/src/Testimonial/Testimonial.tsx

@@ -17,11 +17,11 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/testimonial/colors-with-modes.css'
 
 import styles from './Testimonial.module.css'
-import {Colors, Gradients} from '../constants'
+import {Colors, BiColorGradients} from '../constants'
 
 type TestimonialSize = 'small' | 'large'
 
-export const TestimonialQuoteMarkColors = [...Colors, ...Gradients] as const
+export const TestimonialQuoteMarkColors = [...Colors, ...BiColorGradients] as const
 export const defaultQuoteMarkColor = TestimonialQuoteMarkColors[0]
 
 export const TestimonialVariants = ['subtle', 'default', 'minimal'] as const

packages/react/src/constants.tsx

@@ -15,7 +15,8 @@ export const Colors = [
   'yellow',
 ] as const
 
-export const Gradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const
+export const BiColorGradients = ['blue-purple', 'green-blue', 'pink-blue', 'purple-red', 'red-orange'] as const
+export const TriColorGradients = ['green-blue-purple'] as const
 
 // TODO: consider generating the scale from  style dictionary and serve from the brand-primitives package
 export const BaseSizeScale = [4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96, 112, 128] as const