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 0 instead of none in OKLCH values (#14741)

Browse Source 
This PR updates all of our OKCLH colors to use `0` instead of `none` due
to weird behavior in Chrome where using `color-mix` with colors using
`none` produces unexpected results:

<img width="1110" alt="image"
src="https://github.com/user-attachments/assets/2272e494-500b-4f75-b5c1-d41c714f0339">

Both `none` and `0` behave as expected in Safari and Firefox so
suspecting this is a bug in Chrome rather than spec'd behavior.

Fixes #14740

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-10-21 15:54:27 -04:00 committed by GitHub
parent 5ce37c45c2
commit 1c5bb39d60
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 261 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

22
integrations/upgrade/js-config.test.ts
View File

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

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

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

2
packages/tailwindcss/preflight.css
View File

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

24
packages/tailwindcss/src/__snapshots__/index.test.ts.snap
View File

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

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

@ -63,7 +63,7 @@ exports[`border-* 1`] = `
}
.border-\\[\\#0088cc\\]\\/50 {
border-color: #0088cc80;
border-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-\\[color\\:var\\(--my-color\\)\\] {
@ -71,7 +71,7 @@ exports[`border-* 1`] = `
}
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-color: color-mix(in oklch, 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 srgb, var(--my-color) 50%, transparent);
border-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-current {
@ -87,7 +87,7 @@ exports[`border-* 1`] = `
}
.border-current\\/50 {
border-color: color-mix(in srgb, currentColor 50%, transparent);
border-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-inherit {
@ -99,7 +99,7 @@ exports[`border-* 1`] = `
}
.border-red-500\\/50 {
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-transparent {
@ -184,7 +184,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[\\#0088cc\\]\\/50 {
border-bottom-color: #0088cc80;
border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-b-\\[color\\:var\\(--my-color\\)\\] {
@ -192,7 +192,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-b-\\[var\\(--my-color\\)\\] {
@ -200,7 +200,7 @@ exports[`border-b-* 1`] = `
}
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-b-current {
@ -208,7 +208,7 @@ exports[`border-b-* 1`] = `
}
.border-b-current\\/50 {
border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-b-inherit {
@ -220,7 +220,7 @@ exports[`border-b-* 1`] = `
}
.border-b-red-500\\/50 {
border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-b-transparent {
@ -305,7 +305,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[\\#0088cc\\]\\/50 {
border-inline-end-color: #0088cc80;
border-inline-end-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-e-\\[color\\:var\\(--my-color\\)\\] {
@ -313,7 +313,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-e-\\[var\\(--my-color\\)\\] {
@ -321,7 +321,7 @@ exports[`border-e-* 1`] = `
}
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-inline-end-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-e-current {
@ -329,7 +329,7 @@ exports[`border-e-* 1`] = `
}
.border-e-current\\/50 {
border-inline-end-color: color-mix(in srgb, currentColor 50%, transparent);
border-inline-end-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-e-inherit {
@ -341,7 +341,7 @@ exports[`border-e-* 1`] = `
}
.border-e-red-500\\/50 {
border-inline-end-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-inline-end-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-e-transparent {
@ -426,7 +426,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[\\#0088cc\\]\\/50 {
border-left-color: #0088cc80;
border-left-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-l-\\[color\\:var\\(--my-color\\)\\] {
@ -434,7 +434,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-l-\\[var\\(--my-color\\)\\] {
@ -442,7 +442,7 @@ exports[`border-l-* 1`] = `
}
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-l-current {
@ -450,7 +450,7 @@ exports[`border-l-* 1`] = `
}
.border-l-current\\/50 {
border-left-color: color-mix(in srgb, currentColor 50%, transparent);
border-left-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-l-inherit {
@ -462,7 +462,7 @@ exports[`border-l-* 1`] = `
}
.border-l-red-500\\/50 {
border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-l-transparent {
@ -547,7 +547,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[\\#0088cc\\]\\/50 {
border-right-color: #0088cc80;
border-right-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-r-\\[color\\:var\\(--my-color\\)\\] {
@ -555,7 +555,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-r-\\[var\\(--my-color\\)\\] {
@ -563,7 +563,7 @@ exports[`border-r-* 1`] = `
}
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-r-current {
@ -571,7 +571,7 @@ exports[`border-r-* 1`] = `
}
.border-r-current\\/50 {
border-right-color: color-mix(in srgb, currentColor 50%, transparent);
border-right-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-r-inherit {
@ -583,7 +583,7 @@ exports[`border-r-* 1`] = `
}
.border-r-red-500\\/50 {
border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-r-transparent {
@ -668,7 +668,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[\\#0088cc\\]\\/50 {
border-inline-start-color: #0088cc80;
border-inline-start-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-s-\\[color\\:var\\(--my-color\\)\\] {
@ -676,7 +676,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-s-\\[var\\(--my-color\\)\\] {
@ -684,7 +684,7 @@ exports[`border-s-* 1`] = `
}
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-inline-start-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-s-current {
@ -692,7 +692,7 @@ exports[`border-s-* 1`] = `
}
.border-s-current\\/50 {
border-inline-start-color: color-mix(in srgb, currentColor 50%, transparent);
border-inline-start-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-s-inherit {
@ -704,7 +704,7 @@ exports[`border-s-* 1`] = `
}
.border-s-red-500\\/50 {
border-inline-start-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-inline-start-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-s-transparent {
@ -789,7 +789,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[\\#0088cc\\]\\/50 {
border-top-color: #0088cc80;
border-top-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-t-\\[color\\:var\\(--my-color\\)\\] {
@ -797,7 +797,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-t-\\[var\\(--my-color\\)\\] {
@ -805,7 +805,7 @@ exports[`border-t-* 1`] = `
}
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-t-current {
@ -813,7 +813,7 @@ exports[`border-t-* 1`] = `
}
.border-t-current\\/50 {
border-top-color: color-mix(in srgb, currentColor 50%, transparent);
border-top-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-t-inherit {
@ -825,7 +825,7 @@ exports[`border-t-* 1`] = `
}
.border-t-red-500\\/50 {
border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-t-transparent {
@ -931,8 +931,8 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[\\#0088cc\\]\\/50 {
border-left-color: #0088cc80;
border-right-color: #0088cc80;
border-left-color: oklch(59.9824% .14119 241.555 / .5);
border-right-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-x-\\[color\\:var\\(--my-color\\)\\] {
@ -941,8 +941,8 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-x-\\[var\\(--my-color\\)\\] {
@ -951,8 +951,8 @@ exports[`border-x-* 1`] = `
}
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-x-current {
@ -961,8 +961,8 @@ exports[`border-x-* 1`] = `
}
.border-x-current\\/50 {
border-left-color: color-mix(in srgb, currentColor 50%, transparent);
border-right-color: color-mix(in srgb, currentColor 50%, transparent);
border-left-color: color-mix(in oklch, currentColor 50%, transparent);
border-right-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-x-inherit {
@ -976,8 +976,8 @@ exports[`border-x-* 1`] = `
}
.border-x-red-500\\/50 {
border-left-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-right-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-x-transparent {
@ -1084,8 +1084,8 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[\\#0088cc\\]\\/50 {
border-top-color: #0088cc80;
border-bottom-color: #0088cc80;
border-top-color: oklch(59.9824% .14119 241.555 / .5);
border-bottom-color: oklch(59.9824% .14119 241.555 / .5);
}
.border-y-\\[color\\:var\\(--my-color\\)\\] {
@ -1094,8 +1094,8 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-y-\\[var\\(--my-color\\)\\] {
@ -1104,8 +1104,8 @@ exports[`border-y-* 1`] = `
}
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.border-y-current {
@ -1114,8 +1114,8 @@ exports[`border-y-* 1`] = `
}
.border-y-current\\/50 {
border-top-color: color-mix(in srgb, currentColor 50%, transparent);
border-bottom-color: color-mix(in srgb, currentColor 50%, transparent);
border-top-color: color-mix(in oklch, currentColor 50%, transparent);
border-bottom-color: color-mix(in oklch, currentColor 50%, transparent);
}
.border-y-inherit {
@ -1129,8 +1129,8 @@ exports[`border-y-* 1`] = `
}
.border-y-red-500\\/50 {
border-top-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.border-y-transparent {

24
packages/tailwindcss/src/compat/colors.ts
View File

@ -31,7 +31,7 @@ export default {
'950': 'oklch(0.13 0.028 261.692)',
},
zinc: {
'50': 'oklch(0.985 0 none)',
'50': 'oklch(0.985 0 0)',
'100': 'oklch(0.967 0.001 286.375)',
'200': 'oklch(0.92 0.004 286.32)',
'300': 'oklch(0.871 0.006 286.286)',
@ -44,17 +44,17 @@ export default {
'950': 'oklch(0.141 0.005 285.823)',
},
neutral: {
'50': 'oklch(0.985 0 none)',
'100': 'oklch(0.97 0 none)',
'200': 'oklch(0.922 0 none)',
'300': 'oklch(0.87 0 none)',
'400': 'oklch(0.708 0 none)',
'500': 'oklch(0.556 0 none)',
'600': 'oklch(0.439 0 none)',
'700': 'oklch(0.371 0 none)',
'800': 'oklch(0.269 0 none)',
'900': 'oklch(0.205 0 none)',
'950': 'oklch(0.145 0 none)',
'50': 'oklch(0.985 0 0)',
'100': 'oklch(0.97 0 0)',
'200': 'oklch(0.922 0 0)',
'300': 'oklch(0.87 0 0)',
'400': 'oklch(0.708 0 0)',
'500': 'oklch(0.556 0 0)',
'600': 'oklch(0.439 0 0)',
'700': 'oklch(0.371 0 0)',
'800': 'oklch(0.269 0 0)',
'900': 'oklch(0.205 0 0)',
'950': 'oklch(0.145 0 0)',
},
stone: {
'50': 'oklch(0.985 0.001 106.423)',

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

@ -252,13 +252,13 @@ describe('theme', async () => {
expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
".fraction {
color: color-mix(in srgb, #ef4444 50%, transparent);
color: color-mix(in oklch, #ef4444 50%, transparent);
}
.percentage {
color: color-mix(in srgb, #ef4444 50%, transparent);
color: color-mix(in oklch, #ef4444 50%, transparent);
}
.variable {
color: color-mix(in srgb, #ef4444 calc(var(--opacity) * 100%), transparent);
color: color-mix(in oklch, #ef4444 calc(var(--opacity) * 100%), transparent);
}
:root {
--color-red-500: #ef4444;
@ -3017,7 +3017,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[\\#08c\\]\\/50 {
scrollbar-color: #0088cc80;
scrollbar-color: oklch(59.9824% .14119 241.555 / .5);
}
.scrollbar-\\[2px\\] {
@ -3180,7 +3180,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[\\#fff\\]\\/50 {
scrollbar-color: #ffffff80;
scrollbar-color: oklch(100% 5.96046e-8 none / .5);
}
.scrollbar-\\[2px\\] {
@ -3192,7 +3192,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
scrollbar-color: color-mix(in srgb, var(--my-color) 50%, transparent);
scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.scrollbar-\\[length\\:var\\(--my-width\\)\\] {
@ -3204,7 +3204,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
scrollbar-color: color-mix(in srgb, var(--my-color) 50%, transparent);
scrollbar-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.scrollbar-black {
@ -3212,7 +3212,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-black\\/50 {
scrollbar-color: #00000080;
scrollbar-color: oklch(0% none none / .5);
}"
`)
@ -3278,7 +3278,7 @@ describe('matchUtilities()', () => {
).trim(),
).toMatchInlineSnapshot(`
".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
scrollbar-color: color-mix(in srgb, var(--my-color) 25%, transparent);
scrollbar-color: color-mix(in oklch, var(--my-color) 25%, transparent);
}
.scrollbar-black {
@ -3286,11 +3286,11 @@ describe('matchUtilities()', () => {
}
.scrollbar-black\\/33 {
scrollbar-color: #00000054;
scrollbar-color: oklch(0% none none / .33);
}
.scrollbar-black\\/\\[50\\%\\] {
scrollbar-color: #00000080;
scrollbar-color: oklch(0% none none / .5);
}
.scrollbar-current {
@ -3298,7 +3298,7 @@ describe('matchUtilities()', () => {
}
.scrollbar-current\\/45 {
scrollbar-color: color-mix(in srgb, currentColor 45%, transparent);
scrollbar-color: color-mix(in oklch, currentColor 45%, transparent);
}"
`)
})

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

@ -152,7 +152,7 @@ describe('theme function', () => {
}
.red {
color: #ff0000bf;
color: oklch(62.7955% .257683 29.2339 / .75);
}"
`)
})
@ -173,7 +173,7 @@ describe('theme function', () => {
}
.red {
color: #ff0000bf;
color: oklch(62.7955% .257683 29.2339 / .75);
}"
`)
})
@ -194,7 +194,7 @@ describe('theme function', () => {
}
.red {
color: #ff0000bf;
color: oklch(62.7955% .257683 29.2339 / .75);
}"
`)
})
@ -215,7 +215,7 @@ describe('theme function', () => {
}
.red {
color: color-mix(in srgb, red calc(var(--opacity) * 100%), transparent);
color: color-mix(in oklch, red calc(var(--opacity) * 100%), transparent);
}"
`)
})
@ -237,7 +237,7 @@ describe('theme function', () => {
}
.red {
color: color-mix(in srgb, red calc(var(--opacity, 50%) * 100%), transparent);
color: color-mix(in oklch, red calc(var(--opacity, 50%) * 100%), transparent);
}"
`)
})
@ -455,7 +455,7 @@ describe('theme function', () => {
}
.red {
color: #ff000040;
color: oklch(62.7955% .257683 29.2339 / .25);
}"
`)
})
@ -513,11 +513,11 @@ describe('theme function', () => {
).toMatchInlineSnapshot(`
":root {
--color-red-500: red;
--color-foo: #ff000080;
--color-foo: oklch(62.7955% .257683 29.2339 / .5);
}
.red {
color: #ff000040;
color: oklch(62.7955% .257683 29.2339 / .25);
}"
`)
})
@ -561,7 +561,7 @@ describe('theme function', () => {
}
.red {
color: #ff000080;
color: oklch(62.7955% .257683 29.2339 / .5);
}"
`)
})
@ -849,10 +849,10 @@ describe('in plugins', () => {
@layer base, utilities;
@plugin "my-plugin";
@theme reference {
--color-red: red;
--color-orange: orange;
--color-blue: blue;
--color-pink: pink;
--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);
}
@layer utilities {
@tailwind utilities;
@ -886,16 +886,16 @@ describe('in plugins', () => {
expect(optimizeCss(compiled.build(['my-utility'])).trim()).toMatchInlineSnapshot(`
"@layer base {
.my-base-rule {
color: red;
background-color: #00f;
border-color: #ffc0cb1a;
outline-color: #ffa50026;
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);
}
}
@layer utilities {
.my-utility {
color: red;
color: oklch(62% .25 30);
}
}"
`)

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

@ -129,7 +129,7 @@ describe('arbitrary properties', () => {
it('should generate arbitrary properties with modifiers', async () => {
expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
".\\[color\\:red\\]\\/50 {
color: #ff000080;
color: oklch(62.7955% .257683 29.2339 / .5);
}"
`)
})
@ -141,7 +141,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 srgb, var(--my-color) 50%, transparent);
color: color-mix(in oklch, var(--my-color) 50%, transparent);
}"
`)
})

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

@ -7438,7 +7438,7 @@ test('accent', async () => {
}
.accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
accent-color: #0088cc80;
accent-color: oklch(59.9824% .14119 241.555 / .5);
}
.accent-current {
@ -7446,7 +7446,7 @@ test('accent', async () => {
}
.accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
accent-color: color-mix(in srgb, currentColor 50%, transparent);
accent-color: color-mix(in oklch, currentColor 50%, transparent);
}
.accent-inherit {
@ -7458,7 +7458,7 @@ test('accent', async () => {
}
.accent-red-500\\/50, .accent-red-500\\/\\[0\\.5\\], .accent-red-500\\/\\[50\\%\\] {
accent-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
accent-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.accent-transparent {
@ -7538,7 +7538,7 @@ test('caret', async () => {
}
.caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
caret-color: #0088cc80;
caret-color: oklch(59.9824% .14119 241.555 / .5);
}
.caret-current {
@ -7546,7 +7546,7 @@ test('caret', async () => {
}
.caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
caret-color: color-mix(in srgb, currentColor 50%, transparent);
caret-color: color-mix(in oklch, currentColor 50%, transparent);
}
.caret-inherit {
@ -7558,7 +7558,7 @@ test('caret', async () => {
}
.caret-red-500\\/50, .caret-red-500\\/\\[0\\.5\\], .caret-red-500\\/\\[50\\%\\] {
caret-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
caret-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.caret-transparent {
@ -7636,15 +7636,15 @@ test('divide-color', async () => {
}
:where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)) {
border-color: #0088cc80;
border-color: oklch(59.9824% .14119 241.555 / .5);
}
:where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)) {
border-color: #0088cc80;
border-color: oklch(59.9824% .14119 241.555 / .5);
}
:where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
border-color: #0088cc80;
border-color: oklch(59.9824% .14119 241.555 / .5);
}
:where(.divide-current > :not(:last-child)) {
@ -7652,15 +7652,15 @@ test('divide-color', async () => {
}
:where(.divide-current\\/50 > :not(:last-child)) {
border-color: color-mix(in srgb, currentColor 50%, transparent);
border-color: color-mix(in oklch, currentColor 50%, transparent);
}
:where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
border-color: color-mix(in srgb, currentColor 50%, transparent);
border-color: color-mix(in oklch, currentColor 50%, transparent);
}
:where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
border-color: color-mix(in srgb, currentColor 50%, transparent);
border-color: color-mix(in oklch, currentColor 50%, transparent);
}
:where(.divide-inherit > :not(:last-child)) {
@ -7672,15 +7672,15 @@ test('divide-color', async () => {
}
:where(.divide-red-500\\/50 > :not(:last-child)) {
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
:where(.divide-red-500\\/\\[0\\.5\\] > :not(:last-child)) {
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
:where(.divide-red-500\\/\\[50\\%\\] > :not(:last-child)) {
border-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
:where(.divide-transparent > :not(:last-child)) {
@ -9509,7 +9509,7 @@ test('bg', async () => {
}
.bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
background-color: #0088cc80;
background-color: oklch(59.9824% .14119 241.555 / .5);
}
.bg-\\[color\\:var\\(--some-var\\)\\] {
@ -9517,7 +9517,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 srgb, var(--some-var) 50%, transparent);
background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
}
.bg-\\[var\\(--some-var\\)\\] {
@ -9525,7 +9525,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 srgb, var(--some-var) 50%, transparent);
background-color: color-mix(in oklch, var(--some-var) 50%, transparent);
}
.bg-current {
@ -9533,11 +9533,11 @@ test('bg', async () => {
}
.bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
background-color: color-mix(in srgb, currentColor 50%, transparent);
background-color: color-mix(in oklch, currentColor 50%, transparent);
}
.bg-current\\/\\[var\\(--bg-opacity\\)\\] {
background-color: color-mix(in srgb, currentColor calc(var(--bg-opacity) * 100%), transparent);
background-color: color-mix(in oklch, currentColor calc(var(--bg-opacity) * 100%), transparent);
}
.bg-inherit {
@ -9549,7 +9549,7 @@ test('bg', async () => {
}
.bg-red-500\\/50, .bg-red-500\\/\\[0\\.5\\], .bg-red-500\\/\\[50\\%\\] {
background-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
background-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.bg-transparent {
@ -9977,7 +9977,7 @@ test('from', async () => {
}
.from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-from: #0088cc80;
--tw-gradient-from: oklch(59.9824% .14119 241.555 / .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));
}
@ -9987,7 +9987,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-from: color-mix(in oklch, 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));
}
@ -9997,7 +9997,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-from: color-mix(in oklch, 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));
}
@ -10007,7 +10007,7 @@ test('from', async () => {
}
.from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in srgb, currentColor 50%, transparent);
--tw-gradient-from: color-mix(in oklch, 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));
}
@ -10022,7 +10022,7 @@ test('from', async () => {
}
.from-red-500\\/50, .from-red-500\\/\\[0\\.5\\], .from-red-500\\/\\[50\\%\\] {
--tw-gradient-from: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-gradient-from: color-mix(in oklch, var(--color-red-500, #ef4444) 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));
}
@ -10213,7 +10213,7 @@ test('via', async () => {
}
.via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-via: #0088cc80;
--tw-gradient-via: oklch(59.9824% .14119 241.555 / .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);
}
@ -10225,7 +10225,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-via: color-mix(in oklch, 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);
}
@ -10237,7 +10237,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-via: color-mix(in oklch, 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);
}
@ -10249,7 +10249,7 @@ test('via', async () => {
}
.via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in srgb, currentColor 50%, transparent);
--tw-gradient-via: color-mix(in oklch, 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);
}
@ -10267,7 +10267,7 @@ test('via', async () => {
}
.via-red-500\\/50, .via-red-500\\/\\[0\\.5\\], .via-red-500\\/\\[50\\%\\] {
--tw-gradient-via: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-gradient-via: color-mix(in oklch, var(--color-red-500, #ef4444) 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);
}
@ -10457,7 +10457,7 @@ test('to', async () => {
}
.to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-gradient-to: #0088cc80;
--tw-gradient-to: oklch(59.9824% .14119 241.555 / .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));
}
@ -10467,7 +10467,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-to: color-mix(in oklch, 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));
}
@ -10477,7 +10477,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 srgb, var(--my-color) 50%, transparent);
--tw-gradient-to: color-mix(in oklch, 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));
}
@ -10487,7 +10487,7 @@ test('to', async () => {
}
.to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in srgb, currentColor 50%, transparent);
--tw-gradient-to: color-mix(in oklch, 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));
}
@ -10502,7 +10502,7 @@ test('to', async () => {
}
.to-red-500\\/50, .to-red-500\\/\\[0\\.5\\], .to-red-500\\/\\[50\\%\\] {
--tw-gradient-to: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-gradient-to: color-mix(in oklch, var(--color-red-500, #ef4444) 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));
}
@ -11018,7 +11018,7 @@ test('fill', async () => {
}
.fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
fill: #0088cc80;
fill: oklch(59.9824% .14119 241.555 / .5);
}
.fill-current {
@ -11026,7 +11026,7 @@ test('fill', async () => {
}
.fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
fill: color-mix(in srgb, currentColor 50%, transparent);
fill: color-mix(in oklch, currentColor 50%, transparent);
}
.fill-inherit {
@ -11038,7 +11038,7 @@ test('fill', async () => {
}
.fill-red-500\\/50, .fill-red-500\\/\\[0\\.5\\], .fill-red-500\\/\\[50\\%\\] {
fill: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
fill: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.fill-transparent {
@ -11124,7 +11124,7 @@ test('stroke', async () => {
}
.stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
stroke: #0088cc80;
stroke: oklch(59.9824% .14119 241.555 / .5);
}
.stroke-\\[color\\:var\\(--my-color\\)\\] {
@ -11132,7 +11132,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 srgb, var(--my-color) 50%, transparent);
stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.stroke-\\[var\\(--my-color\\)\\] {
@ -11140,7 +11140,7 @@ test('stroke', async () => {
}
.stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
stroke: color-mix(in srgb, var(--my-color) 50%, transparent);
stroke: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.stroke-current {
@ -11148,7 +11148,7 @@ test('stroke', async () => {
}
.stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
stroke: color-mix(in srgb, currentColor 50%, transparent);
stroke: color-mix(in oklch, currentColor 50%, transparent);
}
.stroke-inherit {
@ -11164,7 +11164,7 @@ test('stroke', async () => {
}
.stroke-red-500\\/50, .stroke-red-500\\/\\[0\\.5\\], .stroke-red-500\\/\\[50\\%\\] {
stroke: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
stroke: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.stroke-transparent {
@ -11972,15 +11972,15 @@ test('placeholder', async () => {
}
.placeholder-\\[\\#0088cc\\]\\/50::placeholder {
color: #0088cc80;
color: oklch(59.9824% .14119 241.555 / .5);
}
.placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder {
color: #0088cc80;
color: oklch(59.9824% .14119 241.555 / .5);
}
.placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
color: #0088cc80;
color: oklch(59.9824% .14119 241.555 / .5);
}
.placeholder-current::placeholder {
@ -11988,15 +11988,15 @@ test('placeholder', async () => {
}
.placeholder-current\\/50::placeholder {
color: color-mix(in srgb, currentColor 50%, transparent);
color: color-mix(in oklch, currentColor 50%, transparent);
}
.placeholder-current\\/\\[0\\.5\\]::placeholder {
color: color-mix(in srgb, currentColor 50%, transparent);
color: color-mix(in oklch, currentColor 50%, transparent);
}
.placeholder-current\\/\\[50\\%\\]::placeholder {
color: color-mix(in srgb, currentColor 50%, transparent);
color: color-mix(in oklch, currentColor 50%, transparent);
}
.placeholder-inherit::placeholder {
@ -12008,15 +12008,15 @@ test('placeholder', async () => {
}
.placeholder-red-500\\/50::placeholder {
color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.placeholder-red-500\\/\\[0\\.5\\]::placeholder {
color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.placeholder-red-500\\/\\[50\\%\\]::placeholder {
color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.placeholder-transparent::placeholder {
@ -12109,7 +12109,7 @@ test('decoration', async () => {
}
.decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
text-decoration-color: #0088cc80;
text-decoration-color: oklch(59.9824% .14119 241.555 / .5);
}
.decoration-\\[color\\:var\\(--my-color\\)\\] {
@ -12118,8 +12118,8 @@ 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 srgb, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in srgb, 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);
}
.decoration-\\[var\\(--my-color\\)\\] {
@ -12128,8 +12128,8 @@ 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 srgb, var(--my-color) 50%, transparent);
text-decoration-color: color-mix(in srgb, 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);
}
.decoration-current {
@ -12137,8 +12137,8 @@ test('decoration', async () => {
}
.decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
}
.decoration-inherit {
@ -12152,8 +12152,8 @@ test('decoration', async () => {
}
.decoration-red-500\\/50, .decoration-red-500\\/\\[0\\.5\\], .decoration-red-500\\/\\[50\\%\\] {
-webkit-text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
text-decoration-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
-webkit-text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
text-decoration-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.decoration-transparent {
@ -13844,15 +13844,23 @@ test('outline', async () => {
}
.outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
outline-color: #0088cc80;
outline-color: oklch(59.9824% .14119 241.555 / .5);
}
.outline-\\[black\\] {
outline-color: #000;
}
.outline-\\[black\\]\\/50, .outline-\\[black\\]\\/\\[0\\.5\\], .outline-\\[black\\]\\/\\[50\\%\\] {
outline-color: #00000080;
.outline-\\[black\\]\\/50 {
outline-color: oklch(0% none none / .5);
}
.outline-\\[black\\]\\/\\[0\\.5\\] {
outline-color: oklch(0% none none / .5);
}
.outline-\\[black\\]\\/\\[50\\%\\] {
outline-color: oklch(0% none none / .5);
}
.outline-\\[color\\:var\\(--value\\)\\] {
@ -13860,7 +13868,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 srgb, var(--value) 50%, transparent);
outline-color: color-mix(in oklch, var(--value) 50%, transparent);
}
.outline-\\[var\\(--value\\)\\] {
@ -13868,7 +13876,7 @@ test('outline', async () => {
}
.outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
outline-color: color-mix(in srgb, var(--value) 50%, transparent);
outline-color: color-mix(in oklch, var(--value) 50%, transparent);
}
.outline-current {
@ -13876,7 +13884,7 @@ test('outline', async () => {
}
.outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
outline-color: color-mix(in srgb, currentColor 50%, transparent);
outline-color: color-mix(in oklch, currentColor 50%, transparent);
}
.outline-inherit {
@ -13888,7 +13896,7 @@ test('outline', async () => {
}
.outline-red-500\\/50, .outline-red-500\\/\\[0\\.5\\], .outline-red-500\\/\\[50\\%\\] {
outline-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
outline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.outline-transparent {
@ -14241,7 +14249,7 @@ test('text', async () => {
}
.text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
color: #0088cc80;
color: oklch(59.9824% .14119 241.555 / .5);
}
.text-\\[color\\:var\\(--my-color\\)\\] {
@ -14249,7 +14257,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 srgb, var(--my-color) 50%, transparent);
color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.text-\\[var\\(--my-color\\)\\] {
@ -14257,7 +14265,7 @@ test('text', async () => {
}
.text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
color: color-mix(in srgb, var(--my-color) 50%, transparent);
color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.text-current {
@ -14265,7 +14273,7 @@ test('text', async () => {
}
.text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
color: color-mix(in srgb, currentColor 50%, transparent);
color: color-mix(in oklch, currentColor 50%, transparent);
}
.text-inherit {
@ -14277,7 +14285,7 @@ test('text', async () => {
}
.text-red-500\\/50, .text-red-500\\/\\[0\\.5\\], .text-red-500\\/\\[50\\%\\] {
color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.text-transparent {
@ -14395,7 +14403,7 @@ test('shadow', async () => {
}
.shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-shadow-color: #0088cc80;
--tw-shadow-color: oklch(59.9824% .14119 241.555 / .5);
}
.shadow-\\[color\\:var\\(--value\\)\\] {
@ -14403,7 +14411,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 srgb, var(--value) 50%, transparent);
--tw-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
}
.shadow-current {
@ -14411,7 +14419,7 @@ test('shadow', async () => {
}
.shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
--tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
--tw-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
}
.shadow-inherit {
@ -14423,7 +14431,7 @@ test('shadow', async () => {
}
.shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
--tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.shadow-transparent {
@ -14623,7 +14631,7 @@ test('inset-shadow', async () => {
}
.inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-inset-shadow-color: #0088cc80;
--tw-inset-shadow-color: oklch(59.9824% .14119 241.555 / .5);
}
.inset-shadow-\\[color\\:var\\(--value\\)\\] {
@ -14631,7 +14639,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 srgb, var(--value) 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklch, var(--value) 50%, transparent);
}
.inset-shadow-current {
@ -14639,7 +14647,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 srgb, currentColor 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklch, currentColor 50%, transparent);
}
.inset-shadow-inherit {
@ -14651,7 +14659,7 @@ test('inset-shadow', async () => {
}
.inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
--tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-inset-shadow-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.inset-shadow-transparent {
@ -14857,7 +14865,7 @@ test('ring', async () => {
}
.ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-ring-color: #0088cc80;
--tw-ring-color: oklch(59.9824% .14119 241.555 / .5);
}
.ring-\\[color\\:var\\(--my-color\\)\\] {
@ -14865,7 +14873,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 srgb, var(--my-color) 50%, transparent);
--tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.ring-\\[var\\(--my-color\\)\\] {
@ -14873,7 +14881,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 srgb, var(--my-color) 50%, transparent);
--tw-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.ring-current {
@ -14881,7 +14889,7 @@ test('ring', async () => {
}
.ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in srgb, currentColor 50%, transparent);
--tw-ring-color: color-mix(in oklch, currentColor 50%, transparent);
}
.ring-inherit {
@ -14893,7 +14901,7 @@ test('ring', async () => {
}
.ring-red-500\\/50, .ring-red-500\\/\\[0\\.5\\], .ring-red-500\\/\\[50\\%\\] {
--tw-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.ring-transparent {
@ -15120,7 +15128,7 @@ test('inset-ring', async () => {
}
.inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-inset-ring-color: #0088cc80;
--tw-inset-ring-color: oklch(59.9824% .14119 241.555 / .5);
}
.inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@ -15128,7 +15136,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 srgb, var(--my-color) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.inset-ring-\\[var\\(--my-color\\)\\] {
@ -15136,7 +15144,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 srgb, var(--my-color) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.inset-ring-current {
@ -15144,7 +15152,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 srgb, currentColor 50%, transparent);
--tw-inset-ring-color: color-mix(in oklch, currentColor 50%, transparent);
}
.inset-ring-inherit {
@ -15156,7 +15164,7 @@ test('inset-ring', async () => {
}
.inset-ring-red-500\\/50, .inset-ring-red-500\\/\\[0\\.5\\], .inset-ring-red-500\\/\\[50\\%\\] {
--tw-inset-ring-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-inset-ring-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.inset-ring-transparent {
@ -15371,7 +15379,7 @@ test('ring-offset', async () => {
}
.ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
--tw-ring-offset-color: #0088cc80;
--tw-ring-offset-color: oklch(59.9824% .14119 241.555 / .5);
}
.ring-offset-\\[color\\:var\\(--my-color\\)\\] {
@ -15379,7 +15387,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 srgb, var(--my-color) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.ring-offset-\\[var\\(--my-color\\)\\] {
@ -15387,7 +15395,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 srgb, var(--my-color) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklch, var(--my-color) 50%, transparent);
}
.ring-offset-current {
@ -15395,7 +15403,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 srgb, currentColor 50%, transparent);
--tw-ring-offset-color: color-mix(in oklch, currentColor 50%, transparent);
}
.ring-offset-inherit {
@ -15407,7 +15415,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 srgb, var(--color-red-500, #ef4444) 50%, transparent);
--tw-ring-offset-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
}
.ring-offset-transparent {

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

@ -119,7 +119,7 @@ export function withAlpha(value: string, alpha: string): string {
alpha = `calc(${alpha} * 100%)`
}
return `color-mix(in srgb, ${value} ${alpha}, transparent)`
return `color-mix(in oklch, ${value} ${alpha}, transparent)`
}
/**

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

@ -214,17 +214,17 @@ test('composing shadow, inset shadow, ring, and inset ring', async ({ page }) =>
page,
html`<div
id="x"
class="shadow shadow-[#f00]/50 inset-shadow inset-shadow-[#0f0]/50 ring ring-[#fff]/50 inset-ring inset-ring-[#00f]/50"
class="shadow shadow-[#f00] inset-shadow inset-shadow-[#0f0] ring ring-[#fff] inset-ring inset-ring-[#00f]"
></div>`,
)
expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
[
'rgba(0, 255, 0, 0.5) 0px 2px 4px 0px inset', // inset-shadow
'rgba(0, 0, 255, 0.5) 0px 0px 0px 1px inset', // inset-ring
'rgb(0, 255, 0) 0px 2px 4px 0px inset', // inset-shadow
'rgb(0, 0, 255) 0px 0px 0px 1px inset', // inset-ring
'rgba(0, 0, 0, 0) 0px 0px 0px 0px', // ring-offset (disabled)
'rgba(255, 255, 255, 0.5) 0px 0px 0px 1px', // ring
'rgba(255, 0, 0, 0.5) 0px 1px 3px 0px, rgba(255, 0, 0, 0.5) 0px 1px 2px -1px', // shadow
'rgb(255, 255, 255) 0px 0px 0px 1px', // ring
'rgb(255, 0, 0) 0px 1px 3px 0px, rgb(255, 0, 0) 0px 1px 2px -1px', // shadow
].join(', '),
)
})

24
packages/tailwindcss/theme.css
View File

@ -44,7 +44,7 @@
--color-gray-900: oklch(0.21 0.034 264.665);
--color-gray-950: oklch(0.13 0.028 261.692);
--color-zinc-50: oklch(0.985 0 none);
--color-zinc-50: oklch(0.985 0 0);
--color-zinc-100: oklch(0.967 0.001 286.375);
--color-zinc-200: oklch(0.92 0.004 286.32);
--color-zinc-300: oklch(0.871 0.006 286.286);
@ -56,17 +56,17 @@
--color-zinc-900: oklch(0.21 0.006 285.885);
--color-zinc-950: oklch(0.141 0.005 285.823);
--color-neutral-50: oklch(0.985 0 none);
--color-neutral-100: oklch(0.97 0 none);
--color-neutral-200: oklch(0.922 0 none);
--color-neutral-300: oklch(0.87 0 none);
--color-neutral-400: oklch(0.708 0 none);
--color-neutral-500: oklch(0.556 0 none);
--color-neutral-600: oklch(0.439 0 none);
--color-neutral-700: oklch(0.371 0 none);
--color-neutral-800: oklch(0.269 0 none);
--color-neutral-900: oklch(0.205 0 none);
--color-neutral-950: oklch(0.145 0 none);
--color-neutral-50: oklch(0.985 0 0);
--color-neutral-100: oklch(0.97 0 0);
--color-neutral-200: oklch(0.922 0 0);
--color-neutral-300: oklch(0.87 0 0);
--color-neutral-400: oklch(0.708 0 0);
--color-neutral-500: oklch(0.556 0 0);
--color-neutral-600: oklch(0.439 0 0);
--color-neutral-700: oklch(0.371 0 0);
--color-neutral-800: oklch(0.269 0 0);
--color-neutral-900: oklch(0.205 0 0);
--color-neutral-950: oklch(0.145 0 0);
--color-stone-50: oklch(0.985 0.001 106.423);
--color-stone-100: oklch(0.97 0.001 106.424);