diff --git a/package-lock.json b/package-lock.json
index 9b289177833..3d6e62bea46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,9 @@
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@popperjs/core": "^2.11.4",
         "bootstrap": "^4.6.2",
+        "chroma-js": "^2.4.2",
         "classnames": "^2.3.1",
+        "commander": "^9.4.1",
         "email-prop-type": "^3.0.0",
         "file-selector": "^0.6.0",
         "font-awesome": "^4.7.0",
@@ -30,10 +32,15 @@
         "react-responsive": "^8.2.0",
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
+        "style-dictionary": "^3.7.1",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
       },
+      "bin": {
+        "build-design-tokens": "tokens/build-tokens.js",
+        "replace-scss-with-css": "tokens/replace-variables.js"
+      },
       "devDependencies": {
         "@babel/cli": "^7.16.8",
         "@babel/core": "^7.17.8",
@@ -66,7 +73,6 @@
         "axios-mock-adapter": "^1.21.1",
         "babel-jest": "^28.1.2",
         "babel-loader": "^8.2.4",
-        "commander": "^9.3.0",
         "enzyme": "^3.9.0",
         "eslint": "8.18.0",
         "eslint-config-airbnb": "19.0.4",
@@ -5216,7 +5222,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -5369,6 +5374,33 @@
         }
       ]
     },
+    "node_modules/capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "node_modules/capital-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/capital-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/cardinal": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
@@ -5404,6 +5436,60 @@
         "node": ">=4"
       }
     },
+    "node_modules/change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/change-case/node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/change-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/change-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/change-case/node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -5478,6 +5564,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -5602,10 +5693,9 @@
       }
     },
     "node_modules/commander": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.0.tgz",
-      "integrity": "sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==",
-      "dev": true,
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -5629,8 +5719,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/confusing-browser-globals": {
       "version": "1.0.11",
@@ -5638,6 +5727,41 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "node_modules/constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
+    "node_modules/constant-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/constant-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/constant-case/node_modules/upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/conventional-changelog-angular": {
       "version": "5.0.13",
       "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
@@ -6238,6 +6362,32 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -8002,8 +8152,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "node_modules/handlebars": {
       "version": "4.7.7",
@@ -8119,6 +8268,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dependencies": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -11115,7 +11273,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -11123,11 +11280,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -11325,8 +11486,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.capitalize": {
       "version": "4.2.1",
@@ -11702,7 +11862,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -14914,6 +15073,41 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/pascal-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/pascal-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -14927,7 +15121,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16500,6 +16693,33 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "node_modules/sentence-case/node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/sentence-case/node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@@ -16647,6 +16867,15 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -16961,6 +17190,132 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-dictionary": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.2.tgz",
+      "integrity": "sha512-Nd/qrPj1ikYX+sL/8PofMgfaJLRvGgT96Ty3dJLGNqtZmecVr3Xs+OZivMQEYmSCTiap/UyeV5SqwmAgn3/KKA==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -17552,6 +17907,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17914,7 +18274,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -17951,6 +18310,14 @@
       "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
       "dev": true
     },
+    "node_modules/upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -22284,7 +22651,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -22390,6 +22756,35 @@
       "integrity": "sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==",
       "dev": true
     },
+    "capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "cardinal": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-2.1.1.tgz",
@@ -22419,6 +22814,62 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "requires": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "camel-case": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+          "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+          "requires": {
+            "pascal-case": "^3.1.2",
+            "tslib": "^2.0.3"
+          }
+        },
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        },
+        "param-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+          "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+          "requires": {
+            "dot-case": "^3.0.4",
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "char-regex": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
@@ -22470,6 +22921,11 @@
         "readdirp": "~3.6.0"
       }
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -22573,10 +23029,9 @@
       }
     },
     "commander": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.4.0.tgz",
-      "integrity": "sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==",
-      "dev": true
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -22597,8 +23052,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "confusing-browser-globals": {
       "version": "1.0.11",
@@ -22606,6 +23060,43 @@
       "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "dev": true
     },
