Skip to content

Commit

Permalink
Sort theme variables in a more intentional order (#14952)
Browse files Browse the repository at this point in the history 
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:

<kbd><img width="957" alt="image"
src="https://github.com/user-attachments/assets/dade9244-6e22-4822-ac5c-ffa33e895f6e"></kbd>

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>
  • Loading branch information
@adamwathan
adamwathan and adamwathan authored Nov 11, 2024
1 parent 6177ca9 commit 3244da8
Show file tree
Hide file tree
Showing 3 changed files with 345 additions and 363 deletions.
222 changes: 111 additions & 111 deletions packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
Expand Down
Loading

0 comments on commit 3244da8

Please sign in to comment.