From ec24d69369af90bebb078f928b2ca17e347e11ec Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Thu, 6 Aug 2026 14:38:42 +1000 Subject: [PATCH] Browser compatibility for colours (#47801) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces abs and from for foreground colours to potentially improve browser compatibility ## 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. --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> --- packages/ui/build/css/source/semantic.css | 16 +++++++++++----- packages/ui/build/css/themes/light.css | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/ui/build/css/source/semantic.css b/packages/ui/build/css/source/semantic.css index 2e205a4c7cc..68e4e1c263e 100644 --- a/packages/ui/build/css/source/semantic.css +++ b/packages/ui/build/css/source/semantic.css @@ -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); diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css index 8cbccc0ffbf..8f8a7e42e71 100644 --- a/packages/ui/build/css/themes/light.css +++ b/packages/ui/build/css/themes/light.css @@ -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%;