+    "constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        },
+        "upper-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+          "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "conventional-changelog-angular": {
       "version": "5.0.13",
       "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
@@ -23061,6 +23552,34 @@
         "domhandler": "^5.0.1"
       }
     },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -24392,8 +24911,7 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "handlebars": {
       "version": "4.7.7",
@@ -24471,6 +24989,15 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "requires": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -26691,14 +27218,17 @@
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+    },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
     },
     "jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
@@ -26851,8 +27381,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.capitalize": {
       "version": "4.2.1",
@@ -27158,7 +27687,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -29344,6 +29872,43 @@
         "parse5": "^7.0.0"
       }
     },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
+    "path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -29353,8 +29918,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
     },
     "path-key": {
       "version": "3.1.1",
@@ -30484,6 +31048,35 @@
       "integrity": "sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==",
       "dev": true
     },
+    "sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      },
+      "dependencies": {
+        "lower-case": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+          "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+          "requires": {
+            "tslib": "^2.0.3"
+          }
+        },
+        "no-case": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+          "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+          "requires": {
+            "lower-case": "^2.0.2",
+            "tslib": "^2.0.3"
+          }
+        }
+      }
+    },
     "serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@@ -30602,6 +31195,15 @@
         }
       }
     },
+    "snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -30859,6 +31461,95 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-dictionary": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.2.tgz",
+      "integrity": "sha512-Nd/qrPj1ikYX+sL/8PofMgfaJLRvGgT96Ty3dJLGNqtZmecVr3Xs+OZivMQEYmSCTiap/UyeV5SqwmAgn3/KKA==",
+      "requires": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+        },
+        "fs-extra": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+          "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "style-search": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@@ -31317,6 +32008,11 @@
         }
       }
     },
+    "tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -31576,8 +32272,7 @@
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
     },
     "update-browserslist-db": {
       "version": "1.0.5",
@@ -31595,6 +32290,14 @@
       "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
       "dev": true
     },
+    "upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index b238c9c0ea2..4ce022eb452 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,7 @@
     "build-types": "tsc --emitDeclarationOnly",
     "build-tokens": "node tokens/build-tokens.js --build-dir ./scss/core/css/",
     "replace-variables-usage-with-css": "node tokens/replace-variables.js -p src -t usage",
-    "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition",
-    "build-scss-to-css-map": "node tokens/map-scss-to-css.js"
+    "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
index 150036c262a..9caedab3d56 100644
--- a/scss/core/css/utility-classes.css
+++ b/scss/core/css/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Feb 2023 14:44:39 GMT
+ * Generated on Thu, 16 Feb 2023 10:37:12 GMT
  */
 
 .bg-dark {
diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
index c8e5f992da0..67c6fdf9c00 100644
--- a/scss/core/css/variables.css
+++ b/scss/core/css/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Wed, 15 Feb 2023 14:44:39 GMT
+ * Generated on Thu, 16 Feb 2023 10:37:12 GMT
  */
 
 :root {
@@ -263,6 +263,7 @@
   --pgn-spacing-chip-padding-y: .125rem;
   --pgn-spacing-chip-margin: .125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
+  --pgn-spacing-card-focus-border-offset: 5px;
   --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem;
   --pgn-spacing-card-logo-bottom-offset-base: 1rem;
   --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
@@ -400,6 +401,8 @@
   --pgn-size-card-logo-width: 7.25rem;
   --pgn-size-card-image-vertical-max-height: 140px;
   --pgn-size-card-image-horizontal-width-max: 240px;
+  --pgn-size-card-focus-border-radius: 5px;
+  --pgn-size-card-focus-border-width: 2px;
   --pgn-size-card-border-radius-logo: .25rem;
   --pgn-size-card-border-radius-image: .3125rem;
   --pgn-size-btn-focus-width: 2px;
@@ -486,7 +489,6 @@
   --pgn-color-btn-disabled-bg-outline-secondary: inherit;
   --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit;
   --pgn-color-btn-disabled-bg-outline-primary: inherit;
-  --pgn-color-btn-disabled-bg-inverse-primary: inherit;
   --pgn-color-btn-disabled-bg-inverse-outline-light: inherit;
   --pgn-color-btn-disabled-bg-inverse-light: inherit;
   --pgn-color-btn-disabled-bg-outline-light: inherit;
@@ -499,7 +501,6 @@
   --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit;
   --pgn-color-btn-disabled-bg-inverse-danger: #00000000;
   --pgn-color-btn-disabled-bg-outline-danger: inherit;
-  --pgn-color-btn-disabled-bg-inverse-brand: #00000000;
   --pgn-color-btn-disabled-bg-outline-brand: inherit;
   --pgn-color-btn-disabled-text-inverse-secondary: inherit;
   --pgn-color-btn-disabled-text-outline-secondary: inherit;
@@ -689,6 +690,7 @@
   --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
   --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -863,13 +865,14 @@
   --pgn-color-carousel-caption: var(--pgn-color-white);
   --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white);
   --pgn-color-carousel-control-base: var(--pgn-color-white);
-  --pgn-color-card-border-focus: #00000080;
+  --pgn-color-card-border-focus-base: #00000080;
   --pgn-color-card-border-base: #00000020;
   --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary);
   --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary);
   --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
