Use oklab instead of oklch for color-mix(…) and gradients (#15201)

Fixes #15184,
#14955

There's a strange bug in Safari < 18 where mixing a color with
`transparent` or with a gray tone, the resulting color looks as if it's
been interpolated through a red-ish color.

Here's the same blue to transparent gradient in Safari 17 using OKLAB
and OKLCH for comparison:

<img width="747" alt="image"
src="https://github.com/user-attachments/assets/1cb09b00-0d84-4284-be34-103726d8af03">

In other browsers, both of these examples look identical.

This bug also shows up when using an opacity modifier right now because
we use `in oklch` in our `color-mix(…)` calls:

<img width="744" alt="image"
src="https://github.com/user-attachments/assets/b029c5f1-0c5c-4119-80ba-dfeabe25927e">

This PR updates all of the affected places in Tailwind to use `in oklab`
instead of `in oklch` which then renders everything as expected in all
browsers.

The big unfortunate change here is changing the default behavior of
gradient utilities like `bg-linear-to-r` to use `in oklab` instead of
`in oklch`. This means you get muddier gradients by default when
creating a gradient between two regular colors (no transparent or gray),
like how they looked in v3:

<img width="740" alt="image"
src="https://github.com/user-attachments/assets/d02e7596-4c99-4ba3-b929-d2db4911c8e9">

This feels worth it though to avoid people getting bitten by this Safari
bug without realizing it, and people can always opt in to using OKLCH
with classes like `bg-linear-to-r/oklch`. The nice thing about making
this opt-in is that no one will opt-in to this when using transparent or
gray because it won't make things look any different/better, and the
only places where it does make things look better _do_ work as expected
in Safari anyways.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -14,6 +14,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
 - Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))
 - Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
+- Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
+
+### Changed
+
+- Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
 
 ## [4.0.0-beta.2] - 2024-11-22
 

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

@@ -521,7 +521,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: color-mix(in oklch, currentColor 50%, transparent);
+    color: color-mix(in oklab, currentColor 50%, transparent);
   }
 
   textarea {
@@ -615,7 +615,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   }
 
   .text-black\\/50 {
-    color: color-mix(in oklch, var(--color-black) 50%, transparent);
+    color: color-mix(in oklab, var(--color-black) 50%, transparent);
   }
 
   .underline {

packages/tailwindcss/preflight.css

@@ -290,7 +290,7 @@ textarea,
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: color-mix(in oklch, currentColor 50%, transparent); /* 2 */
+  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
 }
 
 /*