From ddd6711b0da9fdb046ab45ebda58e31cdab70aad Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:50:39 +1000
Subject: [PATCH] fix(ui): darken light warning fill for readable white text
 (#50834)

## Problem

Light-mode warning buttons used dark text on an amber that sat above the
on-fill contrast flip, so the label read poorly.

## Solution

Lower light `--warning-lightness` from `0.68` to `0.55` so the shared
foreground formula picks light ink at ~4.5:1.

| Figure |
| --- |
| <img width="1052" height="134" alt="CleanShot 2026-09-24 at 15 39
55@2x"
src="https://github.com/user-attachments/assets/e07f9ffc-dc3f-4e3f-8bce-f993302da61e"
/> |
| _Currently on `master`_ |
| <img width="1040" height="148" alt="CleanShot 2026-09-24 at 15 35
42@2x"
src="https://github.com/user-attachments/assets/199b0303-87cc-43bb-b518-784938911dd2"
/> |
| _Non-compliant (poor contrast) text colour inversion only_ |
| <img width="1054" height="168" alt="CleanShot 2026-09-24 at 15 36
02@2x"
src="https://github.com/user-attachments/assets/c530a594-49de-40a9-a8ad-0208ed5192fc"
/> |
| _What this PR ships: proper contrast, matches other buttons_ |

## Review instructions

1. Open the [design system Button
page](https://design-system-git-dnywh-fix-warning-button-light-text-supabase.vercel.app/design-system/docs/components/button#variants)
on the preview in light mode.
2. Check a `warning` Button: deeper amber fill, light label.
---
 packages/ui/build/css/themes/light.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 40cae7a0efc..492040b6607 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -30,7 +30,8 @@
    * is mode-aware; chroma is the shared --expressive-chroma from semantic.css.
    */
   --warning-hue: 58;
-  --warning-lightness: 0.68;
+  /* Below on-fill flip (~0.62) so ink is light and clears ~4.5:1 */
+  --warning-lightness: 0.55;
   --destructive-lightness: 0.52;
   --info-lightness: 0.54;