Add mauve, olive, mist, and taupe color palettes (#19627)
## Summary This PR adds four new neutral color palettes to Tailwind CSS: `mauve`, `olive`, `mist`, and `taupe`. Each palette includes 11 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) defined using the OKLch color space for perceptually uniform color transitions. These new palettes expand the available neutral color options beyond the existing stone, slate, gray, zinc, and neutral palettes, providing designers with more nuanced choices for different design systems and brand aesthetics. The changes include: - Added color definitions to `packages/tailwindcss/src/compat/colors.ts` - Added corresponding CSS custom properties to `packages/tailwindcss/theme.css` ## Test plan To verify these changes: 1. Build the project and ensure no compilation errors occur 2. Verify that the new color palettes are available in the Tailwind config 3. Test that utilities like `bg-mauve-500`, `text-olive-600`, `border-mist-300`, and `ring-taupe-400` work correctly 4. Confirm that the colors render with proper OKLch values in the browser https://claude.ai/code/session_01QhC1ZYkW3pCd55WbbqYBNV --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Adam Wathan
GitHub
parent
d9fff9f595
commit
d0a5612872
4 changed files with 104 additions and 3 deletions
|
|
@ -10,12 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
### Added
|
||||
|
||||
- _Experimental_: Add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
|
||||
- Add `mauve`, `olive`, `mist`, and `taupe` color palettes to the default theme ([`#19627`](https://github.com/tailwindlabs/tailwindcss/pull/19627))
|
||||
- Add `@tailwindcss/webpack` loader for Tailwind CSS v4 ([#19610](https://github.com/tailwindlabs/tailwindcss/pull/19610))
|
||||
- Add `pbs-*`, `pbe-*`, `mbs-*`, `mbe-*`, `scroll-pbs-*`, `scroll-pbe-*`, `scroll-mbs-*`, `scroll-mbe-*`, `border-bs-*`, `border-be-*` utilities for `padding-block-start`, `padding-block-end`, `margin-block-start`, `margin-block-end`, `scroll-padding-block-start`, `scroll-padding-block-end`, `scroll-margin-block-start`, `scroll-margin-block-end`, `border-block-start`, and `border-block-end` ([`#19601`](https://github.com/tailwindlabs/tailwindcss/pull/19601))
|
||||
- Add `inline-*`, `min-inline-*`, `max-inline-*`, `block-*`, `min-block-*`, `max-block-*` utilities for `inline-size`, `min-inline-size`, `max-inline-size`, `block-size`, `min-block-size`, and `max-block-size` ([#19612](https://github.com/tailwindlabs/tailwindcss/pull/19612))
|
||||
- Add `inset-s-*`, `inset-e-*`, `inset-bs-*`, `inset-be-*` utilities for `inset-inline-start`, `inset-inline-end`, `inset-block-start`, and `inset-block-end` ([#19613](https://github.com/tailwindlabs/tailwindcss/pull/19613))
|
||||
- Add `font-features-*` utility for `font-feature-settings` ([#19623](https://github.com/tailwindlabs/tailwindcss/pull/19615))
|
||||
- Add '.jj' to ignored content directories ([#19687](https://github.com/tailwindlabs/tailwindcss/pull/19687))
|
||||
- Add `.jj` to ignored content directories ([#19687](https://github.com/tailwindlabs/tailwindcss/pull/19687))
|
||||
|
||||
### Fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,58 @@ export default {
|
|||
'900': 'oklch(21.6% 0.006 56.043)',
|
||||
'950': 'oklch(14.7% 0.004 49.25)',
|
||||
},
|
||||
mauve: {
|
||||
'50': 'oklch(98.5% 0 0)',
|
||||
'100': 'oklch(96% 0.003 325.6)',
|
||||
'200': 'oklch(92.2% 0.005 325.62)',
|
||||
'300': 'oklch(86.5% 0.012 325.68)',
|
||||
'400': 'oklch(71.1% 0.019 323.02)',
|
||||
'500': 'oklch(54.2% 0.034 322.5)',
|
||||
'600': 'oklch(43.5% 0.029 321.78)',
|
||||
'700': 'oklch(36.4% 0.029 323.89)',
|
||||
'800': 'oklch(26.3% 0.024 320.12)',
|
||||
'900': 'oklch(21.2% 0.019 322.12)',
|
||||
'950': 'oklch(14.5% 0.008 326)',
|
||||
},
|
||||
olive: {
|
||||
'50': 'oklch(98.8% 0.003 106.5)',
|
||||
'100': 'oklch(96.6% 0.005 106.5)',
|
||||
'200': 'oklch(93% 0.007 106.5)',
|
||||
'300': 'oklch(88% 0.011 106.6)',
|
||||
'400': 'oklch(73.7% 0.021 106.9)',
|
||||
'500': 'oklch(58% 0.031 107.3)',
|
||||
'600': 'oklch(46.6% 0.025 107.3)',
|
||||
'700': 'oklch(39.4% 0.023 107.4)',
|
||||
'800': 'oklch(28.6% 0.016 107.4)',
|
||||
'900': 'oklch(22.8% 0.013 107.4)',
|
||||
'950': 'oklch(15.3% 0.006 107.1)',
|
||||
},
|
||||
mist: {
|
||||
'50': 'oklch(98.7% 0.002 197.1)',
|
||||
'100': 'oklch(96.3% 0.002 197.1)',
|
||||
'200': 'oklch(92.5% 0.005 214.3)',
|
||||
'300': 'oklch(87.2% 0.007 219.6)',
|
||||
'400': 'oklch(72.3% 0.014 214.4)',
|
||||
'500': 'oklch(56% 0.021 213.5)',
|
||||
'600': 'oklch(45% 0.017 213.2)',
|
||||
'700': 'oklch(37.8% 0.015 216)',
|
||||
'800': 'oklch(27.5% 0.011 216.9)',
|
||||
'900': 'oklch(21.8% 0.008 223.9)',
|
||||
'950': 'oklch(14.8% 0.004 228.8)',
|
||||
},
|
||||
taupe: {
|
||||
'50': 'oklch(98.6% 0.002 67.8)',
|
||||
'100': 'oklch(96% 0.002 17.2)',
|
||||
'200': 'oklch(92.2% 0.005 34.3)',
|
||||
'300': 'oklch(86.8% 0.007 39.5)',
|
||||
'400': 'oklch(71.4% 0.014 41.2)',
|
||||
'500': 'oklch(54.7% 0.021 43.1)',
|
||||
'600': 'oklch(43.8% 0.017 39.3)',
|
||||
'700': 'oklch(36.7% 0.016 35.7)',
|
||||
'800': 'oklch(26.8% 0.011 36.5)',
|
||||
'900': 'oklch(21.4% 0.009 43.1)',
|
||||
'950': 'oklch(14.7% 0.004 49.3)',
|
||||
},
|
||||
red: {
|
||||
'50': 'oklch(97.1% 0.013 17.38)',
|
||||
'100': 'oklch(93.6% 0.032 17.717)',
|
||||
|
|
|
|||
|
|
@ -178,8 +178,8 @@ test('source maps trace back to @import location', async ({ expect }) => {
|
|||
'theme.css: 5:22 <- 4:22',
|
||||
'theme.css: 6:4 <- 6:2-8:0',
|
||||
'theme.css: 7:13 <- 8:13',
|
||||
'theme.css: 8:4-43 <- 446:2-54',
|
||||
'theme.css: 9:4-48 <- 449:2-59',
|
||||
'theme.css: 8:4-43 <- 494:2-54',
|
||||
'theme.css: 9:4-48 <- 497:2-59',
|
||||
'index.css: 12:0-12 <- 4:0-37',
|
||||
'preflight.css: 13:2-59 <- 7:0-11:23',
|
||||
'preflight.css: 14:4-26 <- 12:2-24',
|
||||
|
|
|
|||
|
|
@ -271,6 +271,54 @@
|
|||
--color-stone-900: oklch(21.6% 0.006 56.043);
|
||||
--color-stone-950: oklch(14.7% 0.004 49.25);
|
||||
|
||||
--color-mauve-50: oklch(98.5% 0 0);
|
||||
--color-mauve-100: oklch(96% 0.003 325.6);
|
||||
--color-mauve-200: oklch(92.2% 0.005 325.62);
|
||||
--color-mauve-300: oklch(86.5% 0.012 325.68);
|
||||
--color-mauve-400: oklch(71.1% 0.019 323.02);
|
||||
--color-mauve-500: oklch(54.2% 0.034 322.5);
|
||||
--color-mauve-600: oklch(43.5% 0.029 321.78);
|
||||
--color-mauve-700: oklch(36.4% 0.029 323.89);
|
||||
--color-mauve-800: oklch(26.3% 0.024 320.12);
|
||||
--color-mauve-900: oklch(21.2% 0.019 322.12);
|
||||
--color-mauve-950: oklch(14.5% 0.008 326);
|
||||
|
||||
--color-olive-50: oklch(98.8% 0.003 106.5);
|
||||
--color-olive-100: oklch(96.6% 0.005 106.5);
|
||||
--color-olive-200: oklch(93% 0.007 106.5);
|
||||
--color-olive-300: oklch(88% 0.011 106.6);
|
||||
--color-olive-400: oklch(73.7% 0.021 106.9);
|
||||
--color-olive-500: oklch(58% 0.031 107.3);
|
||||
--color-olive-600: oklch(46.6% 0.025 107.3);
|
||||
--color-olive-700: oklch(39.4% 0.023 107.4);
|
||||
--color-olive-800: oklch(28.6% 0.016 107.4);
|
||||
--color-olive-900: oklch(22.8% 0.013 107.4);
|
||||
--color-olive-950: oklch(15.3% 0.006 107.1);
|
||||
|
||||
--color-mist-50: oklch(98.7% 0.002 197.1);
|
||||
--color-mist-100: oklch(96.3% 0.002 197.1);
|
||||
--color-mist-200: oklch(92.5% 0.005 214.3);
|
||||
--color-mist-300: oklch(87.2% 0.007 219.6);
|
||||
--color-mist-400: oklch(72.3% 0.014 214.4);
|
||||
--color-mist-500: oklch(56% 0.021 213.5);
|
||||
--color-mist-600: oklch(45% 0.017 213.2);
|
||||
--color-mist-700: oklch(37.8% 0.015 216);
|
||||
--color-mist-800: oklch(27.5% 0.011 216.9);
|
||||
--color-mist-900: oklch(21.8% 0.008 223.9);
|
||||
--color-mist-950: oklch(14.8% 0.004 228.8);
|
||||
|
||||
--color-taupe-50: oklch(98.6% 0.002 67.8);
|
||||
--color-taupe-100: oklch(96% 0.002 17.2);
|
||||
--color-taupe-200: oklch(92.2% 0.005 34.3);
|
||||
--color-taupe-300: oklch(86.8% 0.007 39.5);
|
||||
--color-taupe-400: oklch(71.4% 0.014 41.2);
|
||||
--color-taupe-500: oklch(54.7% 0.021 43.1);
|
||||
--color-taupe-600: oklch(43.8% 0.017 39.3);
|
||||
--color-taupe-700: oklch(36.7% 0.016 35.7);
|
||||
--color-taupe-800: oklch(26.8% 0.011 36.5);
|
||||
--color-taupe-900: oklch(21.4% 0.009 43.1);
|
||||
--color-taupe-950: oklch(14.7% 0.004 49.3);
|
||||
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue