From f143f91c03366604b131fa307112bbb5ce29a582 Mon Sep 17 00:00:00 2001
From: Miles <git@miles.tw>
Date: Wed, 28 Feb 2024 17:50:16 +0800
Subject: [PATCH] Refactor color value retrieval and formatting in
 getColorsItem() function

---
 .../src/providers/completion.ts               | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/language-service/src/providers/completion.ts b/packages/language-service/src/providers/completion.ts
index 7416f1627..3bb00e8f2 100644
--- a/packages/language-service/src/providers/completion.ts
+++ b/packages/language-service/src/providers/completion.ts
@@ -298,13 +298,36 @@ export function getReturnItem(items: Array<string | CompletionItem>, kind: Compl
 function getColorsItem(css: MasterCSS = new MasterCSS()): CompletionItem[] {
     const masterStyleCompletionItem: CompletionItem[] = []
 
-    // todo: refactor css.variables
     for (const eachVariableName in css.variables) {
         const eachVariable = css.variables[eachVariableName]
         if (eachVariable.type === 'color') {
+
+            let colorValue
+            let colorSpace
+            if (eachVariable.themes) {
+                colorValue = Object.values(eachVariable.themes)[0].value
+                colorSpace = Object.values<any>(eachVariable.themes)[0].space
+            } else {
+                colorValue = eachVariable.value
+                colorSpace = eachVariable.space
+            }
+
+            let colorResult
+            switch (colorSpace) {
+                case 'rgb':
+                    colorResult = `rgb(${colorValue?.split(' ')?.slice(0, 3).join(',')})`
+                    break
+                case 'hsl':
+                    colorResult = `hsl(${colorValue?.split(' ')?.slice(0, 3).join(',')})`
+                    break
+                case 'hex':
+                    colorResult = `#${colorValue}`
+                    break
+            }
+
             masterStyleCompletionItem.push({
                 label: eachVariableName,
-                documentation: eachVariable.value,
+                documentation: colorResult,
                 kind: 16,
                 sortText: eachVariableName
             })