-  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
+  --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white);
   --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand);
+  --pgn-color-btn-disabled-bg-inverse-brand: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white);
@@ -997,6 +1000,9 @@
   --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
   --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
   --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
   --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
   --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
   --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
@@ -1009,6 +1015,7 @@
   --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
+  --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-color-danger-900: #892029FF;
   --pgn-color-danger-800: #92222CFF;
@@ -1123,7 +1130,9 @@
   --pgn-color-chip-bg-dark: var(--pgn-color-dark-200);
   --pgn-color-chip-bg-light: var(--pgn-color-light-500);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-bg: var(--pgn-color-bg-base);
+  --pgn-color-card-bg-muted: var(--pgn-color-light-200);
+  --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
+  --pgn-color-card-bg-base: var(--pgn-color-bg-base);
   --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
   --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
   --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
@@ -1133,6 +1142,7 @@
   --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
   --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger);
   --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
   --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
   --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
   --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
@@ -1391,6 +1401,7 @@
   --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500);
   --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
   --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary);
   --pgn-color-btn-disabled-link: var(--pgn-color-disabled);
   --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
   --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
index 90258e50194..dbfa1bbfe62 100644
--- a/src/Button/Button.scss
+++ b/src/Button/Button.scss
@@ -28,26 +28,23 @@
       border-color: var(--pgn-btn-focus-border-color, transparent);
       color: var(--pgn-btn-focus-color, #{$body-color});
 
-      $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
-      $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
-
       &::before {
         content: "";
         position: absolute;
-        top: calc(#{$distance-include-btn-border} * -1);
-        right: calc(#{$distance-include-btn-border} * -1);
-        bottom: calc(#{$distance-include-btn-border} * -1);
-        left: calc(#{$distance-include-btn-border} * -1);
+        top: calc(#{$btn-focus-distance-to-border} * -1);
+        right: calc(#{$btn-focus-distance-to-border} * -1);
+        bottom: calc(#{$btn-focus-distance-to-border} * -1);
+        left: calc(#{$btn-focus-distance-to-border} * -1);
         border: solid $btn-focus-width var(--pgn-btn-focus-outline-color, #{$body-color});
-        border-radius: calc(#{$btn-border-radius} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &.btn-lg::before {
-        border-radius: calc(#{$btn-border-radius-lg} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &.btn-sm::before {
-        border-radius: calc(#{$btn-border-radius-sm} + #{$distance});
+        border-radius: $btn-focus-border-radius;
       }
 
       &:active,
diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
index f9e148f68c4..8ffb2faa12b 100644
--- a/src/Button/_variables.scss
+++ b/src/Button/_variables.scss
@@ -700,7 +700,7 @@ $btn-inverse-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-inverse-
 $btn-inverse-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary) !default;
 $btn-inverse-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary) !default;
 
-$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
-$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
+$btn-focus-border-gap: var(--pgn-spacing-btn-focus-border-gap) !default;
+$btn-focus-distance-to-border: var(--pgn-spacing-btn-focus-distance-to-border) !default;
 
-$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius: var(--pgn-size-btn-focus-border-radius) !default;
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
index 2d5cdb5a4da..b79936f8419 100644
--- a/src/Card/_variables.scss
+++ b/src/Card/_variables.scss
@@ -5,25 +5,25 @@ $card-spacer-x: var(--pgn-spacing-card-spacer-x) !default;
 $card-border-width: var(--pgn-size-card-border-width) !default;
 $card-border-radius: var(--pgn-size-card-border-radius-base) !default;
 $card-border-color: var(--pgn-color-card-border-base) !default;
-$card-border-focus-color: var(--pgn-color-card-border-focus) !default;
-$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
+$card-border-focus-color: var(--pgn-color-card-border-focus-base) !default;
+$card-border-focus-color-dark: var(--pgn-color-card-border-focus-dark) !default;
 $card-cap-bg: var(--pgn-card-cap-bg) !default;
 $card-cap-color: var(--pgn-card-cap-color) !default;
 $card-height: var(--pgn-card-height-base) !default;
-$card-bg-dark:                       $primary-500 !default;
-$card-bg-muted:                      $light-200 !default;
+$card-bg-dark: var(--pgn-color-card-bg-dark) !default;
+$card-bg-muted: var(--pgn-color-card-bg-muted) !default;
 
 // TODO: Need to deleted this variable after refactoring Card component
 // stylelint-disable-next-line max-line-length
 $card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default;
 $card-color: var(--pgn-color-card-base) !default;
-$card-bg: var(--pgn-color-card-bg) !default;
+$card-bg: var(--pgn-color-card-bg-base) !default;
 
 $card-group-margin: var(--pgn-spacing-card-margin-group) !default;
 $card-deck-margin: var(--pgn-spacing-card-margin-deck) !default;
 $card-grid-margin: var(--pgn-spacing-card-margin-grid) !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
+$card-deck-margin-bottom: var(--pgn-spacing-card-margin-deck-bottom) !default;
+$card-grid-margin-bottom: var(--pgn-spacing-card-margin-grid-bottom) !default;
 
 $card-columns-count: var(--pgn-spacing-card-columns-count) !default;
 $card-columns-gap: var(--pgn-spacing-card-columns-gap) !default;
@@ -51,6 +51,6 @@ $card-image-horizontal-min-width: var(--pgn-size-card-image-horizontal-width-min
 $card-image-vertical-max-height: var(--pgn-size-card-image-vertical-max-height) !default;
 $loading-skeleton-spacer: var(--pgn-spacing-card-loading-skeleton-spacer) !default;
 
-$card-focus-border-offset:           5px !default;
-$card-focus-border-width:            2px !default;
-$card-focus-border-radius:           5px !default;
+$card-focus-border-offset: var(--pgn-spacing-card-focus-border-offset) !default;
+$card-focus-border-width: var(--pgn-size-card-focus-border-width) !default;
+$card-focus-border-radius: var(--pgn-size-card-focus-border-radius) !default;
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json
index e6f39658f68..7b16f401693 100644
--- a/tokens/src/components/Button/brand.json
+++ b/tokens/src/components/Button/brand.json
@@ -229,7 +229,7 @@
         "bg": {
           "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" },
           "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" },
-          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
+          "inverse-brand": { "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
           "inverse-outline-brand": {
             "value": "{color.btn.bg.inverse-outline-brand}",
             "type": "color",
diff --git a/tokens/src/components/Button/core.json b/tokens/src/components/Button/core.json
index 8e5f11ececa..fe3f15e25bf 100644
--- a/tokens/src/components/Button/core.json
+++ b/tokens/src/components/Button/core.json
@@ -31,7 +31,19 @@
       "block": {
         "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
       },
-      "focus-gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" }
+      "focus": {
+        "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+        "border-gap": {
+          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+          "type": "dimension",
+          "source": "$btn-focus-border-gap"
+        },
+        "distance-to-border": {
+          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+          "type": "dimension",
+          "source": "$btn-focus-distance-to-border"
+        }
+      }
     }
   },
   "typography": {
@@ -95,7 +107,14 @@
           "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
         }
       },
-      "focus-width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }
+      "focus": {
+        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
+        "border-radius": {
+          "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+          "type": "dimension",
+          "source": "$btn-focus-border-radius"
+        }
+      }
     }
   },
   "transition": {
diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json
index 1c6e29c6d17..edf5c1f0375 100644
--- a/tokens/src/components/Button/primary.json
+++ b/tokens/src/components/Button/primary.json
@@ -226,7 +226,7 @@
         },
         "bg": {
           "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" },
-          "inverse-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-disabled-bg" },
+          "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-disabled-bg" },
           "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" },
           "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" }
         },
diff --git a/tokens/src/components/Card.json b/tokens/src/components/Card.json
index 82fd5554eff..b033feaab85 100644
--- a/tokens/src/components/Card.json
+++ b/tokens/src/components/Card.json
@@ -2,7 +2,11 @@
   "color": {
     "card": {
       "base": { "value": "inherit", "type": "color", "source": "$card-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
+      "bg": {
+        "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
+        "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" },
+        "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
+      },
       "border": {
         "base": { 
           "value": "{color.black}",
@@ -10,11 +14,18 @@
           "source": "$card-border-color",
           "modify": [{ "type": "alpha", "amount": 0.125 }]
         },
-        "focus": { 
-          "value": "{color.black}",
-          "type": "color",
-          "source": "$card-border-focus-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "focus": {
+          "base": {
+            "value": "{color.black}",
+            "type": "color",
+            "source": "$card-border-focus-color",
+            "modify": [{ "type": "alpha", "amount": 0.5 }]
+          },
+          "dark": {
+            "value": "{color.theme.focus.primary}",
+            "type": "color",
+            "source": "$card-border-focus-color-dark"
+          }
         }
       },
       "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
@@ -29,7 +40,9 @@
       "margin": {
         "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
         "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" },
-        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" }
+        "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" },
+        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" },
+        "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" }
       },
       "columns": {
         "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
@@ -51,6 +64,9 @@
           "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
           "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
         }
