From e98894fc4e88d5ef451e242f86a015283b01b9db Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Wed, 13 Sep 2023 09:03:43 +0300
Subject: [PATCH] fix: remove undefined variables from utility classes (#2615)

---
 styles/css/themes/light/utility-classes.css | 212 ++++++++++----------
 tokens/css-utilities.js                     |   2 +-
 tokens/src/themes/light/global/color.json   |   6 +-
 3 files changed, 110 insertions(+), 110 deletions(-)

diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
index ac9c495bf1..fc9524848c 100644
--- a/styles/css/themes/light/utility-classes.css
+++ b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 28 Aug 2023 17:10:09 GMT
+ * Generated on Mon, 11 Sep 2023 13:49:02 GMT
  */
 
 .bg-accent-a {
@@ -12,7 +12,7 @@ a.bg-accent-a:hover,
 a.bg-accent-a:focus,
 button.bg-accent-a:hover,
 button.bg-accent-a:focus {
-  background-color: var(--pgn-color-action-default-accent-a)  !important;
+  background-color: var(--pgn-color-action-default-accent-a) !important;
 }
 
 .text-accent-a {
@@ -36,7 +36,7 @@ a.bg-accent-b:hover,
 a.bg-accent-b:focus,
 button.bg-accent-b:hover,
 button.bg-accent-b:focus {
-  background-color: var(--pgn-color-action-default-accent-b)  !important;
+  background-color: var(--pgn-color-action-default-accent-b) !important;
 }
 
 .text-accent-b {
@@ -60,7 +60,7 @@ a.bg-gray-100:hover,
 a.bg-gray-100:focus,
 button.bg-gray-100:hover,
 button.bg-gray-100:focus {
-  background-color: var(--pgn-color-action-default-gray-100)  !important;
+  background-color: var(--pgn-color-action-default-gray-100) !important;
 }
 
 .text-gray-100 {
@@ -84,7 +84,7 @@ a.bg-gray-200:hover,
 a.bg-gray-200:focus,
 button.bg-gray-200:hover,
 button.bg-gray-200:focus {
-  background-color: var(--pgn-color-action-default-gray-200)  !important;
+  background-color: var(--pgn-color-action-default-gray-200) !important;
 }
 
 .text-gray-200 {
@@ -108,7 +108,7 @@ a.bg-gray-300:hover,
 a.bg-gray-300:focus,
 button.bg-gray-300:hover,
 button.bg-gray-300:focus {
-  background-color: var(--pgn-color-action-default-gray-300)  !important;
+  background-color: var(--pgn-color-action-default-gray-300) !important;
 }
 
 .text-gray-300 {
@@ -132,7 +132,7 @@ a.bg-gray-400:hover,
 a.bg-gray-400:focus,
 button.bg-gray-400:hover,
 button.bg-gray-400:focus {
-  background-color: var(--pgn-color-action-default-gray-400)  !important;
+  background-color: var(--pgn-color-action-default-gray-400) !important;
 }
 
 .text-gray-400 {
@@ -156,7 +156,7 @@ a.bg-gray-500:hover,
 a.bg-gray-500:focus,
 button.bg-gray-500:hover,
 button.bg-gray-500:focus {
-  background-color: var(--pgn-color-action-default-gray-500)  !important;
+  background-color: var(--pgn-color-action-default-gray-500) !important;
 }
 
 .text-gray-500 {
@@ -180,7 +180,7 @@ a.bg-gray-600:hover,
 a.bg-gray-600:focus,
 button.bg-gray-600:hover,
 button.bg-gray-600:focus {
-  background-color: var(--pgn-color-action-default-gray-600)  !important;
+  background-color: var(--pgn-color-action-default-gray-600) !important;
 }
 
 .text-gray-600 {
@@ -204,7 +204,7 @@ a.bg-gray-700:hover,
 a.bg-gray-700:focus,
 button.bg-gray-700:hover,
 button.bg-gray-700:focus {
-  background-color: var(--pgn-color-action-default-gray-700)  !important;
+  background-color: var(--pgn-color-action-default-gray-700) !important;
 }
 
 .text-gray-700 {
@@ -228,7 +228,7 @@ a.bg-gray-800:hover,
 a.bg-gray-800:focus,
 button.bg-gray-800:hover,
 button.bg-gray-800:focus {
-  background-color: var(--pgn-color-action-default-gray-800)  !important;
+  background-color: var(--pgn-color-action-default-gray-800) !important;
 }
 
 .text-gray-800 {
@@ -252,7 +252,7 @@ a.bg-gray-900:hover,
 a.bg-gray-900:focus,
 button.bg-gray-900:hover,
 button.bg-gray-900:focus {
-  background-color: var(--pgn-color-action-default-gray-900)  !important;
+  background-color: var(--pgn-color-action-default-gray-900) !important;
 }
 
 .text-gray-900 {
@@ -276,7 +276,7 @@ a.bg-gray:hover,
 a.bg-gray:focus,
 button.bg-gray:hover,
 button.bg-gray:focus {
-  background-color: var(--pgn-color-action-default-gray-base)  !important;
+  background-color: var(--pgn-color-action-default-gray-base) !important;
 }
 
 .text-gray {
@@ -300,7 +300,7 @@ a.bg-primary-100:hover,
 a.bg-primary-100:focus,
 button.bg-primary-100:hover,
 button.bg-primary-100:focus {
-  background-color: var(--pgn-color-action-default-primary-100)  !important;
+  background-color: var(--pgn-color-action-default-primary-100) !important;
 }
 
 .text-primary-100 {
@@ -324,7 +324,7 @@ a.bg-primary-200:hover,
 a.bg-primary-200:focus,
 button.bg-primary-200:hover,
 button.bg-primary-200:focus {
-  background-color: var(--pgn-color-action-default-primary-200)  !important;
+  background-color: var(--pgn-color-action-default-primary-200) !important;
 }
 
 .text-primary-200 {
@@ -348,7 +348,7 @@ a.bg-primary-300:hover,
 a.bg-primary-300:focus,
 button.bg-primary-300:hover,
 button.bg-primary-300:focus {
-  background-color: var(--pgn-color-action-default-primary-300)  !important;
+  background-color: var(--pgn-color-action-default-primary-300) !important;
 }
 
 .text-primary-300 {
@@ -372,7 +372,7 @@ a.bg-primary-400:hover,
 a.bg-primary-400:focus,
 button.bg-primary-400:hover,
 button.bg-primary-400:focus {
-  background-color: var(--pgn-color-action-default-primary-400)  !important;
+  background-color: var(--pgn-color-action-default-primary-400) !important;
 }
 
 .text-primary-400 {
@@ -396,7 +396,7 @@ a.bg-primary-500:hover,
 a.bg-primary-500:focus,
 button.bg-primary-500:hover,
 button.bg-primary-500:focus {
-  background-color: var(--pgn-color-action-default-primary-500)  !important;
+  background-color: var(--pgn-color-action-default-primary-500) !important;
 }
 
 .text-primary-500 {
@@ -420,7 +420,7 @@ a.bg-primary-600:hover,
 a.bg-primary-600:focus,
 button.bg-primary-600:hover,
 button.bg-primary-600:focus {
-  background-color: var(--pgn-color-action-default-primary-600)  !important;
+  background-color: var(--pgn-color-action-default-primary-600) !important;
 }
 
 .text-primary-600 {
@@ -444,7 +444,7 @@ a.bg-primary-700:hover,
 a.bg-primary-700:focus,
 button.bg-primary-700:hover,
 button.bg-primary-700:focus {
-  background-color: var(--pgn-color-action-default-primary-700)  !important;
+  background-color: var(--pgn-color-action-default-primary-700) !important;
 }
 
 .text-primary-700 {
@@ -468,7 +468,7 @@ a.bg-primary-800:hover,
 a.bg-primary-800:focus,
 button.bg-primary-800:hover,
 button.bg-primary-800:focus {
-  background-color: var(--pgn-color-action-default-primary-800)  !important;
+  background-color: var(--pgn-color-action-default-primary-800) !important;
 }
 
 .text-primary-800 {
@@ -492,7 +492,7 @@ a.bg-primary-900:hover,
 a.bg-primary-900:focus,
 button.bg-primary-900:hover,
 button.bg-primary-900:focus {
-  background-color: var(--pgn-color-action-default-primary-900)  !important;
+  background-color: var(--pgn-color-action-default-primary-900) !important;
 }
 
 .text-primary-900 {
@@ -516,7 +516,7 @@ a.bg-primary:hover,
 a.bg-primary:focus,
 button.bg-primary:hover,
 button.bg-primary:focus {
-  background-color: var(--pgn-color-action-default-primary-base)  !important;
+  background-color: var(--pgn-color-action-default-primary-base) !important;
 }
 
 .text-primary {
@@ -540,7 +540,7 @@ a.bg-secondary-100:hover,
 a.bg-secondary-100:focus,
 button.bg-secondary-100:hover,
 button.bg-secondary-100:focus {
-  background-color: var(--pgn-color-action-default-secondary-100)  !important;
+  background-color: var(--pgn-color-action-default-secondary-100) !important;
 }
 
 .text-secondary-100 {
@@ -564,7 +564,7 @@ a.bg-secondary-200:hover,
 a.bg-secondary-200:focus,
 button.bg-secondary-200:hover,
 button.bg-secondary-200:focus {
-  background-color: var(--pgn-color-action-default-secondary-200)  !important;
+  background-color: var(--pgn-color-action-default-secondary-200) !important;
 }
 
 .text-secondary-200 {
@@ -588,7 +588,7 @@ a.bg-secondary-300:hover,
 a.bg-secondary-300:focus,
 button.bg-secondary-300:hover,
 button.bg-secondary-300:focus {
-  background-color: var(--pgn-color-action-default-secondary-300)  !important;
+  background-color: var(--pgn-color-action-default-secondary-300) !important;
 }
 
 .text-secondary-300 {
@@ -612,7 +612,7 @@ a.bg-secondary-400:hover,
 a.bg-secondary-400:focus,
 button.bg-secondary-400:hover,
 button.bg-secondary-400:focus {
-  background-color: var(--pgn-color-action-default-secondary-400)  !important;
+  background-color: var(--pgn-color-action-default-secondary-400) !important;
 }
 
 .text-secondary-400 {
@@ -636,7 +636,7 @@ a.bg-secondary-500:hover,
 a.bg-secondary-500:focus,
 button.bg-secondary-500:hover,
 button.bg-secondary-500:focus {
-  background-color: var(--pgn-color-action-default-secondary-500)  !important;
+  background-color: var(--pgn-color-action-default-secondary-500) !important;
 }
 
 .text-secondary-500 {
@@ -660,7 +660,7 @@ a.bg-secondary-600:hover,
 a.bg-secondary-600:focus,
 button.bg-secondary-600:hover,
 button.bg-secondary-600:focus {
-  background-color: var(--pgn-color-action-default-secondary-600)  !important;
+  background-color: var(--pgn-color-action-default-secondary-600) !important;
 }
 
 .text-secondary-600 {
@@ -684,7 +684,7 @@ a.bg-secondary-700:hover,
 a.bg-secondary-700:focus,
 button.bg-secondary-700:hover,
 button.bg-secondary-700:focus {
-  background-color: var(--pgn-color-action-default-secondary-700)  !important;
+  background-color: var(--pgn-color-action-default-secondary-700) !important;
 }
 
 .text-secondary-700 {
@@ -708,7 +708,7 @@ a.bg-secondary-800:hover,
 a.bg-secondary-800:focus,
 button.bg-secondary-800:hover,
 button.bg-secondary-800:focus {
-  background-color: var(--pgn-color-action-default-secondary-800)  !important;
+  background-color: var(--pgn-color-action-default-secondary-800) !important;
 }
 
 .text-secondary-800 {
@@ -732,7 +732,7 @@ a.bg-secondary-900:hover,
 a.bg-secondary-900:focus,
 button.bg-secondary-900:hover,
 button.bg-secondary-900:focus {
-  background-color: var(--pgn-color-action-default-secondary-900)  !important;
+  background-color: var(--pgn-color-action-default-secondary-900) !important;
 }
 
 .text-secondary-900 {
@@ -756,7 +756,7 @@ a.bg-secondary:hover,
 a.bg-secondary:focus,
 button.bg-secondary:hover,
 button.bg-secondary:focus {
-  background-color: var(--pgn-color-action-default-secondary-base)  !important;
+  background-color: var(--pgn-color-action-default-secondary-base) !important;
 }
 
 .text-secondary {
@@ -780,7 +780,7 @@ a.bg-brand-100:hover,
 a.bg-brand-100:focus,
 button.bg-brand-100:hover,
 button.bg-brand-100:focus {
-  background-color: var(--pgn-color-action-default-brand-100)  !important;
+  background-color: var(--pgn-color-action-default-brand-100) !important;
 }
 
 .text-brand-100 {
@@ -804,7 +804,7 @@ a.bg-brand-200:hover,
 a.bg-brand-200:focus,
 button.bg-brand-200:hover,
 button.bg-brand-200:focus {
-  background-color: var(--pgn-color-action-default-brand-200)  !important;
+  background-color: var(--pgn-color-action-default-brand-200) !important;
 }
 
 .text-brand-200 {
@@ -828,7 +828,7 @@ a.bg-brand-300:hover,
 a.bg-brand-300:focus,
 button.bg-brand-300:hover,
 button.bg-brand-300:focus {
-  background-color: var(--pgn-color-action-default-brand-300)  !important;
+  background-color: var(--pgn-color-action-default-brand-300) !important;
 }
 
 .text-brand-300 {
@@ -852,7 +852,7 @@ a.bg-brand-400:hover,
 a.bg-brand-400:focus,
 button.bg-brand-400:hover,
 button.bg-brand-400:focus {
-  background-color: var(--pgn-color-action-default-brand-400)  !important;
+  background-color: var(--pgn-color-action-default-brand-400) !important;
 }
 
 .text-brand-400 {
@@ -876,7 +876,7 @@ a.bg-brand-500:hover,
 a.bg-brand-500:focus,
 button.bg-brand-500:hover,
 button.bg-brand-500:focus {
-  background-color: var(--pgn-color-action-default-brand-500)  !important;
+  background-color: var(--pgn-color-action-default-brand-500) !important;
 }
 
 .text-brand-500 {
@@ -900,7 +900,7 @@ a.bg-brand-600:hover,
 a.bg-brand-600:focus,
 button.bg-brand-600:hover,
 button.bg-brand-600:focus {
-  background-color: var(--pgn-color-action-default-brand-600)  !important;
+  background-color: var(--pgn-color-action-default-brand-600) !important;
 }
 
 .text-brand-600 {
@@ -924,7 +924,7 @@ a.bg-brand-700:hover,
 a.bg-brand-700:focus,
 button.bg-brand-700:hover,
 button.bg-brand-700:focus {
-  background-color: var(--pgn-color-action-default-brand-700)  !important;
+  background-color: var(--pgn-color-action-default-brand-700) !important;
 }
 
 .text-brand-700 {
@@ -948,7 +948,7 @@ a.bg-brand-800:hover,
 a.bg-brand-800:focus,
 button.bg-brand-800:hover,
 button.bg-brand-800:focus {
-  background-color: var(--pgn-color-action-default-brand-800)  !important;
+  background-color: var(--pgn-color-action-default-brand-800) !important;
 }
 
 .text-brand-800 {
@@ -972,7 +972,7 @@ a.bg-brand-900:hover,
 a.bg-brand-900:focus,
 button.bg-brand-900:hover,
 button.bg-brand-900:focus {
-  background-color: var(--pgn-color-action-default-brand-900)  !important;
+  background-color: var(--pgn-color-action-default-brand-900) !important;
 }
 
 .text-brand-900 {
@@ -996,7 +996,7 @@ a.bg-brand:hover,
 a.bg-brand:focus,
 button.bg-brand:hover,
 button.bg-brand:focus {
-  background-color: var(--pgn-color-action-default-brand-base)  !important;
+  background-color: var(--pgn-color-action-default-brand-base) !important;
 }
 
 .text-brand {
@@ -1020,7 +1020,7 @@ a.bg-success-100:hover,
 a.bg-success-100:focus,
 button.bg-success-100:hover,
 button.bg-success-100:focus {
-  background-color: var(--pgn-color-action-default-success-100)  !important;
+  background-color: var(--pgn-color-action-default-success-100) !important;
 }
 
 .text-success-100 {
@@ -1044,7 +1044,7 @@ a.bg-success-200:hover,
 a.bg-success-200:focus,
 button.bg-success-200:hover,
 button.bg-success-200:focus {
-  background-color: var(--pgn-color-action-default-success-200)  !important;
+  background-color: var(--pgn-color-action-default-success-200) !important;
 }
 
 .text-success-200 {
@@ -1068,7 +1068,7 @@ a.bg-success-300:hover,
 a.bg-success-300:focus,
 button.bg-success-300:hover,
 button.bg-success-300:focus {
-  background-color: var(--pgn-color-action-default-success-300)  !important;
+  background-color: var(--pgn-color-action-default-success-300) !important;
 }
 
 .text-success-300 {
@@ -1092,7 +1092,7 @@ a.bg-success-400:hover,
 a.bg-success-400:focus,
 button.bg-success-400:hover,
 button.bg-success-400:focus {
-  background-color: var(--pgn-color-action-default-success-400)  !important;
+  background-color: var(--pgn-color-action-default-success-400) !important;
 }
 
 .text-success-400 {
@@ -1116,7 +1116,7 @@ a.bg-success-500:hover,
 a.bg-success-500:focus,
 button.bg-success-500:hover,
 button.bg-success-500:focus {
-  background-color: var(--pgn-color-action-default-success-500)  !important;
+  background-color: var(--pgn-color-action-default-success-500) !important;
 }
 
 .text-success-500 {
@@ -1140,7 +1140,7 @@ a.bg-success-600:hover,
 a.bg-success-600:focus,
 button.bg-success-600:hover,
 button.bg-success-600:focus {
-  background-color: var(--pgn-color-action-default-success-600)  !important;
+  background-color: var(--pgn-color-action-default-success-600) !important;
 }
 
 .text-success-600 {
@@ -1164,7 +1164,7 @@ a.bg-success-700:hover,
 a.bg-success-700:focus,
 button.bg-success-700:hover,
 button.bg-success-700:focus {
-  background-color: var(--pgn-color-action-default-success-700)  !important;
+  background-color: var(--pgn-color-action-default-success-700) !important;
 }
 
 .text-success-700 {
@@ -1188,7 +1188,7 @@ a.bg-success-800:hover,
 a.bg-success-800:focus,
 button.bg-success-800:hover,
 button.bg-success-800:focus {
-  background-color: var(--pgn-color-action-default-success-800)  !important;
+  background-color: var(--pgn-color-action-default-success-800) !important;
 }
 
 .text-success-800 {
@@ -1212,7 +1212,7 @@ a.bg-success-900:hover,
 a.bg-success-900:focus,
 button.bg-success-900:hover,
 button.bg-success-900:focus {
-  background-color: var(--pgn-color-action-default-success-900)  !important;
+  background-color: var(--pgn-color-action-default-success-900) !important;
 }
 
 .text-success-900 {
@@ -1236,7 +1236,7 @@ a.bg-success:hover,
 a.bg-success:focus,
 button.bg-success:hover,
 button.bg-success:focus {
-  background-color: var(--pgn-color-action-default-success-base)  !important;
+  background-color: var(--pgn-color-action-default-success-base) !important;
 }
 
 .text-success {
@@ -1260,7 +1260,7 @@ a.bg-info-100:hover,
 a.bg-info-100:focus,
 button.bg-info-100:hover,
 button.bg-info-100:focus {
-  background-color: var(--pgn-color-action-default-info-100)  !important;
+  background-color: var(--pgn-color-action-default-info-100) !important;
 }
 
 .text-info-100 {
@@ -1284,7 +1284,7 @@ a.bg-info-200:hover,
 a.bg-info-200:focus,
 button.bg-info-200:hover,
 button.bg-info-200:focus {
-  background-color: var(--pgn-color-action-default-info-200)  !important;
+  background-color: var(--pgn-color-action-default-info-200) !important;
 }
 
 .text-info-200 {
@@ -1308,7 +1308,7 @@ a.bg-info-300:hover,
 a.bg-info-300:focus,
 button.bg-info-300:hover,
 button.bg-info-300:focus {
-  background-color: var(--pgn-color-action-default-info-300)  !important;
+  background-color: var(--pgn-color-action-default-info-300) !important;
 }
 
 .text-info-300 {
@@ -1332,7 +1332,7 @@ a.bg-info-400:hover,
 a.bg-info-400:focus,
 button.bg-info-400:hover,
 button.bg-info-400:focus {
-  background-color: var(--pgn-color-action-default-info-400)  !important;
+  background-color: var(--pgn-color-action-default-info-400) !important;
 }
 
 .text-info-400 {
@@ -1356,7 +1356,7 @@ a.bg-info-500:hover,
 a.bg-info-500:focus,
 button.bg-info-500:hover,
 button.bg-info-500:focus {
-  background-color: var(--pgn-color-action-default-info-500)  !important;
+  background-color: var(--pgn-color-action-default-info-500) !important;
 }
 
 .text-info-500 {
@@ -1380,7 +1380,7 @@ a.bg-info-600:hover,
 a.bg-info-600:focus,
 button.bg-info-600:hover,
 button.bg-info-600:focus {
-  background-color: var(--pgn-color-action-default-info-600)  !important;
+  background-color: var(--pgn-color-action-default-info-600) !important;
 }
 
 .text-info-600 {
@@ -1404,7 +1404,7 @@ a.bg-info-700:hover,
 a.bg-info-700:focus,
 button.bg-info-700:hover,
 button.bg-info-700:focus {
-  background-color: var(--pgn-color-action-default-info-700)  !important;
+  background-color: var(--pgn-color-action-default-info-700) !important;
 }
 
 .text-info-700 {
@@ -1428,7 +1428,7 @@ a.bg-info-800:hover,
 a.bg-info-800:focus,
 button.bg-info-800:hover,
 button.bg-info-800:focus {
-  background-color: var(--pgn-color-action-default-info-800)  !important;
+  background-color: var(--pgn-color-action-default-info-800) !important;
 }
 
 .text-info-800 {
@@ -1452,7 +1452,7 @@ a.bg-info-900:hover,
 a.bg-info-900:focus,
 button.bg-info-900:hover,
 button.bg-info-900:focus {
-  background-color: var(--pgn-color-action-default-info-900)  !important;
+  background-color: var(--pgn-color-action-default-info-900) !important;
 }
 
 .text-info-900 {
@@ -1476,7 +1476,7 @@ a.bg-info:hover,
 a.bg-info:focus,
 button.bg-info:hover,
 button.bg-info:focus {
-  background-color: var(--pgn-color-action-default-info-base)  !important;
+  background-color: var(--pgn-color-action-default-info-base) !important;
 }
 
 .text-info {
@@ -1500,7 +1500,7 @@ a.bg-warning-100:hover,
 a.bg-warning-100:focus,
 button.bg-warning-100:hover,
 button.bg-warning-100:focus {
-  background-color: var(--pgn-color-action-default-warning-100)  !important;
+  background-color: var(--pgn-color-action-default-warning-100) !important;
 }
 
 .text-warning-100 {
@@ -1524,7 +1524,7 @@ a.bg-warning-200:hover,
 a.bg-warning-200:focus,
 button.bg-warning-200:hover,
 button.bg-warning-200:focus {
-  background-color: var(--pgn-color-action-default-warning-200)  !important;
+  background-color: var(--pgn-color-action-default-warning-200) !important;
 }
 
 .text-warning-200 {
@@ -1548,7 +1548,7 @@ a.bg-warning-300:hover,
 a.bg-warning-300:focus,
 button.bg-warning-300:hover,
 button.bg-warning-300:focus {
-  background-color: var(--pgn-color-action-default-warning-300)  !important;
+  background-color: var(--pgn-color-action-default-warning-300) !important;
 }
 
 .text-warning-300 {
@@ -1572,7 +1572,7 @@ a.bg-warning-400:hover,
 a.bg-warning-400:focus,
 button.bg-warning-400:hover,
 button.bg-warning-400:focus {
-  background-color: var(--pgn-color-action-default-warning-400)  !important;
+  background-color: var(--pgn-color-action-default-warning-400) !important;
 }
 
 .text-warning-400 {
@@ -1596,7 +1596,7 @@ a.bg-warning-500:hover,
 a.bg-warning-500:focus,
 button.bg-warning-500:hover,
 button.bg-warning-500:focus {
-  background-color: var(--pgn-color-action-default-warning-500)  !important;
+  background-color: var(--pgn-color-action-default-warning-500) !important;
 }
 
 .text-warning-500 {
@@ -1620,7 +1620,7 @@ a.bg-warning-600:hover,
 a.bg-warning-600:focus,
 button.bg-warning-600:hover,
 button.bg-warning-600:focus {
-  background-color: var(--pgn-color-action-default-warning-600)  !important;
+  background-color: var(--pgn-color-action-default-warning-600) !important;
 }
 
 .text-warning-600 {
@@ -1644,7 +1644,7 @@ a.bg-warning-700:hover,
 a.bg-warning-700:focus,
 button.bg-warning-700:hover,
 button.bg-warning-700:focus {
-  background-color: var(--pgn-color-action-default-warning-700)  !important;
+  background-color: var(--pgn-color-action-default-warning-700) !important;
 }
 
 .text-warning-700 {
@@ -1668,7 +1668,7 @@ a.bg-warning-800:hover,
 a.bg-warning-800:focus,
 button.bg-warning-800:hover,
 button.bg-warning-800:focus {
-  background-color: var(--pgn-color-action-default-warning-800)  !important;
+  background-color: var(--pgn-color-action-default-warning-800) !important;
 }
 
 .text-warning-800 {
@@ -1692,7 +1692,7 @@ a.bg-warning-900:hover,
 a.bg-warning-900:focus,
 button.bg-warning-900:hover,
 button.bg-warning-900:focus {
-  background-color: var(--pgn-color-action-default-warning-900)  !important;
+  background-color: var(--pgn-color-action-default-warning-900) !important;
 }
 
 .text-warning-900 {
@@ -1716,7 +1716,7 @@ a.bg-warning:hover,
 a.bg-warning:focus,
 button.bg-warning:hover,
 button.bg-warning:focus {
-  background-color: var(--pgn-color-action-default-warning-base)  !important;
+  background-color: var(--pgn-color-action-default-warning-base) !important;
 }
 
 .text-warning {
@@ -1740,7 +1740,7 @@ a.bg-danger-100:hover,
 a.bg-danger-100:focus,
 button.bg-danger-100:hover,
 button.bg-danger-100:focus {
-  background-color: var(--pgn-color-action-default-danger-100)  !important;
+  background-color: var(--pgn-color-action-default-danger-100) !important;
 }
 
 .text-danger-100 {
@@ -1764,7 +1764,7 @@ a.bg-danger-200:hover,
 a.bg-danger-200:focus,
 button.bg-danger-200:hover,
 button.bg-danger-200:focus {
-  background-color: var(--pgn-color-action-default-danger-200)  !important;
+  background-color: var(--pgn-color-action-default-danger-200) !important;
 }
 
 .text-danger-200 {
@@ -1788,7 +1788,7 @@ a.bg-danger-300:hover,
 a.bg-danger-300:focus,
 button.bg-danger-300:hover,
 button.bg-danger-300:focus {
-  background-color: var(--pgn-color-action-default-danger-300)  !important;
+  background-color: var(--pgn-color-action-default-danger-300) !important;
 }
 
 .text-danger-300 {
@@ -1812,7 +1812,7 @@ a.bg-danger-400:hover,
 a.bg-danger-400:focus,
 button.bg-danger-400:hover,
 button.bg-danger-400:focus {
-  background-color: var(--pgn-color-action-default-danger-400)  !important;
+  background-color: var(--pgn-color-action-default-danger-400) !important;
 }
 
 .text-danger-400 {
@@ -1836,7 +1836,7 @@ a.bg-danger-500:hover,
 a.bg-danger-500:focus,
 button.bg-danger-500:hover,
 button.bg-danger-500:focus {
-  background-color: var(--pgn-color-action-default-danger-500)  !important;
+  background-color: var(--pgn-color-action-default-danger-500) !important;
 }
 
 .text-danger-500 {
@@ -1860,7 +1860,7 @@ a.bg-danger-600:hover,
 a.bg-danger-600:focus,
 button.bg-danger-600:hover,
 button.bg-danger-600:focus {
-  background-color: var(--pgn-color-action-default-danger-600)  !important;
+  background-color: var(--pgn-color-action-default-danger-600) !important;
 }
 
 .text-danger-600 {
@@ -1884,7 +1884,7 @@ a.bg-danger-700:hover,
 a.bg-danger-700:focus,
 button.bg-danger-700:hover,
 button.bg-danger-700:focus {
-  background-color: var(--pgn-color-action-default-danger-700)  !important;
+  background-color: var(--pgn-color-action-default-danger-700) !important;
 }
 
 .text-danger-700 {
@@ -1908,7 +1908,7 @@ a.bg-danger-800:hover,
 a.bg-danger-800:focus,
 button.bg-danger-800:hover,
 button.bg-danger-800:focus {
-  background-color: var(--pgn-color-action-default-danger-800)  !important;
+  background-color: var(--pgn-color-action-default-danger-800) !important;
 }
 
 .text-danger-800 {
@@ -1932,7 +1932,7 @@ a.bg-danger-900:hover,
 a.bg-danger-900:focus,
 button.bg-danger-900:hover,
 button.bg-danger-900:focus {
-  background-color: var(--pgn-color-action-default-danger-900)  !important;
+  background-color: var(--pgn-color-action-default-danger-900) !important;
 }
 
 .text-danger-900 {
@@ -1956,7 +1956,7 @@ a.bg-danger:hover,
 a.bg-danger:focus,
 button.bg-danger:hover,
 button.bg-danger:focus {
-  background-color: var(--pgn-color-action-default-danger-base)  !important;
+  background-color: var(--pgn-color-action-default-danger-base) !important;
 }
 
 .text-danger {
@@ -1980,7 +1980,7 @@ a.bg-light-100:hover,
 a.bg-light-100:focus,
 button.bg-light-100:hover,
 button.bg-light-100:focus {
-  background-color: var(--pgn-color-action-default-light-100)  !important;
+  background-color: var(--pgn-color-action-default-light-100) !important;
 }
 
 .text-light-100 {
@@ -2004,7 +2004,7 @@ a.bg-light-200:hover,
 a.bg-light-200:focus,
 button.bg-light-200:hover,
 button.bg-light-200:focus {
-  background-color: var(--pgn-color-action-default-light-200)  !important;
+  background-color: var(--pgn-color-action-default-light-200) !important;
 }
 
 .text-light-200 {
@@ -2028,7 +2028,7 @@ a.bg-light-300:hover,
 a.bg-light-300:focus,
 button.bg-light-300:hover,
 button.bg-light-300:focus {
-  background-color: var(--pgn-color-action-default-light-300)  !important;
+  background-color: var(--pgn-color-action-default-light-300) !important;
 }
 
 .text-light-300 {
@@ -2052,7 +2052,7 @@ a.bg-light-400:hover,
 a.bg-light-400:focus,
 button.bg-light-400:hover,
 button.bg-light-400:focus {
-  background-color: var(--pgn-color-action-default-light-400)  !important;
+  background-color: var(--pgn-color-action-default-light-400) !important;
 }
 
 .text-light-400 {
@@ -2076,7 +2076,7 @@ a.bg-light-500:hover,
 a.bg-light-500:focus,
 button.bg-light-500:hover,
 button.bg-light-500:focus {
-  background-color: var(--pgn-color-action-default-light-500)  !important;
+  background-color: var(--pgn-color-action-default-light-500) !important;
 }
 
 .text-light-500 {
@@ -2100,7 +2100,7 @@ a.bg-light-600:hover,
 a.bg-light-600:focus,
 button.bg-light-600:hover,
 button.bg-light-600:focus {
-  background-color: var(--pgn-color-action-default-light-600)  !important;
+  background-color: var(--pgn-color-action-default-light-600) !important;
 }
 
 .text-light-600 {
@@ -2124,7 +2124,7 @@ a.bg-light-700:hover,
 a.bg-light-700:focus,
 button.bg-light-700:hover,
 button.bg-light-700:focus {
-  background-color: var(--pgn-color-action-default-light-700)  !important;
+  background-color: var(--pgn-color-action-default-light-700) !important;
 }
 
 .text-light-700 {
@@ -2148,7 +2148,7 @@ a.bg-light-800:hover,
 a.bg-light-800:focus,
 button.bg-light-800:hover,
 button.bg-light-800:focus {
-  background-color: var(--pgn-color-action-default-light-800)  !important;
+  background-color: var(--pgn-color-action-default-light-800) !important;
 }
 
 .text-light-800 {
@@ -2172,7 +2172,7 @@ a.bg-light-900:hover,
 a.bg-light-900:focus,
 button.bg-light-900:hover,
 button.bg-light-900:focus {
-  background-color: var(--pgn-color-action-default-light-900)  !important;
+  background-color: var(--pgn-color-action-default-light-900) !important;
 }
 
 .text-light-900 {
@@ -2196,7 +2196,7 @@ a.bg-light:hover,
 a.bg-light:focus,
 button.bg-light:hover,
 button.bg-light:focus {
-  background-color: var(--pgn-color-action-default-light-base)  !important;
+  background-color: var(--pgn-color-action-default-light-base) !important;
 }
 
 .text-light {
@@ -2220,7 +2220,7 @@ a.bg-dark-100:hover,
 a.bg-dark-100:focus,
 button.bg-dark-100:hover,
 button.bg-dark-100:focus {
-  background-color: var(--pgn-color-action-default-dark-100)  !important;
+  background-color: var(--pgn-color-action-default-dark-100) !important;
 }
 
 .text-dark-100 {
@@ -2244,7 +2244,7 @@ a.bg-dark-200:hover,
 a.bg-dark-200:focus,
 button.bg-dark-200:hover,
 button.bg-dark-200:focus {
-  background-color: var(--pgn-color-action-default-dark-200)  !important;
+  background-color: var(--pgn-color-action-default-dark-200) !important;
 }
 
 .text-dark-200 {
@@ -2268,7 +2268,7 @@ a.bg-dark-300:hover,
 a.bg-dark-300:focus,
 button.bg-dark-300:hover,
 button.bg-dark-300:focus {
-  background-color: var(--pgn-color-action-default-dark-300)  !important;
+  background-color: var(--pgn-color-action-default-dark-300) !important;
 }
 
 .text-dark-300 {
@@ -2292,7 +2292,7 @@ a.bg-dark-400:hover,
 a.bg-dark-400:focus,
 button.bg-dark-400:hover,
 button.bg-dark-400:focus {
-  background-color: var(--undefined)  !important;
+  background-color: var(--pgn-color-action-default-dark-400) !important;
 }
 
 .text-dark-400 {
@@ -2301,7 +2301,7 @@ button.bg-dark-400:focus {
 
 a.text-dark-400:hover,
 a.text-dark-400:focus {
-  color: var(--undefined) !important;
+  color: var(--pgn-color-action-default-dark-400) !important;
 }
 
 .border-dark-400 {
@@ -2316,7 +2316,7 @@ a.bg-dark-500:hover,
 a.bg-dark-500:focus,
 button.bg-dark-500:hover,
 button.bg-dark-500:focus {
-  background-color: var(--pgn-color-action-default-dark-500)  !important;
+  background-color: var(--pgn-color-action-default-dark-500) !important;
 }
 
 .text-dark-500 {
@@ -2340,7 +2340,7 @@ a.bg-dark-600:hover,
 a.bg-dark-600:focus,
 button.bg-dark-600:hover,
 button.bg-dark-600:focus {
-  background-color: var(--undefined)  !important;
+  background-color: var(--pgn-color-action-default-dark-600) !important;
 }
 
 .text-dark-600 {
@@ -2349,7 +2349,7 @@ button.bg-dark-600:focus {
 
 a.text-dark-600:hover,
 a.text-dark-600:focus {
-  color: var(--undefined) !important;
+  color: var(--pgn-color-action-default-dark-600) !important;
 }
 
 .border-dark-600 {
@@ -2364,7 +2364,7 @@ a.bg-dark-700:hover,
 a.bg-dark-700:focus,
 button.bg-dark-700:hover,
 button.bg-dark-700:focus {
-  background-color: var(--undefined)  !important;
+  background-color: var(--pgn-color-action-default-dark-700) !important;
 }
 
 .text-dark-700 {
@@ -2373,7 +2373,7 @@ button.bg-dark-700:focus {
 
 a.text-dark-700:hover,
 a.text-dark-700:focus {
-  color: var(--undefined) !important;
+  color: var(--pgn-color-action-default-dark-700) !important;
 }
 
 .border-dark-700 {
@@ -2388,7 +2388,7 @@ a.bg-dark-800:hover,
 a.bg-dark-800:focus,
 button.bg-dark-800:hover,
 button.bg-dark-800:focus {
-  background-color: var(--pgn-color-action-default-dark-800)  !important;
+  background-color: var(--pgn-color-action-default-dark-800) !important;
 }
 
 .text-dark-800 {
@@ -2412,7 +2412,7 @@ a.bg-dark-900:hover,
 a.bg-dark-900:focus,
 button.bg-dark-900:hover,
 button.bg-dark-900:focus {
-  background-color: var(--pgn-color-action-default-dark-900)  !important;
+  background-color: var(--pgn-color-action-default-dark-900) !important;
 }
 
 .text-dark-900 {
@@ -2436,7 +2436,7 @@ a.bg-dark:hover,
 a.bg-dark:focus,
 button.bg-dark:hover,
 button.bg-dark:focus {
-  background-color: var(--pgn-color-action-default-dark-base)  !important;
+  background-color: var(--pgn-color-action-default-dark-base) !important;
 }
 
 .text-dark {
diff --git a/tokens/css-utilities.js b/tokens/css-utilities.js
index 106771a85d..ee9f3ba891 100644
--- a/tokens/css-utilities.js
+++ b/tokens/css-utilities.js
@@ -12,7 +12,7 @@ a${parent}:hover,
 a${parent}:focus,
 button${parent}:hover,
 button${parent}:focus {
-  background-color: ${actions.default}  !important;
+  background-color: ${actions.default} !important;
 }
 
 `;
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 7a8bf0367f..24b93768d6 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -966,7 +966,7 @@
         "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
         "description": "Dark color of level 400.",
         "actions": {
-          "default": "{color.action.default.dark.400.path}"
+          "default": "{color.action.default.dark.400}"
         }
       },
       "500": {
@@ -985,7 +985,7 @@
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
         "description": "Dark color of level 600.",
         "actions": {
-          "default": "{color.action.default.dark.600.path}"
+          "default": "{color.action.default.dark.600}"
         }
       },
       "700": {
@@ -995,7 +995,7 @@
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
         "description": "Info color of level 700.",
         "actions": {
-          "default": "{color.action.default.dark.700.path}"
+          "default": "{color.action.default.dark.700}"
         }
       },
       "800": {