fix: add missing foreground color to Action Chip

daangn · Jan 19, 2025 · 7310071 · 7310071
1 parent da7c1a7
commit 7310071
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)"
       }