+      },
+      "focus": {
+        "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" }
       }
     }
   },
@@ -64,6 +80,12 @@
           "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }
         }
       },
+      "focus": {
+        "border": {
+          "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" },
+          "radius": { "value": "5px", "type": "dimension", "source": "$card-focus-border-radius" }
+        }
+      },
       "image": {
         "horizontal": {
           "width": {
diff --git a/www/src/components/LayoutGenerator.tsx b/www/src/components/LayoutGenerator.tsx
index 197fefdd72a..f71223423e3 100644
--- a/www/src/components/LayoutGenerator.tsx
+++ b/www/src/components/LayoutGenerator.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormGroup, FormControl, FormLabel, Row } from '~paragon-react'; // eslint-disable-line
+import { FormGroup, FormControl, FormLabel } from '~paragon-react';
 import CodeBlock from './CodeBlock';
 
 export interface IColumn {
@@ -14,51 +14,53 @@ export interface IColumn {
 
 function Column({
   index, width, onChangeWidth, offset, onChangeOffset,
-}: IColumn) => (
-  <div
-    className={classNames('col mb-4', {
-      [`col-${width}`]: width > 0,
-      [`offset-${offset}`]: offset > 0,
-    })}
-  >
+}: IColumn) {
+  return (
     <div
-      className="text-align-center p-1"
-      style={{ background: '#eee', minHeight: '2rem' }}
+      className={classNames('col mb-4', {
+        [`col-${width}`]: width > 0,
+        [`offset-${offset}`]: offset > 0,
+      })}
     >
-      <FormGroup className="form-inline m-2">
-        <FormLabel isInline className="font-weight-normal" htmlFor={`column-${index}-width`}>
-          Width
-        </FormLabel>
-        <FormControl
-          type="number"
-          id={`column-${index}-width`}
-          size="sm"
-          value={width}
-          placeholder="Width (1 - 12)"
-          style={{ width: '3.5rem' }}
-          min={0}
-          step={1}
-          max={12}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChangeWidth(index, e.target.value)}
-        />
-      </FormGroup>
-      <FormGroup className="form-inline m-2">
-        <FormLabel isInline className="font-weight-normal" htmlFor={`column-${index}-offset`}>
-          Offset
-        </FormLabel>
-        <FormControl
-          type="number"
-          id={`column-${index}-offset`}
-          size="sm"
-          value={offset}
-          placeholder="Offset (1 - 11)"
-          style={{ width: '3.5rem' }}
-          min={0}
-          step={1}
-          max={11}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChangeOffset(index, e.target.value)}
-        />
-      </FormGroup>
+      <div
+        className="text-align-center p-1"
+        style={{ background: '#eee', minHeight: '2rem' }}
+      >
+        <FormGroup className="form-inline m-2">
+          <FormLabel isInline className="font-weight-normal" htmlFor={`column-${index}-width`}>
+            Width
+          </FormLabel>
+          <FormControl
+            type="number"
+            id={`column-${index}-width`}
+            size="sm"
+            value={width}
+            placeholder="Width (1 - 12)"
+            style={{ width: '3.5rem' }}
+            min={0}
+            step={1}
+            max={12}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChangeWidth(index, e.target.value)}
+          />
+        </FormGroup>
+        <FormGroup className="form-inline m-2">
+          <FormLabel isInline className="font-weight-normal" htmlFor={`column-${index}-offset`}>
+            Offset
+          </FormLabel>
+          <FormControl
+            type="number"
+            id={`column-${index}-offset`}
+            size="sm"
+            value={offset}
+            placeholder="Offset (1 - 11)"
+            style={{ width: '3.5rem' }}
+            min={0}
+            step={1}
+            max={11}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChangeOffset(index, e.target.value)}
+          />
+        </FormGroup>
+      </div>
     </div>
   );
 }
