archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Fixes https://github.com/tailwindlabs/tailwindcss/discussions/15184,
https://github.com/tailwindlabs/tailwindcss/issues/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 <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-11-27 06:18:31 -05:00 committed by GitHub
parent f9355a3493
commit 961e8da8fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 284 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -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

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

@ -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 {

2
packages/tailwindcss/preflight.css
View File

@ -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 */
}
/*

144
packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
View File

@ -63,7 +63,7 @@ exports[`border-* 1`] = `
}
.border-\\[\\#0088cc\\]\\/50 {
border-color: oklch(59.9824% .14119 241.555 / .5);
border-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-\\[color\\:var\\(--my-color\\)\\] {
@ -71,7 +71,7 @@ exports[`border-* 1`] = `
}
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-\\[var\\(--my-color\\)\\] {
@ -79,7 +79,7 @@ exports[`border-* 1`] = `
}
.border-\\[var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-current {
@ -87,7 +87,7 @@ exports[`border-* 1`] = `
}
.border-current\\/50 {
border-color: color-mix(in oklch, currentColor 50%, transparent);
border-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-inherit {
@ -99,19 +99,19 @@ exports[`border-* 1`] = `
}
.border-red-500\\/2\\.5 {
border-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-red-500\\/2\\.25 {
border-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-red-500\\/2\\.75 {
border-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-red-500\\/50 {
border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-transparent {
@ -196,7 +196,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[\\#0088cc\\]\\/50 {
border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
border-bottom-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-b-\\[color\\:var\\(--my-color\\)\\] {
@ -204,7 +204,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-b-\\[var\\(--my-color\\)\\] {
@ -212,7 +212,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-b-current {
@ -220,7 +220,7 @@ exports[`border-b-* 1`] = `
}
.border-b-current\\/50 {
border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-b-inherit {
@ -232,19 +232,19 @@ exports[`border-b-* 1`] = `
}
.border-b-red-500\\/2\\.5 {
border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-b-red-500\\/2\\.25 {
border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-b-red-500\\/2\\.75 {
border-bottom-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-bottom-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-b-red-500\\/50 {
border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-bottom-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-b-transparent {
@ -329,7 +329,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[\\#0088cc\\]\\/50 {
border-inline-end-color: oklch(59.9824% .14119 241.555 / .5);
border-inline-end-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-e-\\[color\\:var\\(--my-color\\)\\] {
@ -337,7 +337,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-e-\\[var\\(--my-color\\)\\] {
@ -345,7 +345,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-e-current {
@ -353,7 +353,7 @@ exports[`border-e-* 1`] = `
}
.border-e-current\\/50 {
border-inline-end-color: color-mix(in oklch, currentColor 50%, transparent);
border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-e-inherit {
@ -365,19 +365,19 @@ exports[`border-e-* 1`] = `
}
.border-e-red-500\\/2\\.5 {
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-e-red-500\\/2\\.25 {
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-e-red-500\\/2\\.75 {
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-e-red-500\\/50 {
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-inline-end-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-e-transparent {
@ -462,7 +462,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[\\#0088cc\\]\\/50 {
border-left-color: oklch(59.9824% .14119 241.555 / .5);
border-left-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-l-\\[color\\:var\\(--my-color\\)\\] {
@ -470,7 +470,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-l-\\[var\\(--my-color\\)\\] {
@ -478,7 +478,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-l-current {
@ -486,7 +486,7 @@ exports[`border-l-* 1`] = `
}
.border-l-current\\/50 {
border-left-color: color-mix(in oklch, currentColor 50%, transparent);
border-left-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-l-inherit {
@ -498,19 +498,19 @@ exports[`border-l-* 1`] = `
}
.border-l-red-500\\/2\\.5 {
border-left-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-left-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-l-red-500\\/2\\.25 {
border-left-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-left-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-l-red-500\\/2\\.75 {
border-left-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-left-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-l-red-500\\/50 {
border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-left-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-l-transparent {
@ -595,7 +595,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[\\#0088cc\\]\\/50 {
border-right-color: oklch(59.9824% .14119 241.555 / .5);
border-right-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-r-\\[color\\:var\\(--my-color\\)\\] {
@ -603,7 +603,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-r-\\[var\\(--my-color\\)\\] {
@ -611,7 +611,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-r-current {
@ -619,7 +619,7 @@ exports[`border-r-* 1`] = `
}
.border-r-current\\/50 {
border-right-color: color-mix(in oklch, currentColor 50%, transparent);
border-right-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-r-inherit {
@ -631,19 +631,19 @@ exports[`border-r-* 1`] = `
}
.border-r-red-500\\/2\\.5 {
border-right-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-right-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-r-red-500\\/2\\.25 {
border-right-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-right-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-r-red-500\\/2\\.75 {
border-right-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-right-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-r-red-500\\/50 {
border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-right-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-r-transparent {
@ -728,7 +728,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[\\#0088cc\\]\\/50 {
border-inline-start-color: oklch(59.9824% .14119 241.555 / .5);
border-inline-start-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-s-\\[color\\:var\\(--my-color\\)\\] {
@ -736,7 +736,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-s-\\[var\\(--my-color\\)\\] {
@ -744,7 +744,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-s-current {
@ -752,7 +752,7 @@ exports[`border-s-* 1`] = `
}
.border-s-current\\/50 {
border-inline-start-color: color-mix(in oklch, currentColor 50%, transparent);
border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-s-inherit {
@ -764,19 +764,19 @@ exports[`border-s-* 1`] = `
}
.border-s-red-500\\/2\\.5 {
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-s-red-500\\/2\\.25 {
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-s-red-500\\/2\\.75 {
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-s-red-500\\/50 {
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-inline-start-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-s-transparent {
@ -861,7 +861,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[\\#0088cc\\]\\/50 {
border-top-color: oklch(59.9824% .14119 241.555 / .5);
border-top-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-t-\\[color\\:var\\(--my-color\\)\\] {
@ -869,7 +869,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-t-\\[var\\(--my-color\\)\\] {
@ -877,7 +877,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-t-current {
@ -885,7 +885,7 @@ exports[`border-t-* 1`] = `
}
.border-t-current\\/50 {
border-top-color: color-mix(in oklch, currentColor 50%, transparent);
border-top-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-t-inherit {
@ -897,19 +897,19 @@ exports[`border-t-* 1`] = `
}
.border-t-red-500\\/2\\.5 {
border-top-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-top-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-t-red-500\\/2\\.25 {
border-top-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-top-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-t-red-500\\/2\\.75 {
border-top-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-top-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-t-red-500\\/50 {
border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-top-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-t-transparent {
@ -994,7 +994,7 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[\\#0088cc\\]\\/50 {
border-inline-color: oklch(59.9824% .14119 241.555 / .5);
border-inline-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-x-\\[color\\:var\\(--my-color\\)\\] {
@ -1002,7 +1002,7 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-x-\\[var\\(--my-color\\)\\] {
@ -1010,7 +1010,7 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-x-current {
@ -1018,7 +1018,7 @@ exports[`border-x-* 1`] = `
}
.border-x-current\\/50 {
border-inline-color: color-mix(in oklch, currentColor 50%, transparent);
border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-x-inherit {
@ -1030,19 +1030,19 @@ exports[`border-x-* 1`] = `
}
.border-x-red-500\\/2\\.5 {
border-inline-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-inline-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-x-red-500\\/2\\.25 {
border-inline-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-inline-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-x-red-500\\/2\\.75 {
border-inline-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-inline-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-x-red-500\\/50 {
border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-inline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-x-transparent {
@ -1127,7 +1127,7 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[\\#0088cc\\]\\/50 {
border-block-color: oklch(59.9824% .14119 241.555 / .5);
border-block-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.border-y-\\[color\\:var\\(--my-color\\)\\] {
@ -1135,7 +1135,7 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-y-\\[var\\(--my-color\\)\\] {
@ -1143,7 +1143,7 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.border-y-current {
@ -1151,7 +1151,7 @@ exports[`border-y-* 1`] = `
}
.border-y-current\\/50 {
border-block-color: color-mix(in oklch, currentColor 50%, transparent);
border-block-color: color-mix(in oklab, currentColor 50%, transparent);
}
.border-y-inherit {
@ -1163,19 +1163,19 @@ exports[`border-y-* 1`] = `
}
.border-y-red-500\\/2\\.5 {
border-block-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-block-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.border-y-red-500\\/2\\.25 {
border-block-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-block-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.border-y-red-500\\/2\\.75 {
border-block-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-block-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.border-y-red-500\\/50 {
border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-block-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.border-y-transparent {

16
packages/tailwindcss/src/compat/legacy-utilities.test.ts
View File

@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
),
).toMatchInlineSnapshot(`
".bg-gradient-to-b {
--tw-gradient-position: to bottom in oklch, ;
--tw-gradient-position: to bottom in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-bl {
--tw-gradient-position: to bottom left in oklch, ;
--tw-gradient-position: to bottom left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-br {
--tw-gradient-position: to bottom right in oklch, ;
--tw-gradient-position: to bottom right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-l {
--tw-gradient-position: to left in oklch, ;
--tw-gradient-position: to left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklch, ;
--tw-gradient-position: to right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-t {
--tw-gradient-position: to top in oklch, ;
--tw-gradient-position: to top in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tl {
--tw-gradient-position: to top left in oklch, ;
--tw-gradient-position: to top left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
--tw-gradient-position: to top right in oklch, ;
--tw-gradient-position: to top right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}"
`)

2
packages/tailwindcss/src/compat/legacy-utilities.ts
View File

@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
['tl', 'top left'],
]) {
designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
decl('--tw-gradient-position', `to ${direction} in oklch,`),
decl('--tw-gradient-position', `to ${direction} in oklab,`),
decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
])
}

36
packages/tailwindcss/src/compat/plugin-api.test.ts
View File

@ -285,13 +285,13 @@ describe('theme', async () => {
expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
".fraction {
color: color-mix(in oklch, #ef4444 50%, transparent);
color: color-mix(in oklab, #ef4444 50%, transparent);
}
.percentage {
color: color-mix(in oklch, #ef4444 50%, transparent);
color: color-mix(in oklab, #ef4444 50%, transparent);
}
.variable {
color: color-mix(in oklch, #ef4444 var(--opacity), transparent);
color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
}
:root {
--color-red-500: #ef4444;
@ -362,22 +362,22 @@ describe('theme', async () => {
]),
).toMatchInlineSnapshot(`
".css-fraction {
color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
}
.css-percentage {
color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
}
.css-variable {
color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
}
.js-fraction {
color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
}
.js-percentage {
color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
}
.js-variable {
color: color-mix(in oklch, rgb(255 0 0 / 1) var(--opacity), transparent);
color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
}
:root {
--color-custom-css: rgba(255 0 0 / <alpha-value>);
@ -3462,7 +3462,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[\\#08c\\]\\/50 {
scrollbar-color: oklch(59.9824% .14119 241.555 / .5);
scrollbar-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.scrollbar-\\[2px\\] {
@ -3625,7 +3625,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[\\#fff\\]\\/50 {
scrollbar-color: oklch(100% 5.96046e-8 none / .5);
scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
}
.scrollbar-\\[2px\\] {
@ -3637,7 +3637,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.scrollbar-\\[length\\:var\\(--my-width\\)\\] {
@ -3649,7 +3649,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.scrollbar-black {
@ -3657,7 +3657,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-black\\/50 {
scrollbar-color: oklch(0% none none / .5);
scrollbar-color: oklab(0% none none / .5);
}"
`)
@ -3723,7 +3723,7 @@ describe('matchUtilities()', () => {
).trim(),
).toMatchInlineSnapshot(`
".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
scrollbar-color: color-mix(in oklch, var(--my-color) 25%, transparent);
scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent);
}
.scrollbar-black {
@ -3731,11 +3731,11 @@ describe('matchUtilities()', () => {
}
.scrollbar-black\\/33 {
scrollbar-color: oklch(0% none none / .33);
scrollbar-color: oklab(0% none none / .33);
}
.scrollbar-black\\/\\[50\\%\\] {
scrollbar-color: oklch(0% none none / .5);
scrollbar-color: oklab(0% none none / .5);
}
.scrollbar-current {
@ -3743,7 +3743,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-current\\/45 {
scrollbar-color: color-mix(in oklch, currentColor 45%, transparent);
scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);
}"
`)
})

30
packages/tailwindcss/src/css-functions.test.ts
View File

@ -152,7 +152,7 @@ describe('theme function', () => {
}
.red {
color: oklch(62.7955% .257683 29.2339 / .75);
color: oklab(62.7955% .224863 .125846 / .75);
}"
`)
})
@ -173,7 +173,7 @@ describe('theme function', () => {
}
.red {
color: oklch(62.7955% .257683 29.2339 / .75);
color: oklab(62.7955% .224863 .125846 / .75);
}"
`)
})
@ -194,7 +194,7 @@ describe('theme function', () => {
}
.red {
color: oklch(62.7955% .257683 29.2339 / .75);
color: oklab(62.7955% .224863 .125846 / .75);
}"
`)
})
@ -215,7 +215,7 @@ describe('theme function', () => {
}
.red {
color: color-mix(in oklch, red var(--opacity), transparent);
color: color-mix(in oklab, red var(--opacity), transparent);
}"
`)
})
@ -237,7 +237,7 @@ describe('theme function', () => {
}
.red {
color: color-mix(in oklch, red var(--opacity, 50%), transparent);
color: color-mix(in oklab, red var(--opacity, 50%), transparent);
}"
`)
})
@ -455,7 +455,7 @@ describe('theme function', () => {
}
.red {
color: oklch(62.7955% .257683 29.2339 / .25);
color: oklab(62.7955% .224863 .125846 / .25);
}"
`)
})
@ -533,11 +533,11 @@ describe('theme function', () => {
).toMatchInlineSnapshot(`
":root {
--color-red-500: red;
--color-foo: oklch(62.7955% .257683 29.2339 / .5);
--color-foo: oklab(62.7955% .224863 .125846 / .5);
}
.red {
color: oklch(62.7955% .257683 29.2339 / .25);
color: oklab(62.7955% .224863 .125846 / .25);
}"
`)
})
@ -581,7 +581,7 @@ describe('theme function', () => {
}
.red {
color: oklch(62.7955% .257683 29.2339 / .5);
color: oklab(62.7955% .224863 .125846 / .5);
}"
`)
})
@ -873,7 +873,13 @@ describe('in plugins', () => {
--color-red: oklch(62% 0.25 30);
--color-orange: oklch(79% 0.17 70);
--color-blue: oklch(45% 0.31 264);
--color-pink: oklch(87% 0.07 7);
/*
Using oklab because Lightning converts the color to oklab when using
color-mix() and the results are off by 0.00000001 between macOS and
Linux.
*/
--color-pink: oklab(87% 0.07 0);
}
@layer utilities {
@tailwind utilities;
@ -909,8 +915,8 @@ describe('in plugins', () => {
.my-base-rule {
color: oklch(62% .25 30);
background-color: oklch(45% .31 264);
border-color: oklch(87% .07 7 / .1);
outline-color: oklch(79% .17 70 / .15);
border-color: oklab(87% .07 0 / .1);
outline-color: oklab(79% .0581434 .159748 / .15);
}
}

4
packages/tailwindcss/src/index.test.ts
View File

@ -182,7 +182,7 @@ describe('arbitrary properties', () => {
it('should generate arbitrary properties with modifiers', async () => {
expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
".\\[color\\:red\\]\\/50 {
color: oklch(62.7955% .257683 29.2339 / .5);
color: oklab(62.7955% .224863 .125846 / .5);
}"
`)
})
@ -194,7 +194,7 @@ describe('arbitrary properties', () => {
it('should generate arbitrary properties with variables and with modifiers', async () => {
expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
".\\[color\\:var\\(--my-color\\)\\]\\/50 {
color: color-mix(in oklch, var(--my-color) 50%, transparent);
color: color-mix(in oklab, var(--my-color) 50%, transparent);
}"
`)
})

283
packages/tailwindcss/src/utilities.test.ts
View File

@ -8373,7 +8373,7 @@ test('accent', async () => {
}
.accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
accent-color: oklch(59.9824% .14119 241.555 / .5);
accent-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.accent-current {
@ -8381,7 +8381,7 @@ test('accent', async () => {
}
.accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
accent-color: color-mix(in oklch, currentColor 50%, transparent);
accent-color: color-mix(in oklab, currentColor 50%, transparent);
}
.accent-inherit {
@ -8393,19 +8393,19 @@ test('accent', async () => {
}
.accent-red-500\\/2\\.5 {
accent-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
accent-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.accent-red-500\\/2\\.25 {
accent-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
accent-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.accent-red-500\\/2\\.75 {
accent-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
accent-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
accent-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
accent-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.accent-transparent {
@ -8488,7 +8488,7 @@ test('caret', async () => {
}
.caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
caret-color: oklch(59.9824% .14119 241.555 / .5);
caret-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.caret-current {
@ -8496,7 +8496,7 @@ test('caret', async () => {
}
.caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
caret-color: color-mix(in oklch, currentColor 50%, transparent);
caret-color: color-mix(in oklab, currentColor 50%, transparent);
}
.caret-inherit {
@ -8508,19 +8508,19 @@ test('caret', async () => {
}
.caret-red-500\\/2\\.5 {
caret-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
caret-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.caret-red-500\\/2\\.25 {
caret-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
caret-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.caret-red-500\\/2\\.75 {
caret-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
caret-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
caret-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
caret-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.caret-transparent {
@ -8601,7 +8601,7 @@ test('divide-color', async () => {
}
:where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
border-color: oklch(59.9824% .14119 241.555 / .5);
border-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
:where(.divide-current > :not(:last-child)) {
@ -8609,7 +8609,7 @@ test('divide-color', async () => {
}
:where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
border-color: color-mix(in oklch, currentColor 50%, transparent);
border-color: color-mix(in oklab, currentColor 50%, transparent);
}
:where(.divide-inherit > :not(:last-child)) {
@ -8621,19 +8621,19 @@ test('divide-color', async () => {
}
:where(.divide-red-500\\/2\\.5 > :not(:last-child)) {
border-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
:where(.divide-red-500\\/2\\.25 > :not(:last-child)) {
border-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
:where(.divide-red-500\\/2\\.75 > :not(:last-child)) {
border-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
:where(.divide-red-500\\/50 > :not(:last-child)), :where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
:where(.divide-transparent > :not(:last-child)) {
@ -10499,7 +10499,7 @@ test('bg', async () => {
}
.bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
background-color: oklch(59.9824% .14119 241.555 / .5);
background-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.bg-\\[color\\:var\\(--some-var\\)\\] {
@ -10507,7 +10507,7 @@ test('bg', async () => {
}
.bg-\\[color\\:var\\(--some-var\\)\\]\\/50, .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
}
.bg-\\[var\\(--some-var\\)\\] {
@ -10515,7 +10515,7 @@ test('bg', async () => {
}
.bg-\\[var\\(--some-var\\)\\]\\/50, .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
}
.bg-current {
@ -10523,11 +10523,11 @@ test('bg', async () => {
}
.bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
background-color: color-mix(in oklch, currentColor 50%, transparent);
background-color: color-mix(in oklab, currentColor 50%, transparent);
}
.bg-current\\/\\[var\\(--bg-opacity\\)\\] {
background-color: color-mix(in oklch, currentColor var(--bg-opacity), transparent);
background-color: color-mix(in oklab, currentColor var(--bg-opacity), transparent);
}
.bg-inherit {
@ -10539,19 +10539,19 @@ test('bg', async () => {
}
.bg-red-500\\/2\\.5 {
background-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
background-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.bg-red-500\\/2\\.25 {
background-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
background-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.bg-red-500\\/2\\.75 {
background-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
background-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
background-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
background-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.bg-transparent {
@ -10563,12 +10563,7 @@ test('bg', async () => {
background-image: conic-gradient(var(--tw-gradient-stops));
}
.-bg-linear-45 {
--tw-gradient-position: calc(45deg * -1) in oklch, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.-bg-linear-45\\/oklab {
.-bg-linear-45, .-bg-linear-45\\/oklab {
--tw-gradient-position: calc(45deg * -1) in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
@ -10644,7 +10639,7 @@ test('bg', async () => {
}
.bg-linear-45 {
--tw-gradient-position: 45deg in oklch, ;
--tw-gradient-position: 45deg in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
@ -10679,27 +10674,27 @@ test('bg', async () => {
}
.bg-linear-to-b {
--tw-gradient-position: to bottom in oklch, ;
--tw-gradient-position: to bottom in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-bl {
--tw-gradient-position: to bottom left in oklch, ;
--tw-gradient-position: to bottom left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-br {
--tw-gradient-position: to bottom right in oklch, ;
--tw-gradient-position: to bottom right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-l {
--tw-gradient-position: to left in oklch, ;
--tw-gradient-position: to left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-r {
--tw-gradient-position: to right in oklch, ;
--tw-gradient-position: to right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
@ -10754,17 +10749,17 @@ test('bg', async () => {
}
.bg-linear-to-t {
--tw-gradient-position: to top in oklch, ;
--tw-gradient-position: to top in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-tl {
--tw-gradient-position: to top left in oklch, ;
--tw-gradient-position: to top left in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-linear-to-tr {
--tw-gradient-position: to top right in oklch, ;
--tw-gradient-position: to top right in oklab, ;
background-image: linear-gradient(var(--tw-gradient-stops));
}
@ -11050,15 +11045,15 @@ test('bg', async () => {
),
).toMatchInlineSnapshot(`
".bg-current\\/custom {
background-color: color-mix(in oklch, currentColor var(--opacity-custom), transparent);
background-color: color-mix(in oklab, currentColor var(--opacity-custom), transparent);
}
.bg-current\\/half {
background-color: color-mix(in oklch, currentColor var(--opacity-half), transparent);
background-color: color-mix(in oklab, currentColor var(--opacity-half), transparent);
}
.\\[color\\:red\\]\\/half {
color: color-mix(in oklch, red var(--opacity-half), transparent);
color: color-mix(in oklab, red var(--opacity-half), transparent);
}"
`)
})
@ -11118,7 +11113,7 @@ test('from', async () => {
}
.from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-from: oklch(59.9824% .14119 241.555 / .5);
--tw-gradient-from: oklab(59.9824% -.0672516 -.124144 / .5);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11128,7 +11123,7 @@ test('from', async () => {
}
.from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11138,7 +11133,7 @@ test('from', async () => {
}
.from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11148,7 +11143,7 @@ test('from', async () => {
}
.from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in oklch, currentColor 50%, transparent);
--tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11163,7 +11158,7 @@ test('from', async () => {
}
.from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-gradient-from: color-mix(in oklab, var(--color-red-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11354,7 +11349,7 @@ test('via', async () => {
}
.via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-via: oklch(59.9824% .14119 241.555 / .5);
--tw-gradient-via: oklab(59.9824% -.0672516 -.124144 / .5);
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
@ -11366,7 +11361,7 @@ test('via', async () => {
}
.via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
@ -11378,7 +11373,7 @@ test('via', async () => {
}
.via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
@ -11390,7 +11385,7 @@ test('via', async () => {
}
.via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in oklch, currentColor 50%, transparent);
--tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
@ -11408,7 +11403,7 @@ test('via', async () => {
}
.via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-gradient-via: color-mix(in oklab, var(--color-red-500) 50%, transparent);
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
@ -11598,7 +11593,7 @@ test('to', async () => {
}
.to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-to: oklch(59.9824% .14119 241.555 / .5);
--tw-gradient-to: oklab(59.9824% -.0672516 -.124144 / .5);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11608,7 +11603,7 @@ test('to', async () => {
}
.to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11618,7 +11613,7 @@ test('to', async () => {
}
.to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11628,7 +11623,7 @@ test('to', async () => {
}
.to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in oklch, currentColor 50%, transparent);
--tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -11643,7 +11638,7 @@ test('to', async () => {
}
.to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
@ -12162,7 +12157,7 @@ test('fill', async () => {
}
.fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
fill: oklch(59.9824% .14119 241.555 / .5);
fill: oklab(59.9824% -.0672516 -.124144 / .5);
}
.fill-current {
@ -12170,7 +12165,7 @@ test('fill', async () => {
}
.fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
fill: color-mix(in oklch, currentColor 50%, transparent);
fill: color-mix(in oklab, currentColor 50%, transparent);
}
.fill-inherit {
@ -12182,19 +12177,19 @@ test('fill', async () => {
}
.fill-red-500\\/2\\.5 {
fill: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
fill: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.fill-red-500\\/2\\.25 {
fill: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
fill: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.fill-red-500\\/2\\.75 {
fill: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
fill: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
fill: color-mix(in oklch, var(--color-red-500) 50%, transparent);
fill: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.fill-transparent {
@ -12283,7 +12278,7 @@ test('stroke', async () => {
}
.stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
stroke: oklch(59.9824% .14119 241.555 / .5);
stroke: oklab(59.9824% -.0672516 -.124144 / .5);
}
.stroke-\\[color\\:var\\(--my-color\\)\\] {
@ -12291,7 +12286,7 @@ test('stroke', async () => {
}
.stroke-\\[color\\:var\\(--my-color\\)\\]\\/50, .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.stroke-\\[var\\(--my-color\\)\\] {
@ -12299,7 +12294,7 @@ test('stroke', async () => {
}
.stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.stroke-current {
@ -12307,7 +12302,7 @@ test('stroke', async () => {
}
.stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
stroke: color-mix(in oklch, currentColor 50%, transparent);
stroke: color-mix(in oklab, currentColor 50%, transparent);
}
.stroke-inherit {
@ -12323,19 +12318,19 @@ test('stroke', async () => {
}
.stroke-red-500\\/2\\.5 {
stroke: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
stroke: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.stroke-red-500\\/2\\.25 {
stroke: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
stroke: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.stroke-red-500\\/2\\.75 {
stroke: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
stroke: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
stroke: color-mix(in oklch, var(--color-red-500) 50%, transparent);
stroke: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.stroke-transparent {
@ -13281,7 +13276,7 @@ test('placeholder', async () => {
}
.placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
color: oklch(59.9824% .14119 241.555 / .5);
color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.placeholder-current::placeholder {
@ -13289,7 +13284,7 @@ test('placeholder', async () => {
}
.placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder {
color: color-mix(in oklch, currentColor 50%, transparent);
color: color-mix(in oklab, currentColor 50%, transparent);
}
.placeholder-inherit::placeholder {
@ -13301,19 +13296,19 @@ test('placeholder', async () => {
}
.placeholder-red-500\\/2\\.5::placeholder {
color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.placeholder-red-500\\/2\\.25::placeholder {
color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.placeholder-red-500\\/2\\.75::placeholder {
color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.placeholder-red-500\\/50::placeholder, .placeholder-red-500\\/\\[0\\.5\\]::placeholder, .placeholder-red-500\\/\\[50\\%\\]::placeholder {
color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.placeholder-transparent::placeholder {
@ -13406,7 +13401,7 @@ test('decoration', async () => {
}
.decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
text-decoration-color: oklch(59.9824% .14119 241.555 / .5);
text-decoration-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.decoration-\\[color\\:var\\(--my-color\\)\\] {
@ -13416,9 +13411,9 @@ test('decoration', async () => {
}
.decoration-\\[color\\:var\\(--my-color\\)\\]\\/50, .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.decoration-\\[var\\(--my-color\\)\\] {
@ -13428,9 +13423,9 @@ test('decoration', async () => {
}
.decoration-\\[var\\(--my-color\\)\\]\\/50, .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in oklch, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.decoration-current {
@ -13438,9 +13433,9 @@ test('decoration', async () => {
}
.decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
}
.decoration-inherit {
@ -13456,9 +13451,9 @@ test('decoration', async () => {
}
.decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
text-decoration-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.decoration-transparent {
@ -15185,7 +15180,7 @@ test('outline', async () => {
}
.outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
outline-color: oklch(59.9824% .14119 241.555 / .5);
outline-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.outline-\\[black\\] {
@ -15193,15 +15188,15 @@ test('outline', async () => {
}
.outline-\\[black\\]\\/50 {
outline-color: oklch(0% none none / .5);
outline-color: oklab(0% none none / .5);
}
.outline-\\[black\\]\\/\\[0\\.5\\] {
outline-color: oklch(0% none none / .5);
outline-color: oklab(0% none none / .5);
}
.outline-\\[black\\]\\/\\[50\\%\\] {
outline-color: oklch(0% none none / .5);
outline-color: oklab(0% none none / .5);
}
.outline-\\[color\\:var\\(--value\\)\\] {
@ -15209,7 +15204,7 @@ test('outline', async () => {
}
.outline-\\[color\\:var\\(--value\\)\\]\\/50, .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
outline-color: color-mix(in oklch, var(--value) 50%, transparent);
outline-color: color-mix(in oklab, var(--value) 50%, transparent);
}
.outline-\\[var\\(--value\\)\\] {
@ -15217,7 +15212,7 @@ test('outline', async () => {
}
.outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
outline-color: color-mix(in oklch, var(--value) 50%, transparent);
outline-color: color-mix(in oklab, var(--value) 50%, transparent);
}
.outline-current {
@ -15225,7 +15220,7 @@ test('outline', async () => {
}
.outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
outline-color: color-mix(in oklch, currentColor 50%, transparent);
outline-color: color-mix(in oklab, currentColor 50%, transparent);
}
.outline-inherit {
@ -15237,7 +15232,7 @@ test('outline', async () => {
}
.outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
outline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
outline-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.outline-transparent {
@ -15617,7 +15612,7 @@ test('text', async () => {
}
.text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
color: oklch(59.9824% .14119 241.555 / .5);
color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.text-\\[color\\:var\\(--my-color\\)\\] {
@ -15625,7 +15620,7 @@ test('text', async () => {
}
.text-\\[color\\:var\\(--my-color\\)\\]\\/50, .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
color: color-mix(in oklch, var(--my-color) 50%, transparent);
color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.text-\\[var\\(--my-color\\)\\] {
@ -15633,7 +15628,7 @@ test('text', async () => {
}
.text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
color: color-mix(in oklch, var(--my-color) 50%, transparent);
color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.text-current {
@ -15641,7 +15636,7 @@ test('text', async () => {
}
.text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
color: color-mix(in oklch, currentColor 50%, transparent);
color: color-mix(in oklab, currentColor 50%, transparent);
}
.text-inherit {
@ -15653,19 +15648,19 @@ test('text', async () => {
}
.text-red-500\\/2\\.5 {
color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.text-red-500\\/2\\.25 {
color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.text-red-500\\/2\\.75 {
color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.text-transparent {
@ -15786,7 +15781,7 @@ test('shadow', async () => {
}
.shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-shadow-color: oklch(59.9824% .14119 241.555 / .5);
--tw-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.shadow-\\[color\\:var\\(--value\\)\\] {
@ -15794,7 +15789,7 @@ test('shadow', async () => {
}
.shadow-\\[color\\:var\\(--value\\)\\]\\/50, .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
--tw-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
--tw-shadow-color: color-mix(in oklab, var(--value) 50%, transparent);
}
.shadow-current {
@ -15802,7 +15797,7 @@ test('shadow', async () => {
}
.shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
--tw-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
--tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
}
.shadow-inherit {
@ -15814,19 +15809,19 @@ test('shadow', async () => {
}
.shadow-red-500\\/2\\.5 {
--tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
--tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.shadow-red-500\\/2\\.25 {
--tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
--tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.shadow-red-500\\/2\\.75 {
--tw-shadow-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
--tw-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
--tw-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.shadow-transparent {
@ -16029,7 +16024,7 @@ test('inset-shadow', async () => {
}
.inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-inset-shadow-color: oklch(59.9824% .14119 241.555 / .5);
--tw-inset-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.inset-shadow-\\[color\\:var\\(--value\\)\\] {
@ -16037,7 +16032,7 @@ test('inset-shadow', async () => {
}
.inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
--tw-inset-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, var(--value) 50%, transparent);
}
.inset-shadow-current {
@ -16045,7 +16040,7 @@ test('inset-shadow', async () => {
}
.inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
--tw-inset-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
}
.inset-shadow-inherit {
@ -16057,19 +16052,19 @@ test('inset-shadow', async () => {
}
.inset-shadow-red-500\\/2\\.5 {
--tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.inset-shadow-red-500\\/2\\.25 {
--tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.inset-shadow-red-500\\/2\\.75 {
--tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
--tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.inset-shadow-transparent {
@ -16278,7 +16273,7 @@ test('ring', async () => {
}
.ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-ring-color: oklch(59.9824% .14119 241.555 / .5);
--tw-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.ring-\\[color\\:var\\(--my-color\\)\\] {
@ -16286,7 +16281,7 @@ test('ring', async () => {
}
.ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.ring-\\[var\\(--my-color\\)\\] {
@ -16294,7 +16289,7 @@ test('ring', async () => {
}
.ring-\\[var\\(--my-color\\)\\]\\/50, .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.ring-current {
@ -16302,7 +16297,7 @@ test('ring', async () => {
}
.ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in oklch, currentColor 50%, transparent);
--tw-ring-color: color-mix(in oklab, currentColor 50%, transparent);
}
.ring-inherit {
@ -16314,19 +16309,19 @@ test('ring', async () => {
}
.ring-red-500\\/2\\.5 {
--tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
--tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.ring-red-500\\/2\\.25 {
--tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
--tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.ring-red-500\\/2\\.75 {
--tw-ring-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
--tw-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.ring-transparent {
@ -16553,7 +16548,7 @@ test('inset-ring', async () => {
}
.inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-inset-ring-color: oklch(59.9824% .14119 241.555 / .5);
--tw-inset-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@ -16561,7 +16556,7 @@ test('inset-ring', async () => {
}
.inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.inset-ring-\\[var\\(--my-color\\)\\] {
@ -16569,7 +16564,7 @@ test('inset-ring', async () => {
}
.inset-ring-\\[var\\(--my-color\\)\\]\\/50, .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.inset-ring-current {
@ -16577,7 +16572,7 @@ test('inset-ring', async () => {
}
.inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {
--tw-inset-ring-color: color-mix(in oklch, currentColor 50%, transparent);
--tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent);
}
.inset-ring-inherit {
@ -16589,19 +16584,19 @@ test('inset-ring', async () => {
}
.inset-ring-red-500\\/2\\.5 {
--tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.5%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.5%, transparent);
}
.inset-ring-red-500\\/2\\.25 {
--tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.25%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.25%, transparent);
}
.inset-ring-red-500\\/2\\.75 {
--tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 2.75%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 2.75%, transparent);
}
.inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
--tw-inset-ring-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.inset-ring-transparent {
@ -16816,7 +16811,7 @@ test('ring-offset', async () => {
}
.ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-ring-offset-color: oklch(59.9824% .14119 241.555 / .5);
--tw-ring-offset-color: oklab(59.9824% -.0672516 -.124144 / .5);
}
.ring-offset-\\[color\\:var\\(--my-color\\)\\] {
@ -16824,7 +16819,7 @@ test('ring-offset', async () => {
}
.ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.ring-offset-\\[var\\(--my-color\\)\\] {
@ -16832,7 +16827,7 @@ test('ring-offset', async () => {
}
.ring-offset-\\[var\\(--my-color\\)\\]\\/50, .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
--tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
}
.ring-offset-current {
@ -16840,7 +16835,7 @@ test('ring-offset', async () => {
}
.ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {
--tw-ring-offset-color: color-mix(in oklch, currentColor 50%, transparent);
--tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent);
}
.ring-offset-inherit {
@ -16852,7 +16847,7 @@ test('ring-offset', async () => {
}
.ring-offset-red-500\\/50, .ring-offset-red-500\\/\\[0\\.5\\], .ring-offset-red-500\\/\\[50\\%\\] {
--tw-ring-offset-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
}
.ring-offset-transparent {

4
packages/tailwindcss/src/utilities.ts
View File

@ -118,7 +118,7 @@ export function withAlpha(value: string, alpha: string): string {
alpha = `${alphaAsNumber * 100}%`
}
return `color-mix(in oklch, ${value} ${alpha}, transparent)`
return `color-mix(in oklab, ${value} ${alpha}, transparent)`
}
/**
@ -2320,7 +2320,7 @@ export function createUtilities(theme: Theme) {
])
function resolveInterpolationModifier(modifier: CandidateModifier | null) {
let interpolationMethod = 'in oklch'
let interpolationMethod = 'in oklab'
if (modifier?.kind === 'named') {
switch (modifier.value) {

32
packages/tailwindcss/tests/ui.spec.ts
View File

@ -30,40 +30,40 @@ test('touch action', async ({ page }) => {
for (let [classes, expected] of [
[
'bg-linear-to-r from-red',
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
],
[
'bg-linear-to-r via-red',
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)',
],
[
'bg-linear-to-r to-red',
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)',
],
[
'bg-linear-to-r from-red to-blue',
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
],
[
'bg-linear-45 from-red to-blue',
'linear-gradient(45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
],
[
'-bg-linear-45 from-red to-blue',
// Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
// for both options.
[
'linear-gradient(-45deg in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(calc(-45deg) in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(-45deg in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(calc(-45deg) in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
],
],
[
'bg-linear-to-r via-red to-blue',
'linear-gradient(to right in oklch, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
],
[
'bg-linear-to-r from-red via-green to-blue',
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
],
[
'bg-linear-[to_right,var(--color-red),var(--color-green),var(--color-blue)]',
@ -91,13 +91,13 @@ test('background gradient, going from 2 to 3', async ({ page }) => {
)
expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
)
await page.locator('#x').hover()
expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
)
})
@ -112,21 +112,21 @@ test('background gradient, going from 3 to 2', async ({ page }) => {
)
expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)',
)
await page.locator('#x').hover()
expect(await getPropertyValue('#x', 'background-image')).toEqual(
'linear-gradient(to right in oklch, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
'linear-gradient(to right in oklab, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
)
})
for (let [classes, expected] of [
['bg-conic from-red', 'conic-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
['bg-conic from-red', 'conic-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
[
'bg-conic-45 from-red',
'conic-gradient(from 45deg in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
'conic-gradient(from 45deg in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',
],
[
'bg-conic-[from_45deg] from-red',
@ -148,7 +148,7 @@ for (let [classes, expected] of [
}
for (let [classes, expected] of [
['bg-radial from-red', 'radial-gradient(in oklch, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
['bg-radial from-red', 'radial-gradient(in oklab, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)'],
[
'bg-radial-[at_0%_0%] from-red',
'radial-gradient(at 0% 0%, rgb(255, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)',