fix: fixed design token for icon btn active state (#2765)

* fix: fixed design token for icon btn active state * fix: fixed path to build directory
openedx · Aug 5, 2024 · 74b2ed8 · 74b2ed8
1 parent 48c053d
commit 74b2ed8
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",
     "playroom:start": "npm run playroom:start --workspace=www",
-    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ../styles/css",
+    "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
     "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
     "build-scss-to-css-map": "node tokens/map-scss-to-css.js",

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ * Generated on Mon, 30 Oct 2023 14:36:05 GMT
  */
 
 :root {
@@ -439,7 +439,6 @@
   --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
@@ -881,6 +880,7 @@
   --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base);
   --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);

diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
@@ -18,7 +18,7 @@
             "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
+            "base": { "value": "{color.icon-button.accent}", "type": "color" },
             "hover": { "value": "{color.icon-button.accent}", "type": "color" },
             "focus": { "value": "{color.icon-button.accent}", "type": "color" }
           }