From 59fb2c62c8abdb119a42f1c5a666878aae62063c Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 12 Feb 2025 15:51:50 -0500
Subject: [PATCH 1/3] Show light swatch from `light-dark()` functions

---
 packages/tailwindcss-language-service/src/util/color.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index d0427bf9..4b0d3b84 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -66,6 +66,7 @@ function getColorsInString(state: State, str: string): (culori.Color | KeywordCo
 
   str = replaceCssVarsWithFallbacks(state, str)
   str = removeColorMixWherePossible(str)
+  str = resolveLightDark(str)
 
   let possibleColors = str.matchAll(colorRegex)
 
@@ -280,3 +281,9 @@ function removeColorMixWherePossible(str: string) {
     return culori.formatRgb({ ...parsed, alpha })
   })
 }
+
+const LIGHT_DARK_REGEX = /light-dark\(\s*(.*?)\s*,\s*.*?\s*\)/g
+
+function resolveLightDark(str: string) {
+  return str.replace(LIGHT_DARK_REGEX, (_, lightColor) => lightColor)
+}

From 30ea3a097373582b2dda299e144c3f337f282e9f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 12 Feb 2025 15:55:36 -0500
Subject: [PATCH 2/3] Add test

---
 .../tests/colors/colors.test.js               | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/packages/tailwindcss-language-server/tests/colors/colors.test.js b/packages/tailwindcss-language-server/tests/colors/colors.test.js
index 2a584591..f39ee1d9 100644
--- a/packages/tailwindcss-language-server/tests/colors/colors.test.js
+++ b/packages/tailwindcss-language-server/tests/colors/colors.test.js
@@ -353,3 +353,38 @@ defineTest({
     ])
   },
 })
+
+defineTest({
+  name: 'colors that use light-dark() resolve to their light color',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+      @theme {
+        --color-primary: light-dark(#ff0000, #0000ff);
+      }
+    `,
+  },
+  prepare: async ({ root }) => ({ c: await init(root) }),
+  handle: async ({ c }) => {
+    let textDocument = await c.openDocument({
+      lang: 'html',
+      text: '<div class="bg-primary">',
+    })
+
+    expect(c.project).toMatchObject({
+      tailwind: {
+        version: '4.0.0',
+        isDefaultVersion: true,
+      },
+    })
+
+    let colors = await c.sendRequest(DocumentColorRequest.type, {
+      textDocument,
+    })
+
+    expect(colors).toEqual([
+      //
+      { range: range(0, 12, 0, 22), color: color(1, 0, 0, 1) },
+    ])
+  },
+})

From b1c5cd4cf2f53930bf64f867dd9b96b51e61415d Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 12 Feb 2025 15:57:07 -0500
Subject: [PATCH 3/3] Update changelog

---
 packages/vscode-tailwindcss/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index fc2f7469..6e8e0867 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Show light color swatch from light-dark() functions ([#1199](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1199))
 
 ## 0.14.4