diff --git a/www/src/components/typography-page/Body.tsx b/www/src/components/typography-page/Body.tsx
index 89e33d113b0..2b2c62be8f9 100644
--- a/www/src/components/typography-page/Body.tsx
+++ b/www/src/components/typography-page/Body.tsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import MeasuredItem from '../MeasuredItem';
-import measuredTypeProps from './measuredTypeProps';
-// @ts-ignore
 import { DataTable } from '~paragon-react';
 
 import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 61c584ba779..29cbf6c6ca2 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -2,12 +2,11 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-// @ts-ignore
 import Color from 'color';
+import { Container, DataTable } from '~paragon-react';
 import SEO from '../../components/SEO';
 import MeasuredItem from '../../components/MeasuredItem';
 import Layout from '../../components/PageLayout';
-import { Container, DataTable } from '~paragon-react';
 
 import { CodeCell } from '../../components/TableCells';
 
diff --git a/www/src/pages/foundations/elevation.tsx b/www/src/pages/foundations/elevation.tsx
index 3d03d56f28b..b7a3902b026 100644
--- a/www/src/pages/foundations/elevation.tsx
+++ b/www/src/pages/foundations/elevation.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import SEO from '../../components/SEO';
-import Layout from '../../components/PageLayout';
 import {
   Button, Form, Container,
   Toast, Icon, IconButtonWithTooltip,
 } from '~paragon-react';
 import { Close, WbSunny, DoDisturb } from '~paragon-icons';
