From cb7e99d914018e4283822ba609e9d697593b8641 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 13 Mar 2025 10:45:04 +0000
Subject: [PATCH] Add colors to Text

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/smooth-rooms-nail.md               |  5 +++++
 packages/canon/report.api.md                  | 13 ++++++++++++
 packages/canon/src/components/Text/Text.tsx   |  3 +++
 packages/canon/src/components/Text/styles.css | 20 +++++++++++++++++++
 packages/canon/src/components/Text/types.ts   | 12 +++++++++++
 5 files changed, 53 insertions(+)
 create mode 100644 .changeset/smooth-rooms-nail.md

diff --git a/.changeset/smooth-rooms-nail.md b/.changeset/smooth-rooms-nail.md
new file mode 100644
index 0000000000..1a193b802c
--- /dev/null
+++ b/.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.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 5ad27f537a..c51d6b6218 100644
--- a/packages/canon/report.api.md
+++ b/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?:
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 1d490bc0ef..8bc1daf465 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/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}
diff --git a/packages/canon/src/components/Text/styles.css b/packages/canon/src/components/Text/styles.css
index 871960b8db..8252554280 100644
--- a/packages/canon/src/components/Text/styles.css
+++ b/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);
+}
diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts
index 4fdc824120..d4f1615694 100644
--- a/packages/canon/src/components/Text/types.ts
+++ b/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;
 }