fix: reaction button stylesheet

daangn · Dec 23, 2024 · b379c23 · b379c23
1 parent ba418b8
commit b379c23
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 3 deletions.
diff --git a/docs/public/rootage/components/reaction-button.json b/docs/public/rootage/components/reaction-button.json
@@ -60,7 +60,8 @@
       },
       "disabled": {
         "root": {
-          "color": "$color.bg.disabled"
+          "color": "$color.bg.disabled",
+          "strokeWidth": "0px"
         },
         "label": {
           "color": "$color.fg.disabled"

diff --git a/packages/recipe-generator/preset/src/reaction-button.recipe.ts b/packages/recipe-generator/preset/src/reaction-button.recipe.ts
@@ -37,6 +37,7 @@ const reactionButton = defineRecipe({
       [pseudo(disabled)]: {
         cursor: "not-allowed",
         background: vars.base.disabled.root.color,
+        boxShadow: `inset 0 0 0 ${vars.base.disabled.root.strokeWidth} ${vars.base.selected.root.strokeColor}`,
       },
       [pseudo(loading)]: {
         background: vars.base.loading.root.color,
@@ -91,6 +92,12 @@ const reactionButton = defineRecipe({
       position: "absolute",
       display: "none",
 
+      "--track-color": vars.base.enabled.progressCircle.trackColor,
+      "--range-color": vars.base.enabled.progressCircle.rangeColor,
+      [pseudo(pressed)]: {
+        "--track-color": vars.base.selected.progressCircle.trackColor,
+        "--range-color": vars.base.selected.progressCircle.rangeColor,
+      },
       [pseudo(loading)]: {
         display: "flex",
       },

diff --git a/packages/rootage/artifacts/components/reaction-button.yaml b/packages/rootage/artifacts/components/reaction-button.yaml
@@ -44,6 +44,7 @@ data:
     disabled:
       root:
         color: $color.bg.disabled
+        strokeWidth: 0px
       label:
         color: $color.fg.disabled
       count:

diff --git a/packages/stylesheet/reactionButton.css b/packages/stylesheet/reactionButton.css
@@ -30,6 +30,7 @@
 .reactionButton__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
     background: var(--seed-v3-color-bg-disabled);
+    box-shadow: inset 0 0 0 0px var(--seed-v3-color-stroke-brand);
 }
 .reactionButton__root[data-loading] {
     background: var(--seed-v3-color-bg-neutral-weak-pressed);
@@ -81,6 +82,12 @@
 .reactionButton__progressCircle {
     position: absolute;
     display: none;
+    --track-color: var(--seed-v3-color-palette-gray-500);
+    --range-color: var(--seed-v3-color-fg-neutral);
+}
+.reactionButton__progressCircle:is([aria-pressed=true], [data-pressed]) {
+    --track-color: var(--seed-v3-color-palette-carrot-200);
+    --range-color: var(--seed-v3-color-fg-brand);
 }
 .reactionButton__progressCircle[data-loading] {
     display: flex;

diff --git a/packages/vars/lib/component/reaction-button.d.ts b/packages/vars/lib/component/reaction-button.d.ts
@@ -54,7 +54,8 @@ export declare const vars: {
     },
     "disabled": {
       "root": {
-        "color": "var(--seed-v3-color-bg-disabled)"
+        "color": "var(--seed-v3-color-bg-disabled)",
+        "strokeWidth": "0px"
       },
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"

diff --git a/packages/vars/lib/component/reaction-button.mjs b/packages/vars/lib/component/reaction-button.mjs
@@ -54,7 +54,8 @@ export const vars = {
     },
     "disabled": {
       "root": {
-        "color": "var(--seed-v3-color-bg-disabled)"
+        "color": "var(--seed-v3-color-bg-disabled)",
+        "strokeWidth": "0px"
       },
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"