Skip to content

Commit 1c5bb39

Browse files
adamwathanadamwathan
authored
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]>
1 parent 5ce37c4 commit 1c5bb39

File tree

14 files changed

+261
-252
lines changed

14 files changed

+261
-252
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
### Fixed
1515

1616
- Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
17+
- Ensure color opacity modifiers work with OKLCH colors ([#14741](https://github.com/tailwindlabs/tailwindcss/pull/14741))
1718
- _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
1819
- _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
1920
- _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))

‎integrations/upgrade/js-config.test.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -270,17 +270,17 @@ test(
270270
@import 'tailwindcss';
271271
272272
@theme {
273-
--color-gray-50: oklch(0.985 0 none);
274-
--color-gray-100: oklch(0.97 0 none);
275-
--color-gray-200: oklch(0.922 0 none);
276-
--color-gray-300: oklch(0.87 0 none);
277-
--color-gray-400: oklch(0.708 0 none);
278-
--color-gray-500: oklch(0.556 0 none);
279-
--color-gray-600: oklch(0.439 0 none);
280-
--color-gray-700: oklch(0.371 0 none);
281-
--color-gray-800: oklch(0.269 0 none);
282-
--color-gray-900: oklch(0.205 0 none);
283-
--color-gray-950: oklch(0.145 0 none);
273+
--color-gray-50: oklch(0.985 0 0);
274+
--color-gray-100: oklch(0.97 0 0);
275+
--color-gray-200: oklch(0.922 0 0);
276+
--color-gray-300: oklch(0.87 0 0);
277+
--color-gray-400: oklch(0.708 0 0);
278+
--color-gray-500: oklch(0.556 0 0);
279+
--color-gray-600: oklch(0.439 0 0);
280+
--color-gray-700: oklch(0.371 0 0);
281+
--color-gray-800: oklch(0.269 0 0);
282+
--color-gray-900: oklch(0.205 0 0);
283+
--color-gray-950: oklch(0.145 0 0);
284284
}
285285
"
286286
`)

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
4040
--color-gray-800: oklch(.278 .033 256.848);
4141
--color-gray-900: oklch(.21 .034 264.665);
4242
--color-gray-950: oklch(.13 .028 261.692);
43-
--color-zinc-50: oklch(.985 0 none);
43+
--color-zinc-50: oklch(.985 0 0);
4444
--color-zinc-100: oklch(.967 .001 286.375);
4545
--color-zinc-200: oklch(.92 .004 286.32);
4646
--color-zinc-300: oklch(.871 .006 286.286);
@@ -51,17 +51,17 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
5151
--color-zinc-800: oklch(.274 .006 286.033);
5252
--color-zinc-900: oklch(.21 .006 285.885);
5353
--color-zinc-950: oklch(.141 .005 285.823);
54-
--color-neutral-50: oklch(.985 0 none);
55-
--color-neutral-100: oklch(.97 0 none);
56-
--color-neutral-200: oklch(.922 0 none);
57-
--color-neutral-300: oklch(.87 0 none);
58-
--color-neutral-400: oklch(.708 0 none);
59-
--color-neutral-500: oklch(.556 0 none);
60-
--color-neutral-600: oklch(.439 0 none);
61-
--color-neutral-700: oklch(.371 0 none);
62-
--color-neutral-800: oklch(.269 0 none);
63-
--color-neutral-900: oklch(.205 0 none);
64-
--color-neutral-950: oklch(.145 0 none);
54+
--color-neutral-50: oklch(.985 0 0);
55+
--color-neutral-100: oklch(.97 0 0);
56+
--color-neutral-200: oklch(.922 0 0);
57+
--color-neutral-300: oklch(.87 0 0);
58+
--color-neutral-400: oklch(.708 0 0);
59+
--color-neutral-500: oklch(.556 0 0);
60+
--color-neutral-600: oklch(.439 0 0);
61+
--color-neutral-700: oklch(.371 0 0);
62+
--color-neutral-800: oklch(.269 0 0);
63+
--color-neutral-900: oklch(.205 0 0);
64+
--color-neutral-950: oklch(.145 0 0);
6565
--color-stone-50: oklch(.985 .001 106.423);
6666
--color-stone-100: oklch(.97 .001 106.424);
6767
--color-stone-200: oklch(.923 .003 48.717);
@@ -563,7 +563,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
563563
564564
::placeholder {
565565
opacity: 1;
566-
color: color-mix(in srgb, currentColor 50%, transparent);
566+
color: color-mix(in oklch, currentColor 50%, transparent);
567567
}
568568
569569
img, svg, video, canvas, audio, iframe, embed, object {
@@ -590,7 +590,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
590590
}
591591
592592
.text-black\\/50 {
593-
color: color-mix(in srgb, var(--color-black, #000) 50%, transparent);
593+
color: color-mix(in oklch, var(--color-black, #000) 50%, transparent);
594594
}
595595
596596
.underline {

‎packages/tailwindcss/preflight.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ textarea {
286286

287287
::placeholder {
288288
opacity: 1; /* 1 */
289-
color: color-mix(in srgb, currentColor 50%, transparent); /* 2 */
289+
color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
290290
}
291291

292292
/*

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
3939
--color-gray-800: oklch(.278 .033 256.848);
4040
--color-gray-900: oklch(.21 .034 264.665);
4141
--color-gray-950: oklch(.13 .028 261.692);
42-
--color-zinc-50: oklch(.985 0 none);
42+
--color-zinc-50: oklch(.985 0 0);
4343
--color-zinc-100: oklch(.967 .001 286.375);
4444
--color-zinc-200: oklch(.92 .004 286.32);
4545
--color-zinc-300: oklch(.871 .006 286.286);
@@ -50,17 +50,17 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
5050
--color-zinc-800: oklch(.274 .006 286.033);
5151
--color-zinc-900: oklch(.21 .006 285.885);
5252
--color-zinc-950: oklch(.141 .005 285.823);
53-
--color-neutral-50: oklch(.985 0 none);
54-
--color-neutral-100: oklch(.97 0 none);
55-
--color-neutral-200: oklch(.922 0 none);
56-
--color-neutral-300: oklch(.87 0 none);
57-
--color-neutral-400: oklch(.708 0 none);
58-
--color-neutral-500: oklch(.556 0 none);
59-
--color-neutral-600: oklch(.439 0 none);
60-
--color-neutral-700: oklch(.371 0 none);
61-
--color-neutral-800: oklch(.269 0 none);
62-
--color-neutral-900: oklch(.205 0 none);
63-
--color-neutral-950: oklch(.145 0 none);
53+
--color-neutral-50: oklch(.985 0 0);
54+
--color-neutral-100: oklch(.97 0 0);
55+
--color-neutral-200: oklch(.922 0 0);
56+
--color-neutral-300: oklch(.87 0 0);
57+
--color-neutral-400: oklch(.708 0 0);
58+
--color-neutral-500: oklch(.556 0 0);
59+
--color-neutral-600: oklch(.439 0 0);
60+
--color-neutral-700: oklch(.371 0 0);
61+
--color-neutral-800: oklch(.269 0 0);
62+
--color-neutral-900: oklch(.205 0 0);
63+
--color-neutral-950: oklch(.145 0 0);
6464
--color-stone-50: oklch(.985 .001 106.423);
6565
--color-stone-100: oklch(.97 .001 106.424);
6666
--color-stone-200: oklch(.923 .003 48.717);

0 commit comments

Comments
 (0)