dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Browser compatibility for colours (#47801)

Browse Source 
Replaces abs and from for foreground colours to potentially improve
browser compatibility

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Improved semantic color calculations for broader browser
compatibility.
* Refined foreground, muted, and tertiary text colors for more
consistent theme rendering.
  * Improved surface overlay contrast across different tones.
* Fine-tuned the light theme’s link color brightness for better visual
balance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
This commit is contained in:
Saxon FletcherandDanny White authored and GitHub committed 2026-08-06 14:38:42 +10:00
1 parent e0cc680653
commit ec24d69369
2 files changed
+12 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/build/css/source/semantic.css
+11 -5
View File
@@ -81,7 +81,11 @@
* beneath (lightens in dark, darkens in light). Steps: muted (e1) → accent
* (e2) → tertiary (e3).
*/
--surface-overlay-unit: calc(var(--elevation-step) / abs(var(--tone-span)));
/* max(span, -span) is equivalent to abs(span), but works across the browser
versions supported by Tailwind v4. */
--surface-overlay-unit: calc(
var(--elevation-step) / max(var(--tone-span), calc(var(--tone-span) * -1))
);
--muted-alpha: calc(var(--surface-overlay-unit) * var(--elevation-1));
--accent-alpha: calc(var(--surface-overlay-unit) * var(--elevation-2));
--tertiary-alpha: calc(var(--surface-overlay-unit) * var(--elevation-3));
@@ -139,8 +143,9 @@
/* shadcn semantic pairs */
--background: oklch(var(--surface) calc(var(--chroma) * 0.5) var(--surface-hue));
--foreground-chroma: calc(var(--chroma) * 0.55);
--foreground: oklch(
calc(var(--surface) + var(--tone-span) * var(--contrast-text)) calc(var(--chroma) * 0.55)
calc(var(--surface) + var(--tone-span) * var(--contrast-text)) var(--foreground-chroma)
var(--surface-hue)
);
/* Inverse of --foreground: canvas-coloured text for use on inverted fills
@@ -174,8 +179,8 @@
var(--tertiary-foreground-level) * 0.5 * var(--contrast-down)
);
--tertiary-foreground: oklch(
from var(--foreground) calc(var(--surface) + var(--tone-span) * var(--tertiary-foreground-mix))
c h
calc(var(--surface) + var(--tone-span) * var(--tertiary-foreground-mix))
var(--foreground-chroma) var(--surface-hue)
);
--muted: oklch(from var(--foreground) l c h / var(--muted-alpha));
--muted-foreground-mix: calc(
@@ -183,7 +188,8 @@
var(--muted-foreground-level) * 0.5 * var(--contrast-down)
);
--muted-foreground: oklch(
from var(--foreground) calc(var(--surface) + var(--tone-span) * var(--muted-foreground-mix)) c h
calc(var(--surface) + var(--tone-span) * var(--muted-foreground-mix)) var(--foreground-chroma)
var(--surface-hue)
);
--accent: oklch(from var(--foreground) l c h / var(--accent-alpha));
--accent-foreground: var(--foreground);
packages/ui/build/css/themes/light.css
+1 -1
View File
@@ -38,7 +38,7 @@
--secondary-default: 247.8deg 100% 70%;
--secondary-400: 248.3deg 54.5% 25.9%;
--secondary-200: 248deg 53.6% 11%;
--brand-link: 153.4deg 86.5% 28.3%;
--brand-link: 153.4deg 86.5% 27.8%;
--brand-default: 152.9deg 60% 52.9%;
--brand-600: 156.5deg 86.5% 26.1%;
--brand-500: 155.3deg 78.4% 40%;