feat: update control chip design

daangn · Dec 9, 2024 · d5a04f3 · d5a04f3
1 parent 6a0a948
commit d5a04f3
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/docs/public/rootage/components/control-chip.json b/docs/public/rootage/components/control-chip.json
@@ -40,7 +40,8 @@
           "color": "$color.bg.neutral-solid-muted"
         },
         "label": {
-          "color": "$color.fg.static-white"
+          "color": "$color.fg.static-white",
+          "fontWeight": "$font-weight.bold"
         },
         "prefixIcon": {
           "color": "$color.fg.static-white"

diff --git a/packages/recipe-generator/preset/src/control-chip.recipe.ts b/packages/recipe-generator/preset/src/control-chip.recipe.ts
@@ -48,6 +48,7 @@ const controlChip = defineRecipe({
       fontWeight: vars.base.enabled.label.fontWeight,
       [pseudo(checked)]: {
         color: vars.base.selected.label.color,
+        fontWeight: vars.base.selected.label.fontWeight,
       },
       [pseudo(disabled)]: {
         color: vars.base.disabled.label.color,

diff --git a/packages/rootage/artifacts/components/control-chip.yaml b/packages/rootage/artifacts/components/control-chip.yaml
@@ -30,6 +30,7 @@ data:
         color: $color.bg.neutral-solid-muted
       label:
         color: $color.fg.static-white
+        fontWeight: $font-weight.bold
       prefixIcon:
         color: $color.fg.static-white
       suffixIcon:

diff --git a/packages/stylesheet/controlChip.css b/packages/stylesheet/controlChip.css
@@ -36,6 +36,7 @@
 }
 .controlChip__label:is(:checked, [data-checked]) {
     color: var(--seed-v3-color-fg-static-white);
+    font-weight: var(--seed-v3-font-weight-bold);
 }
 .controlChip__label:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-v3-color-fg-disabled);

diff --git a/packages/vars/src/component/control-chip.vars.ts b/packages/vars/src/component/control-chip.vars.ts
@@ -34,7 +34,8 @@ export const vars = {
         "color": "var(--seed-v3-color-bg-neutral-solid-muted)"
       },
       "label": {
-        "color": "var(--seed-v3-color-fg-static-white)"
+        "color": "var(--seed-v3-color-fg-static-white)",
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
       },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-static-white)"