+import SEO from '../../components/SEO';
+import Layout from '../../components/PageLayout';
 
 const boxShadowSides = ['down', 'up', 'right', 'left', 'centered'];
 const boxShadowLevels = [1, 2, 3, 4, 5];
diff --git a/www/src/pages/foundations/spacing.tsx b/www/src/pages/foundations/spacing.tsx
index e1b32dd29e4..c3ba85271ae 100644
--- a/www/src/pages/foundations/spacing.tsx
+++ b/www/src/pages/foundations/spacing.tsx
@@ -140,8 +140,10 @@ export default function SpacingPage() {
                 ))}
               </Form.RadioSet>
             </Form.Group>
-            <label className="d-block" htmlFor="set-size">
-              <span className="d-block text-center">Spacing Level: {size}</span>
+            <Form.Group>
+              <Form.Label className="d-block">
+                <span className="d-block text-center">Spacing Level: {size}</span>
+              </Form.Label>
               <div
                 className="d-flex align-items-center mt-1"
                 style={{ maxWidth: '20rem' }}
diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx
index 8e9cb1f2b62..80be3165916 100644
--- a/www/src/pages/foundations/typography.tsx
+++ b/www/src/pages/foundations/typography.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Container } from '~paragon-react';
 import Layout from '../../components/PageLayout';
 import SEO from '../../components/SEO';
-import { Container } from '~paragon-react';
 import {
   HeadingsTable,
   BodyTable,