Add color-scheme utilities (#14567)

Replaces #11271 — the merge conflicts are killing me and it's way easier to just do it again (added you as a co-author though @lukewarlow so you're still credited!) This PR adds the following new utilities for the `color-scheme` property: | Class | CSS | | ------------------- | -------------------------- | | `scheme-normal` | `color-scheme: normal` | | `scheme-dark` | `color-scheme: dark` | | `scheme-light` | `color-scheme: light` | | `scheme-light-dark` | `color-scheme: light dark` | | `scheme-only-dark` | `color-scheme: dark only` | | `scheme-only-light` | `color-scheme: light only` | Went with `scheme-*` for the utilities because there are currently no other CSS properties with the word `scheme` in them and `scheme-light-dark` is going to be a common value which is three words already even with the shortened property name. I considered setting `color-scheme: light dark` by default as part of Preflight for this PR but decided against it, at least for this PR. I think that could still be a useful default but we should think about it a bit more because if you're building a light-mode-only site it'll force you to do some extra work. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Luke Warlow <lwarlow@igalia.com>
tailwindlabs · Oct 2, 2024 · dae178e · dae178e
1 parent 3693a71
commit dae178e
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for prefixes ([#14501](https://github.com/tailwindlabs/tailwindcss/pull/14501))
 - Expose timing information in debug mode ([#14553](https://github.com/tailwindlabs/tailwindcss/pull/14553))
 - Add support for `blocklist` in config files ([#14556](https://github.com/tailwindlabs/tailwindcss/pull/14556))
+- Add `color-scheme` utilities ([#14567](https://github.com/tailwindlabs/tailwindcss/pull/14567))
 - _Experimental_: Migrate `@import "tailwindcss/tailwind.css"` to `@import "tailwindcss"` ([#14514](https://github.com/tailwindlabs/tailwindcss/pull/14514))
 - _Experimental_: Add template codemods for migrating `bg-gradient-*` utilities to `bg-linear-*` ([#14537](https://github.com/tailwindlabs/tailwindcss/pull/14537]))
 - _Experimental_: Add template codemods for migrating prefixes ([#14557](https://github.com/tailwindlabs/tailwindcss/pull/14557]))

diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -3174,6 +3174,12 @@ exports[`getClassList 1`] = `
   "scale-z-75",
   "scale-z-90",
   "scale-z-95",
+  "scheme-dark",
+  "scheme-light",
+  "scheme-light-dark",
+  "scheme-normal",
+  "scheme-only-dark",
+  "scheme-only-light",
   "scroll-auto",
   "scroll-m-0.5",
   "scroll-m-1",

diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
@@ -281,6 +281,8 @@ export default [
   'caret-color',
   'accent-color',
 
+  'color-scheme',
+
   'opacity',
 
   'background-blend-mode',

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -5907,6 +5907,70 @@ test('appearance', async () => {
   ).toEqual('')
 })
 
+test('color-scheme', async () => {
+  expect(
+    await run([
+      'scheme-normal',
+      'scheme-dark',
+      'scheme-light',
+      'scheme-light-dark',
+      'scheme-only-dark',
+      'scheme-only-light',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".scheme-dark {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark;
+    }
+
+    .scheme-light {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light;
+    }
+
+    .scheme-light-dark {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light dark;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .scheme-light-dark {
+        --lightningcss-light: ;
+        --lightningcss-dark: initial;
+      }
+    }
+
+    .scheme-normal {
+      color-scheme: normal;
+    }
+
+    .scheme-only-dark {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark only;
+    }
+
+    .scheme-only-light {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light only;
+    }"
+  `)
+  expect(
+    await run([
+      'scheme',
+      '-scheme-dark',
+      '-scheme-light',
+      '-scheme-light-dark',
+      '-scheme-dark-only',
+      '-scheme-light-only',
+    ]),
+  ).toEqual('')
+})
+
 test('columns', async () => {
   expect(
     await compileCss(

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -1872,6 +1872,13 @@ export function createUtilities(theme: Theme) {
   staticUtility('appearance-none', [['appearance', 'none']])
   staticUtility('appearance-auto', [['appearance', 'auto']])
 
+  staticUtility('scheme-normal', [['color-scheme', 'normal']])
+  staticUtility('scheme-dark', [['color-scheme', 'dark']])
+  staticUtility('scheme-light', [['color-scheme', 'light']])
+  staticUtility('scheme-light-dark', [['color-scheme', 'light dark']])
+  staticUtility('scheme-only-dark', [['color-scheme', 'only dark']])
+  staticUtility('scheme-only-light', [['color-scheme', 'only light']])
+
   // columns-*
   staticUtility('columns-auto', [['columns', 'auto']])