Add colors to Text

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/smooth-rooms-nail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+Updating styles for Text and Link components as well as global surface tokens.

packages/canon/report.api.md

@@ -957,6 +957,19 @@ export interface TextProps {
   // (undocumented)
   className?: string;
   // (undocumented)
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'warning'
+    | 'success'
+    | Partial<
+        Record<
+          Breakpoint,
+          'primary' | 'secondary' | 'danger' | 'warning' | 'success'
+        >
+      >;
+  // (undocumented)
   style?: CSSProperties;
   // (undocumented)
   variant?:

packages/canon/src/components/Text/Text.tsx

@@ -27,6 +27,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
       children,
       variant = 'body',
       weight = 'regular',
+      color = 'primary',
       style,
       className,
       ...restProps
@@ -35,6 +36,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
     // Get the responsive values for the variant and weight
     const responsiveVariant = useResponsiveValue(variant);
     const responsiveWeight = useResponsiveValue(weight);
+    const responsiveColor = useResponsiveValue(color);
 
     return (
       <p
@@ -43,6 +45,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
           'canon-Text',
           responsiveVariant && `canon-Text--variant-${responsiveVariant}`,
           responsiveWeight && `canon-Text--weight-${responsiveWeight}`,
+          responsiveColor && `canon-Text--color-${responsiveColor}`,
           className,
         )}
         style={style}

packages/canon/src/components/Text/styles.css

@@ -48,3 +48,23 @@
 .canon-Text--weight-bold {
   font-weight: var(--canon-font-weight-bold);
 }
+
+.canon-Text--color-primary {
+  color: var(--canon-fg-primary);
+}
+
+.canon-Text--color-secondary {
+  color: var(--canon-fg-secondary);
+}
+
+.canon-Text--color-danger {
+  color: var(--canon-fg-danger);
+}
+
+.canon-Text--color-warning {
+  color: var(--canon-fg-warning);
+}
+
+.canon-Text--color-success {
+  color: var(--canon-fg-success);
+}

packages/canon/src/components/Text/types.ts

@@ -27,6 +27,18 @@ export interface TextProps {
     | 'label'
     | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
   weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'warning'
+    | 'success'
+    | Partial<
+        Record<
+          Breakpoint,
+          'primary' | 'secondary' | 'danger' | 'warning' | 'success'
+        >
+      >;
   className?: string;
   style?: CSSProperties;
 }