Merge pull request #4 from code-for-canada/feat/eyebrow-color-variants

feat(eyebrow): add purple and blue color variants

Author: sftwarec4c

.changeset/eyebrow-color-variants.md

@@ -0,0 +1,7 @@
+---
+"@code-for-canada/ui": minor
+---
+
+Add `purple` and `blue` color variants to `Eyebrow`
+
+`Eyebrow` now accepts `color="purple"` and `color="blue"` in addition to `"red"`, matching the brand colors already available on `IconCircle`. Text shades (`red-600`, `purple-800`, `blue-800`) are picked for legibility as on-white text.

src/components/typography.tsx

@@ -92,7 +92,8 @@ function Heading({ className, size, as: Component, ...props }: HeadingProps) {
 
 // Eyebrow - Uppercase section labels
 // Default text follows the surrounding scheme (--scheme-muted), falling back
-// to the brand primary when no scheme is set. `color="red"` forces brand red.
+// to the brand primary when no scheme is set. Passing `color` pins to a fixed
+// brand value regardless of scheme.
 const eyebrowVariants = cva(
   "font-semibold uppercase leading-none text-[var(--scheme-muted,var(--primary))]",
   {
@@ -104,6 +105,8 @@ const eyebrowVariants = cva(
       },
       color: {
         red: "text-c4c-red-600",
+        purple: "text-c4c-purple-800",
+        blue: "text-c4c-blue-800",
       },
     },
     defaultVariants: {
@@ -112,7 +115,7 @@ const eyebrowVariants = cva(
   }
 );
 
-export type EyebrowColor = "red"
+export type EyebrowColor = "red" | "purple" | "blue"
 
 interface EyebrowProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
@@ -121,7 +124,7 @@ interface EyebrowProps
   icon?: React.ReactNode;
 }
 
-/** Uppercase section label above a heading. Use sparingly — only with longer "editorial" headings to aid scanning. Keep to 1–4 words. Colour follows the surrounding scheme (or the brand red when no scheme is set); `color="red"` pins to brand red regardless of scheme. Optional `icon` shows a matching circle. */
+/** Uppercase section label above a heading. Use sparingly — only with longer "editorial" headings to aid scanning. Keep to 1–4 words. Colour follows the surrounding scheme (or the brand red when no scheme is set); pass `color` (red | purple | blue) to pin a fixed brand colour regardless of scheme. Optional `icon` shows a matching circle. */
 function Eyebrow({
   className,
   size,