v4: Show theme key completions in var(…)

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -1014,7 +1014,7 @@ function provideCssHelperCompletions(
 
   const match = text
     .substr(0, text.length - 1) // don't include that extra character from earlier
-    .match(/[\s:;/*(){}](?<helper>config|theme|--theme)\(\s*['"]?(?<path>[^)'"]*)$/)
+    .match(/[\s:;/*(){}](?<helper>config|theme|--theme|var)\(\s*['"]?(?<path>[^)'"]*)$/d)
 
   if (match === null) {
     return null
@@ -1040,17 +1040,15 @@ function provideCssHelperCompletions(
     end: position,
   }
 
-  if (state.v4 && match.groups.helper === '--theme') {
-    // List known theme keys
-    let validThemeKeys = resolveKnownThemeKeys(state.designSystem)
+  if (
+    state.v4 &&
+    (match.groups.helper === '--theme' ||
+      match.groups.helper === 'theme' ||
+      match.groups.helper === 'var')
+  ) {
+    let items: CompletionItem[] = themeKeyCompletions(state)
 
-    let items: CompletionItem[] = validThemeKeys.map((themeKey, index) => {
-      return {
-        label: themeKey,
-        sortText: naturalExpand(index, validThemeKeys.length),
-        kind: 9,
-      }
-    })
+    editRange.start.character = match.indices.groups.helper[1] + 1
 
     return withDefaults(
       { isIncomplete: false, items },
@@ -1065,6 +1063,8 @@ function provideCssHelperCompletions(
     )
   }
 
+  if (match.groups.helper === 'var') return null
+
   let base = match.groups.helper === 'config' ? state.config : dlv(state.config, 'theme', {})
   let parts = path.split(/([\[\].]+)/)
   let keys = parts.filter((_, i) => i % 2 === 0)
@@ -2486,3 +2486,37 @@ async function knownUtilityFunctionArguments(state: State, fn: UtilityFn): Promi
 
   return args
 }
+
+export function themeKeyCompletions(state: State): CompletionItem[] {
+  if (!state.v4) return null
+  if (!state.designSystem) return null
+
+  let knownThemeKeys = resolveKnownThemeKeys(state.designSystem)
+
+  return knownThemeKeys.map((themeKey, index) => {
+    let value = state.designSystem.resolveThemeValue(themeKey, true)
+    let documentation: string | undefined
+
+    let color = getColorFromValue(value)
+    if (color !== null) {
+      if (typeof color !== 'string' && (color.alpha ?? 1) !== 0) {
+        documentation = formatColor(color)
+      }
+
+      return {
+        label: themeKey,
+        kind: CompletionItemKind.Color,
+        sortText: naturalExpand(index, knownThemeKeys.length),
+        detail: value,
+        documentation,
+      }
+    }
+
+    return {
+      label: themeKey,
+      kind: CompletionItemKind.Variable,
+      sortText: naturalExpand(index, knownThemeKeys.length),
+      detail: value,
+    }
+  })
+}

packages/tailwindcss-language-service/src/util/rewriting/lookup.ts

@@ -8,5 +8,5 @@ export function resolveVariableValue(design: DesignSystem, name: string) {
     name = `--${name.slice(prefix.length + 3)}`
   }
 
-  return design.resolveThemeValue?.(name) ?? null
+  return design.resolveThemeValue?.(name, true) ?? null
 }

packages/tailwindcss-language-service/src/util/v4/design-system.ts

@@ -39,7 +39,7 @@ export interface DesignSystem {
   getVariants(): VariantEntry[]
 
   // Optional because it did not exist in earlier v4 alpha versions
-  resolveThemeValue?(path: string): string | undefined
+  resolveThemeValue?(path: string, forceInline?: boolean): string | undefined
 }
 
 export interface DesignSystem {