From b379c2303a4d054cbdac5c94cd464b596d27c09a Mon Sep 17 00:00:00 2001
From: malangcat <asher@daangn.com>
Date: Tue, 24 Dec 2024 01:25:31 +0900
Subject: [PATCH] fix: reaction button stylesheet

---
 docs/public/rootage/components/reaction-button.json        | 3 ++-
 .../recipe-generator/preset/src/reaction-button.recipe.ts  | 7 +++++++
 packages/rootage/artifacts/components/reaction-button.yaml | 1 +
 packages/stylesheet/reactionButton.css                     | 7 +++++++
 packages/vars/lib/component/reaction-button.d.ts           | 3 ++-
 packages/vars/lib/component/reaction-button.mjs            | 3 ++-
 6 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/public/rootage/components/reaction-button.json b/docs/public/rootage/components/reaction-button.json
index 05be7b348..4ae5196e6 100644
--- 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
index 1c79620ce..c5d14d2fd 100644
--- 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
index 48a1b30c2..45d452473 100644
--- 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
index a6d24f90c..23b418ca4 100644
--- 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
index 88534d351..78aefdc0b 100644
--- 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
index bedbb2610..b055b6c08 100644
--- 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)"