Use 0 instead of none in OKLCH values (#14741)

This PR updates all of our OKCLH colors to use `0` instead of `none` due to weird behavior in Chrome where using `color-mix` with colors using `none` produces unexpected results: <img width="1110" alt="image" src="https://github.com/user-attachments/assets/2272e494-500b-4f75-b5c1-d41c714f0339"> Both `none` and `0` behave as expected in Safari and Firefox so suspecting this is a bug in Chrome rather than spec'd behavior. Fixes #14740 --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Oct 21, 2024 · 1c5bb39 · 1c5bb39
1 parent 5ce37c4
commit 1c5bb39
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 252 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
+- Ensure color opacity modifiers work with OKLCH colors ([#14741](https://github.com/tailwindlabs/tailwindcss/pull/14741))
 - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
 - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
 - _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724))

diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
@@ -270,17 +270,17 @@ test(
       @import 'tailwindcss';
 
       @theme {
-        --color-gray-50: oklch(0.985 0 none);
-        --color-gray-100: oklch(0.97 0 none);
-        --color-gray-200: oklch(0.922 0 none);
-        --color-gray-300: oklch(0.87 0 none);
-        --color-gray-400: oklch(0.708 0 none);
-        --color-gray-500: oklch(0.556 0 none);
-        --color-gray-600: oklch(0.439 0 none);
-        --color-gray-700: oklch(0.371 0 none);
-        --color-gray-800: oklch(0.269 0 none);
-        --color-gray-900: oklch(0.205 0 none);
-        --color-gray-950: oklch(0.145 0 none);
+        --color-gray-50: oklch(0.985 0 0);
+        --color-gray-100: oklch(0.97 0 0);
+        --color-gray-200: oklch(0.922 0 0);
+        --color-gray-300: oklch(0.87 0 0);
+        --color-gray-400: oklch(0.708 0 0);
+        --color-gray-500: oklch(0.556 0 0);
+        --color-gray-600: oklch(0.439 0 0);
+        --color-gray-700: oklch(0.371 0 0);
+        --color-gray-800: oklch(0.269 0 0);
+        --color-gray-900: oklch(0.205 0 0);
+        --color-gray-950: oklch(0.145 0 0);
       }
       "
     `)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -40,7 +40,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --color-gray-800: oklch(.278 .033 256.848);
     --color-gray-900: oklch(.21 .034 264.665);
     --color-gray-950: oklch(.13 .028 261.692);
-    --color-zinc-50: oklch(.985 0 none);
+    --color-zinc-50: oklch(.985 0 0);
     --color-zinc-100: oklch(.967 .001 286.375);
     --color-zinc-200: oklch(.92 .004 286.32);
     --color-zinc-300: oklch(.871 .006 286.286);
@@ -51,17 +51,17 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --color-zinc-800: oklch(.274 .006 286.033);
     --color-zinc-900: oklch(.21 .006 285.885);
     --color-zinc-950: oklch(.141 .005 285.823);
-    --color-neutral-50: oklch(.985 0 none);
-    --color-neutral-100: oklch(.97 0 none);
-    --color-neutral-200: oklch(.922 0 none);
-    --color-neutral-300: oklch(.87 0 none);
-    --color-neutral-400: oklch(.708 0 none);
-    --color-neutral-500: oklch(.556 0 none);
-    --color-neutral-600: oklch(.439 0 none);
-    --color-neutral-700: oklch(.371 0 none);
-    --color-neutral-800: oklch(.269 0 none);
-    --color-neutral-900: oklch(.205 0 none);
-    --color-neutral-950: oklch(.145 0 none);
+    --color-neutral-50: oklch(.985 0 0);
+    --color-neutral-100: oklch(.97 0 0);
+    --color-neutral-200: oklch(.922 0 0);
+    --color-neutral-300: oklch(.87 0 0);
+    --color-neutral-400: oklch(.708 0 0);
+    --color-neutral-500: oklch(.556 0 0);
+    --color-neutral-600: oklch(.439 0 0);
+    --color-neutral-700: oklch(.371 0 0);
+    --color-neutral-800: oklch(.269 0 0);
+    --color-neutral-900: oklch(.205 0 0);
+    --color-neutral-950: oklch(.145 0 0);
     --color-stone-50: oklch(.985 .001 106.423);
     --color-stone-100: oklch(.97 .001 106.424);
     --color-stone-200: oklch(.923 .003 48.717);
@@ -563,7 +563,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: color-mix(in srgb, currentColor 50%, transparent);
+    color: color-mix(in oklch, currentColor 50%, transparent);
   }
 
   img, svg, video, canvas, audio, iframe, embed, object {
@@ -590,7 +590,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   .text-black\\/50 {
-    color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
+    color: color-mix(in oklch, var(--color-black, #000) 50%, transparent);
   }
 
   .underline {

diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
@@ -286,7 +286,7 @@ textarea {
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
 }
 
 /*

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -39,7 +39,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --color-gray-800: oklch(.278 .033 256.848);
   --color-gray-900: oklch(.21 .034 264.665);
   --color-gray-950: oklch(.13 .028 261.692);
-  --color-zinc-50: oklch(.985 0 none);
+  --color-zinc-50: oklch(.985 0 0);
   --color-zinc-100: oklch(.967 .001 286.375);
   --color-zinc-200: oklch(.92 .004 286.32);
   --color-zinc-300: oklch(.871 .006 286.286);
@@ -50,17 +50,17 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --color-zinc-800: oklch(.274 .006 286.033);
   --color-zinc-900: oklch(.21 .006 285.885);
   --color-zinc-950: oklch(.141 .005 285.823);
-  --color-neutral-50: oklch(.985 0 none);
-  --color-neutral-100: oklch(.97 0 none);
-  --color-neutral-200: oklch(.922 0 none);
-  --color-neutral-300: oklch(.87 0 none);
-  --color-neutral-400: oklch(.708 0 none);
-  --color-neutral-500: oklch(.556 0 none);
-  --color-neutral-600: oklch(.439 0 none);
-  --color-neutral-700: oklch(.371 0 none);
-  --color-neutral-800: oklch(.269 0 none);
-  --color-neutral-900: oklch(.205 0 none);
-  --color-neutral-950: oklch(.145 0 none);
+  --color-neutral-50: oklch(.985 0 0);
+  --color-neutral-100: oklch(.97 0 0);
+  --color-neutral-200: oklch(.922 0 0);
+  --color-neutral-300: oklch(.87 0 0);
+  --color-neutral-400: oklch(.708 0 0);
+  --color-neutral-500: oklch(.556 0 0);
+  --color-neutral-600: oklch(.439 0 0);
+  --color-neutral-700: oklch(.371 0 0);
+  --color-neutral-800: oklch(.269 0 0);
+  --color-neutral-900: oklch(.205 0 0);
+  --color-neutral-950: oklch(.145 0 0);
   --color-stone-50: oklch(.985 .001 106.423);
   --color-stone-100: oklch(.97 .001 106.424);
   --color-stone-200: oklch(.923 .003 48.717);