From 4af47fbe942245fd05ad8cd4776c2dbd27237bee Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 9 Jul 2026 13:36:34 +0200 Subject: [PATCH] Fix hues in achromatic theme colors to be `none` (#20314) --- CHANGELOG.md | 1 + integrations/upgrade/js-config.test.ts | 22 +++++++++---------- packages/tailwindcss/src/compat/colors.ts | 26 +++++++++++------------ packages/tailwindcss/theme.css | 26 +++++++++++------------ 4 files changed, 38 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index baad68046..64f11e57d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix parsing selectors like `[data-foo]div` as one selector instead of two ([#20303](https://github.com/tailwindlabs/tailwindcss/pull/20303)) - Fix stale `@tailwindcss/postcss` output when changed input CSS is passed from a preprocessor like Sass without updating the input file on disk ([#20310](https://github.com/tailwindlabs/tailwindcss/pull/20310)) - Ensure CSS nesting is handled even when Lightning CSS isn't run, like in `@tailwindcss/browser` and Tailwind Play ([#20124](https://github.com/tailwindlabs/tailwindcss/pull/20124)) +- Prevent achromatic theme colors from shifting hue in `color-mix(…)` with polar color spaces like `oklch` ([#19830](https://github.com/tailwindlabs/tailwindcss/issues/19830)) ## [4.3.2] - 2026-06-26 diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index 1a037b764..cab0d3d62 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -594,17 +594,17 @@ test( @import 'tailwindcss'; @theme { - --color-gray-50: oklch(98.5% 0 0); - --color-gray-100: oklch(97% 0 0); - --color-gray-200: oklch(92.2% 0 0); - --color-gray-300: oklch(87% 0 0); - --color-gray-400: oklch(70.8% 0 0); - --color-gray-500: oklch(55.6% 0 0); - --color-gray-600: oklch(43.9% 0 0); - --color-gray-700: oklch(37.1% 0 0); - --color-gray-800: oklch(26.9% 0 0); - --color-gray-900: oklch(20.5% 0 0); - --color-gray-950: oklch(14.5% 0 0); + --color-gray-50: oklch(98.5% 0 none); + --color-gray-100: oklch(97% 0 none); + --color-gray-200: oklch(92.2% 0 none); + --color-gray-300: oklch(87% 0 none); + --color-gray-400: oklch(70.8% 0 none); + --color-gray-500: oklch(55.6% 0 none); + --color-gray-600: oklch(43.9% 0 none); + --color-gray-700: oklch(37.1% 0 none); + --color-gray-800: oklch(26.9% 0 none); + --color-gray-900: oklch(20.5% 0 none); + --color-gray-950: oklch(14.5% 0 none); } /* diff --git a/packages/tailwindcss/src/compat/colors.ts b/packages/tailwindcss/src/compat/colors.ts index a1d162c54..64e3bc9c7 100644 --- a/packages/tailwindcss/src/compat/colors.ts +++ b/packages/tailwindcss/src/compat/colors.ts @@ -31,7 +31,7 @@ export default { '950': 'oklch(13% 0.028 261.692)', }, zinc: { - '50': 'oklch(98.5% 0 0)', + '50': 'oklch(98.5% 0 none)', '100': 'oklch(96.7% 0.001 286.375)', '200': 'oklch(92% 0.004 286.32)', '300': 'oklch(87.1% 0.006 286.286)', @@ -44,17 +44,17 @@ export default { '950': 'oklch(14.1% 0.005 285.823)', }, neutral: { - '50': 'oklch(98.5% 0 0)', - '100': 'oklch(97% 0 0)', - '200': 'oklch(92.2% 0 0)', - '300': 'oklch(87% 0 0)', - '400': 'oklch(70.8% 0 0)', - '500': 'oklch(55.6% 0 0)', - '600': 'oklch(43.9% 0 0)', - '700': 'oklch(37.1% 0 0)', - '800': 'oklch(26.9% 0 0)', - '900': 'oklch(20.5% 0 0)', - '950': 'oklch(14.5% 0 0)', + '50': 'oklch(98.5% 0 none)', + '100': 'oklch(97% 0 none)', + '200': 'oklch(92.2% 0 none)', + '300': 'oklch(87% 0 none)', + '400': 'oklch(70.8% 0 none)', + '500': 'oklch(55.6% 0 none)', + '600': 'oklch(43.9% 0 none)', + '700': 'oklch(37.1% 0 none)', + '800': 'oklch(26.9% 0 none)', + '900': 'oklch(20.5% 0 none)', + '950': 'oklch(14.5% 0 none)', }, stone: { '50': 'oklch(98.5% 0.001 106.423)', @@ -70,7 +70,7 @@ export default { '950': 'oklch(14.7% 0.004 49.25)', }, mauve: { - '50': 'oklch(98.5% 0 0)', + '50': 'oklch(98.5% 0 none)', '100': 'oklch(96% 0.003 325.6)', '200': 'oklch(92.2% 0.005 325.62)', '300': 'oklch(86.5% 0.012 325.68)', diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 502f5c752..78b0fc588 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -235,7 +235,7 @@ --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); - --color-zinc-50: oklch(98.5% 0 0); + --color-zinc-50: oklch(98.5% 0 none); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); @@ -247,17 +247,17 @@ --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); - --color-neutral-50: oklch(98.5% 0 0); - --color-neutral-100: oklch(97% 0 0); - --color-neutral-200: oklch(92.2% 0 0); - --color-neutral-300: oklch(87% 0 0); - --color-neutral-400: oklch(70.8% 0 0); - --color-neutral-500: oklch(55.6% 0 0); - --color-neutral-600: oklch(43.9% 0 0); - --color-neutral-700: oklch(37.1% 0 0); - --color-neutral-800: oklch(26.9% 0 0); - --color-neutral-900: oklch(20.5% 0 0); - --color-neutral-950: oklch(14.5% 0 0); + --color-neutral-50: oklch(98.5% 0 none); + --color-neutral-100: oklch(97% 0 none); + --color-neutral-200: oklch(92.2% 0 none); + --color-neutral-300: oklch(87% 0 none); + --color-neutral-400: oklch(70.8% 0 none); + --color-neutral-500: oklch(55.6% 0 none); + --color-neutral-600: oklch(43.9% 0 none); + --color-neutral-700: oklch(37.1% 0 none); + --color-neutral-800: oklch(26.9% 0 none); + --color-neutral-900: oklch(20.5% 0 none); + --color-neutral-950: oklch(14.5% 0 none); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); @@ -271,7 +271,7 @@ --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); - --color-mauve-50: oklch(98.5% 0 0); + --color-mauve-50: oklch(98.5% 0 none); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68);