Fixing button icon colors

HarvestProfit · Oct 28, 2024 · 060a3e9 · 060a3e9
1 parent 325ca4a
commit 060a3e9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@harvest-profit/npk",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "NPK UI Design System",
   "source": "src/index.js",
   "main": "dist/index.js",

diff --git a/src/BaseButton/BaseButton.module.css b/src/BaseButton/BaseButton.module.css
@@ -114,6 +114,7 @@ a.ControlButton:hover {
   [data-component="leadingVisual"],
   [data-component="trailingVisual"],
   [data-component="trailingAction"] {
+    color: var(--btn-visual-color, var(--control-icon-color));
     line-height: 0.9;
 
     svg {

diff --git a/src/Button/Button.module.css b/src/Button/Button.module.css
@@ -17,19 +17,22 @@
     --btn-border-color: transparent;
 
     &[data-variant="primary"] {
-      --control-fg-color: var(--button-primary-bg-color);
-      --control-fg-color--disabled: var(--button-primary-bg-color--disabled);
+      --btn-visual-color: var(--button-primary-bg-color);
+      --btn-fg-color: var(--button-primary-bg-color);
+      --btn-fg-color--disabled: var(--button-primary-bg-color--disabled);
     }
   }
 
   /* variants */
   &[data-variant="danger"] {
+    --btn-visual-color: var(--button-danger-fg-color);
     --btn-fg-color: var(--button-danger-fg-color);
     --btn-icon-color: var(--button-danger-fg-color);
     --btn-fg-color--disabled: rgb(from var(--button-danger-fg-color) r g b / 50%);
   }
 
   &[data-variant="primary"]:not([data-invisible="true"]) {
+    --btn-visual-color: var(--button-primary-fg-color);
     --btn-fg-color: var(--button-primary-fg-color);
     --btn-icon-color: var(--button-primary-fg-color);
     --btn-fg-color--disabled: var(--button-primary-fg-color);