diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index 8eb60d90286b..6cbaece6621e 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -446,7 +446,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 12b578d4423f..18c2822deafb 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -267,7 +267,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` text-decoration-line: underline; } - @media (width >= 96rem) { + @media (min-width: 96rem) { .\\32 xl\\:font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index fa9d5abbb3d4..f2c21e3a872d 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () = expect(result.css.trim()).toMatchInlineSnapshot(` ".foo { - color: var(--color-red-500, oklch(.637 .237 25.331)); + color: var(--color-red-500, oklch(63.7% .237 25.331)); }" `) }) @@ -267,7 +267,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy ) expect(result.css.trim()).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .foo { bar: baz; } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index d8ef557767a8..91e91b06a262 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -319,7 +319,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index de6b2cde33cd..1e09c7ee7d4c 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -143,7 +143,7 @@ function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: LightningCssFeatures.Nesting, + include: LightningCssFeatures.Nesting | LightningCssFeatures.MediaRangeSyntax, exclude: LightningCssFeatures.LogicalProperties | LightningCssFeatures.DirSelector | diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 049d0f33ed33..d45be4c184ac 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -2,7 +2,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` ":root, :host { - --color-red-500: oklch(.637 .237 25.331); + --color-red-500: oklch(63.7% .237 25.331); --spacing: .25rem; } @@ -254,7 +254,13 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = ` @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { - color: color-mix(in oklab, currentColor 50%, transparent); + color: currentColor; + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + ::placeholder { + color: color-mix(in oklab, currentColor 50%, transparent); + } } } diff --git a/packages/tailwindcss/src/ast.test.ts b/packages/tailwindcss/src/ast.test.ts index 8bd2004ace73..65e3cb4a903c 100644 --- a/packages/tailwindcss/src/ast.test.ts +++ b/packages/tailwindcss/src/ast.test.ts @@ -17,14 +17,14 @@ const css = String.raw it('should pretty print an AST', () => { expect(toCss(optimizeAst(CSS.parse('.foo{color:red;&:hover{color:blue;}}')))) .toMatchInlineSnapshot(` - ".foo { - color: red; - &:hover { - color: blue; + ".foo { + color: red; + &:hover { + color: blue; + } } - } - " - `) + " + `) }) it('allows the placement of context nodes', () => { diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 6b418169ff8e..090279fd4bc1 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -318,7 +318,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (display: grid) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } @@ -337,7 +337,7 @@ test('@supports', async () => { ), ).resolves.toMatchInlineSnapshot(` "@supports (not (display: grid)) and (display: flex) { - @media screen and (width <= 400px) { + @media screen and (max-width: 400px) { a { color: red; } diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 372f5f3e3ae0..0756cc7c15d5 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1156,21 +1156,21 @@ test('utilities must be prefixed', async () => { // Prefixed utilities are generated expect(compiler.build(['tw:underline', 'tw:hover:line-through', 'tw:custom'])) .toMatchInlineSnapshot(` - ".tw\\:custom { - color: red; - } - .tw\\:underline { - text-decoration-line: underline; - } - .tw\\:hover\\:line-through { - &:hover { - @media (hover: hover) { - text-decoration-line: line-through; + ".tw\\:custom { + color: red; + } + .tw\\:underline { + text-decoration-line: underline; + } + .tw\\:hover\\:line-through { + &:hover { + @media (hover: hover) { + text-decoration-line: line-through; + } } } - } - " - `) + " + `) // Non-prefixed utilities are ignored compiler = await compile(input, { diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index b786f2311e28..e6dde07cd30c 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -243,14 +243,14 @@ describe('theme', async () => { expect(compiler.build(['animate-duration-316', 'animate-duration-slow'])) .toMatchInlineSnapshot(` - ".animate-duration-316 { - animation-duration: 316ms; - } - .animate-duration-slow { - animation-duration: 800ms; - } - " - `) + ".animate-duration-316 { + animation-duration: 316ms; + } + .animate-duration-slow { + animation-duration: 800ms; + } + " + `) }) test('plugin theme can have opacity modifiers', async () => { @@ -1734,7 +1734,7 @@ describe('addVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { + @media (max-width: 400px) { @supports (font: bold) { .potato\\:flex:large-potato { display: flex; @@ -2053,19 +2053,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-\\[600px\\]\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2108,19 +2108,19 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\\[500px\\]\\:italic { font-style: italic; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-example\\:italic { font-style: italic; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\\[700px\\]\\:italic { font-style: italic; } @@ -2168,30 +2168,30 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 150px) { - @media (width <= 400px) { + @media (min-width: 150px) { + @media (max-width: 400px) { .testmin-\\[150px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 350px) { + @media (min-width: 100px) { + @media (max-width: 350px) { .testmin-\\[100px\\]\\:testmax-\\[350px\\]\\:order-3 { order: 3; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2238,8 +2238,8 @@ describe('matchVariant', () => { // Expect :focus to come after :hover expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 200px) { + @media (min-width: 100px) { + @media (max-width: 200px) { @media (hover: hover) { .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:hover\\:underline:hover { text-decoration-line: underline; @@ -2292,32 +2292,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2364,28 +2364,28 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width <= 400px) { - @media (width >= 100px) { + @media (max-width: 400px) { + @media (min-width: 100px) { .testmax-\\[400px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } } } - @media (width <= 300px) { - @media (width >= 100px) { + @media (max-width: 300px) { + @media (min-width: 100px) { .testmax-\\[300px\\]\\:testmin-\\[100px\\]\\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline { text-decoration-line: underline; } @@ -2440,32 +2440,32 @@ describe('matchVariant', () => { expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\\[100px\\]\\:testmax-\\[400px\\]\\:order-1 { order: 1; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\\[200px\\]\\:testmax-\\[400px\\]\\:order-2 { order: 2; } } } - @media (width >= 100px) { - @media (width <= 300px) { + @media (min-width: 100px) { + @media (max-width: 300px) { .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-3 { order: 3; } } } - @media (width >= 200px) { - @media (width <= 300px) { + @media (min-width: 200px) { + @media (max-width: 300px) { .testmin-\\[200px\\]\\:testmax-\\[300px\\]\\:order-4 { order: 4; } @@ -2629,13 +2629,13 @@ describe('matchVariant', () => { 'my-container-[250px]/placement:underline', ]) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` - "@container (width >= 250px) { + "@container (min-width: 250px) { .my-container-\\[250px\\]\\:underline { text-decoration-line: underline; } } - @container placement (width >= 250px) { + @container placement (min-width: 250px) { .my-container-\\[250px\\]\\/placement\\:underline { text-decoration-line: underline; } @@ -2676,20 +2676,20 @@ describe('addUtilities()', () => { expect(optimizeCss(compiled.build(['text-trim', 'lg:text-trim'])).trim()) .toMatchInlineSnapshot(` - "@layer utilities { - .text-trim { - text-box-trim: both; - text-box-edge: cap alphabetic; - } - - @media (width >= 1024px) { - .lg\\:text-trim { + "@layer utilities { + .text-trim { text-box-trim: both; text-box-edge: cap alphabetic; } - } - }" - `) + + @media (min-width: 1024px) { + .lg\\:text-trim { + text-box-trim: both; + text-box-edge: cap alphabetic; + } + } + }" + `) }) test('return multiple rule objects from a custom utility', async () => { @@ -2873,7 +2873,7 @@ describe('addUtilities()', () => { } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo { display: flex; } @@ -2954,7 +2954,7 @@ describe('addUtilities()', () => { background-color: #fff; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:form-textarea { appearance: none; background-color: #fff; @@ -3280,7 +3280,7 @@ describe('matchUtilities()', () => { border-block-width: var(--foo); } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:border-block-2 { border-block-width: 2px; } @@ -3331,16 +3331,16 @@ describe('matchUtilities()', () => { } expect(optimizeCss(await run(['@w-1', 'hover:@w-1'])).trim()).toMatchInlineSnapshot(` - ".\\@w-1 { + ".\\@w-1 { + width: 1px; + } + + @media (hover: hover) { + .hover\\:\\@w-1:hover { width: 1px; } - - @media (hover: hover) { - .hover\\:\\@w-1:hover { - width: 1px; - } - }" - `) + }" + `) }) test('custom functional utilities can return an array of rules', async () => { @@ -3975,7 +3975,7 @@ describe('matchUtilities()', () => { display: flex; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:foo-\\[12px\\] { --foo: 12px; display: flex; @@ -4132,30 +4132,30 @@ describe('addComponents()', () => { expect(optimizeCss(compiled.build(['btn', 'btn-blue', 'btn-red'])).trim()) .toMatchInlineSnapshot(` - ".btn { - border-radius: .25rem; - padding: .5rem 1rem; - font-weight: 600; - } + ".btn { + border-radius: .25rem; + padding: .5rem 1rem; + font-weight: 600; + } - .btn-blue { - color: #fff; - background-color: #3490dc; - } + .btn-blue { + color: #fff; + background-color: #3490dc; + } - .btn-blue:hover { - background-color: #2779bd; - } + .btn-blue:hover { + background-color: #2779bd; + } - .btn-red { - color: #fff; - background-color: #e3342f; - } + .btn-red { + color: #fff; + background-color: #e3342f; + } - .btn-red:hover { - background-color: #cc1f1a; - }" - `) + .btn-red:hover { + background-color: #cc1f1a; + }" + `) }) }) @@ -4191,16 +4191,16 @@ describe('matchComponents()', () => { expect(optimizeCss(compiled.build(['prose', 'sm:prose-sm', 'hover:prose-lg'])).trim()) .toMatchInlineSnapshot(` - ".prose { - --container-size: normal; - } - - @media (hover: hover) { - .hover\\:prose-lg:hover { - --container-size: lg; + ".prose { + --container-size: normal; } - }" - `) + + @media (hover: hover) { + .hover\\:prose-lg:hover { + --container-size: lg; + } + }" + `) }) }) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 29e09d7d83c6..389b65d9e6eb 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -343,13 +343,13 @@ describe('--theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .blue { color: #00f; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .red { color: red; } @@ -696,10 +696,10 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) test('theme(fontFamily.sans) (config)', async () => { @@ -716,10 +716,10 @@ describe('theme(…)', () => { ) expect(optimizeCss(compiled.build([])).trim()).toMatchInlineSnapshot(` - ".fam { - font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; - }" - `) + ".fam { + font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + }" + `) }) }) @@ -922,7 +922,7 @@ describe('theme(…)', () => { ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'], ['letterSpacing.wide', '.025em'], ['lineHeight.tight', '1.25'], - ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'], + ['backgroundColor.red.500', 'oklch(63.7% .237 25.331)'], ])('theme(%s) → %s', async (value, result) => { let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8') let compiled = await compileCss(css` @@ -960,7 +960,7 @@ describe('theme(…)', () => { ['sm:[--color:theme(colors.red[500])]'], ), ).toMatchInlineSnapshot(` - "@media (width >= 40rem) { + "@media (min-width: 40rem) { .sm\\:\\[--color\\:theme\\(colors\\.red\\[500\\]\\)\\] { --color: red; } @@ -1021,7 +1021,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width <= 64rem) { + "@media (min-width: 48rem) and (max-width: 64rem) { .red { color: red; } @@ -1042,13 +1042,7 @@ describe('theme(…)', () => { } } `), - ).toMatchInlineSnapshot(` - "@media (width >= 48rem) and (width < 64rem) { - .red { - color: red; - } - }" - `) + ).toMatchInlineSnapshot(`""`) }) }) @@ -1066,7 +1060,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@media (width >= 48rem) { + "@media (min-width: 48rem) { .red { color: red; } @@ -1087,7 +1081,7 @@ describe('theme(…)', () => { } `), ).toMatchInlineSnapshot(` - "@container (width > 48rem) { + "@container not (max-width: 48rem) { .red { color: red; } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 9a4279d546ee..55ea0bc001d0 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -246,7 +246,13 @@ describe('arbitrary properties', () => { it('should generate arbitrary properties with modifiers', async () => { expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(` ".\\[color\\:red\\]\\/50 { - color: oklab(62.7955% .22486 .12584 / .5); + color: red; + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + .\\[color\\:red\\]\\/50 { + color: oklab(62.7955% .22486 .12584 / .5); + } }" `) }) @@ -258,7 +264,13 @@ 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 oklab, var(--my-color) 50%, transparent); + color: var(--my-color); + } + + @supports (color: color-mix(in srgb, red 50%, green)) { + .\\[color\\:var\\(--my-color\\)\\]\\/50 { + color: color-mix(in oklab, var(--my-color) 50%, transparent); + } }" `) }) @@ -4653,3 +4665,25 @@ describe('@variant', () => { `) }) }) + +it.only('does the `color-mix(…)` thing', async () => { + await expect( + compileCss( + css` + @theme { + --color-red-500: oklch(63.7% 0.237 25.331); + } + @tailwind utilities; + `, + ['text-red-500/50'], + ), + ).resolves.toMatchInlineSnapshot(` + ":root, :host { + --color-red-500: oklch(63.7% .237 25.331); + } + + .text-red-500\\/50 { + color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + }" + `) +}) diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index 24e418be3fa9..c148dac0eccb 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -332,48 +332,48 @@ test('Functional utilities from plugins are listed in hovers and completions', a expect(design.candidatesToCss(['custom-1-red', 'custom-1-green', 'custom-1-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-1-red { - color: #ff0000; - } - ", - ".custom-1-green { - color: #ff0000; - } - ", - null, - ] - `) + [ + ".custom-1-red { + color: #ff0000; + } + ", + ".custom-1-green { + color: #ff0000; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red', 'custom-2-green', 'custom-2-unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red { - color: #ff0000 / 0%; - } - ", - ".custom-2-green { - color: #ff0000 / 0%; - } - ", - null, - ] - `) + [ + ".custom-2-red { + color: #ff0000 / 0%; + } + ", + ".custom-2-green { + color: #ff0000 / 0%; + } + ", + null, + ] + `) expect(design.candidatesToCss(['custom-2-red/50', 'custom-2-red/75', 'custom-2-red/unknown'])) .toMatchInlineSnapshot(` - [ - ".custom-2-red\\/50 { - color: #ff0000 / 50%; - } - ", - ".custom-2-red\\/75 { - color: #ff0000 / 75%; - } - ", - null, - ] - `) + [ + ".custom-2-red\\/50 { + color: #ff0000 / 50%; + } + ", + ".custom-2-red\\/75 { + color: #ff0000 / 75%; + } + ", + null, + ] + `) let classMap = new Map(design.getClassList()) let classNames = Array.from(classMap.keys()) diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index 2951ef576ab8..0b863fa32853 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -31,7 +31,7 @@ export function optimizeCss( nonStandard: { deepSelectorCombinator: true, }, - include: Features.Nesting, + include: Features.Nesting | Features.MediaRangeSyntax, exclude: Features.LogicalProperties | Features.DirSelector | Features.LightDark, targets: { safari: (16 << 16) | (4 << 8), diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 908a2398ae4d..5cd29a4721e9 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -1286,26 +1286,26 @@ test('row-start', async () => { expect( await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']), ).toMatchInlineSnapshot(` - ".-row-start-4 { - grid-row-start: calc(4 * -1); - } + ".-row-start-4 { + grid-row-start: calc(4 * -1); + } - .row-start-4 { - grid-row-start: 4; - } + .row-start-4 { + grid-row-start: 4; + } - .row-start-99 { - grid-row-start: 99; - } + .row-start-99 { + grid-row-start: 99; + } - .row-start-\\[123\\] { - grid-row-start: 123; - } + .row-start-\\[123\\] { + grid-row-start: 123; + } - .row-start-auto { - grid-row-start: auto; - }" - `) + .row-start-auto { + grid-row-start: auto; + }" + `) expect( await run([ 'row-start', @@ -3180,31 +3180,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3242,43 +3242,43 @@ describe('container', () => { width: 100%; } - @media (width >= 40em) { + @media (min-width: 40em) { .container { max-width: 40em; } } - @media (width >= 48em) { + @media (min-width: 48em) { .container { max-width: 48em; } } - @media (width >= 30px) { + @media (min-width: 30px) { .container { max-width: 30px; } } - @media (width >= 1600px) { + @media (min-width: 1600px) { .container { max-width: 1600px; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3319,31 +3319,31 @@ describe('container', () => { width: 100%; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { max-width: 40rem; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .container { max-width: 48rem; } } - @media (width >= 64rem) { + @media (min-width: 64rem) { .container { max-width: 64rem; } } - @media (width >= 80rem) { + @media (min-width: 80rem) { .container { max-width: 80rem; } } - @media (width >= 96rem) { + @media (min-width: 96rem) { .container { max-width: 96rem; } @@ -3354,7 +3354,7 @@ describe('container', () => { padding-inline: 1rem; } - @media (width >= 40rem) { + @media (min-width: 40rem) { .container { padding-inline: 2rem; } @@ -4228,39 +4228,39 @@ test('translate-y', async () => { test('translate-z', async () => { expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]'])) .toMatchInlineSnapshot(` - ".-translate-z-\\[var\\(--value\\)\\] { - --tw-translate-z: calc(var(--value) * -1); - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + ".-translate-z-\\[var\\(--value\\)\\] { + --tw-translate-z: calc(var(--value) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .-translate-z-px { - --tw-translate-z: -1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .-translate-z-px { + --tw-translate-z: -1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - .translate-z-px { - --tw-translate-z: 1px; - translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); - } + .translate-z-px { + --tw-translate-z: 1px; + translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z); + } - @property --tw-translate-x { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-y { - syntax: "*"; - inherits: false; - initial-value: 0; - } + @property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; + } - @property --tw-translate-z { - syntax: "*"; - inherits: false; - initial-value: 0; - }" - `) + @property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; + }" + `) expect( await run([ 'translate-z', @@ -4307,22 +4307,22 @@ test('translate-3d', async () => { test('rotate', async () => { expect(await run(['rotate-45', '-rotate-45', 'rotate-[123deg]', 'rotate-[0.3_0.7_1_45deg]'])) .toMatchInlineSnapshot(` - ".-rotate-45 { - rotate: -45deg; - } + ".-rotate-45 { + rotate: -45deg; + } - .rotate-45 { - rotate: 45deg; - } + .rotate-45 { + rotate: 45deg; + } - .rotate-\\[0\\.3_0\\.7_1_45deg\\] { - rotate: .3 .7 1 45deg; - } + .rotate-\\[0\\.3_0\\.7_1_45deg\\] { + rotate: .3 .7 1 45deg; + } - .rotate-\\[123deg\\] { - rotate: 123deg; - }" - `) + .rotate-\\[123deg\\] { + rotate: 123deg; + }" + `) expect( await run([ 'rotate', @@ -5042,42 +5042,42 @@ test('transform', async () => { 'backface-hidden', ]), ).toMatchInlineSnapshot(` - ".backface-hidden { - backface-visibility: hidden; - } + ".backface-hidden { + backface-visibility: hidden; + } - .backface-visible { - backface-visibility: visible; - } + .backface-visible { + backface-visibility: visible; + } - .transform-3d { - transform-style: preserve-3d; - } + .transform-3d { + transform-style: preserve-3d; + } - .transform-border { - transform-box: border-box; - } + .transform-border { + transform-box: border-box; + } - .transform-content { - transform-box: content-box; - } + .transform-content { + transform-box: content-box; + } - .transform-fill { - transform-box: fill-box; - } + .transform-fill { + transform-box: fill-box; + } - .transform-flat { - transform-style: flat; - } + .transform-flat { + transform-style: flat; + } - .transform-stroke { - transform-box: stroke-box; - } + .transform-stroke { + transform-box: stroke-box; + } - .transform-view { - transform-box: view-box; - }" - `) + .transform-view { + transform-box: view-box; + }" + `) expect( await run([ '-transform', @@ -5568,26 +5568,26 @@ test('touch-pinch-zoom', async () => { test('select', async () => { expect(await run(['select-none', 'select-text', 'select-all', 'select-auto'])) .toMatchInlineSnapshot(` - ".select-all { - -webkit-user-select: all; - user-select: all; - } + ".select-all { + -webkit-user-select: all; + user-select: all; + } - .select-auto { - -webkit-user-select: auto; - user-select: auto; - } + .select-auto { + -webkit-user-select: auto; + user-select: auto; + } - .select-none { - -webkit-user-select: none; - user-select: none; - } + .select-none { + -webkit-user-select: none; + user-select: none; + } - .select-text { - -webkit-user-select: text; - user-select: text; - }" - `) + .select-text { + -webkit-user-select: text; + user-select: text; + }" + `) expect( await run([ '-select-none', @@ -5696,22 +5696,22 @@ test('--tw-scroll-snap-strictness', async () => { test('scroll-snap-align', async () => { expect(await run(['snap-align-none', 'snap-start', 'snap-end', 'snap-center'])) .toMatchInlineSnapshot(` - ".snap-align-none { - scroll-snap-align: none; - } + ".snap-align-none { + scroll-snap-align: none; + } - .snap-center { - scroll-snap-align: center; - } + .snap-center { + scroll-snap-align: center; + } - .snap-end { - scroll-snap-align: end; - } + .snap-end { + scroll-snap-align: end; + } - .snap-start { - scroll-snap-align: start; - }" - `) + .snap-start { + scroll-snap-align: start; + }" + `) expect( await run([ '-snap-align-none', @@ -7065,22 +7065,22 @@ test('grid-rows', async () => { test('flex-direction', async () => { expect(await run(['flex-row', 'flex-row-reverse', 'flex-col', 'flex-col-reverse'])) .toMatchInlineSnapshot(` - ".flex-col { - flex-direction: column; - } + ".flex-col { + flex-direction: column; + } - .flex-col-reverse { - flex-direction: column-reverse; - } + .flex-col-reverse { + flex-direction: column-reverse; + } - .flex-row { - flex-direction: row; - } + .flex-row { + flex-direction: row; + } - .flex-row-reverse { - flex-direction: row-reverse; - }" - `) + .flex-row-reverse { + flex-direction: row-reverse; + }" + `) expect( await run([ '-flex-row', @@ -7969,31 +7969,31 @@ test('divide-style', async () => { expect( await run(['divide-solid', 'divide-dashed', 'divide-dotted', 'divide-double', 'divide-none']), ).toMatchInlineSnapshot(` - ":where(.divide-dashed > :not(:last-child)) { - --tw-border-style: dashed; - border-style: dashed; - } + ":where(.divide-dashed > :not(:last-child)) { + --tw-border-style: dashed; + border-style: dashed; + } - :where(.divide-dotted > :not(:last-child)) { - --tw-border-style: dotted; - border-style: dotted; - } + :where(.divide-dotted > :not(:last-child)) { + --tw-border-style: dotted; + border-style: dotted; + } - :where(.divide-double > :not(:last-child)) { - --tw-border-style: double; - border-style: double; - } + :where(.divide-double > :not(:last-child)) { + --tw-border-style: double; + border-style: double; + } - :where(.divide-none > :not(:last-child)) { - --tw-border-style: none; - border-style: none; - } + :where(.divide-none > :not(:last-child)) { + --tw-border-style: none; + border-style: none; + } - :where(.divide-solid > :not(:last-child)) { - --tw-border-style: solid; - border-style: solid; - }" - `) + :where(.divide-solid > :not(:last-child)) { + --tw-border-style: solid; + border-style: solid; + }" + `) expect( await run([ 'divide', @@ -8677,18 +8677,18 @@ test('overflow-y', async () => { test('overscroll', async () => { expect(await run(['overscroll-auto', 'overscroll-contain', 'overscroll-none'])) .toMatchInlineSnapshot(` - ".overscroll-auto { - overscroll-behavior: auto; - } + ".overscroll-auto { + overscroll-behavior: auto; + } - .overscroll-contain { - overscroll-behavior: contain; - } + .overscroll-contain { + overscroll-behavior: contain; + } - .overscroll-none { - overscroll-behavior: none; - }" - `) + .overscroll-none { + overscroll-behavior: none; + }" + `) expect( await run([ 'overscroll', @@ -8705,18 +8705,18 @@ test('overscroll', async () => { test('overscroll-x', async () => { expect(await run(['overscroll-x-auto', 'overscroll-x-contain', 'overscroll-x-none'])) .toMatchInlineSnapshot(` - ".overscroll-x-auto { - overscroll-behavior-x: auto; - } + ".overscroll-x-auto { + overscroll-behavior-x: auto; + } - .overscroll-x-contain { - overscroll-behavior-x: contain; - } + .overscroll-x-contain { + overscroll-behavior-x: contain; + } - .overscroll-x-none { - overscroll-behavior-x: none; - }" - `) + .overscroll-x-none { + overscroll-behavior-x: none; + }" + `) expect( await run([ 'overscroll-x', @@ -8733,18 +8733,18 @@ test('overscroll-x', async () => { test('overscroll-y', async () => { expect(await run(['overscroll-y-auto', 'overscroll-y-contain', 'overscroll-y-none'])) .toMatchInlineSnapshot(` - ".overscroll-y-auto { - overscroll-behavior-y: auto; - } + ".overscroll-y-auto { + overscroll-behavior-y: auto; + } - .overscroll-y-contain { - overscroll-behavior-y: contain; - } + .overscroll-y-contain { + overscroll-behavior-y: contain; + } - .overscroll-y-none { - overscroll-behavior-y: none; - }" - `) + .overscroll-y-none { + overscroll-behavior-y: none; + }" + `) expect( await run([ 'overscroll-y', @@ -8886,22 +8886,22 @@ test('whitespace', async () => { test('text-wrap', async () => { expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty'])) .toMatchInlineSnapshot(` - ".text-balance { - text-wrap: balance; - } + ".text-balance { + text-wrap: balance; + } - .text-nowrap { - text-wrap: nowrap; - } + .text-nowrap { + text-wrap: nowrap; + } - .text-pretty { - text-wrap: pretty; - } + .text-pretty { + text-wrap: pretty; + } - .text-wrap { - text-wrap: wrap; - }" - `) + .text-wrap { + text-wrap: wrap; + }" + `) expect( await run([ '-text-wrap', @@ -11510,18 +11510,18 @@ test('bg-clip', async () => { test('bg-origin', async () => { expect(await run(['bg-origin-border', 'bg-origin-padding', 'bg-origin-content'])) .toMatchInlineSnapshot(` - ".bg-origin-border { - background-origin: border-box; - } + ".bg-origin-border { + background-origin: border-box; + } - .bg-origin-content { - background-origin: content-box; - } + .bg-origin-content { + background-origin: content-box; + } - .bg-origin-padding { - background-origin: padding-box; - }" - `) + .bg-origin-padding { + background-origin: padding-box; + }" + `) expect( await run([ 'bg-origin', @@ -12879,22 +12879,22 @@ test('font-stretch', async () => { test('text-decoration-line', async () => { expect(await run(['underline', 'overline', 'line-through', 'no-underline'])) .toMatchInlineSnapshot(` - ".line-through { - text-decoration-line: line-through; - } + ".line-through { + text-decoration-line: line-through; + } - .no-underline { - text-decoration-line: none; - } + .no-underline { + text-decoration-line: none; + } - .overline { - text-decoration-line: overline; - } + .overline { + text-decoration-line: overline; + } - .underline { - text-decoration-line: underline; - }" - `) + .underline { + text-decoration-line: underline; + }" + `) expect( await run([ '-underline', @@ -14405,14 +14405,14 @@ test('content', async () => { test('forced-color-adjust', async () => { expect(await run(['forced-color-adjust-none', 'forced-color-adjust-auto'])) .toMatchInlineSnapshot(` - ".forced-color-adjust-auto { - forced-color-adjust: auto; - } + ".forced-color-adjust-auto { + forced-color-adjust: auto; + } - .forced-color-adjust-none { - forced-color-adjust: none; - }" - `) + .forced-color-adjust-none { + forced-color-adjust: none; + }" + `) expect( await run([ 'forced', @@ -16717,7 +16717,7 @@ describe('custom utilities', () => { text-box-edge: cap alphabetic; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:text-trim { text-box-trim: both; text-box-edge: cap alphabetic; @@ -17286,22 +17286,22 @@ describe('custom utilities', () => { expect(await compileCss(input, ['example-1', 'example-0.5', 'example-20%', 'example-2/3'])) .toMatchInlineSnapshot(` - ".example-0\\.5 { - --value-as-number: .5; - } + ".example-0\\.5 { + --value-as-number: .5; + } - .example-1 { - --value-as-number: 1; - } + .example-1 { + --value-as-number: 1; + } - .example-2\\/3 { - --value-as-ratio: 2 / 3; - } + .example-2\\/3 { + --value-as-ratio: 2 / 3; + } - .example-20\\% { - --value-as-percentage: 20%; - }" - `) + .example-20\\% { + --value-as-percentage: 20%; + }" + `) expect( await compileCss(input, [ 'example-1.23', diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index eedeefbc04f4..6e0bd61bab6e 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -793,31 +793,31 @@ test('default breakpoints', async () => { ['sm:flex', 'md:flex', 'lg:flex', 'xl:flex', '2xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; } @@ -853,7 +853,7 @@ test('custom breakpoint', async () => { ['10xl:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 5000px) { + "@media (min-width: 5000px) { .\\31 0xl\\:flex { display: flex; } @@ -876,19 +876,19 @@ test('max-*', async () => { ['max-lg:flex', 'max-sm:flex', 'max-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } @@ -925,19 +925,19 @@ test('min-*', async () => { ['min-lg:flex', 'min-sm:flex', 'min-md:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .min-sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .min-lg\\:flex { display: flex; } @@ -976,30 +976,30 @@ test('sorting stacked min-* and max-* variants', async () => { ['min-sm:max-lg:flex', 'min-sm:max-xl:flex', 'min-md:max-lg:flex', 'min-xs:max-sm:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 280px) { - @media (width < 640px) { + "@media (min-width: 280px) { + @media not (min-width: 640px) { .min-xs\\:max-sm\\:flex { display: flex; } } } - @media (width >= 640px) { - @media (width < 1280px) { + @media (min-width: 640px) { + @media not (min-width: 1280px) { .min-sm\\:max-xl\\:flex { display: flex; } } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { - @media (width < 1024px) { + @media (min-width: 768px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1023,24 +1023,24 @@ test('stacked min-* and max-* variants should come after unprefixed variants', a ['sm:flex', 'min-sm:max-lg:flex', 'md:flex', 'min-md:max-lg:flex'], ), ).toMatchInlineSnapshot(` - "@media (width >= 640px) { + "@media (min-width: 640px) { .sm\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-sm\\:max-lg\\:flex { display: flex; } } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } - @media (width < 1024px) { + @media not (min-width: 1024px) { .min-md\\:max-lg\\:flex { display: flex; } @@ -1079,49 +1079,49 @@ test('min, max and unprefixed breakpoints', async () => { ], ), ).toMatchInlineSnapshot(` - "@media (width < 1024px) { + "@media not (min-width: 1024px) { .max-lg\\:flex { display: flex; } } - @media (width < 1000px) { + @media not (min-width: 1000px) { .max-\\[1000px\\]\\:flex { display: flex; } } - @media (width < 768px) { + @media not (min-width: 768px) { .max-md\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .max-sm\\:flex { display: flex; } } - @media (width >= 640px) { + @media (min-width: 640px) { .min-sm\\:flex, .sm\\:flex { display: flex; } } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\\[700px\\]\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex, .min-md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex, .min-lg\\:flex { display: flex; } @@ -1154,121 +1154,121 @@ test('sorting `min` and `max` should sort by unit, then by value, then alphabeti 'max-[12vh]:flex', ]), ).toMatchInlineSnapshot(` - "@media (width < calc(1000px + 12em)) { + "@media not (min-width: calc(1000px + 12em)) { .max-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < calc(50vh + 12em)) { + @media not (min-width: calc(50vh + 12em)) { .max-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width < 12em) { + @media not (min-width: 12em) { .max-\\[12em\\]\\:flex { display: flex; } } - @media (width < 10em) { + @media not (min-width: 10em) { .max-\\[10em\\]\\:flex { display: flex; } } - @media (width < 12px) { + @media not (min-width: 12px) { .max-\\[12px\\]\\:flex { display: flex; } } - @media (width < 10px) { + @media not (min-width: 10px) { .max-\\[10px\\]\\:flex { display: flex; } } - @media (width < 12rem) { + @media not (min-width: 12rem) { .max-\\[12rem\\]\\:flex { display: flex; } } - @media (width < 10rem) { + @media not (min-width: 10rem) { .max-\\[10rem\\]\\:flex { display: flex; } } - @media (width < 12vh) { + @media not (min-width: 12vh) { .max-\\[12vh\\]\\:flex { display: flex; } } - @media (width < 10vh) { + @media not (min-width: 10vh) { .max-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= calc(1000px + 12em)) { + @media (min-width: calc(1000px + 12em)) { .min-\\[calc\\(1000px\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= calc(50vh + 12em)) { + @media (min-width: calc(50vh + 12em)) { .min-\\[calc\\(50vh\\+12em\\)\\]\\:flex { display: flex; } } - @media (width >= 10em) { + @media (min-width: 10em) { .min-\\[10em\\]\\:flex { display: flex; } } - @media (width >= 12em) { + @media (min-width: 12em) { .min-\\[12em\\]\\:flex { display: flex; } } - @media (width >= 10px) { + @media (min-width: 10px) { .min-\\[10px\\]\\:flex { display: flex; } } - @media (width >= 12px) { + @media (min-width: 12px) { .min-\\[12px\\]\\:flex { display: flex; } } - @media (width >= 10rem) { + @media (min-width: 10rem) { .min-\\[10rem\\]\\:flex { display: flex; } } - @media (width >= 12rem) { + @media (min-width: 12rem) { .min-\\[12rem\\]\\:flex { display: flex; } } - @media (width >= 10vh) { + @media (min-width: 10vh) { .min-\\[10vh\\]\\:flex { display: flex; } } - @media (width >= 12vh) { + @media (min-width: 12vh) { .min-\\[12vh\\]\\:flex { display: flex; } @@ -1502,25 +1502,25 @@ test('not', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .not-max-sm\\:flex { display: flex; } } - @media (width >= 130px) { + @media (min-width: 130px) { .not-max-\\[130px\\]\\:flex { display: flex; } } - @media (width < 130px) { + @media not (min-width: 130px) { .not-min-\\[130px\\]\\:flex { display: flex; } } - @media (width < 640px) { + @media not (min-width: 640px) { .not-min-sm\\:flex, .not-sm\\:flex { display: flex; } @@ -2092,61 +2092,61 @@ test('container queries', async () => { ], ), ).toMatchInlineSnapshot(` - "@container name (width < 1024px) { + "@container name not (min-width: 1024px) { .\\@max-lg\\/name\\:flex { display: flex; } } - @container (width < 1024px) { + @container not (min-width: 1024px) { .\\@max-lg\\:flex { display: flex; } } - @container name (width < 456px) { + @container name not (min-width: 456px) { .\\@max-\\[456px\\]\\/name\\:flex { display: flex; } } - @container (width < 123px) { + @container not (min-width: 123px) { .\\@max-\\[123px\\]\\:flex { display: flex; } } - @container (width >= 123px) { + @container (min-width: 123px) { .\\@\\[123px\\]\\:flex, .\\@min-\\[123px\\]\\:flex { display: flex; } } - @container name (width >= 456px) { + @container name (min-width: 456px) { .\\@\\[456px\\]\\/name\\:flex, .\\@min-\\[456px\\]\\/name\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@lg\\:flex { display: flex; } } - @container name (width >= 1024px) { + @container name (min-width: 1024px) { .\\@min-lg\\/name\\:flex { display: flex; } } - @container (width >= 1024px) { + @container (min-width: 1024px) { .\\@min-lg\\:flex { display: flex; } @@ -2340,31 +2340,31 @@ test('variant order', async () => { } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\\:flex { display: flex; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\\:flex { display: flex; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\\:flex { display: flex; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\\:flex { display: flex; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\\32 xl\\:flex { display: flex; } diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 6f40223e4f5e..18b024b887f2 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -7,269 +7,269 @@ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - --color-red-50: oklch(0.971 0.013 17.38); - --color-red-100: oklch(0.936 0.032 17.717); - --color-red-200: oklch(0.885 0.062 18.334); - --color-red-300: oklch(0.808 0.114 19.571); - --color-red-400: oklch(0.704 0.191 22.216); - --color-red-500: oklch(0.637 0.237 25.331); - --color-red-600: oklch(0.577 0.245 27.325); - --color-red-700: oklch(0.505 0.213 27.518); - --color-red-800: oklch(0.444 0.177 26.899); - --color-red-900: oklch(0.396 0.141 25.723); - --color-red-950: oklch(0.258 0.092 26.042); - - --color-orange-50: oklch(0.98 0.016 73.684); - --color-orange-100: oklch(0.954 0.038 75.164); - --color-orange-200: oklch(0.901 0.076 70.697); - --color-orange-300: oklch(0.837 0.128 66.29); - --color-orange-400: oklch(0.75 0.183 55.934); - --color-orange-500: oklch(0.705 0.213 47.604); - --color-orange-600: oklch(0.646 0.222 41.116); - --color-orange-700: oklch(0.553 0.195 38.402); - --color-orange-800: oklch(0.47 0.157 37.304); - --color-orange-900: oklch(0.408 0.123 38.172); - --color-orange-950: oklch(0.266 0.079 36.259); - - --color-amber-50: oklch(0.987 0.022 95.277); - --color-amber-100: oklch(0.962 0.059 95.617); - --color-amber-200: oklch(0.924 0.12 95.746); - --color-amber-300: oklch(0.879 0.169 91.605); - --color-amber-400: oklch(0.828 0.189 84.429); - --color-amber-500: oklch(0.769 0.188 70.08); - --color-amber-600: oklch(0.666 0.179 58.318); - --color-amber-700: oklch(0.555 0.163 48.998); - --color-amber-800: oklch(0.473 0.137 46.201); - --color-amber-900: oklch(0.414 0.112 45.904); - --color-amber-950: oklch(0.279 0.077 45.635); - - --color-yellow-50: oklch(0.987 0.026 102.212); - --color-yellow-100: oklch(0.973 0.071 103.193); - --color-yellow-200: oklch(0.945 0.129 101.54); - --color-yellow-300: oklch(0.905 0.182 98.111); - --color-yellow-400: oklch(0.852 0.199 91.936); - --color-yellow-500: oklch(0.795 0.184 86.047); - --color-yellow-600: oklch(0.681 0.162 75.834); - --color-yellow-700: oklch(0.554 0.135 66.442); - --color-yellow-800: oklch(0.476 0.114 61.907); - --color-yellow-900: oklch(0.421 0.095 57.708); - --color-yellow-950: oklch(0.286 0.066 53.813); - - --color-lime-50: oklch(0.986 0.031 120.757); - --color-lime-100: oklch(0.967 0.067 122.328); - --color-lime-200: oklch(0.938 0.127 124.321); - --color-lime-300: oklch(0.897 0.196 126.665); - --color-lime-400: oklch(0.841 0.238 128.85); - --color-lime-500: oklch(0.768 0.233 130.85); - --color-lime-600: oklch(0.648 0.2 131.684); - --color-lime-700: oklch(0.532 0.157 131.589); - --color-lime-800: oklch(0.453 0.124 130.933); - --color-lime-900: oklch(0.405 0.101 131.063); - --color-lime-950: oklch(0.274 0.072 132.109); - - --color-green-50: oklch(0.982 0.018 155.826); - --color-green-100: oklch(0.962 0.044 156.743); - --color-green-200: oklch(0.925 0.084 155.995); - --color-green-300: oklch(0.871 0.15 154.449); - --color-green-400: oklch(0.792 0.209 151.711); - --color-green-500: oklch(0.723 0.219 149.579); - --color-green-600: oklch(0.627 0.194 149.214); - --color-green-700: oklch(0.527 0.154 150.069); - --color-green-800: oklch(0.448 0.119 151.328); - --color-green-900: oklch(0.393 0.095 152.535); - --color-green-950: oklch(0.266 0.065 152.934); - - --color-emerald-50: oklch(0.979 0.021 166.113); - --color-emerald-100: oklch(0.95 0.052 163.051); - --color-emerald-200: oklch(0.905 0.093 164.15); - --color-emerald-300: oklch(0.845 0.143 164.978); - --color-emerald-400: oklch(0.765 0.177 163.223); - --color-emerald-500: oklch(0.696 0.17 162.48); - --color-emerald-600: oklch(0.596 0.145 163.225); - --color-emerald-700: oklch(0.508 0.118 165.612); - --color-emerald-800: oklch(0.432 0.095 166.913); - --color-emerald-900: oklch(0.378 0.077 168.94); - --color-emerald-950: oklch(0.262 0.051 172.552); - - --color-teal-50: oklch(0.984 0.014 180.72); - --color-teal-100: oklch(0.953 0.051 180.801); - --color-teal-200: oklch(0.91 0.096 180.426); - --color-teal-300: oklch(0.855 0.138 181.071); - --color-teal-400: oklch(0.777 0.152 181.912); - --color-teal-500: oklch(0.704 0.14 182.503); - --color-teal-600: oklch(0.6 0.118 184.704); - --color-teal-700: oklch(0.511 0.096 186.391); - --color-teal-800: oklch(0.437 0.078 188.216); - --color-teal-900: oklch(0.386 0.063 188.416); - --color-teal-950: oklch(0.277 0.046 192.524); - - --color-cyan-50: oklch(0.984 0.019 200.873); - --color-cyan-100: oklch(0.956 0.045 203.388); - --color-cyan-200: oklch(0.917 0.08 205.041); - --color-cyan-300: oklch(0.865 0.127 207.078); - --color-cyan-400: oklch(0.789 0.154 211.53); - --color-cyan-500: oklch(0.715 0.143 215.221); - --color-cyan-600: oklch(0.609 0.126 221.723); - --color-cyan-700: oklch(0.52 0.105 223.128); - --color-cyan-800: oklch(0.45 0.085 224.283); - --color-cyan-900: oklch(0.398 0.07 227.392); - --color-cyan-950: oklch(0.302 0.056 229.695); - - --color-sky-50: oklch(0.977 0.013 236.62); - --color-sky-100: oklch(0.951 0.026 236.824); - --color-sky-200: oklch(0.901 0.058 230.902); - --color-sky-300: oklch(0.828 0.111 230.318); - --color-sky-400: oklch(0.746 0.16 232.661); - --color-sky-500: oklch(0.685 0.169 237.323); - --color-sky-600: oklch(0.588 0.158 241.966); - --color-sky-700: oklch(0.5 0.134 242.749); - --color-sky-800: oklch(0.443 0.11 240.79); - --color-sky-900: oklch(0.391 0.09 240.876); - --color-sky-950: oklch(0.293 0.066 243.157); - - --color-blue-50: oklch(0.97 0.014 254.604); - --color-blue-100: oklch(0.932 0.032 255.585); - --color-blue-200: oklch(0.882 0.059 254.128); - --color-blue-300: oklch(0.809 0.105 251.813); - --color-blue-400: oklch(0.707 0.165 254.624); - --color-blue-500: oklch(0.623 0.214 259.815); - --color-blue-600: oklch(0.546 0.245 262.881); - --color-blue-700: oklch(0.488 0.243 264.376); - --color-blue-800: oklch(0.424 0.199 265.638); - --color-blue-900: oklch(0.379 0.146 265.522); - --color-blue-950: oklch(0.282 0.091 267.935); - - --color-indigo-50: oklch(0.962 0.018 272.314); - --color-indigo-100: oklch(0.93 0.034 272.788); - --color-indigo-200: oklch(0.87 0.065 274.039); - --color-indigo-300: oklch(0.785 0.115 274.713); - --color-indigo-400: oklch(0.673 0.182 276.935); - --color-indigo-500: oklch(0.585 0.233 277.117); - --color-indigo-600: oklch(0.511 0.262 276.966); - --color-indigo-700: oklch(0.457 0.24 277.023); - --color-indigo-800: oklch(0.398 0.195 277.366); - --color-indigo-900: oklch(0.359 0.144 278.697); - --color-indigo-950: oklch(0.257 0.09 281.288); - - --color-violet-50: oklch(0.969 0.016 293.756); - --color-violet-100: oklch(0.943 0.029 294.588); - --color-violet-200: oklch(0.894 0.057 293.283); - --color-violet-300: oklch(0.811 0.111 293.571); - --color-violet-400: oklch(0.702 0.183 293.541); - --color-violet-500: oklch(0.606 0.25 292.717); - --color-violet-600: oklch(0.541 0.281 293.009); - --color-violet-700: oklch(0.491 0.27 292.581); - --color-violet-800: oklch(0.432 0.232 292.759); - --color-violet-900: oklch(0.38 0.189 293.745); - --color-violet-950: oklch(0.283 0.141 291.089); - - --color-purple-50: oklch(0.977 0.014 308.299); - --color-purple-100: oklch(0.946 0.033 307.174); - --color-purple-200: oklch(0.902 0.063 306.703); - --color-purple-300: oklch(0.827 0.119 306.383); - --color-purple-400: oklch(0.714 0.203 305.504); - --color-purple-500: oklch(0.627 0.265 303.9); - --color-purple-600: oklch(0.558 0.288 302.321); - --color-purple-700: oklch(0.496 0.265 301.924); - --color-purple-800: oklch(0.438 0.218 303.724); - --color-purple-900: oklch(0.381 0.176 304.987); - --color-purple-950: oklch(0.291 0.149 302.717); - - --color-fuchsia-50: oklch(0.977 0.017 320.058); - --color-fuchsia-100: oklch(0.952 0.037 318.852); - --color-fuchsia-200: oklch(0.903 0.076 319.62); - --color-fuchsia-300: oklch(0.833 0.145 321.434); - --color-fuchsia-400: oklch(0.74 0.238 322.16); - --color-fuchsia-500: oklch(0.667 0.295 322.15); - --color-fuchsia-600: oklch(0.591 0.293 322.896); - --color-fuchsia-700: oklch(0.518 0.253 323.949); - --color-fuchsia-800: oklch(0.452 0.211 324.591); - --color-fuchsia-900: oklch(0.401 0.17 325.612); - --color-fuchsia-950: oklch(0.293 0.136 325.661); - - --color-pink-50: oklch(0.971 0.014 343.198); - --color-pink-100: oklch(0.948 0.028 342.258); - --color-pink-200: oklch(0.899 0.061 343.231); - --color-pink-300: oklch(0.823 0.12 346.018); - --color-pink-400: oklch(0.718 0.202 349.761); - --color-pink-500: oklch(0.656 0.241 354.308); - --color-pink-600: oklch(0.592 0.249 0.584); - --color-pink-700: oklch(0.525 0.223 3.958); - --color-pink-800: oklch(0.459 0.187 3.815); - --color-pink-900: oklch(0.408 0.153 2.432); - --color-pink-950: oklch(0.284 0.109 3.907); - - --color-rose-50: oklch(0.969 0.015 12.422); - --color-rose-100: oklch(0.941 0.03 12.58); - --color-rose-200: oklch(0.892 0.058 10.001); - --color-rose-300: oklch(0.81 0.117 11.638); - --color-rose-400: oklch(0.712 0.194 13.428); - --color-rose-500: oklch(0.645 0.246 16.439); - --color-rose-600: oklch(0.586 0.253 17.585); - --color-rose-700: oklch(0.514 0.222 16.935); - --color-rose-800: oklch(0.455 0.188 13.697); - --color-rose-900: oklch(0.41 0.159 10.272); - --color-rose-950: oklch(0.271 0.105 12.094); - - --color-slate-50: oklch(0.984 0.003 247.858); - --color-slate-100: oklch(0.968 0.007 247.896); - --color-slate-200: oklch(0.929 0.013 255.508); - --color-slate-300: oklch(0.869 0.022 252.894); - --color-slate-400: oklch(0.704 0.04 256.788); - --color-slate-500: oklch(0.554 0.046 257.417); - --color-slate-600: oklch(0.446 0.043 257.281); - --color-slate-700: oklch(0.372 0.044 257.287); - --color-slate-800: oklch(0.279 0.041 260.031); - --color-slate-900: oklch(0.208 0.042 265.755); - --color-slate-950: oklch(0.129 0.042 264.695); - - --color-gray-50: oklch(0.985 0.002 247.839); - --color-gray-100: oklch(0.967 0.003 264.542); - --color-gray-200: oklch(0.928 0.006 264.531); - --color-gray-300: oklch(0.872 0.01 258.338); - --color-gray-400: oklch(0.707 0.022 261.325); - --color-gray-500: oklch(0.551 0.027 264.364); - --color-gray-600: oklch(0.446 0.03 256.802); - --color-gray-700: oklch(0.373 0.034 259.733); - --color-gray-800: oklch(0.278 0.033 256.848); - --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 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); - --color-zinc-400: oklch(0.705 0.015 286.067); - --color-zinc-500: oklch(0.552 0.016 285.938); - --color-zinc-600: oklch(0.442 0.017 285.786); - --color-zinc-700: oklch(0.37 0.013 285.805); - --color-zinc-800: oklch(0.274 0.006 286.033); - --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 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); - --color-stone-200: oklch(0.923 0.003 48.717); - --color-stone-300: oklch(0.869 0.005 56.366); - --color-stone-400: oklch(0.709 0.01 56.259); - --color-stone-500: oklch(0.553 0.013 58.071); - --color-stone-600: oklch(0.444 0.011 73.639); - --color-stone-700: oklch(0.374 0.01 67.558); - --color-stone-800: oklch(0.268 0.007 34.298); - --color-stone-900: oklch(0.216 0.006 56.043); - --color-stone-950: oklch(0.147 0.004 49.25); + --color-red-50: oklch(97.1% 0.013 17.38); + --color-red-100: oklch(93.6% 0.032 17.717); + --color-red-200: oklch(88.5% 0.062 18.334); + --color-red-300: oklch(80.8% 0.114 19.571); + --color-red-400: oklch(70.4% 0.191 22.216); + --color-red-500: oklch(63.7% 0.237 25.331); + --color-red-600: oklch(57.7% 0.245 27.325); + --color-red-700: oklch(50.5% 0.213 27.518); + --color-red-800: oklch(44.4% 0.177 26.899); + --color-red-900: oklch(39.6% 0.141 25.723); + --color-red-950: oklch(25.8% 0.092 26.042); + + --color-orange-50: oklch(98% 0.016 73.684); + --color-orange-100: oklch(95.4% 0.038 75.164); + --color-orange-200: oklch(90.1% 0.076 70.697); + --color-orange-300: oklch(83.7% 0.128 66.29); + --color-orange-400: oklch(75% 0.183 55.934); + --color-orange-500: oklch(70.5% 0.213 47.604); + --color-orange-600: oklch(64.6% 0.222 41.116); + --color-orange-700: oklch(55.3% 0.195 38.402); + --color-orange-800: oklch(47% 0.157 37.304); + --color-orange-900: oklch(40.8% 0.123 38.172); + --color-orange-950: oklch(26.6% 0.079 36.259); + + --color-amber-50: oklch(98.7% 0.022 95.277); + --color-amber-100: oklch(96.2% 0.059 95.617); + --color-amber-200: oklch(92.4% 0.12 95.746); + --color-amber-300: oklch(87.9% 0.169 91.605); + --color-amber-400: oklch(82.8% 0.189 84.429); + --color-amber-500: oklch(76.9% 0.188 70.08); + --color-amber-600: oklch(66.6% 0.179 58.318); + --color-amber-700: oklch(55.5% 0.163 48.998); + --color-amber-800: oklch(47.3% 0.137 46.201); + --color-amber-900: oklch(41.4% 0.112 45.904); + --color-amber-950: oklch(27.9% 0.077 45.635); + + --color-yellow-50: oklch(98.7% 0.026 102.212); + --color-yellow-100: oklch(97.3% 0.071 103.193); + --color-yellow-200: oklch(94.5% 0.129 101.54); + --color-yellow-300: oklch(90.5% 0.182 98.111); + --color-yellow-400: oklch(85.2% 0.199 91.936); + --color-yellow-500: oklch(79.5% 0.184 86.047); + --color-yellow-600: oklch(68.1% 0.162 75.834); + --color-yellow-700: oklch(55.4% 0.135 66.442); + --color-yellow-800: oklch(47.6% 0.114 61.907); + --color-yellow-900: oklch(42.1% 0.095 57.708); + --color-yellow-950: oklch(28.6% 0.066 53.813); + + --color-lime-50: oklch(98.6% 0.031 120.757); + --color-lime-100: oklch(96.7% 0.067 122.328); + --color-lime-200: oklch(93.8% 0.127 124.321); + --color-lime-300: oklch(89.7% 0.196 126.665); + --color-lime-400: oklch(84.1% 0.238 128.85); + --color-lime-500: oklch(76.8% 0.233 130.85); + --color-lime-600: oklch(64.8% 0.2 131.684); + --color-lime-700: oklch(53.2% 0.157 131.589); + --color-lime-800: oklch(45.3% 0.124 130.933); + --color-lime-900: oklch(40.5% 0.101 131.063); + --color-lime-950: oklch(27.4% 0.072 132.109); + + --color-green-50: oklch(98.2% 0.018 155.826); + --color-green-100: oklch(96.2% 0.044 156.743); + --color-green-200: oklch(92.5% 0.084 155.995); + --color-green-300: oklch(87.1% 0.15 154.449); + --color-green-400: oklch(79.2% 0.209 151.711); + --color-green-500: oklch(72.3% 0.219 149.579); + --color-green-600: oklch(62.7% 0.194 149.214); + --color-green-700: oklch(52.7% 0.154 150.069); + --color-green-800: oklch(44.8% 0.119 151.328); + --color-green-900: oklch(39.3% 0.095 152.535); + --color-green-950: oklch(26.6% 0.065 152.934); + + --color-emerald-50: oklch(97.9% 0.021 166.113); + --color-emerald-100: oklch(95% 0.052 163.051); + --color-emerald-200: oklch(90.5% 0.093 164.15); + --color-emerald-300: oklch(84.5% 0.143 164.978); + --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-emerald-500: oklch(69.6% 0.17 162.48); + --color-emerald-600: oklch(59.6% 0.145 163.225); + --color-emerald-700: oklch(50.8% 0.118 165.612); + --color-emerald-800: oklch(43.2% 0.095 166.913); + --color-emerald-900: oklch(37.8% 0.077 168.94); + --color-emerald-950: oklch(26.2% 0.051 172.552); + + --color-teal-50: oklch(98.4% 0.014 180.72); + --color-teal-100: oklch(95.3% 0.051 180.801); + --color-teal-200: oklch(91% 0.096 180.426); + --color-teal-300: oklch(85.5% 0.138 181.071); + --color-teal-400: oklch(77.7% 0.152 181.912); + --color-teal-500: oklch(70.4% 0.14 182.503); + --color-teal-600: oklch(60% 0.118 184.704); + --color-teal-700: oklch(51.1% 0.096 186.391); + --color-teal-800: oklch(43.7% 0.078 188.216); + --color-teal-900: oklch(38.6% 0.063 188.416); + --color-teal-950: oklch(27.7% 0.046 192.524); + + --color-cyan-50: oklch(98.4% 0.019 200.873); + --color-cyan-100: oklch(95.6% 0.045 203.388); + --color-cyan-200: oklch(91.7% 0.08 205.041); + --color-cyan-300: oklch(86.5% 0.127 207.078); + --color-cyan-400: oklch(78.9% 0.154 211.53); + --color-cyan-500: oklch(71.5% 0.143 215.221); + --color-cyan-600: oklch(60.9% 0.126 221.723); + --color-cyan-700: oklch(52% 0.105 223.128); + --color-cyan-800: oklch(45% 0.085 224.283); + --color-cyan-900: oklch(39.8% 0.07 227.392); + --color-cyan-950: oklch(30.2% 0.056 229.695); + + --color-sky-50: oklch(97.7% 0.013 236.62); + --color-sky-100: oklch(95.1% 0.026 236.824); + --color-sky-200: oklch(90.1% 0.058 230.902); + --color-sky-300: oklch(82.8% 0.111 230.318); + --color-sky-400: oklch(74.6% 0.16 232.661); + --color-sky-500: oklch(68.5% 0.169 237.323); + --color-sky-600: oklch(58.8% 0.158 241.966); + --color-sky-700: oklch(50% 0.134 242.749); + --color-sky-800: oklch(44.3% 0.11 240.79); + --color-sky-900: oklch(39.1% 0.09 240.876); + --color-sky-950: oklch(29.3% 0.066 243.157); + + --color-blue-50: oklch(97% 0.014 254.604); + --color-blue-100: oklch(93.2% 0.032 255.585); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-300: oklch(80.9% 0.105 251.813); + --color-blue-400: oklch(70.7% 0.165 254.624); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-blue-700: oklch(48.8% 0.243 264.376); + --color-blue-800: oklch(42.4% 0.199 265.638); + --color-blue-900: oklch(37.9% 0.146 265.522); + --color-blue-950: oklch(28.2% 0.091 267.935); + + --color-indigo-50: oklch(96.2% 0.018 272.314); + --color-indigo-100: oklch(93% 0.034 272.788); + --color-indigo-200: oklch(87% 0.065 274.039); + --color-indigo-300: oklch(78.5% 0.115 274.713); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-indigo-500: oklch(58.5% 0.233 277.117); + --color-indigo-600: oklch(51.1% 0.262 276.966); + --color-indigo-700: oklch(45.7% 0.24 277.023); + --color-indigo-800: oklch(39.8% 0.195 277.366); + --color-indigo-900: oklch(35.9% 0.144 278.697); + --color-indigo-950: oklch(25.7% 0.09 281.288); + + --color-violet-50: oklch(96.9% 0.016 293.756); + --color-violet-100: oklch(94.3% 0.029 294.588); + --color-violet-200: oklch(89.4% 0.057 293.283); + --color-violet-300: oklch(81.1% 0.111 293.571); + --color-violet-400: oklch(70.2% 0.183 293.541); + --color-violet-500: oklch(60.6% 0.25 292.717); + --color-violet-600: oklch(54.1% 0.281 293.009); + --color-violet-700: oklch(49.1% 0.27 292.581); + --color-violet-800: oklch(43.2% 0.232 292.759); + --color-violet-900: oklch(38% 0.189 293.745); + --color-violet-950: oklch(28.3% 0.141 291.089); + + --color-purple-50: oklch(97.7% 0.014 308.299); + --color-purple-100: oklch(94.6% 0.033 307.174); + --color-purple-200: oklch(90.2% 0.063 306.703); + --color-purple-300: oklch(82.7% 0.119 306.383); + --color-purple-400: oklch(71.4% 0.203 305.504); + --color-purple-500: oklch(62.7% 0.265 303.9); + --color-purple-600: oklch(55.8% 0.288 302.321); + --color-purple-700: oklch(49.6% 0.265 301.924); + --color-purple-800: oklch(43.8% 0.218 303.724); + --color-purple-900: oklch(38.1% 0.176 304.987); + --color-purple-950: oklch(29.1% 0.149 302.717); + + --color-fuchsia-50: oklch(97.7% 0.017 320.058); + --color-fuchsia-100: oklch(95.2% 0.037 318.852); + --color-fuchsia-200: oklch(90.3% 0.076 319.62); + --color-fuchsia-300: oklch(83.3% 0.145 321.434); + --color-fuchsia-400: oklch(74% 0.238 322.16); + --color-fuchsia-500: oklch(66.7% 0.295 322.15); + --color-fuchsia-600: oklch(59.1% 0.293 322.896); + --color-fuchsia-700: oklch(51.8% 0.253 323.949); + --color-fuchsia-800: oklch(45.2% 0.211 324.591); + --color-fuchsia-900: oklch(40.1% 0.17 325.612); + --color-fuchsia-950: oklch(29.3% 0.136 325.661); + + --color-pink-50: oklch(97.1% 0.014 343.198); + --color-pink-100: oklch(94.8% 0.028 342.258); + --color-pink-200: oklch(89.9% 0.061 343.231); + --color-pink-300: oklch(82.3% 0.12 346.018); + --color-pink-400: oklch(71.8% 0.202 349.761); + --color-pink-500: oklch(65.6% 0.241 354.308); + --color-pink-600: oklch(59.2% 0.249 0.584); + --color-pink-700: oklch(52.5% 0.223 3.958); + --color-pink-800: oklch(45.9% 0.187 3.815); + --color-pink-900: oklch(40.8% 0.153 2.432); + --color-pink-950: oklch(28.4% 0.109 3.907); + + --color-rose-50: oklch(96.9% 0.015 12.422); + --color-rose-100: oklch(94.1% 0.03 12.58); + --color-rose-200: oklch(89.2% 0.058 10.001); + --color-rose-300: oklch(81% 0.117 11.638); + --color-rose-400: oklch(71.2% 0.194 13.428); + --color-rose-500: oklch(64.5% 0.246 16.439); + --color-rose-600: oklch(58.6% 0.253 17.585); + --color-rose-700: oklch(51.4% 0.222 16.935); + --color-rose-800: oklch(45.5% 0.188 13.697); + --color-rose-900: oklch(41% 0.159 10.272); + --color-rose-950: oklch(27.1% 0.105 12.094); + + --color-slate-50: oklch(98.4% 0.003 247.858); + --color-slate-100: oklch(96.8% 0.007 247.896); + --color-slate-200: oklch(92.9% 0.013 255.508); + --color-slate-300: oklch(86.9% 0.022 252.894); + --color-slate-400: oklch(70.4% 0.04 256.788); + --color-slate-500: oklch(55.4% 0.046 257.417); + --color-slate-600: oklch(44.6% 0.043 257.281); + --color-slate-700: oklch(37.2% 0.044 257.287); + --color-slate-800: oklch(27.9% 0.041 260.031); + --color-slate-900: oklch(20.8% 0.042 265.755); + --color-slate-950: oklch(12.9% 0.042 264.695); + + --color-gray-50: oklch(98.5% 0.002 247.839); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-200: oklch(92.8% 0.006 264.531); + --color-gray-300: oklch(87.2% 0.01 258.338); + --color-gray-400: oklch(70.7% 0.022 261.325); + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-700: oklch(37.3% 0.034 259.733); + --color-gray-800: oklch(27.8% 0.033 256.848); + --color-gray-900: oklch(21% 0.034 264.665); + --color-gray-950: oklch(13% 0.028 261.692); + + --color-zinc-50: oklch(98.5% 0 0); + --color-zinc-100: oklch(96.7% 0.001 286.375); + --color-zinc-200: oklch(92% 0.004 286.32); + --color-zinc-300: oklch(87.1% 0.006 286.286); + --color-zinc-400: oklch(70.5% 0.015 286.067); + --color-zinc-500: oklch(55.2% 0.016 285.938); + --color-zinc-600: oklch(44.2% 0.017 285.786); + --color-zinc-700: oklch(37% 0.013 285.805); + --color-zinc-800: oklch(27.4% 0.006 286.033); + --color-zinc-900: oklch(21% 0.006 285.885); + --color-zinc-950: oklch(14.1% 0.005 285.823); + + --color-neutral-50: oklch(98.5% 0 0); + --color-neutral-100: oklch(97% 0 0); + --color-neutral-200: oklch(92.2% 0 0); + --color-neutral-300: oklch(87% 0 0); + --color-neutral-400: oklch(70.8% 0 0); + --color-neutral-500: oklch(55.6% 0 0); + --color-neutral-600: oklch(43.9% 0 0); + --color-neutral-700: oklch(37.1% 0 0); + --color-neutral-800: oklch(26.9% 0 0); + --color-neutral-900: oklch(20.5% 0 0); + --color-neutral-950: oklch(14.5% 0 0); + + --color-stone-50: oklch(98.5% 0.001 106.423); + --color-stone-100: oklch(97% 0.001 106.424); + --color-stone-200: oklch(92.3% 0.003 48.717); + --color-stone-300: oklch(86.9% 0.005 56.366); + --color-stone-400: oklch(70.9% 0.01 56.259); + --color-stone-500: oklch(55.3% 0.013 58.071); + --color-stone-600: oklch(44.4% 0.011 73.639); + --color-stone-700: oklch(37.4% 0.01 67.558); + --color-stone-800: oklch(26.8% 0.007 34.298); + --color-stone-900: oklch(21.6% 0.006 56.043); + --color-stone-950: oklch(14.7% 0.004 49.25); --color-black: #000; --color-white: #fff;