Update CSS variable name to fix typo (#130)

Fixes a couple of CSS variable that were missing part of their names.
PxTools · Apr 25, 2024 · 56235d7 · 56235d7
1 parent 6262843
commit 56235d7
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 15 deletions.
diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Apr 2024 08:54:01 GMT
+ * Generated on Thu, 25 Apr 2024 10:31:55 GMT
  */
 
 :root {
@@ -22,8 +22,8 @@
   --px-color-surface-action: #274247;
   --px-color-surface-action-hover: #274247;
   --px-color-surface-action-active: #162327;
-  --px-color-surface-subtle-hover: #dbebeb;
-  --px-color-surface-subtle-active: #c3dcdc;
+  --px-color-surface-action-subtle-hover: #dbebeb;
+  --px-color-surface-action-subtle-active: #c3dcdc;
   --px-color-surface-info-subtle: #d7ecfe;
   --px-color-surface-info-moderate: #c3e6fe;
   --px-color-surface-success-subtle: #dbf5dc;

diff --git a/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss b/apps/pxweb2/src/app/components/NavigationRail/NavigationRail.module.scss
@@ -32,11 +32,11 @@
 
   &:hover {
     > .icon {
-      background-color: var(--px-color-surface-subtle-hover);
+      background-color: var(--px-color-surface-action-subtle-hover);
     }
   }
 
   > .selected {
-    background-color: var(--px-color-surface-subtle-active) !important;
+    background-color: var(--px-color-surface-action-subtle-active) !important;
   }
 }
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -65,7 +65,7 @@
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    background: var(--px-color-surface-subtle-hover);
+    background: var(--px-color-surface-action-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
@@ -86,7 +86,7 @@
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    background: var(--px-color-surface-subtle-hover);
+    background: var(--px-color-surface-action-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);

diff --git a/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss b/libs/pxweb2-ui/src/lib/components/Checkbox/Checkbox.module.scss
@@ -4,11 +4,11 @@
   position: relative;
   &:hover {
     cursor: pointer;
-    background-color: var(--px-color-surface-subtle-hover);
+    background-color: var(--px-color-surface-action-subtle-hover);
   }
 
   &:active {
-    background-color: var(--px-color-surface-subtle-active);
+    background-color: var(--px-color-surface-action-subtle-active);
   }
   border-radius: 4px;
 }

diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss
@@ -13,25 +13,25 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--px-color-surface-subtle-hover);
+    background-color: var(--px-color-surface-action-subtle-hover);
   }
 
   &:focus {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
-    background-color: var(--px-color-surface-subtle-active);
+    background-color: var(--px-color-surface-action-subtle-active);
   }
 
   &:focus-visible {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
-    background-color: var(--px-color-surface-subtle-active);
+    background-color: var(--px-color-surface-action-subtle-active);
   }
 
   &:active {
     text-decoration-line: none;
     color: var(--px-color-text-on-action-subtle);
-    background-color: var(--px-color-surface-subtle-active);
+    background-color: var(--px-color-surface-action-subtle-active);
   }
 }
 .no_underline {

diff --git a/libs/pxweb2-ui/style-dictionary/src/default_theme.json b/libs/pxweb2-ui/style-dictionary/src/default_theme.json
@@ -56,10 +56,10 @@
     "surface-action-active": {
       "value": "#162327"
     },
-    "surface-subtle-hover": {
+    "surface-action-subtle-hover": {
       "value": "#DBEBEB"
     },
-    "surface-subtle-active": {
+    "surface-action-subtle-active": {
       "value": "#C3DCDC"
     },
     "surface-info-subtle": {