From c7c821ec37ae1f047416943bf3fed2ac55afd4ff Mon Sep 17 00:00:00 2001
From: Max Ghenis <mghenis@gmail.com>
Date: Sat, 9 May 2026 00:25:57 -0400
Subject: [PATCH] Add accessible text tokens
 (text-warning/error/success-foreground)

The token set already exposes --color-warning, --color-error, and
--color-success as fill values tuned for badges, status dots, and
chart series. None of those clear WCAG AA when used as text on white
or on a 12-15% -soft tint.

Add three accessible-on-white text variants and bridge them as
Tailwind utilities consistent with the existing --destructive-
foreground convention:

- --text-warning: #d9480f (Mantine orange.9, 4.81:1 on white)
- --text-error:   #B91C1C (Tailwind red-700, 5.94:1 on white)
- --text-success: #285E61 (primary[700], 7.07:1 on white)

Bridges:
- --color-warning-foreground (Tailwind: text-warning-foreground)
- --color-error-foreground   (Tailwind: text-error-foreground)
- --color-success-foreground (Tailwind: text-success-foreground)

Discovered while doing a WCAG 2.2 AA pass on policybench; without these
tokens every consumer ends up redefining accessible text colors locally.
---
 changelog.d/feat-accessible-text-tokens.added.md |  1 +
 src/theme/tokens.css                             | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 changelog.d/feat-accessible-text-tokens.added.md

diff --git a/changelog.d/feat-accessible-text-tokens.added.md b/changelog.d/feat-accessible-text-tokens.added.md
new file mode 100644
index 0000000..1e5060b
--- /dev/null
+++ b/changelog.d/feat-accessible-text-tokens.added.md
@@ -0,0 +1 @@
+Add accessible text tokens (--text-warning, --text-error, --text-success) and Tailwind utilities text-warning-foreground, text-error-foreground, text-success-foreground for use on white or matching -soft / tinted fills.
diff --git a/src/theme/tokens.css b/src/theme/tokens.css
index 5a9a82a..8ccd83c 100644
--- a/src/theme/tokens.css
+++ b/src/theme/tokens.css
@@ -80,6 +80,14 @@
   --text-tertiary: #94A3B8;
   --text-inverse: #ffffff;
 
+  /* Accessible text variants for use on white or matching -soft / tinted
+     fills. Kept distinct from --color-warning / --color-error / --color-success
+     fill values (which are tuned for badges and status dots and do not always
+     clear WCAG AA when used as text). */
+  --text-warning: #d9480f; /* Mantine orange.9; AA on white (4.81:1) and on a 14% --color-warning tint */
+  --text-error: #B91C1C; /* Tailwind red-700; AA on white (5.94:1) and on a 12% --color-error tint */
+  --text-success: #285E61; /* primary[700]; AA on white (7.07:1) and on success-soft */
+
   /* Diverging color scales */
   --diverging-gray-teal-1: #475569;
   --diverging-gray-teal-2: #94A3B8;
@@ -117,6 +125,9 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-warning-foreground: var(--text-warning);
+  --color-error-foreground: var(--text-error);
+  --color-success-foreground: var(--text-success);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);