From 7310071c3e1d9c60802f041145936b6948d02cee Mon Sep 17 00:00:00 2001
From: Joo Chanhwi <56245920+te6-in@users.noreply.github.com>
Date: Sun, 19 Jan 2025 23:41:26 +0900
Subject: [PATCH] fix: add missing foreground color to Action Chip

---
 .../rootage/components/action-chip.json       |  6 ++++
 docs/public/rootage/parsed.json               | 32 +++++++++++++++++++
 .../qvism-preset/src/recipes/action-chip.ts   |  9 ++++++
 packages/rootage/components/action-chip.yaml  |  4 +++
 packages/stylesheet/actionChip.css            |  8 +++++
 packages/vars/lib/component/action-chip.d.ts  |  6 ++++
 packages/vars/lib/component/action-chip.mjs   |  6 ++++
 7 files changed, 71 insertions(+)

diff --git a/docs/public/rootage/components/action-chip.json b/docs/public/rootage/components/action-chip.json
index ebc10108f..78c37f556 100644
--- a/docs/public/rootage/components/action-chip.json
+++ b/docs/public/rootage/components/action-chip.json
@@ -21,6 +21,9 @@
         "suffixIcon": {
           "color": "$color.fg.neutral-subtle"
         },
+        "icon": {
+          "color": "$color.fg.neutral"
+        },
         "count": {
           "color": "$color.fg.neutral-muted",
           "fontWeight": "$font-weight.medium"
@@ -44,6 +47,9 @@
         "suffixIcon": {
           "color": "$color.fg.disabled"
         },
+        "icon": {
+          "color": "$color.fg.disabled"
+        },
         "count": {
           "color": "$color.fg.disabled"
         }
diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
index dd3a79a8e..f980bee63 100644
--- a/docs/public/rootage/parsed.json
+++ b/docs/public/rootage/parsed.json
@@ -8458,6 +8458,22 @@
                     }
                   ]
                 },
+                {
+                  "key": "icon",
+                  "property": [
+                    {
+                      "key": "color",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "color",
+                          "fg"
+                        ],
+                        "key": "neutral"
+                      }
+                    }
+                  ]
+                },
                 {
                   "key": "count",
                   "property": [
@@ -8578,6 +8594,22 @@
                     }
                   ]
                 },
+                {
+                  "key": "icon",
+                  "property": [
+                    {
+                      "key": "color",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "color",
+                          "fg"
+                        ],
+                        "key": "disabled"
+                      }
+                    }
+                  ]
+                },
                 {
                   "key": "count",
                   "property": [
diff --git a/packages/qvism-preset/src/recipes/action-chip.ts b/packages/qvism-preset/src/recipes/action-chip.ts
index 6b2c6d577..c2ca16f9b 100644
--- a/packages/qvism-preset/src/recipes/action-chip.ts
+++ b/packages/qvism-preset/src/recipes/action-chip.ts
@@ -61,6 +61,15 @@ const actionChip = defineRecipe({
         color: vars.base.disabled.suffixIcon.color,
       },
     },
+    icon: {
+      display: "inline-flex",
+      flexShrink: 0,
+
+      color: vars.base.enabled.icon.color,
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.icon.color,
+      },
+    },
     count: {
       lineHeight: 1,
 
diff --git a/packages/rootage/components/action-chip.yaml b/packages/rootage/components/action-chip.yaml
index acff3feee..ee8fda98e 100644
--- a/packages/rootage/components/action-chip.yaml
+++ b/packages/rootage/components/action-chip.yaml
@@ -16,6 +16,8 @@ data:
         color: $color.fg.neutral
       suffixIcon:
         color: $color.fg.neutral-subtle
+      icon:
+        color: $color.fg.neutral
       count:
         color: $color.fg.neutral-muted
         fontWeight: $font-weight.medium
@@ -31,6 +33,8 @@ data:
         color: $color.fg.disabled
       suffixIcon:
         color: $color.fg.disabled
+      icon:
+        color: $color.fg.disabled
       count:
         color: $color.fg.disabled
   size=small:
diff --git a/packages/stylesheet/actionChip.css b/packages/stylesheet/actionChip.css
index f7c3210c7..05f489171 100644
--- a/packages/stylesheet/actionChip.css
+++ b/packages/stylesheet/actionChip.css
@@ -49,6 +49,14 @@
 .actionChip__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-v3-color-fg-disabled);
 }
+.actionChip__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--seed-v3-color-fg-neutral);
+}
+.actionChip__icon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-v3-color-fg-disabled);
+}
 .actionChip__count {
     line-height: 1;
     color: var(--seed-v3-color-fg-neutral-muted);
diff --git a/packages/vars/lib/component/action-chip.d.ts b/packages/vars/lib/component/action-chip.d.ts
index 817bb3642..bdec4c66d 100644
--- a/packages/vars/lib/component/action-chip.d.ts
+++ b/packages/vars/lib/component/action-chip.d.ts
@@ -15,6 +15,9 @@ export declare const vars: {
       "suffixIcon": {
         "color": "var(--seed-v3-color-fg-neutral-subtle)"
       },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
       "count": {
         "color": "var(--seed-v3-color-fg-neutral-muted)",
         "fontWeight": "var(--seed-v3-font-weight-medium)"
@@ -38,6 +41,9 @@ export declare const vars: {
       "suffixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
       "count": {
         "color": "var(--seed-v3-color-fg-disabled)"
       }
diff --git a/packages/vars/lib/component/action-chip.mjs b/packages/vars/lib/component/action-chip.mjs
index c661ea810..e063eb848 100644
--- a/packages/vars/lib/component/action-chip.mjs
+++ b/packages/vars/lib/component/action-chip.mjs
@@ -15,6 +15,9 @@ export const vars = {
       "suffixIcon": {
         "color": "var(--seed-v3-color-fg-neutral-subtle)"
       },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
       "count": {
         "color": "var(--seed-v3-color-fg-neutral-muted)",
         "fontWeight": "var(--seed-v3-font-weight-medium)"
@@ -38,6 +41,9 @@ export const vars = {
       "suffixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
+      "icon": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
       "count": {
         "color": "var(--seed-v3-color-fg-disabled)"
       }