From a916130d763cd57c23006530aec0fe0adc9edb91 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:57:48 -0500 Subject: [PATCH 1/3] Use oklab instead of oklch for color-mix and gradients --- .../src/__snapshots__/index.test.ts.snap | 4 +- packages/tailwindcss/preflight.css | 2 +- .../src/__snapshots__/utilities.test.ts.snap | 144 ++++----- .../src/compat/legacy-utilities.test.ts | 16 +- .../src/compat/legacy-utilities.ts | 2 +- .../tailwindcss/src/compat/plugin-api.test.ts | 36 +-- .../tailwindcss/src/css-functions.test.ts | 22 +- packages/tailwindcss/src/index.test.ts | 4 +- packages/tailwindcss/src/utilities.test.ts | 283 +++++++++--------- packages/tailwindcss/src/utilities.ts | 4 +- packages/tailwindcss/tests/ui.spec.ts | 32 +- 11 files changed, 272 insertions(+), 277 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 44635110668a..4a2c1032170d 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/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 { diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index f8fe93f22368..a307c6d605ca 100644 --- a/packages/tailwindcss/preflight.css +++ b/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 */ } /* diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 721a5d2976a4..1b51e5fc03e9 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -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 { diff --git a/packages/tailwindcss/src/compat/legacy-utilities.test.ts b/packages/tailwindcss/src/compat/legacy-utilities.test.ts index 3c8e9a543b33..6db8b6df48cf 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.test.ts +++ b/packages/tailwindcss/src/compat/legacy-utilities.test.ts @@ -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)); }" `) diff --git a/packages/tailwindcss/src/compat/legacy-utilities.ts b/packages/tailwindcss/src/compat/legacy-utilities.ts index 5be6d303c239..d86b1770ab6e 100644 --- a/packages/tailwindcss/src/compat/legacy-utilities.ts +++ b/packages/tailwindcss/src/compat/legacy-utilities.ts @@ -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))`), ]) } diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 51b1d9732132..0de2cfa46fad 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -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 / ) 50%, transparent); + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-percentage { - color: color-mix(in oklch, rgba(255 0 0 / ) 50%, transparent); + color: color-mix(in oklab, rgba(255 0 0 / ) 50%, transparent); } .css-variable { - color: color-mix(in oklch, rgba(255 0 0 / ) var(--opacity), transparent); + color: color-mix(in oklab, rgba(255 0 0 / ) 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 / ); @@ -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); }" `) }) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 990a8b989da2..2a13df963ee0 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -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); }" `) }) @@ -909,8 +909,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% .0694782 .00853085 / .1); + outline-color: oklab(79% .0581434 .159748 / .15); } } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 96ed5f7c6bb7..3d21d1102177 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -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); }" `) }) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 331ce448ab67..83af79ff3ab4 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -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 { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 5300967e2b61..9893bf0ae178 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -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) { diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts index 103307d78657..5b3563ed2f03 100644 --- a/packages/tailwindcss/tests/ui.spec.ts +++ b/packages/tailwindcss/tests/ui.spec.ts @@ -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%)', From 9595116a089f3e3bf18bd56e65c6cdb0b595f55a Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:09:27 -0500 Subject: [PATCH 2/3] Update changelog --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76dc831422f6..f0f950a884cc 100644 --- a/CHANGELOG.md +++ b/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 From af5bf4ad21638ac407fa4a38185b5313c43fd78f Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 26 Nov 2024 20:44:35 -0500 Subject: [PATCH 3/3] Update test --- packages/tailwindcss/src/css-functions.test.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 2a13df963ee0..940389c22205 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -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,7 +915,7 @@ describe('in plugins', () => { .my-base-rule { color: oklch(62% .25 30); background-color: oklch(45% .31 264); - border-color: oklab(87% .0694782 .00853085 / .1); + border-color: oklab(87% .07 0 / .1); outline-color: oklab(79% .0581434 .159748 / .15); } }