mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Danny White
ddd6711b0d
## 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.
70 lines
2.6 KiB
CSS
70 lines
2.6 KiB
CSS
[data-theme='light'],
|
|
.light {
|
|
--helpers-os-appearance: Light;
|
|
--hue: 157.5;
|
|
--surface-hue: 34;
|
|
--chroma: 0;
|
|
/*
|
|
* Soft-gray canvas (not pure white) so elevated surfaces have headroom to
|
|
* brighten toward white. --elevation-step is positive here: higher surfaces
|
|
* get lighter, matching dark mode's direction. Tuned literal (previously
|
|
* derived from 1 - surface); retune alongside --surface.
|
|
*/
|
|
--surface: 0.995;
|
|
--elevation-step: 0.024;
|
|
--contrast: 0.53;
|
|
--foreground-lightness: 0.1;
|
|
--muted-foreground-level: 0.65;
|
|
--tertiary-foreground-level: 0.5;
|
|
/* Accessible primary for text and small indicators on light surfaces (~4.5:1+).
|
|
Solid button plates alias to the same green in light mode. Focus rings and
|
|
bright interactive chrome uses --primary-bright. */
|
|
--primary: oklch(0.525 0.12 var(--primary-hue));
|
|
--primary-foreground: oklch(0.99 0.00275 var(--primary-hue));
|
|
--primary-solid: var(--primary);
|
|
--primary-solid-foreground: var(--primary-foreground);
|
|
--primary-solid-hover: var(--primary-hover);
|
|
/*
|
|
* Expressive fills run darker than the dark-theme anchors so they hold contrast
|
|
* against the near-white surface (a light amber on white disappears). Lightness
|
|
* is mode-aware; chroma is the shared --expressive-chroma from semantic.css.
|
|
*/
|
|
--warning-hue: 58;
|
|
/* 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;
|
|
|
|
--code-block-5: 14deg 80.4% 58%;
|
|
--code-block-4: 276.3deg 60% 52.9%;
|
|
--code-block-3: 83.8deg 61.6% 48%;
|
|
--code-block-2: 33.1deg 80% 52.9%;
|
|
--code-block-1: 170.6deg 43.2% 51%;
|
|
|
|
--code-token-string: #c46a0a;
|
|
--code-token-string-expression: #c46a0a;
|
|
|
|
/* Stepped numeric scales (per-theme literals; mapped in theme.css) */
|
|
--secondary-default: 247.8deg 100% 70%;
|
|
--secondary-400: 248.3deg 54.5% 25.9%;
|
|
--secondary-200: 248deg 53.6% 11%;
|
|
--brand-default: 152.9deg 60% 52.9%;
|
|
--brand-600: 156.5deg 86.5% 26.1%;
|
|
--brand-500: 155.3deg 78.4% 40%;
|
|
--brand-400: 151.3deg 66.9% 66.9%;
|
|
--brand-300: 147.5deg 72% 80.4%;
|
|
--brand-200: 147.6deg 72.5% 90%;
|
|
/* --warning-default: 30.3deg 80.3% 47.8%; */
|
|
--warning-600: 30.3deg 80.3% 47.8%;
|
|
--warning-500: 36.3deg 85.7% 67.1%;
|
|
--warning-400: 41.9deg 100% 81.8%;
|
|
--warning-300: 44.3deg 100% 91.8%;
|
|
--warning-200: 40deg 81.8% 97.8%;
|
|
--destructive-default: 10.2deg 77.9% 53.9%;
|
|
--destructive-600: 9.9deg 82% 43.5%;
|
|
--destructive-500: 10.4deg 77.1% 79.4%;
|
|
--destructive-400: 7.1deg 91.3% 91%;
|
|
--destructive-300: 7.1deg 100% 96.7%;
|
|
--destructive-200: 0deg 100% 99.4%;
|
|
}
|