From 3244da898144d838bba97121c15d83cb3dfe76b7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 11 Nov 2024 10:08:49 -0500 Subject: [PATCH] Sort theme variables in a more intentional order (#14952) This PR updates our default `theme.css` file and organizes the CSS variables in a custom order that's optimized for looking nice in Chrome dev tools. You can only see ~50 variables "above the fold" in dev tools without clicking "Show all", so I've opted for putting variables near the top that have the highest "impact" on the design/brand of the site, and also showcase some of the modern CSS features we are using in Tailwind CSS v4. Here's what it looks like: image I really want to show off the color palette because the swatches look nice and because seeing `oklch` there feels like a nice signal for Tailwind CSS v4 being very modern, but we have a lot of colors so you can't really fit much else if you do this. I stuck font families at the top since it's one of the few things that we can fit there that also feels important to your site's brand but still has few enough values not to push away the color palette. Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- .../src/__snapshots__/index.test.ts.snap | 222 +++++++-------- .../src/__snapshots__/index.test.ts.snap | 222 +++++++-------- packages/tailwindcss/theme.css | 264 ++++++++---------- 3 files changed, 345 insertions(+), 363 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index 83624ee4f..7900be587 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -3,76 +3,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` "@layer theme { :root { - --default-transition-duration: .15s; - --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); - --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var(--font-sans--font-variation-settings); - --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); - --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); - --breakpoint-sm: 40rem; - --breakpoint-md: 48rem; - --breakpoint-lg: 64rem; - --breakpoint-xl: 80rem; - --breakpoint-2xl: 96rem; - --color-black: #000; - --color-white: #fff; - --color-slate-50: oklch(.984 .003 247.858); - --color-slate-100: oklch(.968 .007 247.896); - --color-slate-200: oklch(.929 .013 255.508); - --color-slate-300: oklch(.869 .022 252.894); - --color-slate-400: oklch(.704 .04 256.788); - --color-slate-500: oklch(.554 .046 257.417); - --color-slate-600: oklch(.446 .043 257.281); - --color-slate-700: oklch(.372 .044 257.287); - --color-slate-800: oklch(.279 .041 260.031); - --color-slate-900: oklch(.208 .042 265.755); - --color-slate-950: oklch(.129 .042 264.695); - --color-gray-50: oklch(.985 .002 247.839); - --color-gray-100: oklch(.967 .003 264.542); - --color-gray-200: oklch(.928 .006 264.531); - --color-gray-300: oklch(.872 .01 258.338); - --color-gray-400: oklch(.707 .022 261.325); - --color-gray-500: oklch(.551 .027 264.364); - --color-gray-600: oklch(.446 .03 256.802); - --color-gray-700: oklch(.373 .034 259.733); - --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 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); - --color-zinc-400: oklch(.705 .015 286.067); - --color-zinc-500: oklch(.552 .016 285.938); - --color-zinc-600: oklch(.442 .017 285.786); - --color-zinc-700: oklch(.37 .013 285.805); - --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 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); - --color-stone-300: oklch(.869 .005 56.366); - --color-stone-400: oklch(.709 .01 56.259); - --color-stone-500: oklch(.553 .013 58.071); - --color-stone-600: oklch(.444 .011 73.639); - --color-stone-700: oklch(.374 .01 67.558); - --color-stone-800: oklch(.268 .007 34.298); - --color-stone-900: oklch(.216 .006 56.043); - --color-stone-950: oklch(.147 .004 49.25); + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); @@ -260,42 +193,69 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); - --animate-spin: spin 1s linear infinite; - --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; - --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; - --animate-bounce: bounce 1s infinite; - --blur-xs: 4px; - --blur-sm: 8px; - --blur-md: 12px; - --blur-lg: 16px; - --blur-xl: 24px; - --blur-2xl: 40px; - --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - --shadow-2xs: 0 1px #0000000d; - --shadow-xs: 0 1px 2px 0 #0000000d; - --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; - --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; - --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; - --shadow-2xl: 0 25px 50px -12px #00000040; - --inset-shadow-2xs: inset 0 1px #0000000d; - --inset-shadow-xs: inset 0 1px 1px #0000000d; - --inset-shadow-sm: inset 0 2px 4px #0000000d; - --drop-shadow-xs: 0 1px 1px #0000000d; - --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; - --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; - --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; - --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; - --drop-shadow-2xl: 0 25px 25px #00000026; + --color-slate-50: oklch(.984 .003 247.858); + --color-slate-100: oklch(.968 .007 247.896); + --color-slate-200: oklch(.929 .013 255.508); + --color-slate-300: oklch(.869 .022 252.894); + --color-slate-400: oklch(.704 .04 256.788); + --color-slate-500: oklch(.554 .046 257.417); + --color-slate-600: oklch(.446 .043 257.281); + --color-slate-700: oklch(.372 .044 257.287); + --color-slate-800: oklch(.279 .041 260.031); + --color-slate-900: oklch(.208 .042 265.755); + --color-slate-950: oklch(.129 .042 264.695); + --color-gray-50: oklch(.985 .002 247.839); + --color-gray-100: oklch(.967 .003 264.542); + --color-gray-200: oklch(.928 .006 264.531); + --color-gray-300: oklch(.872 .01 258.338); + --color-gray-400: oklch(.707 .022 261.325); + --color-gray-500: oklch(.551 .027 264.364); + --color-gray-600: oklch(.446 .03 256.802); + --color-gray-700: oklch(.373 .034 259.733); + --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 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); + --color-zinc-400: oklch(.705 .015 286.067); + --color-zinc-500: oklch(.552 .016 285.938); + --color-zinc-600: oklch(.442 .017 285.786); + --color-zinc-700: oklch(.37 .013 285.805); + --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 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); + --color-stone-300: oklch(.869 .005 56.366); + --color-stone-400: oklch(.709 .01 56.259); + --color-stone-500: oklch(.553 .013 58.071); + --color-stone-600: oklch(.444 .011 73.639); + --color-stone-700: oklch(.374 .01 67.558); + --color-stone-800: oklch(.268 .007 34.298); + --color-stone-900: oklch(.216 .006 56.043); + --color-stone-950: oklch(.147 .004 49.25); + --color-black: #000; + --color-white: #fff; --spacing: .25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; @@ -310,9 +270,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --container-6xl: 72rem; --container-7xl: 80rem; --container-prose: 65ch; - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-xs: .75rem; --text-xs--line-height: 1rem; --text-sm: .875rem; @@ -359,14 +316,57 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = ` --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; + --radius-xs: .125rem; + --radius-sm: .25rem; + --radius-md: .375rem; + --radius-lg: .5rem; + --radius-xl: .75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --shadow-2xs: 0 1px #0000000d; + --shadow-xs: 0 1px 2px 0 #0000000d; + --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --inset-shadow-2xs: inset 0 1px #0000000d; + --inset-shadow-xs: inset 0 1px 1px #0000000d; + --inset-shadow-sm: inset 0 2px 4px #0000000d; + --drop-shadow-xs: 0 1px 1px #0000000d; + --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; + --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; + --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; + --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; + --drop-shadow-2xl: 0 25px 25px #00000026; + --ease-in: cubic-bezier(.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; + --animate-bounce: bounce 1s infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; - --ease-in: cubic-bezier(.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, .2, 1); - --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --default-transition-duration: .15s; + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var(--font-sans--font-variation-settings); + --default-mono-font-family: var(--font-mono); + --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); + --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); } } diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 4c4150925..cbb08e74d 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -2,76 +2,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = ` ":root { - --default-transition-duration: .15s; - --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); - --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var(--font-sans--font-variation-settings); - --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); - --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); - --breakpoint-sm: 40rem; - --breakpoint-md: 48rem; - --breakpoint-lg: 64rem; - --breakpoint-xl: 80rem; - --breakpoint-2xl: 96rem; - --color-black: #000; - --color-white: #fff; - --color-slate-50: oklch(.984 .003 247.858); - --color-slate-100: oklch(.968 .007 247.896); - --color-slate-200: oklch(.929 .013 255.508); - --color-slate-300: oklch(.869 .022 252.894); - --color-slate-400: oklch(.704 .04 256.788); - --color-slate-500: oklch(.554 .046 257.417); - --color-slate-600: oklch(.446 .043 257.281); - --color-slate-700: oklch(.372 .044 257.287); - --color-slate-800: oklch(.279 .041 260.031); - --color-slate-900: oklch(.208 .042 265.755); - --color-slate-950: oklch(.129 .042 264.695); - --color-gray-50: oklch(.985 .002 247.839); - --color-gray-100: oklch(.967 .003 264.542); - --color-gray-200: oklch(.928 .006 264.531); - --color-gray-300: oklch(.872 .01 258.338); - --color-gray-400: oklch(.707 .022 261.325); - --color-gray-500: oklch(.551 .027 264.364); - --color-gray-600: oklch(.446 .03 256.802); - --color-gray-700: oklch(.373 .034 259.733); - --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 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); - --color-zinc-400: oklch(.705 .015 286.067); - --color-zinc-500: oklch(.552 .016 285.938); - --color-zinc-600: oklch(.442 .017 285.786); - --color-zinc-700: oklch(.37 .013 285.805); - --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 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); - --color-stone-300: oklch(.869 .005 56.366); - --color-stone-400: oklch(.709 .01 56.259); - --color-stone-500: oklch(.553 .013 58.071); - --color-stone-600: oklch(.444 .011 73.639); - --color-stone-700: oklch(.374 .01 67.558); - --color-stone-800: oklch(.268 .007 34.298); - --color-stone-900: oklch(.216 .006 56.043); - --color-stone-950: oklch(.147 .004 49.25); + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(.971 .013 17.38); --color-red-100: oklch(.936 .032 17.717); --color-red-200: oklch(.885 .062 18.334); @@ -259,42 +192,69 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --color-rose-800: oklch(.455 .188 13.697); --color-rose-900: oklch(.41 .159 10.272); --color-rose-950: oklch(.271 .105 12.094); - --animate-spin: spin 1s linear infinite; - --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; - --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; - --animate-bounce: bounce 1s infinite; - --blur-xs: 4px; - --blur-sm: 8px; - --blur-md: 12px; - --blur-lg: 16px; - --blur-xl: 24px; - --blur-2xl: 40px; - --blur-3xl: 64px; - --radius-xs: .125rem; - --radius-sm: .25rem; - --radius-md: .375rem; - --radius-lg: .5rem; - --radius-xl: .75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; - --shadow-2xs: 0 1px #0000000d; - --shadow-xs: 0 1px 2px 0 #0000000d; - --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; - --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; - --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; - --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; - --shadow-2xl: 0 25px 50px -12px #00000040; - --inset-shadow-2xs: inset 0 1px #0000000d; - --inset-shadow-xs: inset 0 1px 1px #0000000d; - --inset-shadow-sm: inset 0 2px 4px #0000000d; - --drop-shadow-xs: 0 1px 1px #0000000d; - --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; - --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; - --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; - --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; - --drop-shadow-2xl: 0 25px 25px #00000026; + --color-slate-50: oklch(.984 .003 247.858); + --color-slate-100: oklch(.968 .007 247.896); + --color-slate-200: oklch(.929 .013 255.508); + --color-slate-300: oklch(.869 .022 252.894); + --color-slate-400: oklch(.704 .04 256.788); + --color-slate-500: oklch(.554 .046 257.417); + --color-slate-600: oklch(.446 .043 257.281); + --color-slate-700: oklch(.372 .044 257.287); + --color-slate-800: oklch(.279 .041 260.031); + --color-slate-900: oklch(.208 .042 265.755); + --color-slate-950: oklch(.129 .042 264.695); + --color-gray-50: oklch(.985 .002 247.839); + --color-gray-100: oklch(.967 .003 264.542); + --color-gray-200: oklch(.928 .006 264.531); + --color-gray-300: oklch(.872 .01 258.338); + --color-gray-400: oklch(.707 .022 261.325); + --color-gray-500: oklch(.551 .027 264.364); + --color-gray-600: oklch(.446 .03 256.802); + --color-gray-700: oklch(.373 .034 259.733); + --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 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); + --color-zinc-400: oklch(.705 .015 286.067); + --color-zinc-500: oklch(.552 .016 285.938); + --color-zinc-600: oklch(.442 .017 285.786); + --color-zinc-700: oklch(.37 .013 285.805); + --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 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); + --color-stone-300: oklch(.869 .005 56.366); + --color-stone-400: oklch(.709 .01 56.259); + --color-stone-500: oklch(.553 .013 58.071); + --color-stone-600: oklch(.444 .011 73.639); + --color-stone-700: oklch(.374 .01 67.558); + --color-stone-800: oklch(.268 .007 34.298); + --color-stone-900: oklch(.216 .006 56.043); + --color-stone-950: oklch(.147 .004 49.25); + --color-black: #000; + --color-white: #fff; --spacing: .25rem; + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; @@ -309,9 +269,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --container-6xl: 72rem; --container-7xl: 80rem; --container-prose: 65ch; - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-xs: .75rem; --text-xs--line-height: 1rem; --text-sm: .875rem; @@ -358,14 +315,57 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; + --radius-xs: .125rem; + --radius-sm: .25rem; + --radius-md: .375rem; + --radius-lg: .5rem; + --radius-xl: .75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + --shadow-2xs: 0 1px #0000000d; + --shadow-xs: 0 1px 2px 0 #0000000d; + --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; + --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; + --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; + --shadow-2xl: 0 25px 50px -12px #00000040; + --inset-shadow-2xs: inset 0 1px #0000000d; + --inset-shadow-xs: inset 0 1px 1px #0000000d; + --inset-shadow-sm: inset 0 2px 4px #0000000d; + --drop-shadow-xs: 0 1px 1px #0000000d; + --drop-shadow-sm: 0 1px 2px #0000001a, 0 1px 1px #0000000f; + --drop-shadow-md: 0 4px 3px #00000012, 0 2px 2px #0000000f; + --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a; + --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014; + --drop-shadow-2xl: 0 25px 25px #00000026; + --ease-in: cubic-bezier(.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, .2, 1); + --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; + --animate-bounce: bounce 1s infinite; + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; - --ease-in: cubic-bezier(.4, 0, 1, 1); - --ease-out: cubic-bezier(0, 0, .2, 1); - --ease-in-out: cubic-bezier(.4, 0, .2, 1); + --default-transition-duration: .15s; + --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); + --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var(--font-sans--font-variation-settings); + --default-mono-font-family: var(--font-mono); + --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); + --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); } .w-4 { diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css index 842d172b4..9e443f5af 100644 --- a/packages/tailwindcss/theme.css +++ b/packages/tailwindcss/theme.css @@ -1,84 +1,9 @@ @theme default { - /* Defaults */ - --default-transition-duration: 150ms; - --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - --default-font-family: var(--font-sans); - --default-font-feature-settings: var(--font-sans--font-feature-settings); - --default-font-variation-settings: var(--font-sans--font-variation-settings); - --default-mono-font-family: var(--font-mono); - --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); - --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); - - /* Breakpoints */ - --breakpoint-sm: 40rem; - --breakpoint-md: 48rem; - --breakpoint-lg: 64rem; - --breakpoint-xl: 80rem; - --breakpoint-2xl: 96rem; - - /* Colors */ - --color-black: #000; - --color-white: #fff; - - --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); + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: 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); @@ -284,57 +209,77 @@ --color-rose-900: oklch(0.41 0.159 10.272); --color-rose-950: oklch(0.271 0.105 12.094); - /* Animations */ - --animate-spin: spin 1s linear infinite; - --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; - --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - --animate-bounce: bounce 1s infinite; + --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); - /* Blurs */ - --blur-xs: 4px; - --blur-sm: 8px; - --blur-md: 12px; - --blur-lg: 16px; - --blur-xl: 24px; - --blur-2xl: 40px; - --blur-3xl: 64px; + --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); - /* Radii */ - --radius-xs: 0.125rem; - --radius-sm: 0.25rem; - --radius-md: 0.375rem; - --radius-lg: 0.5rem; - --radius-xl: 0.75rem; - --radius-2xl: 1rem; - --radius-3xl: 1.5rem; - --radius-4xl: 2rem; + --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); - /* Shadows */ - --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); - --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); - --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --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); - /* Inset shadows */ - --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); - --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); - --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); + --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); - /* Drop shadows */ - --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); - --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); - --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06); - --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1); - --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08); - --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); + --color-black: #000; + --color-white: #fff; - /* Spacing */ --spacing: 0.25rem; - /* Container sizes */ + --breakpoint-sm: 40rem; + --breakpoint-md: 48rem; + --breakpoint-lg: 64rem; + --breakpoint-xl: 80rem; + --breakpoint-2xl: 96rem; + --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; @@ -350,14 +295,6 @@ --container-7xl: 80rem; --container-prose: 65ch; - /* Fonts */ - --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', - 'Courier New', monospace; - - /* Type scale */ --text-xs: 0.75rem; --text-xs--line-height: 1rem; --text-sm: 0.875rem; @@ -385,7 +322,6 @@ --text-9xl: 8rem; --text-9xl--line-height: 1; - /* Font weights */ --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; @@ -396,7 +332,6 @@ --font-weight-extrabold: 800; --font-weight-black: 900; - /* Tracking */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; @@ -404,25 +339,49 @@ --tracking-wider: 0.05em; --tracking-widest: 0.1em; - /* Leading */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; - /* 3D perspectives */ - --perspective-dramatic: 100px; - --perspective-near: 300px; - --perspective-normal: 500px; - --perspective-midrange: 800px; - --perspective-distant: 1200px; + --radius-xs: 0.125rem; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-2xl: 1rem; + --radius-3xl: 1.5rem; + --radius-4xl: 2rem; + + --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); + --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + + --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); + --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); + --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); + + --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); + --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06); + --drop-shadow-md: 0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06); + --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1); + --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08); + --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); - /* Transition timing functions */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --animate-spin: spin 1s linear infinite; + --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animate-bounce: bounce 1s infinite; + @keyframes spin { to { transform: rotate(360deg); @@ -455,6 +414,29 @@ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } + + --blur-xs: 4px; + --blur-sm: 8px; + --blur-md: 12px; + --blur-lg: 16px; + --blur-xl: 24px; + --blur-2xl: 40px; + --blur-3xl: 64px; + + --perspective-dramatic: 100px; + --perspective-near: 300px; + --perspective-normal: 500px; + --perspective-midrange: 800px; + --perspective-distant: 1200px; + + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-font-feature-settings: var(--font-sans--font-feature-settings); + --default-font-variation-settings: var(--font-sans--font-variation-settings); + --default-mono-font-family: var(--font-mono); + --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); + --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); } /* Deprecated */