diff --git a/.stylelintrc.json b/.stylelintrc.json
index 6abc524964..ff0515b89f 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -34,6 +34,7 @@
     "color-function-notation": "legacy",
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
-    }]
+    }],
+    "custom-property-empty-line-before": null
   }
 }
diff --git a/Makefile b/Makefile
index d6dc6ff320..8fb1778064 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,4 @@
+.PHONY: build
 build:
 	rm -rf ./dist
 	tsc --project tsconfig.build.json
diff --git a/bin/paragon-scripts.js b/bin/paragon-scripts.js
index a029b19564..7656f3bdfb 100755
--- a/bin/paragon-scripts.js
+++ b/bin/paragon-scripts.js
@@ -85,11 +85,21 @@ const COMMANDS = {
         description: 'Include only source design tokens in the build.',
         defaultValue: false,
       },
+      {
+        name: '--output-token-references',
+        description: 'Include references for tokens with aliases to other tokens in the build output.',
+        defaultValue: true,
+      },
       {
         name: '-t, --themes',
         description: 'Specify themes to include in the token build.',
         defaultValue: 'light',
       },
+      {
+        name: '-v, --verbose',
+        description: 'Enable verbose logging.',
+        defaultValue: false,
+      },
     ],
   },
   'replace-variables': {
diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index e2e04d60ae..3e10b37593 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -1,6 +1,10 @@
 const path = require('path');
 const minimist = require('minimist');
-const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
+const {
+  initializeStyleDictionary,
+  getTokensStudioTransforms,
+  colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -16,19 +20,34 @@ async function buildTokensCommand(commandArgs) {
   const defaultParams = {
     themes: ['light'],
     'build-dir': './build/',
+    'source-tokens-only': false,
+    'output-references': true,
+    verbose: false,
   };
 
   const alias = {
     'build-dir': 'b',
     themes: 't',
+    verbose: '-v',
   };
 
   const {
     'build-dir': buildDir,
     source: tokensSource,
-    'source-tokens-only': hasSourceTokensOnly,
+    'source-tokens-only': transformSourceTokensOnly,
+    'output-references': outputReferences,
     themes,
-  } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
+    verbose,
+  } = minimist(
+    commandArgs,
+    {
+      alias,
+      default: defaultParams,
+      boolean: ['source-tokens-only', 'output-references', 'verbose'],
+    },
+  );
+
+  const StyleDictionary = await initializeStyleDictionary({ themes });
 
   const coreConfig = {
     include: [
@@ -38,36 +57,42 @@ async function buildTokensCommand(commandArgs) {
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
+    preprocessors: ['pgn-annotate-token-extensions-with-references', 'tokens-studio'],
+    expand: {
+      typesMap: (await getTokensStudioTransforms()).expandTypesMap,
+    },
     platforms: {
       css: {
         prefix: 'pgn',
-        transformGroup: 'css',
+        transformGroup: 'paragon-css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
+        options: {
+          fileHeader: 'customFileHeader',
+        },
         files: [
           {
             format: 'css/custom-variables',
             destination: 'core/variables.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/custom-media-breakpoints',
             destination: 'core/custom-media-breakpoints.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
-        transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
-        options: {
-          fileHeader: 'customFileHeader',
-        },
       },
     },
+    log: {
+      verbosity: verbose ? 'verbose' : 'default',
+    },
   };
 
   const getStyleDictionaryConfig = (themeVariant) => ({
@@ -85,16 +110,10 @@ async function buildTokensCommand(commandArgs) {
       : [],
     transform: {
       'color/sass-color-functions': {
-        ...StyleDictionary.transform['color/sass-color-functions'],
-        transformer: (token) => colorTransform(token, themeVariant),
+        ...StyleDictionary.hooks.transforms['color/sass-color-functions'],
+        transform: (token) => colorTransform(token, themeVariant),
       },
     },
-    format: {
-      'css/custom-variables': formatterArgs => createCustomCSSVariables({
-        formatterArgs,
-        themeVariant,
-      }),
-    },
     platforms: {
       css: {
         ...coreConfig.platforms.css,
@@ -102,17 +121,19 @@ async function buildTokensCommand(commandArgs) {
           {
             format: 'css/custom-variables',
             destination: `themes/${themeVariant}/variables.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/utility-classes',
             destination: `themes/${themeVariant}/utility-classes.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
@@ -120,14 +141,29 @@ async function buildTokensCommand(commandArgs) {
     },
   });
 
-  StyleDictionary.extend(coreConfig).buildAllPlatforms();
-  createIndexCssFile({ buildDir, isTheme: false });
+  // Create list of style-dictionary configurations to build (core + theme variants)
+  const configs = [
+    { config: coreConfig },
+    ...themes.map((themeVariant) => {
+      const config = getStyleDictionaryConfig(themeVariant);
+      return {
+        config,
+        themeVariant,
+      };
+    }),
+  ];
 
-  themes.forEach((themeVariant) => {
-    const config = getStyleDictionaryConfig(themeVariant);
-    StyleDictionary.extend(config).buildAllPlatforms();
-    createIndexCssFile({ buildDir, isTheme: true, themeVariant });
-  });
+  // Build tokens for each configuration
+  await Promise.all(configs.map(async ({ config, themeVariant }) => {
+    const sd = new StyleDictionary(config);
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+    createIndexCssFile({
+      buildDir,
+      isThemeVariant: !!themeVariant,
+      themeVariant,
+    });
+  }));
 }
 
 module.exports = buildTokensCommand;
diff --git a/package-lock.json b/package-lock.json
index 323434aa0c..5b8d17d40f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
       ],
       "dependencies": {
         "@popperjs/core": "^2.11.4",
+        "@tokens-studio/sd-transforms": "^1.2.4",
         "axios": "^0.27.2",
         "bootstrap": "^4.6.2",
         "chalk": "^4.1.2",
@@ -54,7 +55,7 @@
         "react-table": "^7.7.0",
         "react-transition-group": "^4.4.2",
         "sass": "^1.58.3",
-        "style-dictionary": "^3.7.1",
+        "style-dictionary": "^4.0.1",
         "tabbable": "^5.3.3",
         "uncontrollable": "^7.2.1",
         "uuid": "^9.0.0"
@@ -73,7 +74,7 @@
         "@babel/preset-typescript": "^7.16.7",
         "@edx/eslint-config": "^3.2.0",
         "@edx/stylelint-config-edx": "^2.3.0",
-        "@edx/typescript-config": "^1.0.1",
+        "@edx/typescript-config": "^1.1.0",
         "@formatjs/cli": "^5.0.2",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/git": "^10.0.1",
@@ -2231,6 +2232,210 @@
         "partytown": "bin/partytown.cjs"
       }
     },
+    "node_modules/@bundled-es-modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "glob": "^10.4.2",
+        "patch-package": "^8.0.0",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0",
+        "url": "^0.11.3"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@bundled-es-modules/glob/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz",
+      "integrity": "sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==",
+      "dependencies": {
+        "assert": "^2.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "memfs": "^4.9.3",
+        "path": "^0.12.7",
+        "stream": "^0.0.3",
+        "util": "^0.12.5"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/@bundled-es-modules/memfs/node_modules/memfs": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.11.1.tgz",
+      "integrity": "sha512-LZcMTBAgqUUKNXZagcZxvXXfgF1bHX7Y7nQ0QyEiNbRJgE29GhgPd8Yna1VQcLlPiHt/5RFJMWYN9Uv/VPNvjQ==",
+      "dependencies": {
+        "@jsonjoy.com/json-pack": "^1.0.3",
+        "@jsonjoy.com/util": "^1.3.0",
+        "tree-dump": "^1.0.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      }
+    },
+    "node_modules/@bundled-es-modules/postcss-calc-ast-parser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz",
+      "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==",
+      "dependencies": {
+        "postcss-calc-ast-parser": "^0.1.4"
+      }
+    },
     "node_modules/@chevrotain/cst-dts-gen": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
@@ -4282,9 +4487,9 @@
       }
     },
     "node_modules/@edx/typescript-config": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.0.1.tgz",
-      "integrity": "sha512-w0g3nIX9oEch8Rip8q8sb/nrurGEHA1BEjK/I1LAQwA44K4FPMWvyvabmZErrdTJ9sXcZL10aWD3bat1obV8Bg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/typescript-config/-/typescript-config-1.1.0.tgz",
+      "integrity": "sha512-HF+7dsSgA2YQ6f/qV4HnrEYBoIhIdxVQZgDyYk/YGvaVGqT6IFuaHnYUP7ImpCUMOUmx/Jl7EyuVeaMe2LrMcA==",
       "dev": true,
       "peerDependencies": {
         "typescript": "^4.9.4"
@@ -5183,6 +5388,90 @@
       "version": "1.2.1",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "dev": true,
@@ -5759,6 +6048,57 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jsonjoy.com/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.1.0.tgz",
+      "integrity": "sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==",
+      "dependencies": {
+        "@jsonjoy.com/base64": "^1.1.1",
+        "@jsonjoy.com/util": "^1.1.2",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^1.20.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.3.0.tgz",
+      "integrity": "sha512-Cebt4Vk7k1xHy87kHY7KSPLT77A7Ev7IfOblyLZhtYEhrdQ6fX4EoLq3xOQ3O/DRMEh2ok5nyC180E+ABS8Wmw==",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "devOptional": true,
@@ -6892,6 +7232,15 @@
         "@parcel/core": "^2.6.2"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.10",
       "license": "MIT",
@@ -7965,6 +8314,30 @@
       "version": "0.3.0",
       "license": "MIT"
     },
+    "node_modules/@tokens-studio/sd-transforms": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.2.4.tgz",
+      "integrity": "sha512-Blf7Y5D7uieRBTcmyrFxZ/oEB7OYAa/Ns7DJU4/fyV69pvm7DC3K3zHxrFwHSRcoa7C/dFoF3p3AgohkdXzjfA==",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
+        "@tokens-studio/types": "^0.5.1",
+        "colorjs.io": "^0.4.3",
+        "expr-eval-fork": "^2.0.2",
+        "is-mergeable-object": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "style-dictionary": "^4.0.1"
+      }
+    },
+    "node_modules/@tokens-studio/types": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.1.tgz",
+      "integrity": "sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "dev": true,
@@ -9423,6 +9796,21 @@
       "version": "4.2.2",
       "license": "Apache-2.0"
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ=="
+    },
+    "node_modules/@zip.js/zip.js": {
+      "version": "2.7.48",
+      "resolved": "https://registry.npmjs.org/@zip.js/zip.js/-/zip.js-2.7.48.tgz",
+      "integrity": "sha512-J7cliimZ2snAbr0IhLx2U8BwfA1pKucahKzTpFtYq4hEgKxwvFJcIjCIVNPwQpfVab7iVP+AKmoH1gidBlyhiQ==",
+      "engines": {
+        "bun": ">=0.7.0",
+        "deno": ">=1.0.0",
+        "node": ">=16.5.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "dev": true,
@@ -9956,6 +10344,18 @@
       "version": "2.0.6",
       "license": "MIT"
     },
+    "node_modules/assert": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
+      }
+    },
     "node_modules/assert-ok": {
       "version": "1.0.0",
       "license": "MIT"
@@ -12877,11 +13277,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -13282,7 +13689,6 @@
     },
     "node_modules/ci-info": {
       "version": "3.8.0",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13947,6 +14353,11 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/colorjs.io": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz",
+      "integrity": "sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "license": "MIT",
@@ -15323,6 +15734,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "license": "MIT",
@@ -15792,6 +16219,11 @@
       "version": "0.1.5",
       "license": "BSD-3-Clause"
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "license": "MIT"
@@ -16146,6 +16578,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "license": "MIT",
@@ -17204,6 +17655,11 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/expr-eval-fork": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz",
+      "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ=="
+    },
     "node_modules/express": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -17743,6 +18199,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "license": "MIT",
@@ -18068,8 +18532,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "license": "MIT"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -20276,12 +20744,18 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.0",
-      "license": "MIT",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -20731,10 +21205,11 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -20864,6 +21339,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hast-to-hyperscript": {
       "version": "9.0.1",
       "license": "MIT",
@@ -21498,6 +21984,14 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
     "node_modules/hyphenate-style-name": {
       "version": "1.0.4",
       "license": "BSD-3-Clause"
@@ -22185,6 +22679,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-git-repository": {
       "version": "1.1.1",
       "dev": true,
@@ -22381,6 +22889,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-mergeable-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz",
+      "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA=="
+    },
+    "node_modules/is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "license": "MIT",
@@ -22858,6 +23386,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/java-properties": {
       "version": "1.0.2",
       "dev": true,
@@ -25135,6 +25677,23 @@
       "version": "0.4.1",
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.1.1.tgz",
+      "integrity": "sha512-SU/971Kt5qVQfJpyDveVhQ/vya+5hvrjClFOcr8c0Fq5aODJjMwutrOfCU+eCnVD5gpx1Q3fEqkyom77zH1iIg==",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "license": "MIT"
@@ -25154,11 +25713,6 @@
         "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",
       "license": "MIT",
@@ -25169,6 +25723,14 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsonparse": {
       "version": "1.3.1",
       "dev": true,
@@ -25221,6 +25783,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "license": "MIT",
@@ -26701,6 +27271,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/mitt": {
       "version": "1.2.0",
       "license": "MIT"
@@ -30043,8 +30621,12 @@
       "license": "MIT"
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "license": "MIT",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -30462,6 +31044,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "node_modules/package-json/node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "license": "MIT",
@@ -30845,6 +31432,123 @@
         "which": "bin/which"
       }
     },
+    "node_modules/patch-package": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+      "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^9.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "rimraf": "^2.6.3",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.0.33",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/patch-package/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "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/patch-package/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/patch-package/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/patch-package/node_modules/tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dependencies": {
+        "os-tmpdir": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/patch-package/node_modules/yaml": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "node_modules/path-case": {
       "version": "3.0.4",
       "license": "MIT",
@@ -30900,6 +31604,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "license": "MIT"
@@ -30911,6 +31635,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-unified": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-unified/-/path-unified-0.1.0.tgz",
+      "integrity": "sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg=="
+    },
+    "node_modules/path/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/path/node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/peek-readable": {
       "version": "4.1.0",
       "license": "MIT",
@@ -31517,6 +32259,22 @@
         "postcss": "^8.2.2"
       }
     },
+    "node_modules/postcss-calc-ast-parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz",
+      "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==",
+      "dependencies": {
+        "postcss-value-parser": "^3.3.1"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
     "node_modules/postcss-colormin": {
       "version": "5.3.1",
       "license": "MIT",
@@ -32253,6 +33011,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "license": "MIT"
@@ -32468,12 +33234,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "dev": true,
@@ -35694,6 +36454,22 @@
       "version": "2.0.0",
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-harmonic-interval": {
       "version": "1.0.1",
       "dev": true,
@@ -35849,12 +36625,17 @@
       "optional": true
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "license": "MIT",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -35977,7 +36758,6 @@
     },
     "node_modules/slash": {
       "version": "2.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -36873,6 +37653,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/stream": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.3.tgz",
+      "integrity": "sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==",
+      "dependencies": {
+        "component-emitter": "^2.0.0"
+      }
+    },
     "node_modules/stream-combiner2": {
       "version": "1.1.1",
       "dev": true,
@@ -36882,6 +37670,17 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/stream/node_modules/component-emitter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-2.0.0.tgz",
+      "integrity": "sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "engines": {
@@ -36950,6 +37749,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "license": "MIT"
@@ -37030,6 +37848,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "dev": true,
@@ -37095,27 +37925,47 @@
       }
     },
     "node_modules/style-dictionary": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.8.0.tgz",
-      "integrity": "sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.0.1.tgz",
+      "integrity": "sha512-aZ2iouI0i0DIXk3QhCkwOeo5rQeuk5Ja0PhHo32/EXCNuay4jK4CZ+hQJW0Er0J74VWniR+qaeoWgjklcULxOQ==",
+      "hasInstallScript": true,
       "dependencies": {
-        "chalk": "^4.0.0",
-        "change-case": "^4.1.2",
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/glob": "^10.4.2",
+        "@bundled-es-modules/memfs": "^4.9.4",
+        "@zip.js/zip.js": "^2.7.44",
+        "chalk": "^5.3.0",
+        "change-case": "^5.3.0",
         "commander": "^8.3.0",
-        "fs-extra": "^10.0.0",
-        "glob": "^7.2.0",
+        "is-plain-obj": "^4.1.0",
         "json5": "^2.2.2",
-        "jsonc-parser": "^3.0.0",
-        "lodash": "^4.17.15",
-        "tinycolor2": "^1.4.1"
+        "patch-package": "^8.0.0",
+        "path-unified": "^0.1.0",
+        "tinycolor2": "^1.6.0"
       },
       "bin": {
-        "style-dictionary": "bin/style-dictionary"
+        "style-dictionary": "bin/style-dictionary.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/style-dictionary/node_modules/change-case": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
+      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w=="
+    },
     "node_modules/style-dictionary/node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -37124,36 +37974,15 @@
         "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"
-      },
+    "node_modules/style-dictionary/node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
       "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"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/style-loader": {
@@ -37928,6 +38757,17 @@
       "version": "0.2.0",
       "license": "MIT"
     },
+    "node_modules/thingies": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-1.21.0.tgz",
+      "integrity": "sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==",
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
     "node_modules/throat": {
       "version": "5.0.0",
       "dev": true,
@@ -38191,6 +39031,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tree-dump": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
+      "integrity": "sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/trim": {
       "version": "0.0.1"
     },
@@ -38951,11 +39806,15 @@
       "license": "MIT"
     },
     "node_modules/url": {
-      "version": "0.11.0",
-      "license": "MIT",
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
+      "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
       "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
+        "punycode": "^1.4.1",
+        "qs": "^6.12.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/url-join": {
@@ -39024,8 +39883,23 @@
       }
     },
     "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "license": "MIT"
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+    },
+    "node_modules/url/node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/use": {
       "version": "3.1.1",
@@ -39085,6 +39959,18 @@
         }
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "license": "MIT"
@@ -39863,6 +40749,53 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/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/wrap-ansi-cjs/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/wrap-ansi-cjs/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/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index a3bf75281d..77ff05e6eb 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,14 @@
     "playroom:build": "npm run playroom:build --workspace=www",
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
+    "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
+    "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
+    "@tokens-studio/sd-transforms": "^1.2.4",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
     "chalk": "^4.1.2",
@@ -93,7 +96,7 @@
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.2",
     "sass": "^1.58.3",
-    "style-dictionary": "^3.7.1",
+    "style-dictionary": "^4.0.1",
     "tabbable": "^5.3.3",
     "uncontrollable": "^7.2.1",
     "uuid": "^9.0.0"
@@ -114,7 +117,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@edx/eslint-config": "^3.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
-    "@edx/typescript-config": "^1.0.1",
+    "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss
index a06f5629a1..19519cd00a 100644
--- a/src/Annotation/index.scss
+++ b/src/Annotation/index.scss
@@ -1,5 +1,21 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-annotation-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-1-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-1-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-2-blur)
+      var(--pgn-elevation-annotation-box-shadow-2-color)
+    );
+}
+
 .pgn__annotation {
   padding: var(--pgn-spacing-annotation-padding);
   border-radius: var(--pgn-size-annotation-border-radius);
diff --git a/src/Card/CardDeck.jsx b/src/Card/CardDeck.jsx
index 0a2ac1f0b8..7780b2034d 100644
--- a/src/Card/CardDeck.jsx
+++ b/src/Card/CardDeck.jsx
@@ -1,7 +1,6 @@
 import React, { Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import BaseCardDeck from 'react-bootstrap/CardDeck';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useOverflowScrollItems } from '../OverflowScroll';
@@ -102,6 +101,4 @@ CardDeck.defaultProps = {
   hasEqualColumnHeights: true,
 };
 
-CardDeck.Deprecated = BaseCardDeck;
-
 export default CardDeck;
diff --git a/src/Card/README.md b/src/Card/README.md
index c8c23c7546..742cc3efea 100644
--- a/src/Card/README.md
+++ b/src/Card/README.md
@@ -899,37 +899,6 @@ For accessibility, if the child `Card` components are interactive (e.g., `isClic
 }
 ```
 
-### CardDeck.Deprecated
-
-Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width.
-
-Note: This component is a pass-thru from `react-bootstrap`.
-
-```jsx live
-() => {
-  const CardComponent = () => (
-    <Card>
-      <Card.ImageCap
-        src="https://picsum.photos/360/200/"
-        srcAlt="Card image"
-      />
-      <Card.Header title="Card title" />
-      <Card.Section title="Section title">
-        <HipsterIpsum numShortParagraphs={1} />
-      </Card.Section>
-    </Card>
-  );
-
-  return (
-    <CardDeck.Deprecated>
-      <CardComponent />
-      <CardComponent />
-      <CardComponent />
-    </CardDeck.Deprecated>
-  )
-}
-```
-
 ## CardCarousel
 
 Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel.
diff --git a/src/Card/index.scss b/src/Card/index.scss
index aec6589e83..383726a8cf 100644
--- a/src/Card/index.scss
+++ b/src/Card/index.scss
@@ -136,11 +136,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-title-sm {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-title-md {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: var(--pgn-typography-font-size-h3-base);
     }
 
     %header-subtitle {
@@ -155,11 +155,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-subtitle-sm {
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
     }
 
     .pgn__card-header-subtitle-md {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-actions {
@@ -271,7 +271,7 @@ a.pgn__card {
     .pgn__card-section-title {
       color: var(--pgn-color-black);
       font-weight: var(--pgn-typography-font-weight-bold);
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
       margin-bottom: var(--pgn-spacing-card-spacer-y);
     }
 
@@ -392,7 +392,7 @@ a.pgn__card {
     }
 
     .pgn__card-status__heading {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
       color: var(--pgn-color-black);
       display: flex;
       font-weight: var(--pgn-typography-font-weight-bold);
diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss
index a046f79f46..29e6bc078b 100644
--- a/src/Carousel/index.scss
+++ b/src/Carousel/index.scss
@@ -1,3 +1,26 @@
+:root {
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay)
+    var(--pgn-transition-carousel-base-behavior);
+
+  --pgn-transition-carousel-indicator:
+    var(--pgn-transition-carousel-indicator-property)
+    var(--pgn-transition-carousel-indicator-duration)
+    var(--pgn-transition-carousel-indicator-timing-function)
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
+
+  --pgn-transition-carousel-control:
+    var(--pgn-transition-carousel-control-property)
+    var(--pgn-transition-carousel-control-duration)
+    var(--pgn-transition-carousel-control-timing-function)
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
+}
+
 .carousel {
   position: relative;
 }
@@ -58,7 +81,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
+    transition: var(--pgn-transition-carousel-base);
   }
 }
 
diff --git a/src/CloseButton/index.scss b/src/CloseButton/index.scss
index cde16e1bb3..750f47d3f3 100644
--- a/src/CloseButton/index.scss
+++ b/src/CloseButton/index.scss
@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+}
+
 .close {
   float: right;
   font-weight: var(--pgn-typography-close-button-font-weight);
diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss
index 1e5bad7cd2..db46647e62 100644
--- a/src/ColorPicker/index.scss
+++ b/src/ColorPicker/index.scss
@@ -37,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
   padding: .5rem;
   margin-bottom: 0 !important;
 }
diff --git a/src/DataTable/index.scss b/src/DataTable/index.scss
index 62e8e01a3d..4292f5bde3 100644
--- a/src/DataTable/index.scss
+++ b/src/DataTable/index.scss
@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-data-table-box-shadow:
+    var(--pgn-elevation-data-table-box-shadow-offset-x)
+    var(--pgn-elevation-data-table-box-shadow-offset-y)
+    var(--pgn-elevation-data-table-box-shadow-blur)
+    var(--pgn-elevation-data-table-box-shadow-color);
+
+  --pgn-spacing-data-table-padding-cell:
+    var(--pgn-spacing-data-table-padding-cell-x)
+    var(--pgn-spacing-data-table-padding-cell-y);
+}
+
 .pgn__data-table-wrapper {
   font-size: var(--pgn-typography-font-size-sm);
   border-radius: var(--pgn-size-border-radius-base);
diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss
index 49a4c052f1..2575d841c5 100644
--- a/src/Dropdown/dropdown-bootstrap.scss
+++ b/src/Dropdown/dropdown-bootstrap.scss
@@ -1,3 +1,9 @@
+:root {
+  --pgn-spacing-dropdown-padding-header:
+    var(--pgn-spacing-dropdown-padding-header-y)
+    var(--pgn-spacing-dropdown-padding-header-x);
+}
+
 .dropup,
 .dropright,
 .dropdown,
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
index c1c4ae871c..b2d382c72e 100644
--- a/src/Dropzone/index.scss
+++ b/src/Dropzone/index.scss
@@ -1,3 +1,37 @@
+:root {
+  --pgn-elevation-dropzone-hover:
+    var(--pgn-elevation-dropzone-hover-inset)
+    var(--pgn-elevation-dropzone-hover-offset-x)
+    var(--pgn-elevation-dropzone-hover-offset-y)
+    var(--pgn-elevation-dropzone-hover-blur)
+    var(--pgn-elevation-dropzone-hover-spread)
+    var(--pgn-elevation-dropzone-hover-color);
+
+  --pgn-elevation-dropzone-focus:
+    var(--pgn-elevation-dropzone-focus-inset)
+    var(--pgn-elevation-dropzone-focus-offset-x)
+    var(--pgn-elevation-dropzone-focus-offset-y)
+    var(--pgn-elevation-dropzone-focus-blur)
+    var(--pgn-elevation-dropzone-focus-spread)
+    var(--pgn-elevation-dropzone-focus-color);
+
+  --pgn-elevation-dropzone-error:
+    var(--pgn-elevation-dropzone-error-inset)
+    var(--pgn-elevation-dropzone-error-offset-x)
+    var(--pgn-elevation-dropzone-error-offset-y)
+    var(--pgn-elevation-dropzone-error-blur)
+    var(--pgn-elevation-dropzone-error-spread)
+    var(--pgn-elevation-dropzone-error-color);
+
+  --pgn-elevation-dropzone-active:
+    var(--pgn-elevation-dropzone-active-inset)
+    var(--pgn-elevation-dropzone-active-offset-x)
+    var(--pgn-elevation-dropzone-active-offset-y)
+    var(--pgn-elevation-dropzone-active-blur)
+    var(--pgn-elevation-dropzone-active-spread)
+    var(--pgn-elevation-dropzone-active-color);
+}
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;
diff --git a/src/Form/_FormText.scss b/src/Form/_FormText.scss
index 3f19d55ab5..6e22e92a7d 100644
--- a/src/Form/_FormText.scss
+++ b/src/Form/_FormText.scss
@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   display: flex;
   align-items: center;
 
diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
index b462f84da0..335d07fb06 100644
--- a/src/Form/_bootstrap-custom-forms.scss
+++ b/src/Form/_bootstrap-custom-forms.scss
@@ -1,3 +1,43 @@
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+
+  --pgn-elevation-form-control-select-border-focus:
+    var(--pgn-elevation-form-control-select-border-focus-offset-x)
+    var(--pgn-elevation-form-control-select-border-focus-offset-y)
+    var(--pgn-elevation-form-control-select-border-focus-blur)
+    var(--pgn-elevation-form-control-select-border-focus-spread)
+    var(--pgn-elevation-form-control-select-border-focus-color);
+
+  --pgn-elevation-form-control-file-focus:
+    var(--pgn-elevation-form-control-file-focus-offset-x)
+    var(--pgn-elevation-form-control-file-focus-offset-y)
+    var(--pgn-elevation-form-control-file-focus-blur)
+    var(--pgn-elevation-form-control-file-focus-spread)
+    var(--pgn-elevation-form-control-file-focus-color);
+
+  --pgn-transition-form-control:
+    var(--pgn-transition-form-control-1-property)
+    var(--pgn-transition-form-control-1-duration)
+    var(--pgn-transition-form-control-1-timing-function)
+    var(--pgn-transition-form-control-1-delay)
+    var(--pgn-transition-form-control-1-behavior),
+    var(--pgn-transition-form-control-2-property)
+    var(--pgn-transition-form-control-2-duration)
+    var(--pgn-transition-form-control-2-timing-function)
+    var(--pgn-transition-form-control-2-delay)
+    var(--pgn-transition-form-control-2-behavior),
+    var(--pgn-transition-form-control-3-property)
+    var(--pgn-transition-form-control-3-duration)
+    var(--pgn-transition-form-control-3-timing-function)
+    var(--pgn-transition-form-control-3-delay)
+    var(--pgn-transition-form-control-3-behavior);
+}
+
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
 // https://useiconic.com/open
diff --git a/src/Form/_index.scss b/src/Form/_index.scss
index ccf3f58818..1452f8104f 100644
--- a/src/Form/_index.scss
+++ b/src/Form/_index.scss
@@ -5,6 +5,15 @@
 @import "FormText";
 @import "FormControlSet";
 
+:root {
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+}
+
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {
diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
index 6493a51fa9..89af16b140 100644
--- a/src/Form/_mixins.scss
+++ b/src/Form/_mixins.scss
@@ -1,3 +1,25 @@
+:root {
+  --pgn-elevation-form-input-focus:
+    var(--pgn-elevation-form-input-focus-offset-x)
+    var(--pgn-elevation-form-input-focus-offset-y)
+    var(--pgn-elevation-form-input-focus-blur)
+    var(--pgn-elevation-form-input-focus-spread)
+    var(--pgn-elevation-form-input-focus-color);
+
+  --pgn-spacing-form-control-select-feedback-icon-position:
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-y)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y);
+
+  --pgn-other-content-form-control-select-bg:
+    var(--pgn-other-content-form-control-select-bg-image)
+    var(--pgn-other-content-form-control-select-bg-position-x)
+    var(--pgn-other-content-form-control-select-bg-offset-y)
+    var(--pgn-other-content-form-control-select-bg-position-y)
+    / var(--pgn-other-content-form-control-select-bg-color); // stylelint-disable-line scss/operator-no-newline-before
+}
+
 @mixin form-control-floating-label-initial(
   $padding-x,
   $padding-y,
diff --git a/src/IconButton/index.scss b/src/IconButton/index.scss
index d1454db5d9..54792c04c5 100644
--- a/src/IconButton/index.scss
+++ b/src/IconButton/index.scss
@@ -1,5 +1,151 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-icon-button-box-shadow-primary-base:
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-primary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-base:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-base:
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-brand-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-base:
+    var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-success-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-base:
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-warning-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-base:
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-danger-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-base:
+    var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-light-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-base:
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-dark-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-base:
+    var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+
+  --pgn-elevation-icon-button-box-shadow-black-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+}
+
 .btn-icon {
   @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));
 
diff --git a/src/Menu/index.scss b/src/Menu/index.scss
index fddd792f10..1d3fded3f3 100644
--- a/src/Menu/index.scss
+++ b/src/Menu/index.scss
@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-menu-box-shadow:
+    var(--pgn-elevation-menu-box-shadow-offset-x)
+    var(--pgn-elevation-menu-box-shadow-offset-y)
+    var(--pgn-elevation-menu-box-shadow-blur)
+    var(--pgn-elevation-menu-box-shadow-color);
+}
+
 .pgn__menu {
   border-radius: var(--pgn-size-menu-base-border-radius);
   box-shadow: var(--pgn-elevation-menu-box-shadow);
diff --git a/src/Modal/ModalDialog.jsx b/src/Modal/ModalDialog.jsx
index 6814b3c22e..caa519c1c6 100644
--- a/src/Modal/ModalDialog.jsx
+++ b/src/Modal/ModalDialog.jsx
@@ -122,8 +122,13 @@ ModalDialog.propTypes = {
    * Specifies the z-index of the modal
    */
   zIndex: PropTypes.number,
-  /** Specifies whether overflow is visible in the modal */
-  isOverflowVisible: PropTypes.bool,
+  /**
+   * Specifies whether overflow content inside the modal should be visible.
+   * - `true` - content that exceeds the modal boundaries will remain visible outside the modal's main viewport,
+   * rather than being clipped or hidden.
+   * - `false` - any overflow content will be clipped to fit within the modal's dimensions.
+   */
+  isOverflowVisible: PropTypes.bool.isRequired,
 };
 
 ModalDialog.defaultProps = {
@@ -137,7 +142,6 @@ ModalDialog.defaultProps = {
   isFullscreenOnMobile: false,
   isBlocking: false,
   zIndex: undefined,
-  isOverflowVisible: true,
 };
 
 ModalDialog.Header = ModalDialogHeader;
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index 1d152badd7..112574551d 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -1,3 +1,23 @@
+:root {
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+
+  --pgn-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+}
+
 .pgn__modal {
   background: var(--pgn-color-modal-content-bg);
   border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
@@ -122,7 +142,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +330,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;
diff --git a/src/Modal/modal-dialog.mdx b/src/Modal/modal-dialog.mdx
index 7e2ad4b153..bfc0f84b0b 100644
--- a/src/Modal/modal-dialog.mdx
+++ b/src/Modal/modal-dialog.mdx
@@ -31,10 +31,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('default');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open standard modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -44,6 +47,7 @@ label for the dialog element.
         variant={modalVariant}
         hasCloseButton
         isFullscreenOnMobile
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>
@@ -73,7 +77,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -82,7 +90,7 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
               A button
             </Button>
           </ActionRow>
@@ -102,10 +110,13 @@ label for the dialog element.
   const variants = ['default', 'warning', 'danger', 'success', 'dark'];
   const [modalSize, setModalSize] = useState('md');
   const [modalVariant, setModalVariant] = useState('dark');
+
   return (
     <>
       <div className="d-flex">
-        <Button variant="outline-primary" onClick={open}>Open marketing modal dialog</Button>
+        <Button variant="outline-primary" onClick={open}>
+          Open marketing modal dialog
+        </Button>
       </div>
       <ModalDialog
         title="My dialog"
@@ -114,6 +125,7 @@ label for the dialog element.
         size={modalSize}
         variant={modalVariant}
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background
@@ -144,7 +156,11 @@ label for the dialog element.
             </Form.RadioSet>
           </Form.Group>
           <p>
-            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
+            I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
+            Beard man braid migas single-origin coffee forage ramps. Tumeric messenger
+            bag bicycle rights wayfarers, try-hard cronut blue bottle health goth.
+            Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa
+            semiotics woke next level organic roof party +1 try-hard.
           </p>
         </ModalDialog.Body>
 
@@ -153,7 +169,80 @@ label for the dialog element.
             <ModalDialog.CloseButton variant="tertiary">
               Cancel
             </ModalDialog.CloseButton>
-            <Button variant="primary">
+            <Button>
+              A button
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </>
+  )
+}
+```
+
+## Overflow visibility handling
+
+The `isOverflowVisible` toggle controls whether content that extends beyond the modal's viewport boundaries is visible.
+When enabled (`isOverflowVisible` is set to `true`), any overflow content, such as dropdowns or tooltips,
+will be displayed outside the modal's main area instead of being clipped.
+
+In this example, switching `isOverflowVisible` on and off affects the visibility of the dropdown options in
+the autosuggest field, showing how overflow handling impacts content display within a modal.
+
+```jsx live
+() => {
+  const [isOpen, open, close] = useToggle(false);
+  const [isOn, setOn, setOff, toggle] = useToggle(false);
+
+  return (
+    <>
+      <div className="d-flex">
+        <Button variant="outline-primary" onClick={open}>
+          Open standard modal dialog
+        </Button>
+      </div>
+      <ModalDialog
+        title="My dialog"
+        isOpen={isOpen}
+        onClose={close}
+        hasCloseButton
+        isFullscreenOnMobile
+        isOverflowVisible={isOn}
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            I'm a dialog box
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <ModalDialog.Body>
+          <Stack className="mb-3" direction="horizontal" gap={2}>
+            <Form.Switch checked={isOn} onChange={toggle}>
+              isOverflowVisible
+            </Form.Switch>
+            {isOn
+              ? <Badge variant="success">{JSON.stringify(isOn)}</Badge>
+              : <Badge variant="light">{JSON.stringify(isOn)}</Badge>
+            }
+          </Stack>
+          <Form.Autosuggest
+            aria-label="form autosuggest"
+            helpMessage="Select language"
+            placeholder="Open autosuggest dropdown"
+          >
+            <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
+            <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
+          </Form.Autosuggest>
+        </ModalDialog.Body>
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              Cancel
+            </ModalDialog.CloseButton>
+            <Button>
               A button
             </Button>
           </ActionRow>
diff --git a/src/Modal/tests/ModalDialog.test.jsx b/src/Modal/tests/ModalDialog.test.jsx
index 6ca06dbdcc..790e162c90 100644
--- a/src/Modal/tests/ModalDialog.test.jsx
+++ b/src/Modal/tests/ModalDialog.test.jsx
@@ -24,6 +24,7 @@ describe('ModalDialog', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Header>
           <ModalDialog.Title>The title</ModalDialog.Title>
@@ -58,6 +59,7 @@ describe('ModalDialog with Hero', () => {
         size="md"
         variant="default"
         hasCloseButton
+        isOverflowVisible
       >
         <ModalDialog.Hero>
           <ModalDialog.Hero.Background backgroundSrc="imageurl" />
diff --git a/src/Nav/index.scss b/src/Nav/index.scss
index 7257f889b3..88fc0109a7 100644
--- a/src/Nav/index.scss
+++ b/src/Nav/index.scss
@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with
diff --git a/src/PageBanner/index.scss b/src/PageBanner/index.scss
index 320b2be9f5..0b6cf3f05f 100644
--- a/src/PageBanner/index.scss
+++ b/src/PageBanner/index.scss
@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 
diff --git a/src/Pagination/pagination-bootstrap.scss b/src/Pagination/pagination-bootstrap.scss
index 505732b90d..282f9e6ad8 100644
--- a/src/Pagination/pagination-bootstrap.scss
+++ b/src/Pagination/pagination-bootstrap.scss
@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 
diff --git a/src/Popover/index.scss b/src/Popover/index.scss
index e646c6db9b..27c50e7cdd 100644
--- a/src/Popover/index.scss
+++ b/src/Popover/index.scss
@@ -7,7 +7,7 @@
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: var(--pgn-typography-font-size-h5-base);
   }
 
   .pgn__icon {
diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss
index 3ae48c1d54..808b31a54d 100644
--- a/src/ProductTour/Checkpoint.scss
+++ b/src/ProductTour/Checkpoint.scss
@@ -88,7 +88,7 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }
diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss
index 27bee9a446..77779f295f 100644
--- a/src/ProgressBar/bootstrap-progress.scss
+++ b/src/ProgressBar/bootstrap-progress.scss
@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {
diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss
index 3f4852536e..2489e94453 100644
--- a/src/ProgressBar/index.scss
+++ b/src/ProgressBar/index.scss
@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
diff --git a/src/Stepper/index.scss b/src/Stepper/index.scss
index e89bea41be..1995425c29 100644
--- a/src/Stepper/index.scss
+++ b/src/Stepper/index.scss
@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
diff --git a/src/Sticky/index.scss b/src/Sticky/index.scss
index 54b78b0b02..b7278818cf 100644
--- a/src/Sticky/index.scss
+++ b/src/Sticky/index.scss
@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;
diff --git a/src/Toast/index.scss b/src/Toast/index.scss
index 69b6a58a46..043f65b9bc 100644
--- a/src/Toast/index.scss
+++ b/src/Toast/index.scss
@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+:root {
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
@@ -31,7 +43,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }
diff --git a/src/Tooltip/index.scss b/src/Tooltip/index.scss
index 722dd95328..d6c972ce02 100644
--- a/src/Tooltip/index.scss
+++ b/src/Tooltip/index.scss
@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;
diff --git a/styles/css/core/abstraction-variables.css b/styles/css/core/abstraction-variables.css
new file mode 100644
index 0000000000..c27ac4eccb
--- /dev/null
+++ b/styles/css/core/abstraction-variables.css
@@ -0,0 +1,44 @@
+:root {
+  /**
+   * TRANSITION
+   */
+  --pgn-transition-base:
+    var(--pgn-transition-base-property)
+    var(--pgn-transition-base-duration)
+    var(--pgn-transition-base-timing-function)
+    var(--pgn-transition-base-delay)
+    var(--pgn-transition-base-behavior);
+
+  --pgn-transition-fade:
+    var(--pgn-transition-fade-property)
+    var(--pgn-transition-fade-duration)
+    var(--pgn-transition-fade-timing-function)
+    var(--pgn-transition-fade-delay)
+    var(--pgn-transition-fade-behavior);
+
+  --pgn-transition-collapse-height:
+    var(--pgn-transition-collapse-height-property)
+    var(--pgn-transition-collapse-height-duration)
+    var(--pgn-transition-collapse-height-timing-function)
+    var(--pgn-transition-collapse-height-delay)
+    var(--pgn-transition-collapse-height-behavior);
+
+  --pgn-transition-collapse-width:
+    var(--pgn-transition-collapse-width-property)
+    var(--pgn-transition-collapse-width-duration)
+    var(--pgn-transition-collapse-width-timing-function)
+    var(--pgn-transition-collapse-width-delay)
+    var(--pgn-transition-collapse-width-behavior);
+
+  --pgn-transition-form-input:
+    var(--pgn-transition-form-input-1-property)
+    var(--pgn-transition-form-input-1-duration)
+    var(--pgn-transition-form-input-1-timing-function)
+    var(--pgn-transition-form-input-1-delay)
+    var(--pgn-transition-form-input-1-behavior),
+    var(--pgn-transition-form-input-2-property)
+    var(--pgn-transition-form-input-2-duration)
+    var(--pgn-transition-form-input-2-timing-function)
+    var(--pgn-transition-form-input-2-delay)
+    var(--pgn-transition-form-input-2-behavior);
+}
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
index f7f2c035ab..b1785ba2ed 100644
--- a/styles/css/core/custom-media-breakpoints.css
+++ b/styles/css/core/custom-media-breakpoints.css
@@ -1,10 +1,9 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
-@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px);
 @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
 @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
 @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
diff --git a/styles/css/core/index.css b/styles/css/core/index.css
index 4a993a982b..f95813ae45 100644
--- a/styles/css/core/index.css
+++ b/styles/css/core/index.css
@@ -1,2 +1,3 @@
-@import "custom-media-breakpoints.css";
 @import "variables.css";
+@import "abstraction-variables.css";
+@import "custom-media-breakpoints.css";
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 9369b9e5a7..60832e4bf2 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,7 +1,6 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Wed, 15 May 2024 12:30:36 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
 :root {
@@ -10,19 +9,19 @@
   --pgn-other-form-control-custom-file-lang: en;
   --pgn-other-form-control-range-track-cursor: pointer;
   --pgn-other-form-control-cursor: auto;
-  --pgn-elevation-zindex-fixed: 1030;
-  --pgn-elevation-zindex-sticky: 1020;
-  --pgn-elevation-zindex-2000: 2000;
-  --pgn-elevation-zindex-1800: 1800;
-  --pgn-elevation-zindex-1600: 1600;
-  --pgn-elevation-zindex-1400: 1400;
-  --pgn-elevation-zindex-1200: 1200;
-  --pgn-elevation-zindex-1000: 1000;
-  --pgn-elevation-zindex-800: 800;
-  --pgn-elevation-zindex-600: 600;
-  --pgn-elevation-zindex-400: 400;
-  --pgn-elevation-zindex-200: 200;
-  --pgn-elevation-zindex-0: 0;
+  --pgn-elevation-zindex-fixed: 1030; /* z-index of for fixed element. */
+  --pgn-elevation-zindex-sticky: 1020; /* z-index for sticky element. */
+  --pgn-elevation-zindex-2000: 2000; /* z-index of level 2000. */
+  --pgn-elevation-zindex-1800: 1800; /* z-index of level 1800. */
+  --pgn-elevation-zindex-1600: 1600; /* z-index of level 1600. */
+  --pgn-elevation-zindex-1400: 1400; /* z-index of level 1400. */
+  --pgn-elevation-zindex-1200: 1200; /* z-index of level 1200. */
+  --pgn-elevation-zindex-1000: 1000; /* z-index of level 1000. */
+  --pgn-elevation-zindex-800: 800; /* z-index of level 800. */
+  --pgn-elevation-zindex-600: 600; /* z-index of level 600. */
+  --pgn-elevation-zindex-400: 400; /* z-index of level 400. */
+  --pgn-elevation-zindex-200: 200; /* z-index of level 200. */
+  --pgn-elevation-zindex-0: 0; /* z-index of level 0. */
   --pgn-elevation-tooltip-zindex: 1070;
   --pgn-elevation-sheet-zindex-main: 1032;
   --pgn-elevation-sheet-zindex-backdrop: 1031;
@@ -31,65 +30,130 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width: width .35s ease;
-  --pgn-transition-collapse-height: height .35s ease;
-  --pgn-transition-fade: opacity .15s linear;
-  --pgn-transition-base: all .2s ease-in-out;
-  --pgn-transition-progress-bar-bar-transition: width .6s ease;
-  --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
-  --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-carousel-control: opacity .15s ease;
-  --pgn-transition-carousel-indicator: opacity .6s ease;
-  --pgn-transition-carousel-duration: .6s;
+  --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */
+  --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */
+  --pgn-transition-base-behavior: normal; /* Generic transition for any property change */
+  --pgn-transition-base-delay: 0s; /* Generic transition for any property change */
+  --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */
+  --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */
+  --pgn-transition-base-property: all; /* Generic transition for any property change */
+  --pgn-transition-progress-bar-transition-behavior: normal;
+  --pgn-transition-progress-bar-transition-delay: 0s;
+  --pgn-transition-progress-bar-transition-timing-function: ease;
+  --pgn-transition-progress-bar-transition-duration: 0.6s;
+  --pgn-transition-progress-bar-transition-property: width;
+  --pgn-transition-progress-bar-animation-timing-iteration-count: infinite;
+  --pgn-transition-progress-bar-animation-timing-delay: 0s;
+  --pgn-transition-progress-bar-animation-timing-timing-function: linear;
+  --pgn-transition-progress-bar-animation-timing-duration: 1s;
+  --pgn-transition-form-control-3-behavior: normal;
+  --pgn-transition-form-control-3-delay: 0s;
+  --pgn-transition-form-control-3-timing-function: ease-in-out;
+  --pgn-transition-form-control-3-duration: 0.15s;
+  --pgn-transition-form-control-3-property: box-shadow;
+  --pgn-transition-form-control-2-behavior: normal;
+  --pgn-transition-form-control-2-delay: 0s;
+  --pgn-transition-form-control-2-timing-function: ease-in-out;
+  --pgn-transition-form-control-2-duration: 0.15s;
+  --pgn-transition-form-control-2-property: border-color;
+  --pgn-transition-form-control-1-behavior: normal;
+  --pgn-transition-form-control-1-delay: 0s;
+  --pgn-transition-form-control-1-timing-function: ease-in-out;
+  --pgn-transition-form-control-1-duration: 0.15s;
+  --pgn-transition-form-control-1-property: background-color;
+  --pgn-transition-form-input-2-behavior: normal;
+  --pgn-transition-form-input-2-delay: 0s;
+  --pgn-transition-form-input-2-timing-function: ease-in-out;
+  --pgn-transition-form-input-2-duration: 0.15s;
+  --pgn-transition-form-input-2-property: box-shadow;
+  --pgn-transition-form-input-1-behavior: normal;
+  --pgn-transition-form-input-1-delay: 0s;
+  --pgn-transition-form-input-1-timing-function: ease-in-out;
+  --pgn-transition-form-input-1-duration: 0.15s;
+  --pgn-transition-form-input-1-property: border-color;
+  --pgn-transition-carousel-control-behavior: normal;
+  --pgn-transition-carousel-control-delay: 0ms;
+  --pgn-transition-carousel-control-timing-function: ease;
+  --pgn-transition-carousel-control-duration: 0.15s;
+  --pgn-transition-carousel-control-property: opacity;
+  --pgn-transition-carousel-indicator-behavior: normal;
+  --pgn-transition-carousel-indicator-delay: 0ms;
+  --pgn-transition-carousel-indicator-timing-function: ease;
+  --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-indicator-property: opacity;
+  --pgn-transition-carousel-duration: 0.6s;
+  --pgn-transition-carousel-base-behavior: normal;
+  --pgn-transition-carousel-base-delay: 0ms;
+  --pgn-transition-carousel-base-timing-function: ease-in-out;
+  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-base-property: transform;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
-  --pgn-typography-line-height-micro: .938rem;
-  --pgn-typography-line-height-sm: 1.5;
-  --pgn-typography-line-height-lg: 1.5;
-  --pgn-typography-line-height-base: 1.5556;
-  --pgn-typography-font-weight-table-th: normal;
-  --pgn-typography-font-weight-lead: inherit;
-  --pgn-typography-font-weight-bolder: bolder;
-  --pgn-typography-font-weight-bold: 700;
-  --pgn-typography-font-weight-semi-bold: 500;
-  --pgn-typography-font-weight-normal: 400;
-  --pgn-typography-font-weight-light: 300;
-  --pgn-typography-font-weight-lighter: lighter;
-  --pgn-typography-font-size-micro: .688rem;
-  --pgn-typography-font-size-mobile-h1: 2.25rem;
-  --pgn-typography-font-size-h6: .75rem;
-  --pgn-typography-font-size-h5: .875rem;
-  --pgn-typography-font-size-h4: 1.125rem;
-  --pgn-typography-font-size-h3: 1.375rem;
-  --pgn-typography-font-size-h2: 2rem;
-  --pgn-typography-font-size-h1: 2.5rem;
-  --pgn-typography-font-size-small-x: 75%;
-  --pgn-typography-font-size-small-base: 87.5%;
-  --pgn-typography-font-size-xs: .75rem;
-  --pgn-typography-font-size-sm: .875rem;
-  --pgn-typography-font-size-lg: 1.4063rem;
-  --pgn-typography-font-size-base: 1.125rem;
-  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",  "Courier New", monospace;
-  --pgn-typography-font-family-serif: serif;
-  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --pgn-typography-print-page-size: a3;
-  --pgn-typography-display-mobile: 3.25rem;
-  --pgn-typography-display-line-height-mobile: 3.5rem;
-  --pgn-typography-display-line-height-base: 1;
-  --pgn-typography-display-4: 7.5rem;
-  --pgn-typography-display-3: 5.625rem;
-  --pgn-typography-display-2: 4.875rem;
-  --pgn-typography-display-1: 3.75rem;
-  --pgn-typography-toast-font-size: .875rem;
-  --pgn-typography-spacer-line-height: 1px;
-  --pgn-typography-pagination-line-height: 1.5rem;
-  --pgn-typography-pagination-font-size-sm: .875rem;
-  --pgn-typography-nav-link-text-decoration: none;
-  --pgn-typography-nav-link-font-weight: 500;
-  --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
-  --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
-  --pgn-typography-image-figure-caption-font-size: 90%;
+  --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */
+  --pgn-typography-line-height-display-base: 1; /* Standard display line height. */
+  --pgn-typography-line-height-micro: 0.938rem; /* Micro utils line height. */
+  --pgn-typography-line-height-sm: 1.5; /* Small line height. */
+  --pgn-typography-line-height-lg: 1.5; /* Large line height. */
+  --pgn-typography-line-height-base: 1.5556; /* Basic line height. */
+  --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold); /* Font weight of display level 4. */
+  --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */
+  --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */
+  --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */
+  --pgn-typography-font-weight-table-th: 700; /* Table th font weight. */
+  --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */
+  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */
+  --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */
+  --pgn-typography-font-weight-bold: 700; /* Bold font weight. */
+  --pgn-typography-font-weight-semi-bold: 500; /* Semi-bold font weight. */
+  --pgn-typography-font-weight-normal: 400; /* Normal font weight. */
+  --pgn-typography-font-weight-light: 300; /* Light font weight. */
+  --pgn-typography-font-weight-lighter: lighter; /* Lighter font weight. */
+  --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 4. */
+  --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 3. */
+  --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1); /* Mobile font size for heading of level 2. */
+  --pgn-typography-font-size-display-mobile-1: 3.25rem; /* Mobile font size for heading of level 1. */
+  --pgn-typography-font-size-display-4: 7.5rem; /* Font size for heading of level 4. */
+  --pgn-typography-font-size-display-3: 5.625rem; /* Font size for heading of level 3. */
+  --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */
+  --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */
+  --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
+  --pgn-typography-font-size-h6-base: 0.75rem; /* Font size of heading level 6. */
+  --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
+  --pgn-typography-font-size-h5-base: 0.875rem; /* Font size of heading level 5. */
+  --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */
+  --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */
+  --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */
+  --pgn-typography-font-size-h3-base: 1.375rem; /* Font size of heading level 3. */
+  --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base); /* Mobile font size of heading level 2. */
+  --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */
+  --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
+  --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
+  --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
+  --pgn-typography-font-size-xs: 75%; /* X-small font size. */
+  --pgn-typography-font-size-sm: 87.5%; /* Small font size. */
+  --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */
+  --pgn-typography-font-size-base: 1.125rem; /* Base font size. */
+  --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Monospace font family. */
+  --pgn-typography-font-family-serif: serif; /* Serif font family. */
+  --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Sans-serif font family. */
+  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */
+  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
+  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-link-decoration-brand-inline-hover: underline;
   --pgn-typography-link-decoration-brand-inline-base: underline;
   --pgn-typography-link-decoration-brand-hover: underline;
@@ -102,254 +166,437 @@
   --pgn-typography-link-decoration-inline-base: underline;
   --pgn-typography-link-decoration-hover: underline;
   --pgn-typography-link-decoration-base: none;
+  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
   --pgn-typography-input-btn-line-height-sm: 1.4286;
   --pgn-typography-input-btn-line-height-base: 1.3333;
   --pgn-typography-input-btn-font-size-lg: 1.325rem;
-  --pgn-typography-input-btn-font-size-sm: .875rem;
+  --pgn-typography-input-btn-font-size-sm: 0.875rem;
   --pgn-typography-input-btn-font-size-base: 1.125rem;
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
+  --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-headings-font-family: inherit;
+  --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-toast-font-size: 0.875rem;
+  --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
+  --pgn-typography-spacer-line-height: 1px;
+  --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
+  --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-pagination-line-height: 1.5rem;
+  --pgn-typography-pagination-font-size-sm: 0.875rem;
+  --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
+  --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
+  --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
+  --pgn-typography-nav-link-text-decoration: none;
+  --pgn-typography-nav-link-font-weight: 500;
+  --pgn-typography-menu-select-btn-link-text-decoration-thickness: 0.125rem;
+  --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
+  --pgn-typography-image-figure-caption-font-size: 90%;
+  --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
+  --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
+  --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
+  --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
+  --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
+  --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
+  --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
+  --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
+  --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
+  --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
+  --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+  --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+  --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+  --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
+  --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+  --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+  --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+  --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
+  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs);
   --pgn-typography-dropdown-item-text-decoration: none;
-  --pgn-typography-code-font-size: 87.5%;
+  --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
+  --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
+  --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
+  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);
+  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
+  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
+  --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-badge-font-size: 75%;
+  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
+  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-alert-line-height: 1.5rem;
-  --pgn-typography-alert-font-size: .875rem;
-  --pgn-spacing-grid-gutter-width: 24px;
-  --pgn-spacing-table-cell-padding-sm: .3rem;
-  --pgn-spacing-table-cell-padding-base: .75rem;
-  --pgn-spacing-label-margin-bottom: .5rem;
-  --pgn-spacing-spacer-base: 1rem;
-  --pgn-spacing-spacer-0: 0;
-  --pgn-spacing-tooltip-margin: 0;
-  --pgn-spacing-tooltip-padding-x: .5rem;
-  --pgn-spacing-tooltip-padding-y: .5rem;
-  --pgn-spacing-toast-container-gutter-sm: .625rem;
+  --pgn-typography-alert-font-size: 0.875rem;
+  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
+  --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */
+  --pgn-spacing-table-cell-padding-sm: 0.3rem; /* Padding sm for tables. */
+  --pgn-spacing-table-cell-padding-base: 0.75rem; /* Padding for tables. */
+  --pgn-spacing-label-margin-bottom: 0.5rem; /* Margin bottom for label. */
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75); /* Space value of level 2.5 */
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375); /* Space value of level 1.5 */
+  --pgn-spacing-spacer-base: 1rem; /* Basic space value */
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5); /* Space value of level 6 */
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3); /* Space value of level 5 */
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5); /* Space value of level 4 */
+  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
+  --pgn-spacing-spacer-0: 0rem; /* Space value of level 0 */
+  --pgn-spacing-mark-padding: 0.2em;
+  --pgn-spacing-paragraph-margin-bottom: 1rem;
+  --pgn-spacing-list-group-item-padding-x: 1.25rem;
+  --pgn-spacing-list-group-item-padding-y: 0.75rem;
+  --pgn-spacing-list-inline-padding: 0.5rem;
+  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
+  --pgn-spacing-input-btn-padding-lg-y: 0.6875rem;
+  --pgn-spacing-input-btn-padding-sm-x: 0.75rem;
+  --pgn-spacing-input-btn-padding-sm-y: 0.4375rem;
+  --pgn-spacing-input-btn-padding-x: 1rem;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-spacing-headings-margin-bottom: 0.5rem;
+  --pgn-spacing-caret-vertical-align: 0.255em;
+  --pgn-spacing-caret-base: 0.255em;
+  --pgn-spacing-tooltip-margin: 0rem;
+  --pgn-spacing-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-tooltip-padding-y: 0.5rem;
+  --pgn-spacing-toast-container-gutter-sm: 0.625rem;
   --pgn-spacing-toast-container-gutter-lg: 1.25rem;
-  --pgn-spacing-toast-padding-y: .25rem;
-  --pgn-spacing-toast-padding-x: .75rem;
+  --pgn-spacing-toast-padding-y: 0.25rem;
+  --pgn-spacing-toast-padding-x: 0.75rem;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
-  --pgn-spacing-sticky-offset: 0;
-  --pgn-spacing-stepper-header-step-list-margin: 0;
-  --pgn-spacing-stepper-header-step-list-padding-x: 0;
-  --pgn-spacing-stepper-header-step-list-padding-y: .25rem;
-  --pgn-spacing-stepper-header-step-padding: .25rem;
-  --pgn-spacing-stepper-header-padding-y: .75rem;
-  --pgn-spacing-vertical-align: .125em;
-  --pgn-spacing-selectable-box-box-space: .75rem;
-  --pgn-spacing-selectable-box-border-radius: .25rem;
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: 0.625rem;
+  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: 0.625rem;
+  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: 0.7rem;
+  --pgn-spacing-sticky-offset: 0rem;
+  --pgn-spacing-stepper-header-step-list-margin: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-x: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-y: 0.25rem;
+  --pgn-spacing-stepper-header-step-padding: 0.25rem;
+  --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-stepper-header-padding-y: 0.75rem;
+  --pgn-spacing-vertical-align: 0.125em;
+  --pgn-spacing-selectable-box-box-space: 0.75rem;
+  --pgn-spacing-selectable-box-border-radius: 0.25rem;
   --pgn-spacing-selectable-box-padding: 1rem;
-  --pgn-spacing-search-field-margin-button: .5rem;
-  --pgn-spacing-progress-bar-hint-annotation-gap: .5rem;
-  --pgn-spacing-popover-icon-margin-right: .5rem;
+  --pgn-spacing-search-field-margin-button: 0.5rem;
+  --pgn-spacing-progress-bar-hint-annotation-gap: 0.5rem;
+  --pgn-spacing-popover-icon-margin-right: 0.5rem;
+  --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
+  --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-popover-header-padding-x: 1rem;
-  --pgn-spacing-popover-header-padding-y: .5rem;
+  --pgn-spacing-popover-header-padding-y: 0.5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
-  --pgn-spacing-pagination-padding-x-sm: .6rem;
+  --pgn-spacing-pagination-padding-x-sm: 0.6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
-  --pgn-spacing-pagination-padding-y-lg: .75rem;
-  --pgn-spacing-pagination-padding-y-sm: .8rem;
-  --pgn-spacing-pagination-padding-y-base: .625rem;
-  --pgn-spacing-navbar-toggler-padding-x: .75rem;
-  --pgn-spacing-navbar-toggler-padding-y: .25rem;
-  --pgn-spacing-navbar-padding-x-nav-link: .5rem;
+  --pgn-spacing-pagination-padding-y-lg: 0.75rem;
+  --pgn-spacing-pagination-padding-y-sm: 0.8rem;
+  --pgn-spacing-pagination-padding-y-base: 0.625rem;
+  --pgn-spacing-navbar-toggler-padding-x: 0.75rem;
+  --pgn-spacing-navbar-toggler-padding-y: 0.25rem;
+  --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
+  --pgn-spacing-navbar-padding-x-nav-link: 0.5rem;
+  --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
-  --pgn-spacing-nav-link-padding-y: .5rem;
+  --pgn-spacing-nav-link-padding-y: 0.5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
   --pgn-spacing-modal-header-padding-y: 1rem;
+  --pgn-spacing-modal-header-padding-base-y: var(--pgn-spacing-modal-header-padding-y);
+  --pgn-spacing-modal-header-padding-base-x: 1.5rem;
   --pgn-spacing-modal-footer-padding-y: 1rem;
-  --pgn-spacing-modal-inner-padding-bottom: .7rem;
+  --pgn-spacing-modal-footer-padding-base-y: var(--pgn-spacing-modal-footer-padding-y);
+  --pgn-spacing-modal-footer-padding-base-x: 1.5rem;
+  --pgn-spacing-modal-inner-padding-bottom: 0.7rem;
   --pgn-spacing-modal-inner-padding-base: 1.5rem;
-  --pgn-spacing-menu-item-icon-margin-left: .25em;
-  --pgn-spacing-image-thumbnail-padding: .25rem;
-  --pgn-spacing-mark-padding: .2em;
-  --pgn-spacing-paragraph-margin-bottom: 1rem;
-  --pgn-spacing-list-group-item-padding-x: 1.25rem;
-  --pgn-spacing-list-group-item-padding-y: .75rem;
-  --pgn-spacing-list-inline-padding: .5rem;
-  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
-  --pgn-spacing-input-btn-padding-lg-y: .6875rem;
-  --pgn-spacing-input-btn-padding-sm-x: .75rem;
-  --pgn-spacing-input-btn-padding-sm-y: .4375rem;
-  --pgn-spacing-input-btn-padding-x: 1rem;
-  --pgn-spacing-input-btn-padding-y: .5625rem;
-  --pgn-spacing-headings-margin-bottom: .5rem;
-  --pgn-spacing-caret-vertical-align: .255em;
-  --pgn-spacing-caret-base: .255em;
-  --pgn-spacing-form-control-select-icon-padding: .5625rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem;
+  --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
+  --pgn-spacing-menu-item-icon-margin-left: 0.25em;
+  --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
+  --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
+  --pgn-spacing-image-thumbnail-padding: 0.25rem;
+  --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
+  --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-spacing-form-control-select-icon-padding: 0.5625rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem;
+  --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-y: 0;
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-x: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+  --pgn-spacing-form-control-select-feedback-icon-position-position-x: right;
+  --pgn-spacing-form-control-select-feedback-icon-position-position-y: center;
+  --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
   --pgn-spacing-form-control-select-indicator-padding: 1rem;
+  --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
+  --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
+  --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
+  --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-form-control-spacer-x: 1rem;
-  --pgn-spacing-form-control-gutter: .5rem;
+  --pgn-spacing-form-control-gutter: 0.5rem;
   --pgn-spacing-form-group-margin-bottom: 1rem;
-  --pgn-spacing-form-check-position-axis: .375rem;
-  --pgn-spacing-form-check-inline-margin-x: .75rem;
-  --pgn-spacing-form-text-margin-top: .25rem;
-  --pgn-spacing-form-input-check-margin-y: .3rem;
-  --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
-  --pgn-spacing-form-input-check-margin-x-base: .25rem;
+  --pgn-spacing-form-check-position-axis: 0.375rem;
+  --pgn-spacing-form-check-inline-margin-x: 0.75rem;
+  --pgn-spacing-form-text-margin-top: 0.25rem;
+  --pgn-spacing-form-input-check-margin-y: 0.3rem;
+  --pgn-spacing-form-input-check-margin-x-inline: 0.3125rem;
+  --pgn-spacing-form-input-check-margin-x-base: 0.25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
+  --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
+  --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
+  --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
+  --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+  --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
-  --pgn-spacing-dropdown-close-container-top: .625rem;
-  --pgn-spacing-dropdown-padding-y-item: .25rem;
-  --pgn-spacing-dropdown-padding-y-base: .5rem;
+  --pgn-spacing-dropdown-close-container-top: 0.625rem;
+  --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
+  --pgn-spacing-dropdown-padding-header-y: 0.5rem;
+  --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item);
+  --pgn-spacing-dropdown-padding-y-item: 0.25rem;
+  --pgn-spacing-dropdown-padding-y-base: 0.5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
-  --pgn-spacing-dropdown-padding-x-base: 0;
-  --pgn-spacing-dropdown-spacer: .125rem;
+  --pgn-spacing-dropdown-padding-x-base: 0rem;
+  --pgn-spacing-dropdown-spacer: 0.125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
-  --pgn-spacing-data-table-padding-small: .5rem;
-  --pgn-spacing-data-table-padding-y: .75rem;
-  --pgn-spacing-data-table-padding-x: .75rem;
-  --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem;
-  --pgn-spacing-collapsible-card-spacer-basic-x: .5rem;
-  --pgn-spacing-collapsible-card-spacer-basic-y: .5rem;
+  --pgn-spacing-data-table-padding-cell-y: 0.75rem;
+  --pgn-spacing-data-table-padding-cell-x: 0.5rem;
+  --pgn-spacing-data-table-padding-small: 0.5rem;
+  --pgn-spacing-data-table-padding-y: 0.75rem;
+  --pgn-spacing-data-table-padding-x: 0.75rem;
+  --pgn-spacing-collapsible-card-spacer-basic-icon: 0.625rem;
+  --pgn-spacing-collapsible-card-spacer-basic-x: 0.5rem;
+  --pgn-spacing-collapsible-card-spacer-basic-y: 0.5rem;
   --pgn-spacing-collapsible-card-spacer-icon: 2.5rem;
-  --pgn-spacing-collapsible-card-spacer-left-body: .75rem;
-  --pgn-spacing-collapsible-card-spacer-x-base: .5rem;
-  --pgn-spacing-collapsible-card-spacer-y-base: .5rem;
-  --pgn-spacing-code-kbd-padding-x: .4rem;
-  --pgn-spacing-code-kbd-padding-y: .2rem;
-  --pgn-spacing-chip-carousel-container-padding-y: .313rem;
-  --pgn-spacing-chip-carousel-container-padding-x: .625rem;
-  --pgn-spacing-chip-carousel-controls-top-offset: .375rem;
+  --pgn-spacing-collapsible-card-spacer-left-body: 0.75rem;
+  --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
+  --pgn-spacing-collapsible-card-spacer-x-base: 0.5rem;
+  --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
+  --pgn-spacing-collapsible-card-spacer-y-base: 0.5rem;
+  --pgn-spacing-code-kbd-padding-x: 0.4rem;
+  --pgn-spacing-code-kbd-padding-y: 0.2rem;
+  --pgn-spacing-chip-carousel-container-padding-y: 0.313rem;
+  --pgn-spacing-chip-carousel-container-padding-x: 0.625rem;
+  --pgn-spacing-chip-carousel-controls-top-offset: 0.375rem;
   --pgn-spacing-chip-outline-width: 3px;
-  --pgn-spacing-chip-outline-focus-distance-dark: .313rem;
-  --pgn-spacing-chip-outline-focus-distance-light: .313rem;
+  --pgn-spacing-chip-outline-focus-distance-dark: 0.313rem;
+  --pgn-spacing-chip-outline-focus-distance-light: 0.313rem;
   --pgn-spacing-chip-outline-selected-distance-dark: 3px;
   --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-x: .5rem;
+  --pgn-spacing-chip-padding-x: 0.5rem;
   --pgn-spacing-chip-padding-y: 1px;
-  --pgn-spacing-chip-margin-icon: .25rem;
-  --pgn-spacing-chip-margin-base: .125rem;
+  --pgn-spacing-chip-margin-icon: 0.25rem;
+  --pgn-spacing-chip-margin-base: 0.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-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-bottom-offset-base: 1rem;
-  --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
+  --pgn-spacing-card-logo-left-offset-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-left-offset-base: 1.5rem;
-  --pgn-spacing-card-loading-skeleton-spacer: .313rem;
-  --pgn-spacing-card-footer-action-gap: .5rem;
+  --pgn-spacing-card-loading-skeleton-spacer: 0.313rem;
+  --pgn-spacing-card-footer-action-gap: 0.5rem;
   --pgn-spacing-card-columns-gap: 1.25rem;
   --pgn-spacing-card-columns-count: 3;
+  --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
+  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
+  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-group: 12px;
-  --pgn-spacing-card-spacer-y: .75rem;
+  --pgn-spacing-card-spacer-y: 0.75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-block-spacing-y: .5rem;
-  --pgn-spacing-bubble-expandable-padding-x: .25rem;
-  --pgn-spacing-bubble-expandable-padding-y: 0;
-  --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-badge-padding-y: .125rem;
-  --pgn-spacing-badge-padding-x-pill: .6em;
-  --pgn-spacing-badge-padding-x-base: .5rem;
-  --pgn-spacing-avatar-button-padding-left-lg: .25em;
-  --pgn-spacing-avatar-button-padding-left-sm: .25em;
-  --pgn-spacing-avatar-button-padding-left-base: .25em;
-  --pgn-spacing-annotation-arrow-side-margin: .25rem;
-  --pgn-spacing-annotation-padding: .5rem;
-  --pgn-spacing-alert-icon-space: .8rem;
+  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
+  --pgn-spacing-btn-block-spacing-y: 0.5rem;
+  --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);
+  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-spacing-bubble-expandable-padding-x: 0.25rem;
+  --pgn-spacing-bubble-expandable-padding-y: 0rem;
+  --pgn-spacing-breadcrumb-margin-left: 0.5rem;
+  --pgn-spacing-badge-padding-y: 0.125rem;
+  --pgn-spacing-badge-padding-x-pill: 0.6em;
+  --pgn-spacing-badge-padding-x-base: 0.5rem;
+  --pgn-spacing-avatar-button-padding-left-lg: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-sm: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-base: 0.25em;
+  --pgn-spacing-annotation-arrow-side-margin: 0.25rem;
+  --pgn-spacing-annotation-padding: 0.5rem;
+  --pgn-spacing-alert-icon-space: 0.8rem;
+  --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
   --pgn-spacing-alert-margin-bottom: 1rem;
   --pgn-spacing-alert-padding-x: 1.5rem;
   --pgn-spacing-alert-padding-y: 1.5rem;
-  --pgn-spacing-action-row-gap-y: .5rem;
-  --pgn-spacing-action-row-gap-x: .5rem;
-  --pgn-size-breakpoint-xxl: 1400px;
-  --pgn-size-breakpoint-xl: 1200px;
-  --pgn-size-breakpoint-lg: 992px;
-  --pgn-size-breakpoint-md: 768px;
-  --pgn-size-breakpoint-sm: 576px;
-  --pgn-size-breakpoint-xs: 0;
-  --pgn-size-tooltip-arrow-width: .8rem;
-  --pgn-size-tooltip-arrow-height: .4rem;
+  --pgn-spacing-action-row-gap-y: 0.5rem;
+  --pgn-spacing-action-row-gap-x: 0.5rem;
+  --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */
+  --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */
+  --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */
+  --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */
+  --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */
+  --pgn-size-breakpoint-xs: 0px; /* Starting breakpoint for portrait phones. */
+  --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-list-group-border-width: var(--pgn-size-border-width);
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
+  --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
+  --pgn-size-hr-border-width: var(--pgn-size-border-width);
+  --pgn-size-caret-width: 0.3em;
+  --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-tooltip-arrow-width: 0.8rem;
+  --pgn-size-tooltip-arrow-height: 0.4rem;
   --pgn-size-tooltip-max-width: 200px;
-  --pgn-size-toast-border-radius: .25rem;
+  --pgn-size-toast-border-radius: 0.25rem;
   --pgn-size-toast-border-width: 1px;
   --pgn-size-toast-max-width: 400px;
   --pgn-size-tabs-notification-width: 1rem;
   --pgn-size-tabs-notification-height: 1rem;
   --pgn-size-stepper-step-bubble-error-shadow-width: 3px;
-  --pgn-size-stepper-step-width-min: 0;
+  --pgn-size-stepper-step-width-min: 0rem;
   --pgn-size-stepper-header-height-min: 5.13rem;
-  --pgn-size-stack-gap: 0;
-  --pgn-size-spinner-sm-border-width: .2em;
+  --pgn-size-stack-gap: 0rem;
+  --pgn-size-spinner-sm-border-width: 0.2em;
+  --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
   --pgn-size-spinner-sm-width: 1rem;
-  --pgn-size-spinner-base-border-width: .25em;
+  --pgn-size-spinner-base-border-width: 0.25em;
+  --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-spinner-base-width: 2rem;
-  --pgn-size-search-field-border-radius: 0;
-  --pgn-size-search-field-border-width-focus: .3125rem;
-  --pgn-size-search-field-border-width-base: .0625rem;
-  --pgn-size-progress-bar-threshold-circle: .5625rem;
-  --pgn-size-progress-bar-border-radius: 0;
+  --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-search-field-border-radius: 0rem;
+  --pgn-size-search-field-border-width-focus: 0.3125rem;
+  --pgn-size-search-field-border-width-base: 0.0625rem;
+  --pgn-size-progress-bar-threshold-circle: 0.5625rem;
+  --pgn-size-progress-bar-border-radius: 0rem;
   --pgn-size-progress-bar-border-width: 1px;
-  --pgn-size-progress-bar-height-annotated: .3125rem;
+  --pgn-size-progress-bar-height-annotated: 0.3125rem;
   --pgn-size-progress-bar-height-base: 1rem;
+  --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
+  --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-width-max: 480px;
   --pgn-size-product-tour-checkpoint-width-arrow: 15px;
   --pgn-size-product-tour-checkpoint-width-border: 8px;
-  --pgn-size-popover-arrow-height: .5rem;
+  --pgn-size-popover-arrow-height: 0.5rem;
   --pgn-size-popover-arrow-width: 1rem;
   --pgn-size-popover-icon-width: 1rem;
   --pgn-size-popover-icon-height: 1rem;
+  --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
+  --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-popover-max-width: 480px;
-  --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-toggle-border-sm: .25rem;
-  --pgn-size-pagination-toggle-border-base: .3125rem;
+  --pgn-size-pagination-focus-outline: 0rem;
+  --pgn-size-pagination-toggle-border-sm: 0.25rem;
+  --pgn-size-pagination-toggle-border-base: 0.3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
   --pgn-size-pagination-reduced-dropdown-max-height: 60vh;
+  --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-pagination-border-width: var(--pgn-size-border-width);
   --pgn-size-pagination-secondary-height-sm: 2.25rem;
   --pgn-size-pagination-secondary-height-base: 2.75rem;
   --pgn-size-pagination-icon-height: 2.25rem;
   --pgn-size-pagination-icon-width: 2.25rem;
+  --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
   --pgn-size-navbar-nav-scroll-max-height: 75vh;
-  --pgn-size-nav-tabs-border-radius: 0;
+  --pgn-size-nav-tabs-border-radius: 0rem;
   --pgn-size-nav-tabs-border-width: 2px;
-  --pgn-size-nav-tabs-link-border-bottom-width: .188rem;
+  --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
+  --pgn-size-nav-tabs-link-border-bottom-width: 0.188rem;
+  --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
   --pgn-size-nav-pills-link-border-width: 1px;
+  --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
   --pgn-size-modal-content-border-width: 0px;
   --pgn-size-modal-sm: 400px;
   --pgn-size-modal-md: 500px;
   --pgn-size-modal-lg: 800px;
   --pgn-size-modal-xl: 1140px;
+  --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
   --pgn-size-menu-item-width-xs: 13.438rem;
   --pgn-size-menu-item-width-base: 19rem;
   --pgn-size-menu-item-height: 3rem;
   --pgn-size-menu-base-max-height: 16.813rem;
-  --pgn-size-menu-base-border-radius: .25em;
+  --pgn-size-menu-base-border-radius: 0.25em;
+  --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
+  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
   --pgn-size-icon-button-diameter-sm: 2.25rem;
   --pgn-size-icon-button-diameter-md: 2.75rem;
   --pgn-size-icon-lg: 1.75rem;
   --pgn-size-icon-md: 1.5rem;
   --pgn-size-icon-sm: 1.25rem;
   --pgn-size-icon-xs: 1rem;
-  --pgn-size-icon-inline: .8em;
-  --pgn-size-input-btn-focus-width: 1px;
-  --pgn-size-caret-width: .3em;
-  --pgn-size-form-border-radius-width: .125rem;
-  --pgn-size-form-border-radius-check-focus: .0625rem;
-  --pgn-size-form-autosuggest-border-width: .125rem;
+  --pgn-size-icon-inline: 0.8em;
+  --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-form-border-radius-width: 0.125rem;
+  --pgn-size-form-border-radius-check-focus: 0.0625rem;
+  --pgn-size-form-autosuggest-border-width: 0.125rem;
+  --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
   --pgn-size-form-autosuggest-spinner-width: 1.25rem;
+  --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
   --pgn-size-form-autosuggest-icon-width: 2.4rem;
   --pgn-size-form-grid-gutter-width: 0.625rem;
   --pgn-size-form-control-border-radio-indicator-radius: 50%;
-  --pgn-size-form-control-border-checkbox-indicator-radius: 0;
+  --pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
   --pgn-size-form-control-icon-width: 2rem;
+  --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
+  --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
+  --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
+  --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
+  --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-border-radius: 1rem;
-  --pgn-size-form-control-range-thumb-border-base: 0;
+  --pgn-size-form-control-range-thumb-border-base: 0rem;
+  --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-range-thumb-width: 1rem;
   --pgn-size-form-control-range-track-border-radius: 1rem;
-  --pgn-size-form-control-range-track-height: .5rem;
+  --pgn-size-form-control-range-track-height: 0.5rem;
   --pgn-size-form-control-range-track-width: 100%;
+  --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
+  --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
+  --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
+  --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
+  --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
+  --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
+  --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
+  --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
   --pgn-size-form-control-indicator-border-width: 0.125rem;
   --pgn-size-form-control-indicator-bg: 100%;
   --pgn-size-form-control-indicator-base: 1.25rem;
+  --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
+  --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
   --pgn-size-form-input-width-focus: 0.063rem;
   --pgn-size-form-input-width-hover: 0.063rem;
+  --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
+  --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
+  --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
+  --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
+  --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --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-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
   --pgn-size-dropdown-min-width: 18rem;
   --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
@@ -364,7 +611,7 @@
   --pgn-size-color-picker-sm: 2rem;
   --pgn-size-code-pre-scrollable-max-height: 340px;
   --pgn-size-chip-icon: 1.5rem;
-  --pgn-size-chip-border-radius: .375rem;
+  --pgn-size-chip-border-radius: 0.375rem;
   --pgn-size-carousel-caption-width: 70%;
   --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
@@ -373,17 +620,31 @@
   --pgn-size-carousel-control-width-base: 15%;
   --pgn-size-card-logo-height: 4.125rem;
   --pgn-size-card-logo-width: 7.25rem;
+  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
   --pgn-size-card-image-vertical-max-height: 140px;
+  --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
   --pgn-size-card-image-horizontal-width-max: 240px;
+  --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
   --pgn-size-card-focus-border-width: 2px;
-  --pgn-size-card-border-radius-logo: .25rem;
+  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+  --pgn-size-card-border-radius-logo: 0.25rem;
+  --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-card-border-width: var(--pgn-size-border-width);
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-focus-width: 2px;
-  --pgn-size-breadcrumb-border-width-focus: .0625rem;
-  --pgn-size-breadcrumb-border-axis-y-focus: .5rem;
-  --pgn-size-breadcrumb-border-axis-x-focus: .25rem;
-  --pgn-size-breadcrumb-border-radius-focus: .125rem;
+  --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
+  --pgn-size-breadcrumb-border-width-focus: 0.0625rem;
+  --pgn-size-breadcrumb-border-axis-y-focus: 0.5rem;
+  --pgn-size-breadcrumb-border-axis-x-focus: 0.25rem;
+  --pgn-size-breadcrumb-border-radius-focus: 0.125rem;
+  --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
   --pgn-size-badge-border-radius-pill: 10rem;
-  --pgn-size-badge-border-radius-base: .25rem;
+  --pgn-size-badge-border-radius-base: 0.25rem;
   --pgn-size-avatar-border-radius: 100%;
   --pgn-size-avatar-border-base: 1px;
   --pgn-size-avatar-huge: 18.75rem;
@@ -393,211 +654,14 @@
   --pgn-size-avatar-sm: 2.25rem;
   --pgn-size-avatar-xs: 1.5rem;
   --pgn-size-avatar-base: 3rem;
-  --pgn-size-annotation-border-radius: .25rem;
+  --pgn-size-annotation-border-radius: 0.25rem;
   --pgn-size-annotation-max-width: 18.75rem;
-  --pgn-size-annotation-arrow-border-width: .5rem;
-  --pgn-size-alert-border-width: 0;
-  --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: .25rem;
-  --pgn-size-border-radius-lg: .425rem;
-  --pgn-size-border-radius-base: .375rem;
-  --pgn-size-border-width: 1px;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
-  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
-  --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
-  --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
-  --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
-  --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
-  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
-  --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
-  --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
-  --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
-  --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
-  --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
-  --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
-  --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
-  --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
-  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
-  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
-  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
-  --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
-  --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
-  --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
-  --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
-  --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
-  --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
-  --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
-  --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
-  --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
-  --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
-  --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
-  --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-focus-gap: var(--pgn-size-btn-focus-width);
-  --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);
-  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
-  --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
-  --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
-  --pgn-size-popover-border-width: var(--pgn-size-border-width);
-  --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-pagination-border-width: var(--pgn-size-border-width);
-  --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
-  --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
-  --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
-  --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
-  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
-  --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-list-group-border-width: var(--pgn-size-border-width);
-  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
-  --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
-  --pgn-size-hr-border-width: var(--pgn-size-border-width);
-  --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
-  --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
-  --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
-  --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
-  --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
-  --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
-  --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
-  --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
-  --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
-  --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
-  --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
-  --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-card-border-width: var(--pgn-size-border-width);
-  --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
+  --pgn-size-annotation-arrow-border-width: 0.5rem;
+  --pgn-size-alert-border-width: 0rem;
   --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
-  --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
-  --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
-  --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
-  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
-  --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
-  --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
-  --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
-  --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
-  --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
-  --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
-  --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);
-  --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
-  --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
-  --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
-  --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
-  --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
-  --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --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-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
-  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
-  --pgn-size-btn-focus-border-radius-base: 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-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
-  --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
-  --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
-  --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
-  --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
-  --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
-  --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
+  --pgn-size-rounded-pill: 50rem; /* Pill border radius. */
+  --pgn-size-border-radius-sm: 0.25rem; /* Small border radius. */
+  --pgn-size-border-radius-lg: 0.425rem; /* Large border radius. */
+  --pgn-size-border-radius-base: 0.375rem; /* Default border radius. */
+  --pgn-size-border-width: 1px; /* Default border width. */
 }
diff --git a/styles/css/themes/light/abstraction-variables.css b/styles/css/themes/light/abstraction-variables.css
new file mode 100644
index 0000000000..7de59902cb
--- /dev/null
+++ b/styles/css/themes/light/abstraction-variables.css
@@ -0,0 +1,304 @@
+:root {
+  /**
+   * ELEVATION
+   */
+  --pgn-elevation-box-shadow-level-1:
+    var(--pgn-elevation-box-shadow-level-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-1-blur)
+    var(--pgn-elevation-box-shadow-level-1-1-color),
+    var(--pgn-elevation-box-shadow-level-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-1-2-blur)
+    var(--pgn-elevation-box-shadow-level-1-2-color);
+
+  --pgn-elevation-box-shadow-level-2:
+    var(--pgn-elevation-box-shadow-level-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-1-blur)
+    var(--pgn-elevation-box-shadow-level-2-1-color),
+    var(--pgn-elevation-box-shadow-level-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-2-2-blur)
+    var(--pgn-elevation-box-shadow-level-2-2-color);
+
+  --pgn-elevation-box-shadow-level-3:
+    var(--pgn-elevation-box-shadow-level-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-1-blur)
+    var(--pgn-elevation-box-shadow-level-3-1-color),
+    var(--pgn-elevation-box-shadow-level-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-3-2-blur)
+    var(--pgn-elevation-box-shadow-level-3-2-color);
+
+  --pgn-elevation-box-shadow-level-4:
+    var(--pgn-elevation-box-shadow-level-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-1-blur)
+    var(--pgn-elevation-box-shadow-level-4-1-color),
+    var(--pgn-elevation-box-shadow-level-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-4-2-blur)
+    var(--pgn-elevation-box-shadow-level-4-2-color);
+
+  --pgn-elevation-box-shadow-level-5:
+    var(--pgn-elevation-box-shadow-level-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-1-blur)
+    var(--pgn-elevation-box-shadow-level-5-1-color),
+    var(--pgn-elevation-box-shadow-level-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-level-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-level-5-2-blur)
+    var(--pgn-elevation-box-shadow-level-5-2-color);
+
+  --pgn-elevation-box-shadow-down-1:
+    var(--pgn-elevation-box-shadow-down-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-1-blur)
+    var(--pgn-elevation-box-shadow-down-1-1-color),
+    var(--pgn-elevation-box-shadow-down-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-1-2-blur)
+    var(--pgn-elevation-box-shadow-down-1-2-color);
+
+  --pgn-elevation-box-shadow-down-2:
+  var(--pgn-elevation-box-shadow-down-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-1-blur)
+    var(--pgn-elevation-box-shadow-down-2-1-color),
+    var(--pgn-elevation-box-shadow-down-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-2-2-blur)
+    var(--pgn-elevation-box-shadow-down-2-2-color);
+
+  --pgn-elevation-box-shadow-down-3:
+    var(--pgn-elevation-box-shadow-down-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-1-blur)
+    var(--pgn-elevation-box-shadow-down-3-1-color),
+    var(--pgn-elevation-box-shadow-down-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-3-2-blur)
+    var(--pgn-elevation-box-shadow-down-3-2-color);
+
+  --pgn-elevation-box-shadow-down-4:
+    var(--pgn-elevation-box-shadow-down-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-1-blur)
+    var(--pgn-elevation-box-shadow-down-4-1-color),
+    var(--pgn-elevation-box-shadow-down-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-4-2-blur)
+    var(--pgn-elevation-box-shadow-down-4-2-color);
+
+  --pgn-elevation-box-shadow-down-5:
+    var(--pgn-elevation-box-shadow-down-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-1-blur)
+    var(--pgn-elevation-box-shadow-down-5-1-color),
+    var(--pgn-elevation-box-shadow-down-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-down-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-down-5-2-blur)
+    var(--pgn-elevation-box-shadow-down-5-2-color);
+
+  --pgn-elevation-box-shadow-left-1:
+    var(--pgn-elevation-box-shadow-left-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-1-blur)
+    var(--pgn-elevation-box-shadow-left-1-1-color),
+    var(--pgn-elevation-box-shadow-left-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-1-2-blur)
+    var(--pgn-elevation-box-shadow-left-1-2-color);
+
+  --pgn-elevation-box-shadow-left-2:
+    var(--pgn-elevation-box-shadow-left-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-1-blur)
+    var(--pgn-elevation-box-shadow-left-2-1-color),
+    var(--pgn-elevation-box-shadow-left-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-2-2-blur)
+    var(--pgn-elevation-box-shadow-left-2-2-color);
+
+  --pgn-elevation-box-shadow-left-3:
+    var(--pgn-elevation-box-shadow-left-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-1-blur)
+    var(--pgn-elevation-box-shadow-left-3-1-color),
+    var(--pgn-elevation-box-shadow-left-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-3-2-blur)
+    var(--pgn-elevation-box-shadow-left-3-2-color);
+
+  --pgn-elevation-box-shadow-left-4:
+    var(--pgn-elevation-box-shadow-left-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-1-blur)
+    var(--pgn-elevation-box-shadow-left-4-1-color),
+    var(--pgn-elevation-box-shadow-left-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-4-2-blur)
+    var(--pgn-elevation-box-shadow-left-4-2-color);
+
+  --pgn-elevation-box-shadow-left-5:
+    var(--pgn-elevation-box-shadow-left-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-1-blur)
+    var(--pgn-elevation-box-shadow-left-5-1-color),
+    var(--pgn-elevation-box-shadow-left-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-left-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-left-5-2-blur)
+    var(--pgn-elevation-box-shadow-left-5-2-color);
+
+  --pgn-elevation-box-shadow-up-1:
+    var(--pgn-elevation-box-shadow-up-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-1-blur)
+    var(--pgn-elevation-box-shadow-up-1-1-color),
+    var(--pgn-elevation-box-shadow-up-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-1-2-blur)
+    var(--pgn-elevation-box-shadow-up-1-2-color);
+
+  --pgn-elevation-box-shadow-up-2:
+    var(--pgn-elevation-box-shadow-up-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-1-blur)
+    var(--pgn-elevation-box-shadow-up-2-1-color),
+    var(--pgn-elevation-box-shadow-up-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-2-2-blur)
+    var(--pgn-elevation-box-shadow-up-2-2-color);
+
+  --pgn-elevation-box-shadow-up-3:
+    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-1-blur)
+    var(--pgn-elevation-box-shadow-up-3-1-color),
+    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-2-blur)
+    var(--pgn-elevation-box-shadow-up-3-2-color);
+
+  --pgn-elevation-box-shadow-up-4:
+    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-1-blur)
+    var(--pgn-elevation-box-shadow-up-3-1-color),
+    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-3-2-blur)
+    var(--pgn-elevation-box-shadow-up-3-2-color);
+
+  --pgn-elevation-box-shadow-up-5:
+    var(--pgn-elevation-box-shadow-up-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-1-blur)
+    var(--pgn-elevation-box-shadow-up-5-1-color),
+    var(--pgn-elevation-box-shadow-up-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-5-2-blur)
+    var(--pgn-elevation-box-shadow-up-5-2-color);
+
+  --pgn-elevation-box-shadow-right-1:
+    var(--pgn-elevation-box-shadow-right-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-1-blur)
+    var(--pgn-elevation-box-shadow-right-1-1-color),
+    var(--pgn-elevation-box-shadow-right-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-1-2-blur)
+    var(--pgn-elevation-box-shadow-right-1-2-color);
+
+  --pgn-elevation-box-shadow-right-2:
+    var(--pgn-elevation-box-shadow-right-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-1-blur)
+    var(--pgn-elevation-box-shadow-right-2-1-color),
+    var(--pgn-elevation-box-shadow-right-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-2-2-blur)
+    var(--pgn-elevation-box-shadow-right-2-2-color);
+
+  --pgn-elevation-box-shadow-right-3:
+    var(--pgn-elevation-box-shadow-right-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-1-blur)
+    var(--pgn-elevation-box-shadow-right-3-1-color),
+    var(--pgn-elevation-box-shadow-right-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-3-2-blur)
+    var(--pgn-elevation-box-shadow-right-3-2-color);
+
+  --pgn-elevation-box-shadow-right-4:
+    var(--pgn-elevation-box-shadow-right-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-1-blur)
+    var(--pgn-elevation-box-shadow-right-4-1-color),
+    var(--pgn-elevation-box-shadow-right-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-4-2-blur)
+    var(--pgn-elevation-box-shadow-right-4-2-color);
+
+  --pgn-elevation-box-shadow-right-5:
+    var(--pgn-elevation-box-shadow-right-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-1-blur)
+    var(--pgn-elevation-box-shadow-right-5-1-color),
+    var(--pgn-elevation-box-shadow-right-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-right-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-right-5-2-blur)
+    var(--pgn-elevation-box-shadow-right-5-2-color);
+
+  --pgn-elevation-box-shadow-centered-1:
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-1-blur)
+    var(--pgn-elevation-box-shadow-centered-1-1-color),
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-1-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-1-2-blur)
+    var(--pgn-elevation-box-shadow-centered-1-2-color);
+
+  --pgn-elevation-box-shadow-centered-2:
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-1-blur)
+    var(--pgn-elevation-box-shadow-centered-2-1-color),
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-2-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-2-2-blur)
+    var(--pgn-elevation-box-shadow-centered-2-2-color);
+
+  --pgn-elevation-box-shadow-centered-3:
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-1-blur)
+    var(--pgn-elevation-box-shadow-centered-3-1-color),
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-3-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-3-2-blur)
+    var(--pgn-elevation-box-shadow-centered-3-2-color);
+
+  --pgn-elevation-box-shadow-centered-4:
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-1-blur)
+    var(--pgn-elevation-box-shadow-centered-4-1-color),
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-4-2-blur)
+    var(--pgn-elevation-box-shadow-centered-4-2-color);
+
+  --pgn-elevation-box-shadow-centered-5:
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-1-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-1-blur)
+    var(--pgn-elevation-box-shadow-centered-5-1-color),
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-x)
+    var(--pgn-elevation-box-shadow-centered-5-2-offset-y)
+    var(--pgn-elevation-box-shadow-centered-5-2-blur)
+    var(--pgn-elevation-box-shadow-centered-5-2-color);
+}
diff --git a/styles/css/themes/light/index.css b/styles/css/themes/light/index.css
index 0b94ebd1ac..e997ed9633 100644
--- a/styles/css/themes/light/index.css
+++ b/styles/css/themes/light/index.css
@@ -1,2 +1,3 @@
 @import "variables.css";
+@import "abstraction-variables.css";
 @import "utility-classes.css";
diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
index 0a2d0ee53c..76948fbcbf 100644
--- a/styles/css/themes/light/utility-classes.css
+++ b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,6 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
 .bg-accent-a {
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 7965168e70..d93bcbd0bb 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,1145 +1,42 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Wed, 15 May 2024 07:58:56 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
 :root {
-  --pgn-color-dark-base: #273F2FFF;
-  --pgn-color-light-base: #E1DDDBFF;
-  --pgn-color-brand-base: #9D0054FF;
-  --pgn-color-primary-base: #0A3055FF;
-  --pgn-color-gray-base: #707070FF;
-  --pgn-color-gray-900: #212529FF;
-  --pgn-color-gray-800: #333333FF;
-  --pgn-color-gray-700: #454545FF;
-  --pgn-color-gray-600: #5C5C5CFF;
-  --pgn-color-gray-400: #8F8F8FFF;
-  --pgn-color-gray-300: #ADADADFF;
-  --pgn-color-gray-200: #CCCCCCFF;
-  --pgn-color-gray-100: #EBEBEBFF;
-  --pgn-color-accent-b: #FFEE88FF;
-  --pgn-color-accent-a: #00BBF9FF;
-  --pgn-color-teal: #006DAAFF;
-  --pgn-color-yellow: #FFD900FF;
-  --pgn-color-green: #178253FF;
-  --pgn-color-red: #C32D3AFF;
-  --pgn-color-blue: #23419FFF;
-  --pgn-color-black: #000000FF;
-  --pgn-color-white: #FFFFFFFF;
-  --pgn-color-toast-base: inherit;
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000;
-  --pgn-color-stepper-header-step-border: #000000FF;
-  --pgn-color-stepper-header-bg-base: #00000000;
-  --pgn-color-progress-bar-bg: #00000000;
-  --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
-  --pgn-color-popover-border: #00000033;
-  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
-  --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
-  --pgn-color-nav-tabs-base-link-active-bg: #00000000;
-  --pgn-color-nav-tabs-base-bg-hover: #00000000;
-  --pgn-color-nav-link-border: #00000000;
-  --pgn-color-menu-item-bg: #00000000;
-  --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
-  --pgn-color-icon-button-bg-base: #00000000;
-  --pgn-color-mark-bg: #FFF243FF;
-  --pgn-color-list-group-base: inherit;
-  --pgn-color-form-control-select-bg-size: #000000FF;
-  --pgn-color-form-control-label-base: inherit;
-  --pgn-color-code-base: #E83E8CFF;
-  --pgn-color-card-base: inherit;
-  --pgn-color-btn-disabled-border-inverse-warning: #00000000;
-  --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
-  --pgn-color-btn-disabled-border-inverse-success: #00000000;
-  --pgn-color-btn-disabled-border-secondary: inherit;
-  --pgn-color-btn-disabled-border-inverse-primary: #00000000;
-  --pgn-color-btn-disabled-border-inverse-light: #00000000;
-  --pgn-color-btn-disabled-border-inverse-info: #00000000;
-  --pgn-color-btn-disabled-border-inverse-dark: #00000000;
-  --pgn-color-btn-disabled-border-inverse-danger: #00000000;
-  --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
-  --pgn-color-btn-disabled-bg-inverse-warning: inherit;
-  --pgn-color-btn-disabled-bg-outline-warning: inherit;
-  --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
-  --pgn-color-btn-disabled-bg-tertiary: inherit;
-  --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
-  --pgn-color-btn-disabled-bg-inverse-success: inherit;
-  --pgn-color-btn-disabled-bg-outline-success: inherit;
-  --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
-  --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
-  --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-outline-light: inherit;
-  --pgn-color-btn-disabled-bg-inverse-light: inherit;
-  --pgn-color-btn-disabled-bg-outline-light: inherit;
-  --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
-  --pgn-color-btn-disabled-bg-inverse-info: inherit;
-  --pgn-color-btn-disabled-bg-outline-info: inherit;
-  --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
-  --pgn-color-btn-disabled-bg-inverse-dark: inherit;
-  --pgn-color-btn-disabled-bg-outline-dark: inherit;
-  --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-outline-brand: inherit;
-  --pgn-color-btn-disabled-text-inverse-secondary: inherit;
-  --pgn-color-btn-disabled-text-outline-secondary: inherit;
-  --pgn-color-btn-disabled-text-outline-dark: inherit;
-  --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
-  --pgn-color-btn-focus-bg-outline-warning: inherit;
-  --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
-  --pgn-color-btn-focus-bg-tertiary: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
-  --pgn-color-btn-focus-bg-outline-success: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
-  --pgn-color-btn-focus-bg-outline-secondary: #00000000;
-  --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
-  --pgn-color-btn-focus-bg-outline-primary: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
-  --pgn-color-btn-focus-bg-outline-light: #00000000;
-  --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
-  --pgn-color-btn-focus-bg-outline-info: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
-  --pgn-color-btn-focus-bg-outline-dark: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
-  --pgn-color-btn-focus-bg-outline-danger: inherit;
-  --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
-  --pgn-color-btn-focus-bg-outline-brand: inherit;
-  --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
-  --pgn-color-btn-focus-text-inverse-secondary: inherit;
-  --pgn-color-btn-focus-text-outline-dark: inherit;
-  --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
-  --pgn-color-btn-active-border-inverse-warning: inherit;
-  --pgn-color-btn-active-border-inverse-tertiary: #00000000;
-  --pgn-color-btn-active-border-tertiary: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-success: #00000000;
-  --pgn-color-btn-active-border-inverse-success: inherit;
-  --pgn-color-btn-active-border-inverse-secondary: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
-  --pgn-color-btn-active-border-inverse-primary: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-light: #00000000;
-  --pgn-color-btn-active-border-inverse-light: inherit;
-  --pgn-color-btn-active-border-inverse-outline-info: #00000000;
-  --pgn-color-btn-active-border-inverse-info: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
-  --pgn-color-btn-active-border-inverse-dark: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
-  --pgn-color-btn-active-border-inverse-danger: #00000000;
-  --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
-  --pgn-color-btn-active-border-inverse-brand: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
-  --pgn-color-btn-hover-border-inverse-warning: #00000000;
-  --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
-  --pgn-color-btn-hover-border-tertiary: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
-  --pgn-color-btn-hover-border-inverse-success: #00000000;
-  --pgn-color-btn-hover-border-inverse-secondary: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
-  --pgn-color-btn-hover-border-inverse-primary: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
-  --pgn-color-btn-hover-border-inverse-light: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
-  --pgn-color-btn-hover-border-inverse-info: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
-  --pgn-color-btn-hover-border-inverse-dark: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
-  --pgn-color-btn-hover-border-inverse-danger: #00000000;
-  --pgn-color-btn-hover-border-inverse-brand: #00000000;
-  --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
-  --pgn-color-btn-border-inverse-warning: #00000000;
-  --pgn-color-btn-border-inverse-tertiary: #00000000;
-  --pgn-color-btn-border-tertiary: #00000000;
-  --pgn-color-btn-border-inverse-success: #00000000;
-  --pgn-color-btn-border-inverse-secondary: #00000000;
-  --pgn-color-btn-border-inverse-primary: #00000000;
-  --pgn-color-btn-border-inverse-light: #00000000;
-  --pgn-color-btn-border-inverse-info: #00000000;
-  --pgn-color-btn-border-inverse-dark: #00000000;
-  --pgn-color-btn-border-inverse-danger: #00000000;
-  --pgn-color-btn-border-inverse-brand: #00000000;
-  --pgn-color-btn-bg-inverse-outline-warning: inherit;
-  --pgn-color-btn-bg-outline-warning: inherit;
-  --pgn-color-btn-bg-inverse-tertiary: #00000000;
-  --pgn-color-btn-bg-tertiary: #00000000;
-  --pgn-color-btn-bg-inverse-outline-success: inherit;
-  --pgn-color-btn-bg-outline-success: inherit;
-  --pgn-color-btn-bg-inverse-outline-secondary: inherit;
-  --pgn-color-btn-bg-outline-secondary: inherit;
-  --pgn-color-btn-bg-inverse-outline-primary: #00000000;
-  --pgn-color-btn-bg-outline-primary: #00000000;
-  --pgn-color-btn-bg-inverse-outline-light: inherit;
-  --pgn-color-btn-bg-outline-light: inherit;
-  --pgn-color-btn-bg-inverse-outline-info: inherit;
-  --pgn-color-btn-bg-outline-info: inherit;
-  --pgn-color-btn-bg-inverse-outline-dark: #00000000;
-  --pgn-color-btn-bg-outline-dark: inherit;
-  --pgn-color-btn-bg-inverse-outline-danger: #00000000;
-  --pgn-color-btn-bg-outline-danger: inherit;
-  --pgn-color-btn-bg-inverse-outline-brand: #00000000;
-  --pgn-color-btn-bg-outline-brand: inherit;
-  --pgn-other-tooltip-opacity: 1;
-  --pgn-other-search-field-disabled-opacity: .3;
-  --pgn-other-modal-opacity: .5;
-  --pgn-other-link-emphasized-hover-darken-percentage: 15%;
-  --pgn-other-chip-opacity-disabled: .3;
-  --pgn-other-carousel-control-opacity-hover: .9;
-  --pgn-other-carousel-control-opacity-base: .5;
-  --pgn-other-btn-disabled-opacity: .65;
-  --pgn-other-form-feedback-tooltip-opacity: .9;
-  --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
-  --pgn-elevation-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
-  --pgn-elevation-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
-  --pgn-elevation-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
-  --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
-  --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
-  --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
-  --pgn-elevation-progress-bar-box-shadow: none;
-  --pgn-elevation-image-thumbnail-box-shadow: none;
-  --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-black-active: none;
-  --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-dark-active: none;
-  --pgn-elevation-icon-button-box-shadow-light-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-light-active: none;
-  --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-danger-active: none;
-  --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-warning-active: none;
-  --pgn-elevation-icon-button-box-shadow-success-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-success-active: none;
-  --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-brand-active: none;
-  --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-secondary-active: none;
-  --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
-  --pgn-elevation-icon-button-box-shadow-primary-active: none;
-  --pgn-elevation-form-control-select-border-base: none;
-  --pgn-elevation-form-control-range-thumb-base: none;
-  --pgn-elevation-form-control-range-track: none;
-  --pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
-  --pgn-elevation-form-control-indicator-active: none;
-  --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
-  --pgn-elevation-form-control-indicator-checked-base: none;
-  --pgn-elevation-form-input-base: none;
-  --pgn-elevation-code-kbd-box-shadow: none;
-  --pgn-elevation-btn-box-shadow-active: none;
-  --pgn-elevation-btn-box-shadow-base: none;
-  --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-popover-box-shadow: none;
-  --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
-  --pgn-elevation-dropdown-box-shadow: none;
-  --pgn-color-action-default-accent-b: #FFE755FF;
-  --pgn-color-action-default-accent-a: #0095C6FF;
-  --pgn-color-action-default-dark-base: #142018FF;
-  --pgn-color-action-default-light-base: #CAC3BFFF;
-  --pgn-color-action-default-brand-base: #6A0039FF;
-  --pgn-color-action-default-primary-base: #051627FF;
-  --pgn-color-action-default-gray-base: #575757FF;
-  --pgn-color-action-default-gray-900: #0A0C0DFF;
-  --pgn-color-action-default-gray-800: #1A1A1AFF;
-  --pgn-color-action-default-gray-700: #2B2B2BFF;
-  --pgn-color-action-default-gray-600: #424242FF;
-  --pgn-color-action-default-gray-400: #767676FF;
-  --pgn-color-action-default-gray-300: #949494FF;
-  --pgn-color-action-default-gray-200: #B3B3B3FF;
-  --pgn-color-action-default-gray-100: #D2D2D2FF;
-  --pgn-color-dark-900: #1B2C21FF;
-  --pgn-color-dark-800: #1D2F23FF;
-  --pgn-color-dark-700: #1F3226FF;
-  --pgn-color-dark-600: #23392AFF;
-  --pgn-color-dark-500: var(--pgn-color-dark-base);
-  --pgn-color-dark-400: #5D6F63FF;
-  --pgn-color-dark-300: #939F97FF;
-  --pgn-color-dark-200: #C9CFCBFF;
-  --pgn-color-dark-100: #F2F3F3FF;
-  --pgn-color-light-900: #9E9B99FF;
-  --pgn-color-light-800: #A9A6A4FF;
-  --pgn-color-light-700: #B4B1AFFF;
-  --pgn-color-light-600: #CBC7C5FF;
-  --pgn-color-light-500: var(--pgn-color-light-base);
-  --pgn-color-light-400: #E9E6E4FF;
-  --pgn-color-light-300: #F0EEEDFF;
-  --pgn-color-light-200: #F8F7F6FF;
-  --pgn-color-light-100: #FDFDFDFF;
-  --pgn-color-danger-base: var(--pgn-color-red);
-  --pgn-color-warning-base: var(--pgn-color-yellow);
-  --pgn-color-info-base: var(--pgn-color-teal);
-  --pgn-color-success-base: var(--pgn-color-green);
-  --pgn-color-brand-900: #6E003BFF;
-  --pgn-color-brand-800: #76003FFF;
-  --pgn-color-brand-700: #7E0043FF;
-  --pgn-color-brand-600: #8D004CFF;
-  --pgn-color-brand-500: var(--pgn-color-brand-base);
-  --pgn-color-brand-400: #B6407FFF;
-  --pgn-color-brand-300: #CE80AAFF;
-  --pgn-color-brand-200: #E7BFD4FF;
-  --pgn-color-brand-100: #F9F0F5FF;
-  --pgn-color-secondary-base: var(--pgn-color-gray-700);
-  --pgn-color-primary-900: #07223CFF;
-  --pgn-color-primary-800: #082440FF;
-  --pgn-color-primary-700: #082644FF;
-  --pgn-color-primary-600: #092B4DFF;
-  --pgn-color-primary-500: var(--pgn-color-primary-base);
-  --pgn-color-primary-400: #476480FF;
-  --pgn-color-primary-300: #8598AAFF;
-  --pgn-color-primary-200: #C2CBD5FF;
-  --pgn-color-primary-100: #F0F3F5FF;
-  --pgn-color-gray-500: var(--pgn-color-gray-base);
-  --pgn-color-tooltip-arrow-light: var(--pgn-color-white);
-  --pgn-color-tooltip-bg-light: var(--pgn-color-white);
-  --pgn-color-tooltip-bg-base: var(--pgn-color-black);
-  --pgn-color-tooltip-light: var(--pgn-color-black);
-  --pgn-color-tooltip-text: var(--pgn-color-white);
-  --pgn-color-toast-header-border: #00000080;
-  --pgn-color-toast-header-bg: var(--pgn-color-gray-700);
-  --pgn-color-toast-header-text: var(--pgn-color-white);
-  --pgn-color-toast-border: #0000001A;
-  --pgn-color-toast-bg: var(--pgn-color-gray-700);
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white);
-  --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white);
-  --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base);
-  --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base);
-  --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base);
-  --pgn-color-sheet-skrim-component-box-shadow: #00000026;
-  --pgn-color-sheet-skrim-bg: #ADADAD80;
-  --pgn-color-search-field-form-bg: var(--pgn-color-white);
-  --pgn-color-search-field-border-focus: var(--pgn-color-black);
-  --pgn-color-search-field-border-interaction: var(--pgn-color-black);
-  --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
-  --pgn-color-progress-bar-bar-base: var(--pgn-color-white);
-  --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
-  --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base);
-  --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
-  --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
-  --pgn-color-popover-arrow-outer: #0000000D;
-  --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
-  --pgn-color-popover-header-bg-dark: #808080FF;
-  --pgn-color-popover-header-bg: var(--pgn-color-white);
-  --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white);
-  --pgn-color-pagination-focus-text: var(--pgn-color-black);
-  --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100);
-  --pgn-color-pagination-border-hover: var(--pgn-color-gray-200);
-  --pgn-color-pagination-border-base: var(--pgn-color-gray-200);
-  --pgn-color-pagination-bg-disabled: var(--pgn-color-white);
-  --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
-  --pgn-color-pagination-text-inverse: var(--pgn-color-white);
-  --pgn-color-page-banner-text-warning: var(--pgn-color-black);
-  --pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
-  --pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
-  --pgn-color-page-banner-text-light: var(--pgn-color-black);
-  --pgn-color-page-banner-text-dark: var(--pgn-color-white);
-  --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
-  --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
-  --pgn-color-navbar-light-toggler-border: #0000001A;
-  --pgn-color-navbar-light-disabled: #0000004D;
-  --pgn-color-navbar-light-active: #000000E6;
-  --pgn-color-navbar-light-hover: #000000B3;
-  --pgn-color-navbar-light-text: #00000080;
-  --pgn-color-navbar-dark-toggler-border: #FFFFFF1A;
-  --pgn-color-navbar-dark-disabled: #FFFFFF40;
-  --pgn-color-navbar-dark-hover: #FFFFFFBF;
-  --pgn-color-navbar-dark-text: #FFFFFF80;
-  --pgn-color-nav-light: #00000080;
-  --pgn-color-nav-dark: #FFFFFF80;
-  --pgn-color-nav-divider: var(--pgn-color-gray-100);
-  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
-  --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
-  --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
-  --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
-  --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
-  --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
-  --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
-  --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
-  --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
-  --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
-  --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
-  --pgn-color-modal-content-border: #00000033;
-  --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg);
-  --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg);
-  --pgn-color-menu-bg: var(--pgn-color-white);
-  --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200);
-  --pgn-color-icon-button-black: var(--pgn-color-black);
-  --pgn-color-icon-button-accent: var(--pgn-color-white);
-  --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black);
-  --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black);
-  --pgn-color-icon-button-text-black-base: var(--pgn-color-black);
-  --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base);
-  --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base);
-  --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base);
-  --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base);
-  --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black);
-  --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black);
-  --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base);
-  --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base);
-  --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
-  --pgn-color-yiq-light: var(--pgn-color-white);
-  --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
-  --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
-  --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
-  --pgn-color-list-group-border: #00000020;
-  --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
-  --pgn-color-list-group-bg-base: var(--pgn-color-white);
-  --pgn-color-hr-border: #0000001A;
-  --pgn-color-headings-base: var(--pgn-color-black);
-  --pgn-color-body-base: var(--pgn-color-gray-700);
-  --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
-  --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
-  --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
-  --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
-  --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
-  --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
-  --pgn-color-form-input-base: var(--pgn-color-gray-700);
-  --pgn-color-dropdown-link-hover-base: #000000FF;
-  --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
-  --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
-  --pgn-color-dropdown-border: #00000026;
-  --pgn-color-data-table-bg-is-loading: #FFFFFFB3;
-  --pgn-color-code-pre: var(--pgn-color-gray-900);
-  --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
-  --pgn-color-code-kbd-base: var(--pgn-color-white);
-  --pgn-color-close-button: var(--pgn-color-black);
-  --pgn-color-chip-outline-dark: var(--pgn-color-white);
-  --pgn-color-chip-bg-light: var(--pgn-color-white);
-  --pgn-color-chip-text-dark: var(--pgn-color-white);
-  --pgn-color-chip-text-light: var(--pgn-color-black);
-  --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-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-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);
-  --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning);
-  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary);
-  --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light);
-  --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white);
-  --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100);
-  --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white);
-  --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700);
-  --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A;
-  --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white);
-  --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700);
-  --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white);
-  --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white);
-  --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white);
-  --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white);
-  --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base);
-  --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white);
-  --pgn-color-btn-border-outline-light: var(--pgn-color-light-base);
-  --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white);
-  --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white);
-  --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base);
-  --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white);
-  --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white);
-  --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base);
-  --pgn-color-btn-bg-primary: var(--pgn-color-primary-base);
-  --pgn-color-btn-bg-light: var(--pgn-color-light-base);
-  --pgn-color-btn-bg-dark: var(--pgn-color-dark-base);
-  --pgn-color-btn-bg-brand: var(--pgn-color-brand-base);
-  --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white);
-  --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700);
-  --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base);
-  --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base);
-  --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base);
-  --pgn-color-btn-text-outline-light: var(--pgn-color-light-base);
-  --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base);
-  --pgn-color-btn-text-outline-dark: var(--pgn-color-dark-base);
-  --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white);
-  --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base);
-  --pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base);
-  --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base);
-  --pgn-color-bubble-text-primary: var(--pgn-color-white);
-  --pgn-color-bubble-text-error: var(--pgn-color-white);
-  --pgn-color-bubble-text-warning: var(--pgn-color-white);
-  --pgn-color-bubble-text-success: var(--pgn-color-white);
-  --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
-  --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
-  --pgn-color-badge-bg-light: var(--pgn-color-light-base);
-  --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
-  --pgn-color-badge-text-dark: #FFFFFFFF;
-  --pgn-color-badge-text-light: #454545FF;
-  --pgn-color-badge-text-primary: #FFFFFFFF;
-  --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base);
-  --pgn-color-annotation-bg-light: var(--pgn-color-white);
-  --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b);
-  --pgn-color-annotation-text-dark: var(--pgn-color-white);
-  --pgn-color-annotation-text-error: var(--pgn-color-white);
-  --pgn-color-annotation-text-warning: var(--pgn-color-black);
-  --pgn-color-annotation-text-success: var(--pgn-color-white);
-  --pgn-color-alert-content: var(--pgn-color-gray-700);
-  --pgn-color-alert-title: var(--pgn-color-black);
-  --pgn-color-theme-active-gray: var(--pgn-color-gray-900);
-  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
-  --pgn-color-theme-border-gray: var(--pgn-color-gray-200);
-  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
-  --pgn-color-border: var(--pgn-color-gray-200);
-  --pgn-color-active: var(--pgn-color-white);
-  --pgn-color-text-50-white: #FFFFFF80;
-  --pgn-color-text-50-black: #00000080;
-  --pgn-color-bg-base: var(--pgn-color-white);
-  --pgn-elevation-scrollable-body-box-shadow: #0000008C;
-  --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base);
-  --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base);
-  --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base);
-  --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base);
-  --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base);
-  --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base);
-  --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base);
-  --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base);
-  --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base);
-  --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
-  --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
-  --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
-  --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
-  --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
-  --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
-  --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
-  --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500);
-  --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-  --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-  --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
-  --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
-  --pgn-color-action-default-dark-900: #080C09FF;
-  --pgn-color-action-default-dark-800: #0A0F0CFF;
-  --pgn-color-action-default-dark-700: #0B130EFF;
-  --pgn-color-action-default-dark-600: #101913FF;
-  --pgn-color-action-default-dark-500: #142018FF;
-  --pgn-color-action-default-dark-400: #46534AFF;
-  --pgn-color-action-default-dark-300: #78877DFF;
-  --pgn-color-action-default-dark-200: #AEB7B1FF;
-  --pgn-color-action-default-dark-100: #D7DBDBFF;
-  --pgn-color-action-default-light-900: #85817FFF;
-  --pgn-color-action-default-light-800: #908C8AFF;
-  --pgn-color-action-default-light-700: #9B9795FF;
-  --pgn-color-action-default-light-600: #B3ADAAFF;
-  --pgn-color-action-default-light-500: #CAC3BFFF;
-  --pgn-color-action-default-light-400: #D2CCC8FF;
-  --pgn-color-action-default-light-300: #D9D4D1FF;
-  --pgn-color-action-default-light-200: #E2DED9FF;
-  --pgn-color-action-default-light-100: #E4E4E4FF;
-  --pgn-color-action-default-danger-base: #9A232EFF;
-  --pgn-color-action-default-warning-base: #CCAE00FF;
-  --pgn-color-action-default-info-base: #004C77FF;
-  --pgn-color-action-default-success-base: #0F5737FF;
-  --pgn-color-action-default-brand-900: #3B0020FF;
-  --pgn-color-action-default-brand-800: #430024FF;
-  --pgn-color-action-default-brand-700: #4B0028FF;
-  --pgn-color-action-default-brand-600: #5A0031FF;
-  --pgn-color-action-default-brand-500: #6A0039FF;
-  --pgn-color-action-default-brand-400: #903365FF;
-  --pgn-color-action-default-brand-300: #C05B91FF;
-  --pgn-color-action-default-brand-200: #D99ABBFF;
-  --pgn-color-action-default-brand-100: #EACCDDFF;
-  --pgn-color-action-default-secondary-base: #2B2B2BFF;
-  --pgn-color-action-default-primary-900: #02080EFF;
-  --pgn-color-action-default-primary-800: #020A13FF;
-  --pgn-color-action-default-primary-700: #030C16FF;
-  --pgn-color-action-default-primary-600: #04111FFF;
-  --pgn-color-action-default-primary-500: #051627FF;
-  --pgn-color-action-default-primary-400: #354A5FFF;
-  --pgn-color-action-default-primary-300: #677F95FF;
-  --pgn-color-action-default-primary-200: #A4B1C0FF;
-  --pgn-color-action-default-primary-100: #D1DBE1FF;
-  --pgn-color-action-default-gray-500: #575757FF;
-  --pgn-color-danger-900: #892029FF;
-  --pgn-color-danger-800: #92222CFF;
-  --pgn-color-danger-700: #9C242EFF;
-  --pgn-color-danger-600: #B02934FF;
-  --pgn-color-danger-500: var(--pgn-color-danger-base);
-  --pgn-color-danger-400: #D2626BFF;
-  --pgn-color-danger-300: #E1969DFF;
-  --pgn-color-danger-200: #F0CBCEFF;
-  --pgn-color-danger-100: #FBF2F3FF;
-  --pgn-color-warning-900: #B39800FF;
-  --pgn-color-warning-800: #BFA300FF;
-  --pgn-color-warning-700: #CCAE00FF;
-  --pgn-color-warning-600: #E6C300FF;
-  --pgn-color-warning-500: var(--pgn-color-warning-base);
-  --pgn-color-warning-400: #FFE340FF;
-  --pgn-color-warning-300: #FFEC80FF;
-  --pgn-color-warning-200: #FFF6BFFF;
-  --pgn-color-warning-100: #FFFDF0FF;
-  --pgn-color-info-900: #004C77FF;
-  --pgn-color-info-800: #005280FF;
-  --pgn-color-info-700: #005788FF;
-  --pgn-color-info-600: #006299FF;
-  --pgn-color-info-500: var(--pgn-color-info-base);
-  --pgn-color-info-400: #4092BFFF;
-  --pgn-color-info-300: #80B6D5FF;
-  --pgn-color-info-200: #BFDBEAFF;
-  --pgn-color-info-100: #F0F6FAFF;
-  --pgn-color-success-900: #105B3AFF;
-  --pgn-color-success-800: #11623EFF;
-  --pgn-color-success-700: #126842FF;
-  --pgn-color-success-600: #15754BFF;
-  --pgn-color-success-500: var(--pgn-color-success-base);
-  --pgn-color-success-400: #51A17EFF;
-  --pgn-color-success-300: #8BC1A9FF;
-  --pgn-color-success-200: #C5E0D4FF;
-  --pgn-color-success-100: #F1F8F5FF;
-  --pgn-color-secondary-900: #303030FF;
-  --pgn-color-secondary-800: #343434FF;
-  --pgn-color-secondary-700: #373737FF;
-  --pgn-color-secondary-600: #3E3E3EFF;
-  --pgn-color-secondary-500: var(--pgn-color-secondary-base);
-  --pgn-color-secondary-400: #747474FF;
-  --pgn-color-secondary-300: #A2A2A2FF;
-  --pgn-color-secondary-200: #D1D1D1FF;
-  --pgn-color-secondary-100: #F4F4F4FF;
-  --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
-  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
-  --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500);
-  --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
-  --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
-  --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base);
-  --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500);
-  --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500);
-  --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500);
-  --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
-  --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
-  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
-  --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300);
-  --pgn-color-popover-body: var(--pgn-color-body-base);
-  --pgn-color-popover-header-text: var(--pgn-color-headings-base);
-  --pgn-color-popover-bg: var(--pgn-color-bg-base);
-  --pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
-  --pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
-  --pgn-color-pagination-text-active: var(--pgn-color-active);
-  --pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
-  --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
-  --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
-  --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
-  --pgn-color-navbar-dark-active: var(--pgn-color-active);
-  --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
-  --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
-  --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500);
-  --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active);
-  --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base);
-  --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base);
-  --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base);
-  --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
-  --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
-  --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
-  --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
-  --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
-  --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
-  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
-  --pgn-color-menu-item-color: var(--pgn-color-body-base);
-  --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
-  --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base);
-  --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base);
-  --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base);
-  --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base);
-  --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base);
-  --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base);
-  --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base);
-  --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base);
-  --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base);
-  --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base);
-  --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base);
-  --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base);
-  --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base);
-  --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base);
-  --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base);
-  --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base);
-  --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base);
-  --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base);
-  --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base);
-  --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base);
-  --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base);
-  --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base);
-  --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base);
-  --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base);
-  --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base);
-  --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base);
-  --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base);
-  --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base);
-  --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base);
-  --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base);
-  --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
-  --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
-  --pgn-color-blockquote-small: var(--pgn-color-gray-500);
-  --pgn-color-text-muted: var(--pgn-color-gray-500);
-  --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
-  --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
-  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
-  --pgn-color-list-group-active-base: var(--pgn-color-active);
-  --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
-  --pgn-color-link-brand-base: var(--pgn-color-brand-500);
-  --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
-  --pgn-color-link-muted-base: var(--pgn-color-primary-500);
-  --pgn-color-body-bg: var(--pgn-color-bg-base);
-  --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base);
-  --pgn-color-form-feedback-valid: var(--pgn-color-success-base);
-  --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg);
-  --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled);
-  --pgn-color-form-control-file-base: var(--pgn-color-form-input-base);
-  --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray);
-  --pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
-  --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
-  --pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
-  --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base);
-  --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base);
-  --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
-  --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base);
-  --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base);
-  --pgn-color-form-input-bg-base: var(--pgn-color-bg-base);
-  --pgn-color-form-input-border: var(--pgn-color-gray-500);
-  --pgn-color-form-input-plaintext: var(--pgn-color-body-base);
-  --pgn-color-form-input-placeholder: var(--pgn-color-gray-500);
-  --pgn-color-dropzone-border-base: var(--pgn-color-gray-500);
-  --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500);
-  --pgn-color-dropdown-link-active-base: var(--pgn-color-active);
-  --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300);
-  --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
-  --pgn-color-dropdown-header: var(--pgn-color-gray-500);
-  --pgn-color-dropdown-text: var(--pgn-color-body-base);
-  --pgn-color-data-table-border: var(--pgn-color-light-300);
-  --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
-  --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
-  --pgn-color-chip-label-base: var(--pgn-color-primary-700);
-  --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500);
-  --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark);
-  --pgn-color-chip-border-base: var(--pgn-color-light-800);
-  --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
-  --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
-  --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);
-  --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
-  --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
-  --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
-  --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);
-  --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark);
-  --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand);
-  --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
-  --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base);
-  --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
-  --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary);
-  --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
-  --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base);
-  --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
-  --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
-  --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500);
-  --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
-  --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
-  --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
-  --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base);
-  --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
-  --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
-  --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
-  --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base);
-  --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
-  --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500);
-  --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success);
-  --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
-  --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
-  --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary);
-  --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300);
-  --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info);
-  --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
-  --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark);
-  --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger);
-  --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger);
-  --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand);
-  --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary);
-  --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light);
-  --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark);
-  --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand);
-  --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
-  --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success);
-  --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
-  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
-  --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
-  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light);
-  --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
-  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
-  --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand);
-  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
-  --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
-  --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
-  --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary);
-  --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
-  --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
-  --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
-  --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary);
-  --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary);
-  --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
-  --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
-  --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light);
-  --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
-  --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
-  --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
-  --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
-  --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
-  --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
-  --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand);
-  --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary);
-  --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500);
-  --pgn-color-btn-active-text-inverse-primary: #051627FF;
-  --pgn-color-btn-active-text-inverse-light: #CAC3BFFF;
-  --pgn-color-btn-active-text-inverse-dark: #142018FF;
-  --pgn-color-btn-active-text-inverse-brand: #6A0039FF;
-  --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900);
-  --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900);
-  --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900);
-  --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900);
-  --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-light-500);
-  --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100);
-  --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100);
-  --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100);
-  --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100);
-  --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100);
-  --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100);
-  --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100);
-  --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100);
-  --pgn-color-btn-hover-text-inverse-primary: #061D33FF;
-  --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF;
-  --pgn-color-btn-hover-text-inverse-dark: #18271DFF;
-  --pgn-color-btn-hover-text-inverse-brand: #770040FF;
-  --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base);
-  --pgn-color-btn-border-outline-success: var(--pgn-color-success-base);
-  --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base);
-  --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary);
-  --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light);
-  --pgn-color-btn-border-outline-info: var(--pgn-color-info-base);
-  --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark);
-  --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base);
-  --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand);
-  --pgn-color-btn-bg-warning: var(--pgn-color-warning-base);
-  --pgn-color-btn-bg-success: var(--pgn-color-success-base);
-  --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base);
-  --pgn-color-btn-bg-inverse-primary: #FFFFFFFF;
-  --pgn-color-btn-bg-inverse-light: #454545FF;
-  --pgn-color-btn-bg-info: var(--pgn-color-info-base);
-  --pgn-color-btn-bg-inverse-dark: #FFFFFFFF;
-  --pgn-color-btn-bg-danger: var(--pgn-color-danger-base);
-  --pgn-color-btn-bg-inverse-brand: #FFFFFFFF;
-  --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base);
-  --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base);
-  --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base);
-  --pgn-color-btn-text-outline-success: var(--pgn-color-success-base);
-  --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base);
-  --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base);
-  --pgn-color-btn-text-primary: #FFFFFFFF;
-  --pgn-color-btn-text-light: #454545FF;
-  --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base);
-  --pgn-color-btn-text-outline-info: var(--pgn-color-info-base);
-  --pgn-color-btn-text-dark: #FFFFFFFF;
-  --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base);
-  --pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base);
-  --pgn-color-btn-text-brand: #FFFFFFFF;
-  --pgn-color-bubble-bg-error: var(--pgn-color-danger-base);
-  --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base);
-  --pgn-color-bubble-bg-success: var(--pgn-color-success-base);
-  --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
-  --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500);
-  --pgn-color-breadcrumb-active: var(--pgn-color-gray-500);
-  --pgn-color-breadcrumb-base: var(--pgn-color-primary-500);
-  --pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
-  --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
-  --pgn-color-badge-focus-box-shadow-primary: #0A30550D;
-  --pgn-color-badge-focus-bg-dark: #142018FF;
-  --pgn-color-badge-focus-bg-light: #CAC3BFFF;
-  --pgn-color-badge-focus-bg-primary: #051627FF;
-  --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
-  --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
-  --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
-  --pgn-color-badge-bg-info: var(--pgn-color-info-base);
-  --pgn-color-badge-bg-danger: var(--pgn-color-danger-base);
-  --pgn-color-badge-bg-warning: var(--pgn-color-warning-base);
-  --pgn-color-badge-bg-success: var(--pgn-color-success-base);
-  --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base);
-  --pgn-color-badge-text-info: #FFFFFFFF;
-  --pgn-color-badge-text-warning: #454545FF;
-  --pgn-color-badge-text-danger: #FFFFFFFF;
-  --pgn-color-badge-text-success: #FFFFFFFF;
-  --pgn-color-badge-text-secondary: #FFFFFFFF;
-  --pgn-color-avatar-border: var(--pgn-color-light-300);
-  --pgn-color-annotation-bg-error: var(--pgn-color-danger-base);
-  --pgn-color-annotation-bg-success: var(--pgn-color-success-base);
-  --pgn-color-annotation-text-light: var(--pgn-color-primary-500);
-  --pgn-color-theme-active-dark: var(--pgn-color-dark-900);
-  --pgn-color-theme-active-light: var(--pgn-color-light-900);
-  --pgn-color-theme-active-brand: var(--pgn-color-brand-900);
-  --pgn-color-theme-active-primary: var(--pgn-color-primary-900);
-  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700);
-  --pgn-color-theme-hover-light: var(--pgn-color-light-700);
-  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700);
-  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700);
-  --pgn-color-theme-default-gray: var(--pgn-color-gray-500);
-  --pgn-color-theme-default-dark: var(--pgn-color-dark-500);
-  --pgn-color-theme-default-light: var(--pgn-color-light-500);
-  --pgn-color-theme-default-brand: var(--pgn-color-brand-500);
-  --pgn-color-theme-default-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
-  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
-  --pgn-color-theme-focus-light: var(--pgn-color-light-500);
-  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
-  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
-  --pgn-color-theme-border-dark: var(--pgn-color-dark-200);
-  --pgn-color-theme-border-light: var(--pgn-color-light-200);
-  --pgn-color-theme-border-brand: var(--pgn-color-brand-200);
-  --pgn-color-theme-border-primary: var(--pgn-color-primary-200);
-  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100);
-  --pgn-color-theme-bg-light: var(--pgn-color-light-100);
-  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100);
-  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100);
-  --pgn-color-table-border: var(--pgn-color-border);
-  --pgn-color-input-focus: var(--pgn-color-primary-500);
-  --pgn-color-disabled: var(--pgn-color-gray-500);
-  --pgn-color-bg-active: var(--pgn-color-primary-500);
-  --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
-  --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
-  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-border-color-nav-tabs-link-border-hover-left: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-bottom: var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-border-color-nav-tabs-link-border-hover-right: transparent;
+  --pgn-border-color-nav-tabs-link-border-hover-top: transparent;
+  --pgn-border-color-nav-tabs-link-border-active: var(--pgn-color-primary-500);
+  --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+  --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+  --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+  --pgn-color-action-default-accent-b: #FFE755FF;
+  --pgn-color-action-default-accent-a: #0095C6FF;
+  --pgn-color-action-default-dark-base: #142018FF;
+  --pgn-color-action-default-dark-900: #080C09FF;
+  --pgn-color-action-default-dark-800: #0A0F0CFF;
+  --pgn-color-action-default-dark-700: #0B130EFF;
+  --pgn-color-action-default-dark-600: #101913FF;
+  --pgn-color-action-default-dark-500: #142018FF;
+  --pgn-color-action-default-dark-400: #46534AFF;
+  --pgn-color-action-default-dark-300: #78877DFF;
+  --pgn-color-action-default-dark-200: #AEB7B1FF;
+  --pgn-color-action-default-dark-100: #D7DBDBFF;
+  --pgn-color-action-default-light-base: #CAC3BFFF;
+  --pgn-color-action-default-light-900: #85817FFF;
+  --pgn-color-action-default-light-800: #908C8AFF;
+  --pgn-color-action-default-light-700: #9B9795FF;
+  --pgn-color-action-default-light-600: #B3ADAAFF;
+  --pgn-color-action-default-light-500: #CAC3BFFF;
+  --pgn-color-action-default-light-400: #D2CCC8FF;
+  --pgn-color-action-default-light-300: #D9D4D1FF;
+  --pgn-color-action-default-light-200: #E2DED9FF;
+  --pgn-color-action-default-light-100: #E4E4E4FF;
+  --pgn-color-action-default-danger-base: #9A232EFF;
   --pgn-color-action-default-danger-900: #60161DFF;
   --pgn-color-action-default-danger-800: #691820FF;
   --pgn-color-action-default-danger-700: #731A22FF;
@@ -1149,6 +46,7 @@
   --pgn-color-action-default-danger-300: #D66E78FF;
   --pgn-color-action-default-danger-200: #E5A3A9FF;
   --pgn-color-action-default-danger-100: #EFCBCFFF;
+  --pgn-color-action-default-warning-base: #CCAE00FF;
   --pgn-color-action-default-warning-900: #806D00FF;
   --pgn-color-action-default-warning-800: #8C7700FF;
   --pgn-color-action-default-warning-700: #998300FF;
@@ -1158,6 +56,7 @@
   --pgn-color-action-default-warning-300: #FFE44DFF;
   --pgn-color-action-default-warning-200: #FFEF8CFF;
   --pgn-color-action-default-warning-100: #FFF6BDFF;
+  --pgn-color-action-default-info-base: #004C77FF;
   --pgn-color-action-default-info-900: #002B44FF;
   --pgn-color-action-default-info-800: #00314DFF;
   --pgn-color-action-default-info-700: #003655FF;
@@ -1167,6 +66,7 @@
   --pgn-color-action-default-info-300: #5AA0C8FF;
   --pgn-color-action-default-info-200: #99C5DDFF;
   --pgn-color-action-default-info-100: #CADFEDFF;
+  --pgn-color-action-default-success-base: #0F5737FF;
   --pgn-color-action-default-success-900: #08301EFF;
   --pgn-color-action-default-success-800: #093723FF;
   --pgn-color-action-default-success-700: #0A3D26FF;
@@ -1176,6 +76,17 @@
   --pgn-color-action-default-success-300: #6AAF90FF;
   --pgn-color-action-default-success-200: #A4CEBBFF;
   --pgn-color-action-default-success-100: #CFE7DDFF;
+  --pgn-color-action-default-brand-base: #6A0039FF;
+  --pgn-color-action-default-brand-900: #3B0020FF;
+  --pgn-color-action-default-brand-800: #430024FF;
+  --pgn-color-action-default-brand-700: #4B0028FF;
+  --pgn-color-action-default-brand-600: #5A0031FF;
+  --pgn-color-action-default-brand-500: #6A0039FF;
+  --pgn-color-action-default-brand-400: #903365FF;
+  --pgn-color-action-default-brand-300: #C05B91FF;
+  --pgn-color-action-default-brand-200: #D99ABBFF;
+  --pgn-color-action-default-brand-100: #EACCDDFF;
+  --pgn-color-action-default-secondary-base: #2B2B2BFF;
   --pgn-color-action-default-secondary-900: #161616FF;
   --pgn-color-action-default-secondary-800: #1A1A1AFF;
   --pgn-color-action-default-secondary-700: #1E1E1EFF;
@@ -1185,63 +96,561 @@
   --pgn-color-action-default-secondary-300: #898989FF;
   --pgn-color-action-default-secondary-200: #B8B8B8FF;
   --pgn-color-action-default-secondary-100: #DBDBDBFF;
+  --pgn-color-action-default-primary-base: #051627FF;
+  --pgn-color-action-default-primary-900: #02080EFF;
+  --pgn-color-action-default-primary-800: #020A13FF;
+  --pgn-color-action-default-primary-700: #030C16FF;
+  --pgn-color-action-default-primary-600: #04111FFF;
+  --pgn-color-action-default-primary-500: #051627FF;
+  --pgn-color-action-default-primary-400: #354A5FFF;
+  --pgn-color-action-default-primary-300: #677F95FF;
+  --pgn-color-action-default-primary-200: #A4B1C0FF;
+  --pgn-color-action-default-primary-100: #D1DBE1FF;
+  --pgn-color-action-default-gray-base: #575757FF;
+  --pgn-color-action-default-gray-900: #0A0C0DFF;
+  --pgn-color-action-default-gray-800: #1A1A1AFF;
+  --pgn-color-action-default-gray-700: #2B2B2BFF;
+  --pgn-color-action-default-gray-600: #424242FF;
+  --pgn-color-action-default-gray-500: #575757FF;
+  --pgn-color-action-default-gray-400: #767676FF;
+  --pgn-color-action-default-gray-300: #949494FF;
+  --pgn-color-action-default-gray-200: #B3B3B3FF;
+  --pgn-color-action-default-gray-100: #D2D2D2FF;
+  --pgn-color-dark-base: #273F2FFF; /* Basic dark color. */
+  --pgn-color-dark-900: #1B2C21FF; /* Dark color of level 900. */
+  --pgn-color-dark-800: #1D2F23FF; /* Dark color of level 800. */
+  --pgn-color-dark-700: #1F3226FF; /* Info color of level 700. */
+  --pgn-color-dark-600: #23392AFF; /* Dark color of level 600. */
+  --pgn-color-dark-500: var(--pgn-color-dark-base); /* Dark color of level 500. */
+  --pgn-color-dark-400: #5D6F63FF; /* Dark color of level 400. */
+  --pgn-color-dark-300: #939F97FF; /* Dark color of level 300. */
+  --pgn-color-dark-200: #C9CFCBFF; /* Dark color of level 200. */
+  --pgn-color-dark-100: #F2F3F3FF; /* Dark color of level 100. */
+  --pgn-color-light-base: #E1DDDBFF; /* Basic light color. */
+  --pgn-color-light-900: #9E9B99FF; /* Light color of level 900. */
+  --pgn-color-light-800: #A9A6A4FF; /* Light color of level 800. */
+  --pgn-color-light-700: #B4B1AFFF; /* Light color of level 700. */
+  --pgn-color-light-600: #CBC7C5FF; /* Light color of level 600. */
+  --pgn-color-light-500: var(--pgn-color-light-base); /* Light color of level 500. */
+  --pgn-color-light-400: #E9E6E4FF; /* Light color of level 400. */
+  --pgn-color-light-300: #F0EEEDFF; /* Light color of level 300. */
+  --pgn-color-light-200: #F8F7F6FF; /* Light color of level 200. */
+  --pgn-color-light-100: #FDFDFDFF; /* Light color of level 100. */
+  --pgn-color-danger-base: var(--pgn-color-red); /* Basic danger color. */
+  --pgn-color-danger-900: #892029FF; /* Danger color of level 900. */
+  --pgn-color-danger-800: #92222CFF; /* Danger color of level 800. */
+  --pgn-color-danger-700: #9C242EFF; /* Danger color of level 700. */
+  --pgn-color-danger-600: #B02934FF; /* Danger color of level 600. */
+  --pgn-color-danger-500: var(--pgn-color-danger-base); /* Danger color of level 500. */
+  --pgn-color-danger-400: #D2626BFF; /* Danger color of level 400. */
+  --pgn-color-danger-300: #E1969DFF; /* Danger color of level 300. */
+  --pgn-color-danger-200: #F0CBCEFF; /* Danger color of level 200. */
+  --pgn-color-danger-100: #FBF2F3FF; /* Danger color of level 100. */
+  --pgn-color-warning-base: var(--pgn-color-yellow); /* Basic warning color. */
+  --pgn-color-warning-900: #B39800FF; /* Warning color of level 900. */
+  --pgn-color-warning-800: #BFA300FF; /* Warning color of level 800. */
+  --pgn-color-warning-700: #CCAE00FF; /* Warning color of level 700. */
+  --pgn-color-warning-600: #E6C300FF; /* Warning color of level 600. */
+  --pgn-color-warning-500: var(--pgn-color-warning-base); /* Warning color of level 500. */
+  --pgn-color-warning-400: #FFE340FF; /* Warning color of level 400. */
+  --pgn-color-warning-300: #FFEC80FF; /* Warning color of level 300. */
+  --pgn-color-warning-200: #FFF6BFFF; /* Warning color of level 200. */
+  --pgn-color-warning-100: #FFFDF0FF; /* Warning color of level 100. */
+  --pgn-color-info-base: var(--pgn-color-teal); /* Basic info color. */
+  --pgn-color-info-900: #004C77FF; /* Info color of level 900. */
+  --pgn-color-info-800: #005280FF; /* Info color of level 800. */
+  --pgn-color-info-700: #005788FF; /* Info color of level 700. */
+  --pgn-color-info-600: #006299FF; /* Info color of level 600. */
+  --pgn-color-info-500: var(--pgn-color-info-base); /* Info color of level 500. */
+  --pgn-color-info-400: #4092BFFF; /* Info color of level 400. */
+  --pgn-color-info-300: #80B6D5FF; /* Info color of level 300. */
+  --pgn-color-info-200: #BFDBEAFF; /* Info color of level 200. */
+  --pgn-color-info-100: #F0F6FAFF; /* Info color of level 100. */
+  --pgn-color-success-base: var(--pgn-color-green); /* Basic success color. */
+  --pgn-color-success-900: #105B3AFF; /* Success color of level 900. */
+  --pgn-color-success-800: #11623EFF; /* Success color of level 800. */
+  --pgn-color-success-700: #126842FF; /* Success color of level 700. */
+  --pgn-color-success-600: #15754BFF; /* Success color of level 600. */
+  --pgn-color-success-500: var(--pgn-color-success-base); /* Success color of level 500. */
+  --pgn-color-success-400: #51A17EFF; /* Success color of level 400. */
+  --pgn-color-success-300: #8BC1A9FF; /* Success color of level 300. */
+  --pgn-color-success-200: #C5E0D4FF; /* Success color of level 200. */
+  --pgn-color-success-100: #F1F8F5FF; /* Success color of level 100. */
+  --pgn-color-brand-base: #9D0054FF; /* Basic brand color. */
+  --pgn-color-brand-900: #6E003BFF; /* Brand color of level 900. */
+  --pgn-color-brand-800: #76003FFF; /* Brand color of level 800. */
+  --pgn-color-brand-700: #7E0043FF; /* Brand color of level 700. */
+  --pgn-color-brand-600: #8D004CFF; /* Brand color of level 600. */
+  --pgn-color-brand-500: var(--pgn-color-brand-base); /* Brand color of level 500. */
+  --pgn-color-brand-400: #B6407FFF; /* Brand color of level 400. */
+  --pgn-color-brand-300: #CE80AAFF; /* Brand color of level 300. */
+  --pgn-color-brand-200: #E7BFD4FF; /* Brand color of level 200. */
+  --pgn-color-brand-100: #F9F0F5FF; /* Brand color of level 100. */
+  --pgn-color-secondary-base: var(--pgn-color-gray-700); /* Basic secondary color. */
+  --pgn-color-secondary-900: #303030FF; /* Secondary color of level 900. */
+  --pgn-color-secondary-800: #343434FF; /* Secondary color of level 800. */
+  --pgn-color-secondary-700: #373737FF; /* Secondary color of level 700. */
+  --pgn-color-secondary-600: #3E3E3EFF; /* Secondary color of level 600. */
+  --pgn-color-secondary-500: var(--pgn-color-secondary-base); /* Secondary color of level 500. */
+  --pgn-color-secondary-400: #747474FF; /* Secondary color of level 400. */
+  --pgn-color-secondary-300: #A2A2A2FF; /* Secondary color of level 300. */
+  --pgn-color-secondary-200: #D1D1D1FF; /* Secondary color of level 200. */
+  --pgn-color-secondary-100: #F4F4F4FF; /* Secondary color of level 100. */
+  --pgn-color-primary-base: #0A3055FF; /* Basic primary color. */
+  --pgn-color-primary-900: #07223CFF; /* Primary color of level 900. */
+  --pgn-color-primary-800: #082440FF; /* Primary color of level 800. */
+  --pgn-color-primary-700: #082644FF; /* Primary color of level 700. */
+  --pgn-color-primary-600: #092B4DFF; /* Primary color of level 600. */
+  --pgn-color-primary-500: var(--pgn-color-primary-base); /* Primary color of level 500. */
+  --pgn-color-primary-400: #476480FF; /* Primary color of level 400. */
+  --pgn-color-primary-300: #8598AAFF; /* Primary color of level 300. */
+  --pgn-color-primary-200: #C2CBD5FF; /* Primary color of level 200. */
+  --pgn-color-primary-100: #F0F3F5FF; /* Primary color of level 100. */
+  --pgn-color-gray-base: #707070FF; /* Basic gray color. */
+  --pgn-color-gray-900: #212529FF; /* Gray color of level 900. */
+  --pgn-color-gray-800: #333333FF; /* Gray color of level 800. */
+  --pgn-color-gray-700: #454545FF; /* Gray color of level 700. */
+  --pgn-color-gray-600: #5C5C5CFF; /* Gray color of level 600. */
+  --pgn-color-gray-500: var(--pgn-color-gray-base); /* Gray color of level 500. */
+  --pgn-color-gray-400: #8F8F8FFF; /* Gray color of level 400. */
+  --pgn-color-gray-300: #ADADADFF; /* Gray color of level 300. */
+  --pgn-color-gray-200: #CCCCCCFF; /* Gray color of level 200. */
+  --pgn-color-gray-100: #EBEBEBFF; /* Gray color of level 100. */
+  --pgn-color-accent-b: #FFEE88FF; /* Accent-B color. */
+  --pgn-color-accent-a: #00BBF9FF; /* Accent-A color. */
+  --pgn-color-teal: #006DAAFF; /* Teal color. */
+  --pgn-color-yellow: #FFD900FF; /* Yellow color. */
+  --pgn-color-green: #178253FF; /* Green color. */
+  --pgn-color-red: #C32D3AFF; /* Red color. */
+  --pgn-color-blue: #23419FFF; /* Blue color. */
+  --pgn-color-black: #000000FF; /* Black color. */
+  --pgn-color-white: #FFFFFFFF; /* White color. */
+  --pgn-color-yiq-light: var(--pgn-color-white);
+  --pgn-color-blockquote-small: var(--pgn-color-gray-500);
+  --pgn-color-mark-bg: #FFF243FF;
+  --pgn-color-text-muted: var(--pgn-color-gray-500);
+  --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
+  --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
+  --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
+  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
+  --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
+  --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg);
+  --pgn-color-list-group-active-base: var(--pgn-color-active);
+  --pgn-color-list-group-border: #00000020;
+  --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-list-group-bg-base: var(--pgn-color-white);
+  --pgn-color-list-group-base: inherit;
+  --pgn-color-link-brand-inline-hover-decoration: #51002BFF;
+  --pgn-color-link-brand-inline-hover-base: #51002BFF;
+  --pgn-color-link-brand-inline-decoration: #9D00544D;
+  --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
+  --pgn-color-link-brand-hover: #51002BFF;
+  --pgn-color-link-brand-base: var(--pgn-color-brand-500);
+  --pgn-color-link-muted-inline-hover-decoration: #020911FF;
+  --pgn-color-link-muted-inline-hover-base: #020911FF;
+  --pgn-color-link-muted-inline-decoration: #0A30554D;
+  --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
+  --pgn-color-link-muted-hover: #020911FF;
+  --pgn-color-link-muted-base: var(--pgn-color-primary-500);
+  --pgn-color-link-inline-hover-decoration: #003C5EFF;
+  --pgn-color-link-inline-hover-base: #003C5EFF;
+  --pgn-color-link-inline-decoration: #006DAA4D;
+  --pgn-color-link-inline-base: var(--pgn-color-info-500);
+  --pgn-color-link-hover: #003C5EFF;
+  --pgn-color-link-base: var(--pgn-color-info-500);
+  --pgn-color-hr-border: #0000001A;
+  --pgn-color-headings-base: var(--pgn-color-black);
+  --pgn-color-body-bg: var(--pgn-color-bg-base);
+  --pgn-color-body-base: var(--pgn-color-gray-700);
+  --pgn-color-tooltip-arrow-light: var(--pgn-color-white);
+  --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
+  --pgn-color-tooltip-bg-light: var(--pgn-color-white);
+  --pgn-color-tooltip-bg-base: var(--pgn-color-black);
+  --pgn-color-tooltip-light: var(--pgn-color-black);
+  --pgn-color-tooltip-text: var(--pgn-color-white);
+  --pgn-color-toast-header-border: #00000080;
+  --pgn-color-toast-header-bg: var(--pgn-color-gray-700);
+  --pgn-color-toast-header-text: var(--pgn-color-white);
+  --pgn-color-toast-border: #0000001A;
+  --pgn-color-toast-bg: var(--pgn-color-gray-700);
+  --pgn-color-toast-base: inherit;
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover: #00000000;
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus: var(--pgn-color-white);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
   --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
   --pgn-color-tab-more-link-dropdown-toggle-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-bg-focus: var(--pgn-color-primary-500);
   --pgn-color-tab-more-link-dropdown-toggle-text-hover: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-text-active: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-text-focus: var(--pgn-color-white);
   --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
+  --pgn-color-tab-more-link-dropdown-toggle-btn-text-focus: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
   --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error);
+  --pgn-color-stepper-header-step-bubble-error: var(--pgn-color-danger-base);
+  --pgn-color-stepper-header-step-border: none;
+  --pgn-color-stepper-header-step-bg-active: var(--pgn-color-gray-500);
+  --pgn-color-stepper-header-step-bg-base: var(--pgn-color-stepper-header-bg-base);
+  --pgn-color-stepper-header-step-base: var(--pgn-color-primary-base);
+  --pgn-color-stepper-header-bg-line: var(--pgn-color-light-base);
+  --pgn-color-stepper-header-bg-base: #00000000;
+  --pgn-color-sheet-skrim-component-box-shadow: #00000026;
+  --pgn-color-sheet-skrim-bg: #ADADAD80;
+  --pgn-color-search-field-form-bg: var(--pgn-color-white);
+  --pgn-color-search-field-button-bg-brand: var(--pgn-color-brand-500);
+  --pgn-color-search-field-button-bg-primary: var(--pgn-color-primary-500);
+  --pgn-color-search-field-border-focus: var(--pgn-color-black);
+  --pgn-color-search-field-border-interaction: var(--pgn-color-black);
+  --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
+  --pgn-color-progress-bg: #00000000;
+  --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
+  --pgn-color-progress-bar-bg-annotated: var(--pgn-color-dark-500);
+  --pgn-color-progress-bar-bg-base: var(--pgn-color-accent-a);
+  --pgn-color-progress-bar-base: var(--pgn-color-white);
+  --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
+  --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
+  --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base);
+  --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
+  --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
+  --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300);
   --pgn-color-popover-danger-icon: var(--pgn-color-danger-500);
   --pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
   --pgn-color-popover-warning-icon: var(--pgn-color-warning-500);
   --pgn-color-popover-warning-bg: var(--pgn-color-warning-100);
   --pgn-color-popover-success-icon: var(--pgn-color-success-500);
   --pgn-color-popover-success-bg: var(--pgn-color-success-100);
+  --pgn-color-popover-arrow-outer: #0000000D;
   --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg);
+  --pgn-color-popover-body: var(--pgn-color-body-base);
+  --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
+  --pgn-color-popover-header-bg-dark: #808080FF;
+  --pgn-color-popover-header-bg: var(--pgn-color-white);
+  --pgn-color-popover-header-text: var(--pgn-color-headings-base);
+  --pgn-color-popover-border: #00000033;
+  --pgn-color-popover-bg: var(--pgn-color-bg-base);
+  --pgn-color-pagination-dropdown-text-inverse: var(--pgn-color-white);
+  --pgn-color-pagination-focus-text: var(--pgn-color-black);
+  --pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
+  --pgn-color-pagination-border-disabled: var(--pgn-color-gray-100);
+  --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
+  --pgn-color-pagination-border-hover: var(--pgn-color-gray-200);
+  --pgn-color-pagination-border-base: var(--pgn-color-gray-200);
+  --pgn-color-pagination-bg-disabled: var(--pgn-color-white);
   --pgn-color-pagination-bg-active: var(--pgn-color-bg-active);
+  --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
   --pgn-color-pagination-text-disabled: var(--pgn-color-disabled);
+  --pgn-color-pagination-text-active: var(--pgn-color-active);
+  --pgn-color-pagination-text-hover: var(--pgn-color-link-hover);
+  --pgn-color-pagination-text-inverse: var(--pgn-color-white);
+  --pgn-color-pagination-text-base: var(--pgn-color-link-base);
+  --pgn-color-page-banner-text-warning: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
+  --pgn-color-page-banner-text-light: var(--pgn-color-black);
+  --pgn-color-page-banner-text-dark: var(--pgn-color-white);
   --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100);
+  --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
+  --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
+  --pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
+  --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
+  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
+  --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
+  --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
+  --pgn-color-navbar-light-toggler-border: #0000001A;
+  --pgn-color-navbar-light-disabled: #0000004D;
+  --pgn-color-navbar-light-active: #000000E6;
+  --pgn-color-navbar-light-hover: #000000B3;
+  --pgn-color-navbar-light-text: #00000080;
   --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active);
   --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active);
+  --pgn-color-navbar-dark-toggler-border: #FFFFFF1A;
+  --pgn-color-navbar-dark-disabled: #FFFFFF40;
+  --pgn-color-navbar-dark-active: var(--pgn-color-active);
+  --pgn-color-navbar-dark-hover: #FFFFFFBF;
+  --pgn-color-navbar-dark-text: #FFFFFF80;
+  --pgn-color-nav-light: #00000080;
+  --pgn-color-nav-dark: #FFFFFF80;
+  --pgn-color-nav-divider: var(--pgn-color-gray-100);
+  --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
+  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
   --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
+  --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
+  --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
+  --pgn-color-nav-pills-inverse-link-text-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-text-active: var(--pgn-color-primary-500);
+  --pgn-color-nav-pills-inverse-link-text-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
   --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
+  --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
   --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-nav-pills-base-link-active-text: var(--pgn-color-active);
+  --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
+  --pgn-color-nav-tabs-inverse-link-tab-content-color: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
+  --pgn-color-nav-tabs-inverse-link-bg-focus: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);
   --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
+  --pgn-color-nav-tabs-inverse-link-border-active: var(--pgn-color-nav-tabs-inverse-link-text-base);
+  --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
+  --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
+  --pgn-color-nav-tabs-base-link-active-bg: #00000000;
+  --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
+  --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
+  --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
+  --pgn-color-nav-tabs-base-bg-hover: #00000000;
+  --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-link-border: #00000000;
+  --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
+  --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
+  --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
+  --pgn-color-modal-content-border: #00000033;
+  --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
+  --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
   --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);
+  --pgn-color-menu-item-hover-border: var(--pgn-color-menu-item-bg);
   --pgn-color-menu-item-hover-bg: var(--pgn-color-btn-hover-bg-tertiary);
+  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-menu-item-border: var(--pgn-color-menu-item-bg);
+  --pgn-color-menu-item-bg: #00000000;
+  --pgn-color-menu-item-color: var(--pgn-color-body-base);
+  --pgn-color-menu-bg: var(--pgn-color-white);
+  --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200);
   --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg);
+  --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
+  --pgn-color-icon-button-black: var(--pgn-color-black);
+  --pgn-color-icon-button-accent: var(--pgn-color-white);
+  --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base);
+  --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base);
+  --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base);
+  --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base);
   --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base);
   --pgn-color-icon-button-text-danger-inverse-active-hover: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+  --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-text-danger-focus: var(--pgn-color-icon-button-text-danger-base);
+  --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base);
   --pgn-color-icon-button-text-warning-inverse-active-focus: var(--pgn-color-icon-button-text-warning-inverse-active-base);
   --pgn-color-icon-button-text-warning-inverse-active-hover: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+  --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-text-warning-focus: var(--pgn-color-icon-button-text-warning-base);
+  --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base);
   --pgn-color-icon-button-text-success-inverse-active-focus: var(--pgn-color-icon-button-text-success-inverse-active-base);
   --pgn-color-icon-button-text-success-inverse-active-hover: var(--pgn-color-icon-button-text-success-inverse-active-base);
+  --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-text-success-focus: var(--pgn-color-icon-button-text-success-base);
+  --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base);
+  --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base);
   --pgn-color-icon-button-text-secondary-inverse-active-focus: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
   --pgn-color-icon-button-text-secondary-inverse-active-hover: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+  --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base);
+  --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-danger-active-focus: var(--pgn-color-icon-button-bg-danger-active-base);
   --pgn-color-icon-button-bg-danger-active-hover: var(--pgn-color-icon-button-bg-danger-active-base);
+  --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-warning-active-focus: var(--pgn-color-icon-button-bg-warning-active-base);
   --pgn-color-icon-button-bg-warning-active-hover: var(--pgn-color-icon-button-bg-warning-active-base);
+  --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-success-active-focus: var(--pgn-color-icon-button-bg-success-active-base);
   --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
+  --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
   --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
-  --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
-  --pgn-color-link-brand-inline-hover-base: #51002BFF;
-  --pgn-color-link-brand-inline-decoration: #9D00544D;
-  --pgn-color-link-brand-hover: #51002BFF;
-  --pgn-color-link-muted-inline-hover-base: #020911FF;
-  --pgn-color-link-muted-inline-decoration: #0A30554D;
-  --pgn-color-link-muted-hover: #020911FF;
-  --pgn-color-link-inline-base: var(--pgn-color-info-500);
-  --pgn-color-link-base: var(--pgn-color-info-500);
+  --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-base: #00000000;
   --pgn-color-form-feedback-checked-invalid: #D64D59FF;
   --pgn-color-form-feedback-checked-valid: #1FAD6FFF;
   --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3A40;
@@ -1251,354 +660,776 @@
   --pgn-color-form-feedback-tooltip-valid: #FFFFFFFF;
   --pgn-color-form-feedback-icon-invalid: var(--pgn-color-form-feedback-invalid);
   --pgn-color-form-feedback-icon-valid: var(--pgn-color-form-feedback-valid);
+  --pgn-color-form-feedback-invalid: var(--pgn-color-danger-base);
+  --pgn-color-form-feedback-valid: var(--pgn-color-success-base);
+  --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border);
   --pgn-color-form-control-file-border-base: var(--pgn-color-form-input-border);
+  --pgn-color-form-control-file-button-bg: var(--pgn-color-form-input-group-addon-bg);
   --pgn-color-form-control-file-button-base: var(--pgn-color-form-control-file-base);
+  --pgn-color-form-control-file-bg-disabled: var(--pgn-color-form-input-bg-disabled);
   --pgn-color-form-control-file-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-file-base: var(--pgn-color-form-input-base);
   --pgn-color-form-control-range-thumb-bg-active: #000000FF;
   --pgn-color-form-control-range-thumb-bg-disabled: var(--pgn-color-disabled);
   --pgn-color-form-control-range-thumb-bg-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
+  --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border);
   --pgn-color-form-control-select-border-base: var(--pgn-color-form-input-border);
+  --pgn-color-form-control-select-bg-size: var(--pgn-color-gray-100);
+  --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
   --pgn-color-form-control-select-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-select-indicator-base: var(--pgn-color-theme-hover-gray);
   --pgn-color-form-control-select-disabled: var(--pgn-color-disabled);
+  --pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
+  --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg);
   --pgn-color-form-control-checkbox-indicator-indeterminate-bg: var(--pgn-color-bg-active);
+  --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
   --pgn-color-form-control-label-floating-text: #FFFFFF1A;
   --pgn-color-form-control-label-disabled: var(--pgn-color-disabled);
+  --pgn-color-form-control-label-base: inherit;
+  --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
   --pgn-color-form-control-indicator-active-bg: var(--pgn-color-bg-active);
+  --pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
+  --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
+  --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
+  --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
   --pgn-color-form-control-indicator-checked-bg-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base);
+  --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base);
   --pgn-color-form-control-indicator-checked-base: var(--pgn-color-bg-active);
+  --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
   --pgn-color-form-control-indicator-bg-base: var(--pgn-color-form-input-bg-base);
+  --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
   --pgn-color-form-input-focus-bg: var(--pgn-color-form-input-bg-base);
   --pgn-color-form-input-focus-border: var(--pgn-color-input-focus);
+  --pgn-color-form-input-focus-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
   --pgn-color-form-input-group-addon-border: var(--pgn-color-form-input-border);
+  --pgn-color-form-input-group-addon-base: var(--pgn-color-form-input-base);
+  --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-color-form-input-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-form-input-border: var(--pgn-color-gray-500);
+  --pgn-color-form-input-plaintext: var(--pgn-color-body-base);
+  --pgn-color-form-input-placeholder: var(--pgn-color-gray-500);
+  --pgn-color-form-input-base: var(--pgn-color-gray-700);
+  --pgn-color-dropzone-border-base: var(--pgn-color-gray-500);
+  --pgn-color-dropzone-restriction-msg: var(--pgn-color-gray-500);
   --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-dropdown-link-active-base: var(--pgn-color-active);
+  --pgn-color-dropdown-link-hover-bg: var(--pgn-color-light-300);
+  --pgn-color-dropdown-link-hover-base: #000000FF;
+  --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
+  --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
+  --pgn-color-dropdown-border: #00000026;
+  --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
+  --pgn-color-dropdown-header: var(--pgn-color-gray-500);
+  --pgn-color-dropdown-text: var(--pgn-color-body-base);
+  --pgn-color-data-table-border: var(--pgn-color-light-300);
+  --pgn-color-data-table-bg-is-loading: #FFFFFFB3;
+  --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
+  --pgn-color-code-pre: var(--pgn-color-gray-900);
+  --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
+  --pgn-color-code-kbd-base: var(--pgn-color-white);
+  --pgn-color-code-base: #E83E8CFF;
+  --pgn-color-close-button: var(--pgn-color-black);
   --pgn-color-chip-outline-light: var(--pgn-color-chip-label-base);
+  --pgn-color-chip-outline-dark: var(--pgn-color-white);
+  --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
+  --pgn-color-chip-label-base: var(--pgn-color-primary-700);
+  --pgn-color-chip-border-focus-selected-light: var(--pgn-color-dark-500);
+  --pgn-color-chip-border-focus-selected-dark: var(--pgn-color-chip-outline-dark);
+  --pgn-color-chip-border-base: var(--pgn-color-light-800);
+  --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
+  --pgn-color-chip-bg-light: var(--pgn-color-white);
+  --pgn-color-chip-text-dark: var(--pgn-color-white);
+  --pgn-color-chip-text-light: var(--pgn-color-black);
+  --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-divider-bg: var(--pgn-color-light-400);
   --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary);
+  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
+  --pgn-color-card-border-base: #00000020;
+  --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-card-base: inherit;
   --pgn-color-btn-disabled-link: var(--pgn-color-disabled);
+  --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-btn-disabled-border-inverse-warning: #00000000;
   --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
+  --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-outline-success: inherit;
+  --pgn-color-btn-disabled-border-inverse-success: #00000000;
   --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
+  --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-disabled-border-secondary: inherit;
+  --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-border-inverse-primary: #00000000;
   --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-disabled-border-inverse-light: #00000000;
+  --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light);
   --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-disabled-border-inverse-info: #00000000;
   --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info);
   --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-disabled-border-inverse-dark: #00000000;
+  --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark);
   --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger);
+  --pgn-color-btn-disabled-border-inverse-danger: #00000000;
   --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-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-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-disabled-bg-inverse-warning: inherit;
+  --pgn-color-btn-disabled-bg-outline-warning: inherit;
   --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-disabled-bg-inverse-success: inherit;
+  --pgn-color-btn-disabled-bg-outline-success: inherit;
   --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-bg-outline-secondary: inherit;
   --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-primary: var(--pgn-color-white);
+  --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
+  --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;
+  --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-disabled-bg-inverse-info: inherit;
+  --pgn-color-btn-disabled-bg-outline-info: inherit;
   --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-inverse-dark: inherit;
+  --pgn-color-btn-disabled-bg-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark);
+  --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-danger: var(--pgn-color-btn-bg-danger);
+  --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-disabled-bg-outline-brand: inherit;
+  --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
+  --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base);
   --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
+  --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base);
   --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
+  --pgn-color-btn-disabled-text-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-text-outline-secondary: inherit;
+  --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500);
   --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light);
   --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
+  --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base);
   --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
+  --pgn-color-btn-disabled-text-outline-dark: inherit;
   --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
+  --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
+  --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand);
+  --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500);
   --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
+  --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary);
   --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success);
+  --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success);
+  --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary);
   --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary);
   --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary);
   --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light);
+  --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white);
   --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light);
+  --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300);
   --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info);
+  --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info);
+  --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark);
   --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark);
   --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark);
+  --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger);
   --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand);
+  --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand);
   --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand);
   --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning);
+  --pgn-color-btn-focus-bg-outline-warning: inherit;
   --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-focus-bg-tertiary: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success);
+  --pgn-color-btn-focus-bg-outline-success: inherit;
   --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary);
+  --pgn-color-btn-focus-bg-outline-secondary: #00000000;
   --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
   --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary);
+  --pgn-color-btn-focus-bg-outline-primary: inherit;
+  --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
   --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light);
+  --pgn-color-btn-focus-bg-outline-light: #00000000;
+  --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info);
+  --pgn-color-btn-focus-bg-outline-info: inherit;
   --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
   --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark);
+  --pgn-color-btn-focus-bg-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
+  --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger);
+  --pgn-color-btn-focus-bg-outline-danger: inherit;
   --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
+  --pgn-color-btn-focus-bg-outline-brand: inherit;
   --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand);
+  --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning);
   --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary);
+  --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success);
+  --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white);
   --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white);
   --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
   --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
   --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light);
+  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light);
   --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white);
   --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
   --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark);
+  --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white);
   --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger);
+  --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand);
+  --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
   --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
   --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning);
   --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
   --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success);
   --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
   --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary);
+  --pgn-color-btn-focus-text-inverse-secondary: inherit;
+  --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary);
+  --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary);
   --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light);
   --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
   --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info);
   --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-focus-text-outline-dark: inherit;
+  --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
   --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
   --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger);
   --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger);
+  --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
+  --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand);
   --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-border-inverse-warning: inherit;
+  --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-active-border-tertiary: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-active-border-inverse-success: inherit;
+  --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-border-inverse-secondary: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
+  --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-border-inverse-primary: #00000000;
+  --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
   --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary);
   --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary);
+  --pgn-color-btn-active-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-active-border-inverse-light: inherit;
   --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light);
   --pgn-color-btn-active-border-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-active-border-inverse-info: #00000000;
+  --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info);
+  --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-active-border-inverse-dark: #00000000;
   --pgn-color-btn-active-border-outline-dark: var(--pgn-color-theme-active-dark);
   --pgn-color-btn-active-border-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-active-border-inverse-danger: #00000000;
+  --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-active-border-inverse-brand: #00000000;
   --pgn-color-btn-active-border-outline-brand: var(--pgn-color-theme-active-brand);
   --pgn-color-btn-active-border-brand: var(--pgn-color-theme-active-brand);
+  --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning);
+  --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning);
+  --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning);
+  --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary);
+  --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500);
+  --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success);
+  --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success);
+  --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success);
+  --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary);
+  --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary);
+  --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary);
+  --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100);
   --pgn-color-btn-active-bg-inverse-outline-primary: var(--pgn-color-theme-bg-primary);
   --pgn-color-btn-active-bg-outline-primary: var(--pgn-color-theme-bg-primary);
   --pgn-color-btn-active-bg-primary: var(--pgn-color-theme-active-primary);
   --pgn-color-btn-active-bg-inverse-outline-light: var(--pgn-color-theme-bg-light);
+  --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100);
   --pgn-color-btn-active-bg-outline-light: var(--pgn-color-theme-bg-light);
   --pgn-color-btn-active-bg-light: var(--pgn-color-theme-active-light);
+  --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info);
+  --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info);
+  --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info);
   --pgn-color-btn-active-bg-inverse-outline-dark: var(--pgn-color-theme-bg-dark);
+  --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100);
   --pgn-color-btn-active-bg-outline-dark: var(--pgn-color-theme-bg-dark);
   --pgn-color-btn-active-bg-dark: var(--pgn-color-theme-active-dark);
+  --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger);
+  --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger);
+  --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger);
+  --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100);
   --pgn-color-btn-active-bg-inverse-outline-brand: var(--pgn-color-theme-bg-brand);
   --pgn-color-btn-active-bg-outline-brand: var(--pgn-color-theme-bg-brand);
   --pgn-color-btn-active-bg-brand: var(--pgn-color-theme-active-brand);
+  --pgn-color-btn-active-text-inverse-outline-warning: #454545FF;
   --pgn-color-btn-active-text-inverse-warning: #CCAE00FF;
+  --pgn-color-btn-active-text-outline-warning: #454545FF;
+  --pgn-color-btn-active-text-warning: #313131FF;
+  --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-active-text-inverse-outline-success: #454545FF;
   --pgn-color-btn-active-text-inverse-success: #0F5737FF;
+  --pgn-color-btn-active-text-outline-success: #454545FF;
+  --pgn-color-btn-active-text-success: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF;
   --pgn-color-btn-active-text-inverse-secondary: #2B2B2BFF;
+  --pgn-color-btn-active-text-outline-secondary: #454545FF;
+  --pgn-color-btn-active-text-secondary: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-primary: #454545FF;
+  --pgn-color-btn-active-text-inverse-primary: #051627FF;
+  --pgn-color-btn-active-text-outline-primary: #454545FF;
+  --pgn-color-btn-active-text-primary: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-light: #454545FF;
+  --pgn-color-btn-active-text-inverse-light: #CAC3BFFF;
+  --pgn-color-btn-active-text-outline-light: #454545FF;
+  --pgn-color-btn-active-text-light: #313131FF;
+  --pgn-color-btn-active-text-inverse-outline-info: #454545FF;
   --pgn-color-btn-active-text-inverse-info: #004C77FF;
+  --pgn-color-btn-active-text-outline-info: #454545FF;
+  --pgn-color-btn-active-text-info: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-dark: #454545FF;
+  --pgn-color-btn-active-text-inverse-dark: #142018FF;
+  --pgn-color-btn-active-text-outline-dark: #454545FF;
+  --pgn-color-btn-active-text-dark: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-danger: #454545FF;
   --pgn-color-btn-active-text-inverse-danger: #9A232EFF;
+  --pgn-color-btn-active-text-outline-danger: #454545FF;
+  --pgn-color-btn-active-text-danger: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-brand: #454545FF;
+  --pgn-color-btn-active-text-inverse-brand: #6A0039FF;
+  --pgn-color-btn-active-text-outline-brand: #454545FF;
+  --pgn-color-btn-active-text-brand: #FFFFFFFF;
+  --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-hover-border-inverse-warning: #00000000;
   --pgn-color-btn-hover-border-outline-warning: var(--pgn-color-warning-900);
+  --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-hover-border-tertiary: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-hover-border-inverse-success: #00000000;
   --pgn-color-btn-hover-border-outline-success: var(--pgn-color-success-900);
+  --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-border-inverse-secondary: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
   --pgn-color-btn-hover-border-outline-secondary: var(--pgn-color-secondary-900);
+  --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-border-inverse-primary: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
+  --pgn-color-btn-hover-border-outline-primary: var(--pgn-color-primary-900);
   --pgn-color-btn-hover-border-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-hover-border-inverse-light: #00000000;
+  --pgn-color-btn-hover-border-outline-light: var(--pgn-color-light-900);
   --pgn-color-btn-hover-border-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-hover-border-inverse-info: #00000000;
   --pgn-color-btn-hover-border-outline-info: var(--pgn-color-info-900);
+  --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-hover-border-inverse-dark: #00000000;
+  --pgn-color-btn-hover-border-outline-dark: var(--pgn-color-dark-900);
   --pgn-color-btn-hover-border-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-hover-border-inverse-danger: #00000000;
   --pgn-color-btn-hover-border-outline-danger: var(--pgn-color-danger-900);
+  --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-border-inverse-brand: #00000000;
+  --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-hover-border-outline-brand: var(--pgn-color-brand-900);
   --pgn-color-btn-hover-border-brand: var(--pgn-color-theme-hover-brand);
   --pgn-color-btn-hover-bg-inverse-outline-warning: var(--pgn-color-warning-100);
+  --pgn-color-btn-hover-bg-inverse-warning: #323232FF;
   --pgn-color-btn-hover-bg-outline-warning: var(--pgn-color-warning-100);
+  --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A;
+  --pgn-color-btn-hover-bg-tertiary: var(--pgn-color-light-500);
   --pgn-color-btn-hover-bg-inverse-outline-success: var(--pgn-color-success-100);
+  --pgn-color-btn-hover-bg-inverse-success: #ECECECFF;
   --pgn-color-btn-hover-bg-outline-success: var(--pgn-color-success-100);
+  --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success);
   --pgn-color-btn-hover-bg-inverse-outline-secondary: var(--pgn-color-secondary-100);
+  --pgn-color-btn-hover-bg-inverse-secondary: #ECECECFF;
   --pgn-color-btn-hover-bg-outline-secondary: var(--pgn-color-secondary-100);
+  --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-bg-inverse-outline-primary: var(--pgn-color-primary-100);
   --pgn-color-btn-hover-bg-inverse-primary: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-primary: var(--pgn-color-primary-100);
   --pgn-color-btn-hover-bg-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-bg-inverse-outline-light: var(--pgn-color-light-100);
   --pgn-color-btn-hover-bg-inverse-light: #323232FF;
+  --pgn-color-btn-hover-bg-outline-light: var(--pgn-color-light-100);
   --pgn-color-btn-hover-bg-light: var(--pgn-color-theme-hover-light);
   --pgn-color-btn-hover-bg-inverse-outline-info: var(--pgn-color-info-100);
+  --pgn-color-btn-hover-bg-inverse-info: #ECECECFF;
   --pgn-color-btn-hover-bg-outline-info: var(--pgn-color-info-100);
+  --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-bg-inverse-outline-dark: var(--pgn-color-dark-100);
   --pgn-color-btn-hover-bg-inverse-dark: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-dark: var(--pgn-color-dark-100);
   --pgn-color-btn-hover-bg-dark: var(--pgn-color-theme-hover-dark);
   --pgn-color-btn-hover-bg-inverse-outline-danger: var(--pgn-color-danger-100);
+  --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF;
   --pgn-color-btn-hover-bg-outline-danger: var(--pgn-color-danger-100);
+  --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-bg-inverse-outline-brand: var(--pgn-color-brand-100);
   --pgn-color-btn-hover-bg-inverse-brand: #ECECECFF;
+  --pgn-color-btn-hover-bg-outline-brand: var(--pgn-color-brand-100);
   --pgn-color-btn-hover-bg-brand: var(--pgn-color-theme-hover-brand);
+  --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning);
   --pgn-color-btn-hover-text-inverse-warning: #D9B800FF;
+  --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning);
+  --pgn-color-btn-hover-text-warning: #414141FF;
+  --pgn-color-btn-hover-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-hover-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success);
   --pgn-color-btn-hover-text-inverse-success: #11623EFF;
+  --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success);
+  --pgn-color-btn-hover-text-success: #FFFFFFFF;
+  --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary);
   --pgn-color-btn-hover-text-inverse-secondary: #323232FF;
+  --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary);
+  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-outline-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-text-inverse-primary: #061D33FF;
   --pgn-color-btn-hover-text-outline-primary: var(--pgn-color-theme-hover-primary);
+  --pgn-color-btn-hover-text-primary: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-outline-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-text-inverse-light: #D0C9C6FF;
   --pgn-color-btn-hover-text-outline-light: var(--pgn-color-theme-hover-light);
+  --pgn-color-btn-hover-text-light: #414141FF;
+  --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info);
   --pgn-color-btn-hover-text-inverse-info: #005484FF;
+  --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info);
+  --pgn-color-btn-hover-text-info: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-outline-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-text-inverse-dark: #18271DFF;
   --pgn-color-btn-hover-text-outline-dark: var(--pgn-color-theme-hover-dark);
+  --pgn-color-btn-hover-text-dark: #FFFFFFFF;
+  --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger);
   --pgn-color-btn-hover-text-inverse-danger: #A42631FF;
+  --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger);
+  --pgn-color-btn-hover-text-danger: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-outline-brand: var(--pgn-color-theme-hover-brand);
+  --pgn-color-btn-hover-text-inverse-brand: #770040FF;
   --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-theme-hover-brand);
+  --pgn-color-btn-hover-text-brand: #FFFFFFFF;
+  --pgn-color-btn-border-inverse-outline-warning: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-warning: #00000000;
+  --pgn-color-btn-border-outline-warning: var(--pgn-color-warning-base);
   --pgn-color-btn-border-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-border-tertiary: #00000000;
+  --pgn-color-btn-border-inverse-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-success: #00000000;
+  --pgn-color-btn-border-outline-success: var(--pgn-color-success-base);
   --pgn-color-btn-border-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-border-inverse-secondary: #00000000;
+  --pgn-color-btn-border-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-border-outline-secondary: var(--pgn-color-secondary-base);
   --pgn-color-btn-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-border-inverse-primary: #00000000;
+  --pgn-color-btn-border-inverse-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-border-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-border-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-border-inverse-outline-light: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-light: #00000000;
+  --pgn-color-btn-border-outline-light: var(--pgn-color-light-base);
+  --pgn-color-btn-border-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-border-inverse-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-info: #00000000;
+  --pgn-color-btn-border-outline-info: var(--pgn-color-info-base);
   --pgn-color-btn-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-border-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-dark: #00000000;
+  --pgn-color-btn-border-outline-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-border-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-border-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-border-inverse-danger: #00000000;
+  --pgn-color-btn-border-outline-danger: var(--pgn-color-danger-base);
   --pgn-color-btn-border-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-border-inverse-brand: #00000000;
+  --pgn-color-btn-border-inverse-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-border-outline-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-border-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-bg-inverse-outline-warning: inherit;
   --pgn-color-btn-bg-inverse-warning: #454545FF;
+  --pgn-color-btn-bg-outline-warning: inherit;
+  --pgn-color-btn-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-bg-inverse-tertiary: #00000000;
+  --pgn-color-btn-bg-tertiary: #00000000;
+  --pgn-color-btn-bg-inverse-outline-success: inherit;
   --pgn-color-btn-bg-inverse-success: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-success: inherit;
+  --pgn-color-btn-bg-success: var(--pgn-color-success-base);
   --pgn-color-btn-bg-inverse-secondary: #FFFFFFFF;
+  --pgn-color-btn-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-bg-outline-secondary: inherit;
+  --pgn-color-btn-bg-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-bg-inverse-primary: #FFFFFFFF;
+  --pgn-color-btn-bg-inverse-outline-primary: #00000000;
+  --pgn-color-btn-bg-outline-primary: #00000000;
+  --pgn-color-btn-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-bg-outline-light: inherit;
+  --pgn-color-btn-bg-inverse-light: #454545FF;
+  --pgn-color-btn-bg-light: var(--pgn-color-light-base);
+  --pgn-color-btn-bg-inverse-outline-info: inherit;
   --pgn-color-btn-bg-inverse-info: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-info: inherit;
+  --pgn-color-btn-bg-info: var(--pgn-color-info-base);
+  --pgn-color-btn-bg-inverse-outline-dark: #00000000;
+  --pgn-color-btn-bg-inverse-dark: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-dark: inherit;
+  --pgn-color-btn-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-bg-inverse-outline-danger: #00000000;
   --pgn-color-btn-bg-inverse-danger: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-danger: inherit;
+  --pgn-color-btn-bg-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-bg-inverse-outline-brand: #00000000;
+  --pgn-color-btn-bg-inverse-brand: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-brand: inherit;
+  --pgn-color-btn-bg-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-text-inverse-outline-warning: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-text-outline-warning: var(--pgn-color-warning-base);
   --pgn-color-btn-text-warning: #454545FF;
+  --pgn-color-btn-text-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-text-tertiary: var(--pgn-color-gray-700);
+  --pgn-color-btn-text-inverse-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-success: var(--pgn-color-success-base);
+  --pgn-color-btn-text-outline-success: var(--pgn-color-success-base);
   --pgn-color-btn-text-success: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-secondary: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-text-outline-secondary: var(--pgn-color-secondary-base);
   --pgn-color-btn-text-secondary: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-primary: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-outline-primary: var(--pgn-color-primary-base);
+  --pgn-color-btn-text-primary: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-light: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-light: var(--pgn-color-light-base);
+  --pgn-color-btn-text-outline-light: var(--pgn-color-light-base);
+  --pgn-color-btn-text-light: #454545FF;
+  --pgn-color-btn-text-inverse-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-info: var(--pgn-color-info-base);
+  --pgn-color-btn-text-outline-info: var(--pgn-color-info-base);
   --pgn-color-btn-text-info: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-dark: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-text-outline-dark: var(--pgn-color-dark-base);
+  --pgn-color-btn-text-dark: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-danger: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-text-outline-danger: var(--pgn-color-danger-base);
   --pgn-color-btn-text-danger: #FFFFFFFF;
+  --pgn-color-btn-text-inverse-outline-brand: var(--pgn-color-white);
+  --pgn-color-btn-text-inverse-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-text-outline-brand: var(--pgn-color-brand-base);
+  --pgn-color-btn-text-brand: #FFFFFFFF;
+  --pgn-color-bubble-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-bubble-bg-error: var(--pgn-color-danger-base);
+  --pgn-color-bubble-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-bubble-bg-success: var(--pgn-color-success-base);
+  --pgn-color-bubble-text-primary: var(--pgn-color-white);
+  --pgn-color-bubble-text-error: var(--pgn-color-white);
+  --pgn-color-bubble-text-warning: var(--pgn-color-white);
+  --pgn-color-bubble-text-success: var(--pgn-color-white);
+  --pgn-color-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
+  --pgn-color-breadcrumb-inverse-active: var(--pgn-color-light-500);
+  --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
+  --pgn-color-breadcrumb-active: var(--pgn-color-gray-500);
+  --pgn-color-breadcrumb-base: var(--pgn-color-primary-500);
+  --pgn-color-badge-focus-box-shadow-dark: #273F2F0D;
+  --pgn-color-badge-focus-box-shadow-light: #E1DDDB0D;
   --pgn-color-badge-focus-box-shadow-info: #006DAA0D;
   --pgn-color-badge-focus-box-shadow-warning: #FFD9000D;
   --pgn-color-badge-focus-box-shadow-danger: #C32D3A0D;
   --pgn-color-badge-focus-box-shadow-success: #1782530D;
   --pgn-color-badge-focus-box-shadow-secondary: #4545450D;
+  --pgn-color-badge-focus-box-shadow-primary: #0A30550D;
+  --pgn-color-badge-focus-bg-dark: #142018FF;
+  --pgn-color-badge-focus-bg-light: #CAC3BFFF;
   --pgn-color-badge-focus-bg-info: #004C77FF;
   --pgn-color-badge-focus-bg-warning: #CCAE00FF;
   --pgn-color-badge-focus-bg-danger: #9A232EFF;
   --pgn-color-badge-focus-bg-success: #0F5737FF;
   --pgn-color-badge-focus-bg-secondary: #2B2B2BFF;
+  --pgn-color-badge-focus-bg-primary: #051627FF;
+  --pgn-color-badge-focus-dark: var(--pgn-color-badge-text-dark);
+  --pgn-color-badge-focus-light: var(--pgn-color-badge-text-light);
   --pgn-color-badge-focus-info: var(--pgn-color-badge-text-info);
   --pgn-color-badge-focus-danger: var(--pgn-color-badge-text-danger);
   --pgn-color-badge-focus-warning: var(--pgn-color-badge-text-warning);
   --pgn-color-badge-focus-success: var(--pgn-color-badge-text-success);
   --pgn-color-badge-focus-secondary: var(--pgn-color-badge-text-secondary);
-  --pgn-color-theme-active-danger: var(--pgn-color-danger-900);
-  --pgn-color-theme-active-warning: var(--pgn-color-warning-900);
-  --pgn-color-theme-active-info: var(--pgn-color-info-900);
-  --pgn-color-theme-active-success: var(--pgn-color-success-900);
-  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900);
-  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700);
-  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700);
-  --pgn-color-theme-hover-info: var(--pgn-color-info-700);
-  --pgn-color-theme-hover-success: var(--pgn-color-success-700);
-  --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700);
-  --pgn-color-theme-default-danger: var(--pgn-color-danger-500);
-  --pgn-color-theme-default-warning: var(--pgn-color-warning-500);
-  --pgn-color-theme-default-info: var(--pgn-color-info-500);
-  --pgn-color-theme-default-success: var(--pgn-color-success-500);
-  --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
-  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
-  --pgn-color-theme-focus-info: var(--pgn-color-info-500);
-  --pgn-color-theme-focus-success: var(--pgn-color-success-500);
-  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
-  --pgn-color-theme-border-danger: var(--pgn-color-danger-200);
-  --pgn-color-theme-border-warning: var(--pgn-color-warning-200);
-  --pgn-color-theme-border-info: var(--pgn-color-info-200);
-  --pgn-color-theme-border-success: var(--pgn-color-success-200);
-  --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200);
-  --pgn-color-theme-bg-danger: var(--pgn-color-danger-100);
-  --pgn-color-theme-bg-warning: var(--pgn-color-warning-100);
-  --pgn-color-theme-bg-info: var(--pgn-color-info-100);
-  --pgn-color-theme-bg-success: var(--pgn-color-success-100);
-  --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
-  --pgn-color-table-caption: var(--pgn-color-text-muted);
-  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
-  --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
-  --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
-  --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
-  --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
-  --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
-  --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active);
-  --pgn-color-pagination-text-base: var(--pgn-color-link-base);
-  --pgn-color-nav-tabs-inverse-link-bg-active: var(--pgn-color-nav-tabs-inverse-link-bg-hover);
-  --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg);
-  --pgn-color-link-brand-inline-hover-decoration: var(--pgn-color-link-brand-inline-hover-base);
-  --pgn-color-link-muted-inline-hover-decoration: var(--pgn-color-link-muted-inline-hover-base);
-  --pgn-color-link-inline-hover-base: #003C5EFF;
-  --pgn-color-link-inline-decoration: #006DAA4D;
-  --pgn-color-link-hover: #003C5EFF;
-  --pgn-color-form-control-file-border-focus: var(--pgn-color-form-input-focus-border);
-  --pgn-color-form-control-select-border-focus: var(--pgn-color-form-input-focus-border);
-  --pgn-color-form-control-checkbox-indicator-indeterminate-border: var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg);
-  --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
-  --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
-  --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
-  --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
-  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
-  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
-  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
-  --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light);
-  --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark);
-  --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger);
-  --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning);
-  --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success);
-  --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary);
-  --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
-  --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light);
-  --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info);
-  --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger);
-  --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand);
-  --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning);
-  --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning);
-  --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success);
-  --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success);
-  --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary);
-  --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary);
-  --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info);
-  --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info);
-  --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger);
-  --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger);
-  --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning);
-  --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success);
-  --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary);
-  --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info);
-  --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger);
-  --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning);
-  --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success);
-  --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info);
-  --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger);
-  --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning);
-  --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success);
-  --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary);
-  --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info);
-  --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger);
-  --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning);
-  --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning);
-  --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success);
-  --pgn-color-btn-active-border-success: var(--pgn-color-theme-active-success);
-  --pgn-color-btn-active-border-outline-secondary: var(--pgn-color-theme-active-secondary);
-  --pgn-color-btn-active-border-secondary: var(--pgn-color-theme-active-secondary);
-  --pgn-color-btn-active-border-outline-info: var(--pgn-color-theme-active-info);
-  --pgn-color-btn-active-border-info: var(--pgn-color-theme-active-info);
-  --pgn-color-btn-active-border-outline-danger: var(--pgn-color-theme-active-danger);
-  --pgn-color-btn-active-border-danger: var(--pgn-color-theme-active-danger);
-  --pgn-color-btn-active-bg-inverse-outline-warning: var(--pgn-color-theme-bg-warning);
-  --pgn-color-btn-active-bg-outline-warning: var(--pgn-color-theme-bg-warning);
-  --pgn-color-btn-active-bg-warning: var(--pgn-color-theme-active-warning);
-  --pgn-color-btn-active-bg-inverse-outline-success: var(--pgn-color-theme-bg-success);
-  --pgn-color-btn-active-bg-outline-success: var(--pgn-color-theme-bg-success);
-  --pgn-color-btn-active-bg-success: var(--pgn-color-theme-active-success);
-  --pgn-color-btn-active-bg-inverse-outline-secondary: var(--pgn-color-theme-bg-secondary);
-  --pgn-color-btn-active-bg-outline-secondary: var(--pgn-color-theme-bg-secondary);
-  --pgn-color-btn-active-bg-secondary: var(--pgn-color-theme-active-secondary);
-  --pgn-color-btn-active-bg-inverse-outline-info: var(--pgn-color-theme-bg-info);
-  --pgn-color-btn-active-bg-outline-info: var(--pgn-color-theme-bg-info);
-  --pgn-color-btn-active-bg-info: var(--pgn-color-theme-active-info);
-  --pgn-color-btn-active-bg-inverse-outline-danger: var(--pgn-color-theme-bg-danger);
-  --pgn-color-btn-active-bg-outline-danger: var(--pgn-color-theme-bg-danger);
-  --pgn-color-btn-active-bg-danger: var(--pgn-color-theme-active-danger);
-  --pgn-color-btn-active-text-inverse-outline-primary: #454545FF;
-  --pgn-color-btn-active-text-outline-primary: #454545FF;
-  --pgn-color-btn-active-text-primary: #FFFFFFFF;
-  --pgn-color-btn-active-text-inverse-outline-light: #454545FF;
-  --pgn-color-btn-active-text-outline-light: #454545FF;
-  --pgn-color-btn-active-text-light: #313131FF;
-  --pgn-color-btn-active-text-inverse-outline-dark: #454545FF;
-  --pgn-color-btn-active-text-outline-dark: #454545FF;
-  --pgn-color-btn-active-text-dark: #FFFFFFFF;
-  --pgn-color-btn-active-text-inverse-outline-brand: #454545FF;
-  --pgn-color-btn-active-text-outline-brand: #454545FF;
-  --pgn-color-btn-active-text-brand: #FFFFFFFF;
-  --pgn-color-btn-hover-border-warning: var(--pgn-color-theme-hover-warning);
-  --pgn-color-btn-hover-border-success: var(--pgn-color-theme-hover-success);
-  --pgn-color-btn-hover-border-secondary: var(--pgn-color-theme-hover-secondary);
-  --pgn-color-btn-hover-border-info: var(--pgn-color-theme-hover-info);
-  --pgn-color-btn-hover-border-danger: var(--pgn-color-theme-hover-danger);
-  --pgn-color-btn-hover-bg-inverse-warning: #323232FF;
-  --pgn-color-btn-hover-bg-warning: var(--pgn-color-theme-hover-warning);
-  --pgn-color-btn-hover-bg-inverse-success: #ECECECFF;
-  --pgn-color-btn-hover-bg-success: var(--pgn-color-theme-hover-success);
-  --pgn-color-btn-hover-bg-inverse-secondary: #ECECECFF;
-  --pgn-color-btn-hover-bg-secondary: var(--pgn-color-theme-hover-secondary);
-  --pgn-color-btn-hover-bg-inverse-info: #ECECECFF;
-  --pgn-color-btn-hover-bg-info: var(--pgn-color-theme-hover-info);
-  --pgn-color-btn-hover-bg-inverse-danger: #ECECECFF;
-  --pgn-color-btn-hover-bg-danger: var(--pgn-color-theme-hover-danger);
-  --pgn-color-btn-hover-text-inverse-outline-warning: var(--pgn-color-theme-hover-warning);
-  --pgn-color-btn-hover-text-outline-warning: var(--pgn-color-theme-hover-warning);
-  --pgn-color-btn-hover-text-inverse-outline-success: var(--pgn-color-theme-hover-success);
-  --pgn-color-btn-hover-text-outline-success: var(--pgn-color-theme-hover-success);
-  --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary);
-  --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary);
-  --pgn-color-btn-hover-text-primary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-light: #414141FF;
-  --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info);
-  --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info);
-  --pgn-color-btn-hover-text-dark: #FFFFFFFF;
-  --pgn-color-btn-hover-text-inverse-outline-danger: var(--pgn-color-theme-hover-danger);
-  --pgn-color-btn-hover-text-outline-danger: var(--pgn-color-theme-hover-danger);
-  --pgn-color-btn-hover-text-brand: #FFFFFFFF;
+  --pgn-color-badge-focus-primary: var(--pgn-color-badge-text-primary);
+  --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-badge-bg-light: var(--pgn-color-light-base);
+  --pgn-color-badge-bg-info: var(--pgn-color-info-base);
+  --pgn-color-badge-bg-danger: var(--pgn-color-danger-base);
+  --pgn-color-badge-bg-warning: var(--pgn-color-warning-base);
+  --pgn-color-badge-bg-success: var(--pgn-color-success-base);
+  --pgn-color-badge-bg-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
+  --pgn-color-badge-text-dark: #FFFFFFFF;
+  --pgn-color-badge-text-light: #454545FF;
+  --pgn-color-badge-text-info: #FFFFFFFF;
+  --pgn-color-badge-text-warning: #454545FF;
+  --pgn-color-badge-text-danger: #FFFFFFFF;
+  --pgn-color-badge-text-success: #FFFFFFFF;
+  --pgn-color-badge-text-secondary: #FFFFFFFF;
+  --pgn-color-badge-text-primary: #FFFFFFFF;
+  --pgn-color-avatar-border: var(--pgn-color-light-300);
+  --pgn-color-annotation-bg-dark: var(--pgn-color-dark-base);
+  --pgn-color-annotation-bg-light: var(--pgn-color-white);
+  --pgn-color-annotation-bg-error: var(--pgn-color-danger-base);
+  --pgn-color-annotation-bg-warning: var(--pgn-color-accent-b);
+  --pgn-color-annotation-bg-success: var(--pgn-color-success-base);
+  --pgn-color-annotation-text-dark: var(--pgn-color-white);
+  --pgn-color-annotation-text-light: var(--pgn-color-primary-500);
+  --pgn-color-annotation-text-error: var(--pgn-color-white);
+  --pgn-color-annotation-text-warning: var(--pgn-color-black);
+  --pgn-color-annotation-text-success: var(--pgn-color-white);
   --pgn-color-alert-border-warning: var(--pgn-color-theme-border-warning);
   --pgn-color-alert-border-danger: var(--pgn-color-theme-border-danger);
   --pgn-color-alert-border-info: var(--pgn-color-theme-border-info);
@@ -1611,34 +1442,622 @@
   --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger);
   --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info);
   --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success);
+  --pgn-color-alert-content: var(--pgn-color-gray-700);
+  --pgn-color-alert-title: var(--pgn-color-black);
+  --pgn-color-theme-active-gray: var(--pgn-color-gray-900); /* Theme-specific gray active color. */
+  --pgn-color-theme-active-dark: var(--pgn-color-dark-900); /* Theme-specific dark active color. */
+  --pgn-color-theme-active-light: var(--pgn-color-light-900); /* Theme-specific light active color. */
+  --pgn-color-theme-active-danger: var(--pgn-color-danger-900); /* Theme-specific danger active color. */
+  --pgn-color-theme-active-warning: var(--pgn-color-warning-900); /* Theme-specific warning active color. */
+  --pgn-color-theme-active-info: var(--pgn-color-info-900); /* Theme-specific info active color. */
+  --pgn-color-theme-active-success: var(--pgn-color-success-900); /* Theme-specific success active color. */
+  --pgn-color-theme-active-brand: var(--pgn-color-brand-900); /* Theme-specific brand active color. */
+  --pgn-color-theme-active-secondary: var(--pgn-color-secondary-900); /* Theme-specific secondary active color. */
+  --pgn-color-theme-active-primary: var(--pgn-color-primary-900); /* Theme-specific primary active color. */
+  --pgn-color-theme-hover-gray: var(--pgn-color-gray-700); /* Theme-specific gray hover color. */
+  --pgn-color-theme-hover-dark: var(--pgn-color-dark-700); /* Theme-specific dark hover color. */
+  --pgn-color-theme-hover-light: var(--pgn-color-light-700); /* Theme-specific light hover color. */
+  --pgn-color-theme-hover-danger: var(--pgn-color-danger-700); /* Theme-specific danger hover color. */
+  --pgn-color-theme-hover-warning: var(--pgn-color-warning-700); /* Theme-specific warning hover color. */
+  --pgn-color-theme-hover-info: var(--pgn-color-info-700); /* Theme-specific info hover color. */
+  --pgn-color-theme-hover-success: var(--pgn-color-success-700); /* Theme-specific success hover color. */
+  --pgn-color-theme-hover-brand: var(--pgn-color-brand-700); /* Theme-specific brand hover color. */
+  --pgn-color-theme-hover-secondary: var(--pgn-color-secondary-700); /* Theme-specific secondary hover color. */
+  --pgn-color-theme-hover-primary: var(--pgn-color-primary-700); /* Theme-specific primary hover color. */
+  --pgn-color-theme-default-gray: var(--pgn-color-gray-500); /* Theme-specific gray default color. */
+  --pgn-color-theme-default-dark: var(--pgn-color-dark-500); /* Theme-specific dark default color. */
+  --pgn-color-theme-default-light: var(--pgn-color-light-500); /* Theme-specific light default color. */
+  --pgn-color-theme-default-danger: var(--pgn-color-danger-500); /* Theme-specific danger default color. */
+  --pgn-color-theme-default-warning: var(--pgn-color-warning-500); /* Theme-specific warning default color. */
+  --pgn-color-theme-default-info: var(--pgn-color-info-500); /* Theme-specific info default color. */
+  --pgn-color-theme-default-success: var(--pgn-color-success-500); /* Theme-specific success default color. */
+  --pgn-color-theme-default-brand: var(--pgn-color-brand-500); /* Theme-specific brand default color. */
+  --pgn-color-theme-default-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary default color. */
+  --pgn-color-theme-default-primary: var(--pgn-color-primary-500); /* Theme-specific primary default color. */
+  --pgn-color-theme-focus-gray: var(--pgn-color-gray-500); /* Theme-specific gray focus color. */
+  --pgn-color-theme-focus-dark: var(--pgn-color-dark-500); /* Theme-specific dark focus color. */
+  --pgn-color-theme-focus-light: var(--pgn-color-light-500); /* Theme-specific light focus color. */
+  --pgn-color-theme-focus-danger: var(--pgn-color-danger-500); /* Theme-specific danger focus color. */
+  --pgn-color-theme-focus-warning: var(--pgn-color-warning-500); /* Theme-specific warning focus color. */
+  --pgn-color-theme-focus-info: var(--pgn-color-info-500); /* Theme-specific info focus color. */
+  --pgn-color-theme-focus-success: var(--pgn-color-success-500); /* Theme-specific success focus color. */
+  --pgn-color-theme-focus-brand: var(--pgn-color-brand-500); /* Theme-specific brand focus color. */
+  --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500); /* Theme-specific secondary focus color. */
+  --pgn-color-theme-focus-primary: var(--pgn-color-primary-500); /* Theme-specific primary focus color. */
+  --pgn-color-theme-border-gray: var(--pgn-color-gray-200); /* Theme-specific gray border color. */
+  --pgn-color-theme-border-dark: var(--pgn-color-dark-200); /* Theme-specific dark border color. */
+  --pgn-color-theme-border-light: var(--pgn-color-light-200); /* Theme-specific light border color. */
+  --pgn-color-theme-border-danger: var(--pgn-color-danger-200); /* Theme-specific danger border color. */
+  --pgn-color-theme-border-warning: var(--pgn-color-warning-200); /* Theme-specific warning border color. */
+  --pgn-color-theme-border-info: var(--pgn-color-info-200); /* Theme-specific info border color. */
+  --pgn-color-theme-border-success: var(--pgn-color-success-200); /* Theme-specific success border color. */
+  --pgn-color-theme-border-brand: var(--pgn-color-brand-200); /* Theme-specific brand border color. */
+  --pgn-color-theme-border-secondary: var(--pgn-color-secondary-200); /* Theme-specific secondary border color. */
+  --pgn-color-theme-border-primary: var(--pgn-color-primary-200); /* Theme-specific primary border color. */
+  --pgn-color-theme-bg-gray: var(--pgn-color-gray-100); /* Theme-specific gray background color. */
+  --pgn-color-theme-bg-dark: var(--pgn-color-dark-100); /* Theme-specific dark background color. */
+  --pgn-color-theme-bg-light: var(--pgn-color-light-100); /* Theme-specific light background color. */
+  --pgn-color-theme-bg-danger: var(--pgn-color-danger-100); /* Theme-specific danger background color. */
+  --pgn-color-theme-bg-warning: var(--pgn-color-warning-100); /* Theme-specific warning background color. */
+  --pgn-color-theme-bg-info: var(--pgn-color-info-100); /* Theme-specific info background color. */
+  --pgn-color-theme-bg-success: var(--pgn-color-success-100); /* Theme-specific success background color. */
+  --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); /* Theme-specific brand background color. */
+  --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); /* Theme-specific secondary background color. */
+  --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); /* Theme-specific primary background color. */
+  --pgn-color-border: var(--pgn-color-gray-200); /* Border color. */
+  --pgn-color-table-border: var(--pgn-color-border); /* Table border color. */
+  --pgn-color-table-caption: var(--pgn-color-text-muted); /* Table caption color. */
+  --pgn-color-input-btn-focus: var(--pgn-color-bg-active);
+  --pgn-color-input-focus: var(--pgn-color-primary-500); /* Focused input value color. */
+  --pgn-color-disabled: var(--pgn-color-gray-500); /* Color for disabled element. */
+  --pgn-color-active: var(--pgn-color-white); /* Color for active element. */
+  --pgn-color-text-50-white: #FFFFFF80; /* White text color with transparency of 50%. */
+  --pgn-color-text-50-black: #00000080; /* Black text color with transparency of 50%. */
+  --pgn-color-bg-active: var(--pgn-color-primary-500); /* Active background color. */
+  --pgn-color-bg-base: var(--pgn-color-white); /* Basic background color. */
+  --pgn-other-link-emphasized-hover-darken-percentage: 15%;
+  --pgn-other-tooltip-opacity: 1;
+  --pgn-other-search-field-disabled-opacity: .3;
+  --pgn-other-modal-opacity: .5;
   --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
   --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base);
+  --pgn-other-content-form-control-select-bg-position-y: center;
+  --pgn-other-content-form-control-select-bg-offset-y: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-other-content-form-control-select-bg-position-x: right;
+  --pgn-other-content-form-control-select-bg-repeat: no-repeat;
+  --pgn-other-content-form-control-select-bg-image: var(--pgn-other-content-form-control-select-indicator-icon);
+  --pgn-other-content-form-control-select-bg-color: var(--pgn-color-form-control-select-bg-base);
+  --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
+  --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");
+  --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-radio-indicator-icon-checked-base: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e");
-  --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%230A3055FF'/></svg>");
-  --pgn-color-pagination-text-hover: var(--pgn-color-link-hover);
-  --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base);
-  --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
-  --pgn-color-btn-active-text-inverse-outline-warning: #454545FF;
-  --pgn-color-btn-active-text-outline-warning: #454545FF;
-  --pgn-color-btn-active-text-warning: #313131FF;
-  --pgn-color-btn-active-text-inverse-outline-success: #454545FF;
-  --pgn-color-btn-active-text-outline-success: #454545FF;
-  --pgn-color-btn-active-text-success: #FFFFFFFF;
-  --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF;
-  --pgn-color-btn-active-text-outline-secondary: #454545FF;
-  --pgn-color-btn-active-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-active-text-inverse-outline-info: #454545FF;
-  --pgn-color-btn-active-text-outline-info: #454545FF;
-  --pgn-color-btn-active-text-info: #FFFFFFFF;
-  --pgn-color-btn-active-text-inverse-outline-danger: #454545FF;
-  --pgn-color-btn-active-text-outline-danger: #454545FF;
-  --pgn-color-btn-active-text-danger: #FFFFFFFF;
-  --pgn-color-btn-hover-text-warning: #414141FF;
-  --pgn-color-btn-hover-text-success: #FFFFFFFF;
-  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-info: #FFFFFFFF;
-  --pgn-color-btn-hover-text-danger: #FFFFFFFF;
   --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='%230A3055FF'/></svg>");
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
+  --pgn-other-content-form-control-checkbox-indicator-icon-checked-base: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%230A3055FF'/></svg>");
+  --pgn-other-chip-opacity-disabled: .3;
+  --pgn-other-carousel-control-opacity-hover: .9;
+  --pgn-other-carousel-control-opacity-base: .5;
+  --pgn-other-btn-disabled-opacity: .65;
+  --pgn-other-form-feedback-tooltip-opacity: .9;
+  --pgn-elevation-box-shadow-centered-5-2-blur: 3rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-y: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-offset-x: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-blur: 2.5rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-y: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-offset-x: 0rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-4-2-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-y: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-offset-x: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-y: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-offset-x: 0rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-3-2-blur: 1rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-y: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-offset-x: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-blur: 0.625rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-y: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-offset-x: 0rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-2-2-blur: 0.5rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-y: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-offset-x: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-blur: 0.25rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-y: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-offset-x: 0rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-1-2-blur: 0.25rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-y: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-offset-x: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-blur: 0.125rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-y: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-offset-x: 0rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-5-2-blur: 3rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-y: 0rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-offset-x: 0.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-blur: 2.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-y: 0rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-offset-x: 1.25rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-4-2-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-y: 0rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-offset-x: 0.5rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-y: 0rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-offset-x: 0.625rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-3-2-blur: 0.625rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-y: 0rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-offset-x: 0.25rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-blur: 1rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-y: 0rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-offset-x: 0.5rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-2-2-blur: 0.5rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-y: 0rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-blur: 0.25rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-y: 0rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-1-2-blur: 0.25rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-y: 0rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-blur: 0.125rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-y: 0rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-5-2-blur: 3rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-y: -0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-y: -1.25rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-4-2-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-y: -0.5rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-offset-x: 0rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-y: -0.625rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-offset-x: 0rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-3-2-blur: 0.625rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-y: -0.25rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-offset-x: 0rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-blur: 1rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-y: -0.5rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-offset-x: 0rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-2-2-blur: 0.5rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-offset-x: 0rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-blur: 0.25rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-offset-x: 0rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-1-2-blur: 0.25rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-offset-x: 0rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-blur: 0.125rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-offset-x: 0rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-5-2-blur: 3rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-y: 0rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-offset-x: -0.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-blur: 2.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-y: 0rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-offset-x: -1.25rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-4-2-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-y: 0rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-offset-x: -0.5rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-y: 0rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-offset-x: -0.625rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-3-2-blur: 0.625rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-y: 0rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-offset-x: -0.25rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-blur: 1rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-y: 0rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-offset-x: -0.5rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-2-2-blur: 0.5rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-y: 0rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-blur: 0.25rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-y: 0rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-1-2-blur: 0.25rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-y: 0rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-blur: 0.125rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-y: 0rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-5-2-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-offset-x: 0rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25px; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-x: 0rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-y: 0.5rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-offset-x: 0rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-y: 0.625rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-offset-x: 0rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-3-2-blur: 0.625rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-y: 0.25rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-offset-x: 0rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-blur: 1rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-y: 0.5rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-offset-x: 0rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-2-2-blur: 0.5rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-offset-x: 0rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-blur: 0.25rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-offset-x: 0rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-1-2-blur: 0.25rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-offset-x: 0rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-blur: 0.125rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-offset-x: 0rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-lg-blur: 0.5rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-y: 0.25rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-offset-x: 0rem; /* Large box shadow. */
+  --pgn-elevation-box-shadow-lg-color: rgba(0, 0, 0, 0.3); /* Large box shadow. */
+  --pgn-elevation-box-shadow-sm-blur: 0.125rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-y: 0.0625rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-offset-x: 0rem; /* Small box shadow. */
+  --pgn-elevation-box-shadow-sm-color: rgba(0, 0, 0, 0.2); /* Small box shadow. */
+  --pgn-elevation-box-shadow-base-blur: 0.25rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-y: 0.125rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-offset-x: 0rem; /* Default box shadow. */
+  --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3); /* Default box shadow. */
+  --pgn-elevation-box-shadow-level-5-2-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25px; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-x: 0rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-y: 0.5rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-offset-x: 0rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-y: 0.625rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-offset-x: 0rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-3-2-blur: 1rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-y: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-offset-x: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-blur: 0.625rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-y: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-offset-x: 0rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-2-2-blur: 0.5rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-offset-x: 0rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-blur: 0.25rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-offset-x: 0rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-1-2-blur: 0.25rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-offset-x: 0rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-blur: 0.125rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-offset-x: 0rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-input-btn-focus-box-shadow-blur: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-y: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-offset-x: 0rem;
+  --pgn-elevation-input-btn-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-input-btn-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-toast-box-shadow-2-blur: 3rem;
+  --pgn-elevation-toast-box-shadow-2-offset-y: 0.5rem;
+  --pgn-elevation-toast-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-toast-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-toast-box-shadow-1-blur: 2.5rem;
+  --pgn-elevation-toast-box-shadow-1-offset-y: 1.25rem;
+  --pgn-elevation-toast-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-toast-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-2-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-bottom-2-offset-y: 0.25rem;
+  --pgn-elevation-sticky-shadow-bottom-2-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-bottom-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-bottom-1-offset-y: 0.5rem;
+  --pgn-elevation-sticky-shadow-bottom-1-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-bottom-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-2-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-top-2-offset-y: -0.25rem;
+  --pgn-elevation-sticky-shadow-top-2-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-top-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-1-blur: 1rem;
+  --pgn-elevation-sticky-shadow-top-1-offset-y: -0.5rem;
+  --pgn-elevation-sticky-shadow-top-1-offset-x: 0rem;
+  --pgn-elevation-sticky-shadow-top-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-scrollable-body-box-shadow: #0000008C;
+  --pgn-elevation-progress-bar-box-shadow: none;
+  --pgn-elevation-pagination-focus-box-shadow-blur: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-offset-y: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-offset-x: 0rem;
+  --pgn-elevation-pagination-focus-box-shadow-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-pagination-focus-box-shadow-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-menu-box-shadow-blur: 0.25rem;
+  --pgn-elevation-menu-box-shadow-offset-y: 0.125rem;
+  --pgn-elevation-menu-box-shadow-offset-x: 0rem;
+  --pgn-elevation-menu-box-shadow-color: rgba(0, 0, 0, 0.3);
+  --pgn-elevation-image-thumbnail-box-shadow: none;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-black-active: none;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-black-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-black-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-black-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-black-base-color: var(--pgn-color-icon-button-text-black-base);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-dark-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-dark-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-dark-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-dark-base-color: var(--pgn-color-icon-button-text-dark-base);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-light-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-light-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-light-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-light-base-color: var(--pgn-color-icon-button-text-light-base);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-danger-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-danger-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-danger-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-danger-base-color: var(--pgn-color-icon-button-text-danger-base);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-warning-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-warning-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-warning-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-warning-base-color: var(--pgn-color-icon-button-text-warning-base);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-success-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-success-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-success-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-success-base-color: var(--pgn-color-icon-button-text-success-base);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-brand-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-brand-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-brand-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-brand-base-color: var(--pgn-color-icon-button-text-brand-base);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-secondary-base-color: var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-primary-active: none;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-color: var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-primary-base-inset: inset;
+  --pgn-elevation-icon-button-box-shadow-primary-base-blur: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-y: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-offset-x: 0rem;
+  --pgn-elevation-icon-button-box-shadow-primary-base-spread: var(--pgn-size-btn-focus-width);
+  --pgn-elevation-icon-button-box-shadow-primary-base-color: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-elevation-form-control-select-border-focus-blur: 0rem;
+  --pgn-elevation-form-control-select-border-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-select-border-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-select-border-focus-spread: var(--pgn-size-input-btn-focus-width);
+  --pgn-elevation-form-control-select-border-focus-color: var(--pgn-color-input-btn-focus);
+  --pgn-elevation-form-control-select-border-base: none;
+  --pgn-elevation-form-control-file-focus-blur: 0rem;
+  --pgn-elevation-form-control-file-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-file-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-file-focus-spread: 1px;
+  --pgn-elevation-form-control-file-focus-color: var(--pgn-color-primary-500);
+  --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
+  --pgn-elevation-form-control-range-thumb-focus-blur: 0.25rem;
+  --pgn-elevation-form-control-range-thumb-focus-offset-y: 0.1rem;
+  --pgn-elevation-form-control-range-thumb-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-range-thumb-focus-spread: 0rem;
+  --pgn-elevation-form-control-range-thumb-focus-color: var(--pgn-color-body-bg);
+  --pgn-elevation-form-control-range-thumb-base: none;
+  --pgn-elevation-form-control-range-track: none;
+  --pgn-elevation-form-control-checkbox-indicator-indeterminate: none;
+  --pgn-elevation-form-control-indicator-active: none;
+  --pgn-elevation-form-control-indicator-checked-focus-blur: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-y: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-offset-x: 0rem;
+  --pgn-elevation-form-control-indicator-checked-focus-spread: 4px;
+  --pgn-elevation-form-control-indicator-checked-focus-color: rgba(0, 0, 0, 0.1);
+  --pgn-elevation-form-control-indicator-checked-base: none;
+  --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
+  --pgn-elevation-form-input-focus-blur: 0rem;
+  --pgn-elevation-form-input-focus-offset-y: 0rem;
+  --pgn-elevation-form-input-focus-offset-x: 0rem;
+  --pgn-elevation-form-input-focus-spread: 1px;
+  --pgn-elevation-form-input-focus-color: var(--pgn-color-primary-500);
+  --pgn-elevation-form-input-base: none;
+  --pgn-elevation-dropzone-error-inset: inset;
+  --pgn-elevation-dropzone-error-blur: 0rem;
+  --pgn-elevation-dropzone-error-offset-y: 0rem;
+  --pgn-elevation-dropzone-error-offset-x: 0rem;
+  --pgn-elevation-dropzone-error-spread: 2px;
+  --pgn-elevation-dropzone-error-color: var(--pgn-color-danger-300);
+  --pgn-elevation-dropzone-active-inset: inset;
+  --pgn-elevation-dropzone-active-blur: 0rem;
+  --pgn-elevation-dropzone-active-offset-y: 0rem;
+  --pgn-elevation-dropzone-active-offset-x: 0rem;
+  --pgn-elevation-dropzone-active-spread: 2px;
+  --pgn-elevation-dropzone-active-color: var(--pgn-color-primary-500);
+  --pgn-elevation-dropzone-focus-inset: inset;
+  --pgn-elevation-dropzone-focus-blur: 0rem;
+  --pgn-elevation-dropzone-focus-offset-y: 0rem;
+  --pgn-elevation-dropzone-focus-offset-x: 0rem;
+  --pgn-elevation-dropzone-focus-spread: 2px;
+  --pgn-elevation-dropzone-focus-color: var(--pgn-color-info-300);
+  --pgn-elevation-dropzone-hover-inset: inset;
+  --pgn-elevation-dropzone-hover-blur: 0rem;
+  --pgn-elevation-dropzone-hover-offset-y: 0rem;
+  --pgn-elevation-dropzone-hover-offset-x: 0rem;
+  --pgn-elevation-dropzone-hover-spread: 2px;
+  --pgn-elevation-dropzone-hover-color: var(--pgn-color-info-300);
+  --pgn-elevation-data-table-box-shadow-blur: 0.125rem;
+  --pgn-elevation-data-table-box-shadow-offset-y: 0.0625rem;
+  --pgn-elevation-data-table-box-shadow-offset-x: 0rem;
+  --pgn-elevation-data-table-box-shadow-color: rgba(0, 0, 0, 0.2);
+  --pgn-elevation-code-kbd-box-shadow: none;
+  --pgn-elevation-close-button-text-shadow-blur: 0rem;
+  --pgn-elevation-close-button-text-shadow-offset-y: 1px;
+  --pgn-elevation-close-button-text-shadow-offset-x: 0rem;
+  --pgn-elevation-close-button-text-shadow-color: var(--pgn-color-white);
+  --pgn-elevation-btn-box-shadow-active: none;
+  --pgn-elevation-btn-box-shadow-base: none;
+  --pgn-elevation-annotation-box-shadow-2-blur: 8px;
+  --pgn-elevation-annotation-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-annotation-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-annotation-box-shadow-1-blur: 4px;
+  --pgn-elevation-annotation-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-annotation-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-2-blur: 8px;
+  --pgn-elevation-tooltip-box-shadow-2-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-2-offset-x: 0rem;
+  --pgn-elevation-tooltip-box-shadow-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-1-blur: 4px;
+  --pgn-elevation-tooltip-box-shadow-1-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-1-offset-x: 0rem;
+  --pgn-elevation-tooltip-box-shadow-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-popover-box-shadow: none;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y: 8px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x: 0rem;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y: 10px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x: 0rem;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-dropdown-box-shadow: none;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-size-btn-focus-width: 2px;
 }
diff --git a/styles/scss/core/_typography.scss b/styles/scss/core/_typography.scss
index 1bc648d691..03a479a002 100644
--- a/styles/scss/core/_typography.scss
+++ b/styles/scss/core/_typography.scss
@@ -1,11 +1,23 @@
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
-  .display-1,
-  .display-2,
-  .display-3,
+  .display-1 {
+    font-size: $display1-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-2 {
+    font-size: $display2-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-3 {
+    font-size: $display3-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
   .display-4 {
-    font-size: $display-mobile-size;
+    font-size: $display4-mobile-size;
     line-height: $display-mobile-line-height;
   }
 
diff --git a/styles/scss/core/_utilities.scss b/styles/scss/core/_utilities.scss
index afdb2c671a..9fc1f30765 100644
--- a/styles/scss/core/_utilities.scss
+++ b/styles/scss/core/_utilities.scss
@@ -21,13 +21,17 @@
 $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 .x-small {
-  font-size: $x-small-font-size;
+  font-size: $x-small-font-size !important;
 }
 
 .micro {
-  font-size: $micro-font-size;
+  font-size: $micro-font-size !important;
   font-weight: normal;
-  line-height: $micro-line-height;
+  line-height: $micro-line-height !important;
+}
+
+.font-size-normal {
+  font-size: $font-size-base !important;
 }
 
 .mw-xs {
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index 5e1f358f1a..64b14a253a 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -652,7 +652,10 @@ $box-shadow-sides: (
 ) !default;
 
 $box-shadow-sm: var(--pgn-elevation-box-shadow-sm) !default;
-$box-shadow: var(--pgn-elevation-box-shadow-base) !default;
+$box-shadow: var(--pgn-elevation-box-shadow-base-offset-x)
+  var(--pgn-elevation-box-shadow-base-offset-y)
+  var(--pgn-elevation-box-shadow-base-blur)
+  var(--pgn-elevation-box-shadow-base-color) !default;
 $box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default;
 
 $component-active-color: var(--pgn-color-active) !default;
@@ -703,19 +706,19 @@ $font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default;
 $font-weight-base: var(--pgn-typography-font-weight-base) !default;
 $line-height-base: var(--pgn-typography-line-height-base) !default;
 
-$h1-font-size: var(--pgn-typography-font-size-h1) !default;
-$h2-font-size: var(--pgn-typography-font-size-h2) !default;
-$h3-font-size: var(--pgn-typography-font-size-h3) !default;
-$h4-font-size: var(--pgn-typography-font-size-h4) !default;
-$h5-font-size: var(--pgn-typography-font-size-h5) !default;
-$h6-font-size: var(--pgn-typography-font-size-h6) !default;
+$h1-font-size: var(--pgn-typography-font-size-h1-base) !default;
+$h2-font-size: var(--pgn-typography-font-size-h2-base) !default;
+$h3-font-size: var(--pgn-typography-font-size-h3-base) !default;
+$h4-font-size: var(--pgn-typography-font-size-h4-base) !default;
+$h5-font-size: var(--pgn-typography-font-size-h5-base) !default;
+$h6-font-size: var(--pgn-typography-font-size-h6-base) !default;
 
-$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default;
-$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default;
-$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default;
-$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default;
-$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default;
-$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default;
+$h1-mobile-font-size: var(--pgn-typography-font-size-h1-mobile) !default;
+$h2-mobile-font-size: var(--pgn-typography-font-size-h2-mobile) !default;
+$h3-mobile-font-size: var(--pgn-typography-font-size-h3-mobile) !default;
+$h4-mobile-font-size: var(--pgn-typography-font-size-h4-mobile) !default;
+$h5-mobile-font-size: var(--pgn-typography-font-size-h5-mobile) !default;
+$h6-mobile-font-size: var(--pgn-typography-font-size-h6-mobile) !default;
 
 $headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default;
 $headings-font-family: var(--pgn-typography-headings-font-family) !default;
@@ -723,29 +726,35 @@ $headings-font-weight: var(--pgn-typography-headings-font-weight) !default;
 $headings-line-height: var(--pgn-typography-headings-line-height) !default;
 $headings-color: var(--pgn-color-headings-base) !default;
 
-$display1-size: var(--pgn-typography-display-1) !default;
-$display2-size: var(--pgn-typography-display-2) !default;
-$display3-size: var(--pgn-typography-display-3) !default;
-$display4-size: var(--pgn-typography-display-4) !default;
+$display1-size: var(--pgn-typography-font-size-display-1) !default;
+$display2-size: var(--pgn-typography-font-size-display-2) !default;
+$display3-size: var(--pgn-typography-font-size-display-3) !default;
+$display4-size: var(--pgn-typography-font-size-display-4) !default;
 
-$display-mobile-size: var(--pgn-typography-display-mobile) !default;
+// deprecated in favor of $display1-mobile-size
+$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
+$display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
+$display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default;
+$display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default;
+$display4-mobile-size: var(--pgn-typography-font-size-display-mobile-4) !default;
 
-$display1-weight: var(--pgn-typography-display-weight-1) !default;
-$display2-weight: var(--pgn-typography-display-weight-2) !default;
-$display3-weight: var(--pgn-typography-display-weight-3) !default;
-$display4-weight: var(--pgn-typography-display-weight-4) !default;
 
-$display-line-height: var(--pgn-typography-display-line-height-base) !default;
-$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default;
+$display1-weight: var(--pgn-typography-font-weight-display-1) !default;
+$display2-weight: var(--pgn-typography-font-weight-display-2) !default;
+$display3-weight: var(--pgn-typography-font-weight-display-3) !default;
+$display4-weight: var(--pgn-typography-font-weight-display-4) !default;
 
-$lead-font-size: var(--pgn-typography-font-size-lead) !default;
+$display-line-height: var(--pgn-typography-line-height-display-base) !default;
+$display-mobile-line-height: var(--pgn-typography-line-height-display-mobile) !default;
+
+$lead-font-size: var(--pgn-typography-font-size-lg) !default;
 $lead-font-weight: var(--pgn-typography-font-weight-lead) !default;
 
-$small-font-size: var(--pgn-typography-font-size-small-base) !default;
-$x-small-font-size: var(--pgn-typography-font-size-small-x) !default;
+$small-font-size: var(--pgn-typography-font-size-sm) !default;
+$x-small-font-size: var(--pgn-typography-font-size-xs) !default;
 
-$micro-font-size: var(--pgn-typography-font-size-micro);
-$micro-line-height: var(--pgn-typography-line-height-micro);
+$micro-font-size: var(--pgn-typography-font-size-micro) !default;
+$micro-line-height: var(--pgn-typography-line-height-micro) !default;
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
@@ -801,7 +810,11 @@ $input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !defaul
 
 $input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default;
 $input-btn-focus-color: var(--pgn-color-input-btn-focus) !default;
-$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default;
+$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow-offset-x)
+  var(--pgn-elevation-input-btn-focus-box-shadow-offset-y)
+  var(--pgn-elevation-input-btn-focus-box-shadow-spread)
+  var(--pgn-elevation-input-btn-focus-box-shadow-color)
+  var(--pgn-elevation-input-btn-focus-box-shadow-blur) !default;
 
 $input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default;
 $input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default;
diff --git a/styles/scss/core/core.scss b/styles/scss/core/core.scss
index bf494f1da6..924135ca81 100644
--- a/styles/scss/core/core.scss
+++ b/styles/scss/core/core.scss
@@ -15,6 +15,7 @@
 
 // Paragon core CSS
 @import "../../css/core/variables";
+@import "../../css/core/abstraction-variables";
 @import "../../css/core/custom-media-breakpoints";
 
 // Paragon components
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
index c4ad933cec..62763473d1 100644
--- a/tokens/src/core/alias/size.json
+++ b/tokens/src/core/alias/size.json
@@ -1,15 +1,16 @@
 {
   "size": {
+    "$type": "dimension",
     "border": {
-      "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." },
+      "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
       "radius": {
-        "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
-        "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
-        "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
+        "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." },
+        "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." },
+        "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." }
       }
     },
     "rounded": {
-      "pill": { "value": "50rem", "type": "dimension", "source": "$rounded-pill", "description": "Pill border radius." }
+      "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
     }
   }
 }
diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
index 9d5f437371..4dd026a3b6 100644
--- a/tokens/src/core/components/ActionRow.json
+++ b/tokens/src/core/components/ActionRow.json
@@ -1,9 +1,10 @@
 {
   "spacing": {
+    "$type": "dimension",
     "action-row": {
       "gap": {
-        "x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" },
-        "y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" }
+        "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
+        "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
       }
     }
   }
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
index f5913d592f..aafa21a782 100644
--- a/tokens/src/core/components/Alert.json
+++ b/tokens/src/core/components/Alert.json
@@ -1,29 +1,31 @@
 {
   "spacing": {
+    "$type": "dimension",
     "alert": {
       "padding": {
-        "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
-        "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
+        "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
+        "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
       },
-      "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
-      "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
-      "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
+      "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" },
+      "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" },
+      "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" }
     }
   },
   "typography": {
     "alert": {
       "font": {
-        "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" },
-        "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
+        "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
+        "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
       },
-      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
+      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "size": {
+    "$type": "dimension",
     "alert": {
       "border": {
-        "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
-        "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
+        "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
+        "width": { "source": "$alert-border-width", "$value": "0" }
       }
     }
   }
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
index 8f3f67ff37..bd86bd7be2 100644
--- a/tokens/src/core/components/Annotation.json
+++ b/tokens/src/core/components/Annotation.json
@@ -1,25 +1,27 @@
 {
   "spacing": {
+    "$type": "dimension",
     "annotation": {
-      "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
+      "padding": { "source": "$annotation-padding", "$value": ".5rem" },
       "arrow-side": {
-        "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
+        "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
       }
     }
   },
   "typography": {
     "annotation": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
-      "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" }
+      "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}", "$type": "dimension" },
+      "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "$type": "number" }
     }
   },
   "size": {
+    "$type": "dimension",
     "annotation": {
       "arrow-border": {
-        "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
+        "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
       },
-      "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
+      "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
+      "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json
index c8cdb66d11..58bd3176ed 100644
--- a/tokens/src/core/components/Avatar.json
+++ b/tokens/src/core/components/Avatar.json
@@ -1,16 +1,16 @@
 {
   "size": {
     "avatar": {
-      "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },
-      "xs": { "value": "1.5rem", "type": "dimension", "source": "$avatar-size-xs" },
-      "sm": { "value": "2.25rem", "type": "dimension", "source": "$avatar-size-sm" },
-      "lg": { "value": "4rem", "type": "dimension", "source": "$avatar-size-lg" },
-      "xl": { "value": "6rem", "type": "dimension", "source": "$avatar-size-xl" },
-      "xxl": { "value": "11.5rem", "type": "dimension", "source": "$avatar-size-xxl" },
-      "huge": { "value": "18.75rem", "type": "dimension", "source": "$avatar-size-huge" },
+      "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" },
+      "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" },
+      "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" },
+      "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" },
+      "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" },
+      "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" },
+      "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$avatar-border" },
-        "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" }
+        "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
+        "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
       }
     }
   }
diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
index ac2e311a28..c5635bf79c 100644
--- a/tokens/src/core/components/AvatarButton.json
+++ b/tokens/src/core/components/AvatarButton.json
@@ -1,10 +1,11 @@
 {
   "spacing": {
+    "$type": "dimension",
     "avatar-button": {
       "padding-left": {
-        "base": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left" },
-        "sm": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-sm" },
-        "lg": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-lg" }
+        "base": { "source": "$avatar-button-padding-left", "$value": ".25em" },
+        "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" },
+        "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" }
       }
     }
   }
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
index 921b1f09e0..61cbc94e7a 100644
--- a/tokens/src/core/components/Badge.json
+++ b/tokens/src/core/components/Badge.json
@@ -1,33 +1,36 @@
 {
   "spacing": {
+    "$type": "dimension",
     "badge": {
       "padding": {
         "x": {
-          "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
-          "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
+          "base": { "source": "$badge-padding-x", "$value": ".5rem" },
+          "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
         },
-        "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
+        "y": { "source": "$badge-padding-y", "$value": ".125rem" }
       }
     }
   },
   "typography": {
     "badge": {
       "font": {
-        "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
-        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" }
+        "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" },
+        "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "badge": {
       "border-radius": {
-        "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
-        "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
+        "base": { "source": "$badge-border-radius", "$value": ".25rem" },
+        "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
       },
-      "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" }
+      "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
     }
   },
   "transition": {
-    "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
+    "$type": "transition",
+    "badge": { "source": "$badge-transition", "$value": "none" }
   }
 }
diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
index 89b11c9c22..c3d34ad7c2 100644
--- a/tokens/src/core/components/Breadcrumb.json
+++ b/tokens/src/core/components/Breadcrumb.json
@@ -1,22 +1,24 @@
 {
   "spacing": {
+    "$type": "dimension",
     "breadcrumb": {
       "margin": {
-        "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" }
+        "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "breadcrumb": {
       "border": {
         "radius": {
-          "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" }
+          "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
         },
         "axis": {
-          "x-focus": { "value": ".25rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-x" },
-          "y-focus": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-y" }
+          "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
+          "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
         },
-        "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" }
+        "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
       }
     }
   }
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index 262200e665..587265277c 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -1,10 +1,11 @@
 {
   "spacing": {
+    "$type": "dimension",
     "bubble": {
       "expandable-padding": {
-        "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" },
-        "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" }
+        "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
+        "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" }
       }
-    } 
+    }
   }
 }
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 96fdbadb33..93a9a7366f 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -1,42 +1,31 @@
 {
   "spacing": {
+    "$type": "dimension",
     "btn": {
       "padding": {
         "y": {
-          "base": {
-            "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y"
-          },
-          "lg": {
-            "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg"
-          },
-          "sm": {
-            "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm"
-          }
+          "base": { "source": "$btn-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+          "lg": { "source": "$btn-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" },
+          "sm": { "source": "$btn-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" }
         },
         "x": {
-          "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" },
-          "lg": {
-            "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg"
-          },
-          "sm": {
-            "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm"
-          }
+          "base": { "source": "$btn-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+          "lg": { "source": "$btn-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" },
+          "sm": { "source": "$btn-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" }
         }
       },
       "block": {
-        "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
+        "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" }
       },
       "focus": {
-        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" },
         "border-gap": {
-          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
-          "type": "dimension",
-          "source": "$btn-focus-border-gap"
+          "source": "$btn-focus-border-gap",
+          "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})"
         },
         "distance-to-border": {
-          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
-          "type": "dimension",
-          "source": "$btn-focus-distance-to-border"
+          "source": "$btn-focus-distance-to-border",
+          "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})"
         }
       }
     }
@@ -44,62 +33,49 @@
   "typography": {
     "btn": {
       "font": {
-        "family": {
-          "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family"
-        },
+        "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
         "size": {
-          "base": {
-            "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size"
-          },
-          "sm": {
-            "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm"
-          },
-          "lg": {
-            "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg"
-          }
+          "$type": "dimension",
+          "base": { "source": "$btn-font-size", "$value": "{typography.input.btn.font.size.base}" },
+          "sm": { "source": "$btn-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+          "lg": { "source": "$btn-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
         },
-        "weight": {
-          "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight"
-        }
+        "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
       },
       "line-height": {
-        "base": {
-          "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height"
-        },
-        "sm": {
-          "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm"
-        },
-        "lg": {
-          "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg"
-        }
+        "$type": "number",
+        "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" },
+        "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+        "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "btn": {
       "border": {
-        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" },
+        "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" },
         "radius": {
-          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" },
-          "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" },
-          "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
+          "base": { "source": "$btn-border-radius", "$value": "{size.border.radius.base}" },
+          "lg": { "source": "$btn-border-radius-lg", "$value": "{size.border.radius.lg}" },
+          "sm": { "source": "$btn-border-radius-sm", "$value": "{size.border.radius.sm}" }
         }
       },
       "focus": {
-        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
+        "width": { "source": "$btn-focus-width", "$value": "2px" },
         "border-radius": {
           "base": {
-            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-            "type": "dimension",
-            "source": "$btn-focus-border-radius"
+            "source": "$btn-focus-border-radius",
+            "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})"
           },
-          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
-          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
+          "lg": { "source": "$btn-focus-border-radius-lg", "$value": "{size.btn.focus.border-radius.base}" },
+          "sm": { "source": "$btn-focus-border-radius-sm", "$value": "{size.btn.border.radius.base}" }
         }
       }
     }
   },
   "transition": {
-    "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
+    "$type": "transition",
+    "btn": { "source": "$btn-transition", "$value": "none" }
   }
 }
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 7419bfb6a5..5bb50e01b1 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -1,95 +1,84 @@
 {
   "spacing": {
+    "$type": "dimension",
     "card": {
       "spacer": {
-        "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" },
-        "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" }
+        "x": { "source": "$card-spacer-x", "$value": "1.25rem" },
+        "y": { "source": "$card-spacer-y", "$value": ".75rem" }
       },
       "margin": {
-        "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
-        "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-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" }
+        "group": { "source": "$card-group-margin", "$value": "12px" },
+        "deck": { "source": "$card-deck-margin", "$value": "{spacing.card.margin.group}" },
+        "deck-bottom": { "source": "$card-deck-margin-bottom", "$value": "{spacing.spacer.3}" },
+        "grid": { "source": "$card-grid-margin", "$value": "{spacing.card.margin.group}" },
+        "grid-bottom": { "source": "$card-grid-margin-bottom", "$value": "{spacing.spacer.3}" }
       },
       "columns": {
-        "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
-        "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" },
-        "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" }
+        "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" },
+        "count": { "source": "$card-columns-count", "$value": "3", "$type": "number" },
+        "gap": { "source": "$card-columns-gap", "$value": "1.25rem" }
       },
       "footer": {
-        "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" }
+        "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" }
       },
       "loading-skeleton": {
-        "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" }
+        "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" }
       },
       "logo": {
         "left-offset": {
-          "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" },
-          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" }
+          "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" },
+          "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" }
         },
         "bottom-offset": {
-          "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
-          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
+          "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" },
+          "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" }
         }
       },
       "focus": {
-        "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" }
+        "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "card": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
+        "width": { "source": "$card-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
-          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" },
-          "inner": {
-            "value": "calc({size.card.border.radius.base} - {size.card.border.width})",
-            "type": "dimension",
-            "source": "$card-inner-border-radius"
-          }
+          "base": { "source": "$card-border-radius", "$value": "{size.border.radius.base}" },
+          "logo": { "source": "$card-logo-border-radius", "$value": ".25rem" },
+          "inner": { "source": "$card-inner-border-radius", "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" }
         }
       },
       "focus": {
         "border": {
-          "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" },
-          "radius": {
-            "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})",
-            "type": "dimension",
-            "source": "$card-focus-border-radius"
-          }
+          "width": { "source": "$card-focus-border-width", "$value": "2px" },
+          "radius": { "source": "$card-focus-border-radius", "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" }
         }
       },
       "image": {
         "horizontal": {
           "width": {
-            "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" },
-            "min": {
-              "value": "{size.card.image.horizontal.width.max}",
-              "type": "dimension",
-              "source": "$card-image-horizontal-min-width"
-            }
+            "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" },
+            "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" }
           }
         },
         "vertical": {
-          "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
+          "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" }
         },
-        "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
+        "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" }
       },
       "logo": {
-        "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },
-        "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" }
+        "width": { "source": "$card-logo-width", "$value": "7.25rem" },
+        "height": { "source": "$card-logo-height", "$value": "4.125rem" }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "footer": {
       "text": {
-        "font-size": {
-          "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size"
-        }
+        "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   }
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index 26343bc957..da74f2a87a 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -3,35 +3,61 @@
     "carousel": {
       "control": {
         "width": {
-          "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
-          "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
+          "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" },
+          "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" }
         }
       },
       "indicator": {
-        "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
+        "$type": "dimension",
+        "width": { "source": "$carousel-indicator-width", "$value": "30px" },
         "height": {
-          "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
-          "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+          "base": { "source": "$carousel-indicator-height", "$value": "3px" },
+          "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" }
         }
       },
-      "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
+      "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "carousel": {
-      "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
+      "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" }
     }
   },
   "transition": {
+    "$type": "transition",
     "carousel": {
       "base": {
-        "value": "transform {transition.carousel.duration} ease-in-out",
-        "type": "transition",
-        "source": "$carousel-transition"
+        "source": "$carousel-transition",
+        "$value": {
+          "property": "transform",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease-in-out",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      },
+      "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
+      "indicator": {
+        "source": "$carousel-indicator-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
       },
-      "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
-      "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
-      "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
+      "control": {
+        "source": "$carousel-control-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": ".15s",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json
index d22606c1dd..a6699c402e 100644
--- a/tokens/src/core/components/Chip.json
+++ b/tokens/src/core/components/Chip.json
@@ -1,41 +1,33 @@
 {
   "spacing": {
+    "$type": "dimension",
     "chip": {
       "margin": {
-        "base": {
-          "value": ".125rem", "type": "dimension", "source": "$chip-margin"
-        },
-        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
+        "base": { "source": "$chip-margin", "$value": ".125rem" },
+        "icon": { "source": "$chip-icon-margin", "$value": ".25rem" }
       },
       "padding": {
-        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
+        "y": { "source": "$chip-padding-y", "$value": "1px" },
+        "x": { "source": "$chip-padding-x", "$value": ".5rem" }
       },
       "outline": {
         "selected-distance": {
-          "light": {
-            "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance"
-          },
-          "dark": {
-            "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance"
-          }
+          "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" },
+          "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" }
         },
         "focus-distance": {
-          "light": {
-            "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance"
-          },
-          "dark": {
-            "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance"
-          }
+          "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" },
+          "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" }
         },
-        "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" }
+        "width": { "source": "$chip-outline-width", "$value": "3px" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "chip": {
-      "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" },
-      "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" }
+      "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" },
+      "icon": { "source": "$chip-icon-size", "$value": "1.5rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json
index 597fd925d0..ccb1edafd4 100644
--- a/tokens/src/core/components/ChipCarousel.json
+++ b/tokens/src/core/components/ChipCarousel.json
@@ -1,13 +1,12 @@
 {
   "spacing": {
+    "$type": "dimension",
     "chip-carousel": {
-      "controls-top-offset": {
-        "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset"
-      },
+      "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" },
       "container": {
         "padding": {
-          "x": { "value": ".625rem", "type": "dimension", "source": "$chip-carousel-container-padding-x" },
-          "y": { "value": ".313rem", "type": "dimension", "source": "$chip-carousel-container-padding-y" }
+          "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" },
+          "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" }
         }
       }
     }
diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json
index 4e7eb8f879..6308930b30 100644
--- a/tokens/src/core/components/CloseButton.json
+++ b/tokens/src/core/components/CloseButton.json
@@ -2,12 +2,8 @@
   "typography": {
     "close-button": {
       "font": {
-        "size": {
-          "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size"
-        },
-        "weight": {
-          "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight"
-        }
+        "size": { "source": "$close-font-size", "$value": "calc({typography.font.size.base} * 1.5)", "$type": "dimension" },
+        "weight": { "source": "$close-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       }
     }
   }
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
index b8ae8bac6c..4e03d1613c 100644
--- a/tokens/src/core/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,32 +1,33 @@
 {
   "typography": {
     "code": {
-      "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
+      "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
       "kbd": {
-        "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" },
+        "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
         "nested": {
-          "font-weight": {
-            "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight"
-          }
+          "$type": "fontWeight",
+          "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "code": {
       "kbd": {
         "padding": {
-          "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" },
-          "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" }
+          "y": { "source": "$kbd-padding-y", "$value": ".2rem" },
+          "x": { "source": "$kbd-padding-x", "$value": ".4rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "code": {
       "pre": {
         "scrollable": {
-          "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" }
+          "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" }
         }
       }
     }
diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json
index 924347154c..91cc84d3f9 100644
--- a/tokens/src/core/components/Collapsible.json
+++ b/tokens/src/core/components/Collapsible.json
@@ -1,26 +1,23 @@
 {
   "spacing": {
+    "$type": "dimension",
     "collapsible": {
       "card": {
         "spacer": {
           "y": {
-            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" },
-            "lg": {
-              "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg"
-            }
+            "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" },
+            "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" }
           },
           "x": {
-            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" },
-            "lg": {
-              "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg"
-            }
+            "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" },
+            "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" }
           },
-          "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" },
-          "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" },
+          "left-body": { "source": "$collapsible-card-body-spacer-left", "$value": ".75rem" },
+          "icon": { "source": "$collapsible-card-spacer-icon", "$value": "2.5rem" },
           "basic": {
-            "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" },
-            "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" },
-            "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" }
+            "y": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" },
+            "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" },
+            "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" }
           }
         }
       }
diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
index 2dd4803426..35ed3a43a8 100644
--- a/tokens/src/core/components/ColorPicker.json
+++ b/tokens/src/core/components/ColorPicker.json
@@ -1,8 +1,9 @@
 {
   "size": {
+    "$type": "dimension",
     "color-picker": {
-      "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
-      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
+      "sm": { "source": "$picker-size-sm", "$value": "2rem" },
+      "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" }
     }
   }
 }
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
index 4f9b676d6a..fc72b78a5e 100644
--- a/tokens/src/core/components/Container.json
+++ b/tokens/src/core/components/Container.json
@@ -1,12 +1,13 @@
 {
   "size": {
+    "$type": "dimension",
     "container": {
       "max-width": {
-        "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
-        "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
-        "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
-        "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
-        "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
+        "xs": { "source": "$max-width-xs", "$value": "464px" },
+        "sm": { "source": "$max-width-sm", "$value": "708px" },
+        "md": { "source": "$max-width-md", "$value": "952px" },
+        "lg": { "source": "$max-width-lg", "$value": "1192px" },
+        "xl": { "source": "$max-width-xl", "$value": "1440px" }
       }
     }
   }
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index 9c6ba9cea6..75bf84d8e2 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -1,27 +1,35 @@
 {
   "size": {
+    "$type": "dimension",
     "data-table": {
-      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
+      "border": { "source": "$data-table-border", "$value": "2px" },
       "dropdown": {
         "pagination": {
-          "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
-          "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" }
+          "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" },
+          "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" }
         }
       },
       "layout": {
-        "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" }
+        "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" }
       }
     }
   },
   "spacing": {
     "data-table": {
       "padding": {
-        "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
-        "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
-        "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
-        "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+        "$type": "dimension",
+        "x": { "source": "$data-table-padding-x", "$value": ".75rem" },
+        "y": { "source": "$data-table-padding-y", "$value": ".75rem" },
+        "small": { "source": "$data-table-padding-small", "$value": ".5rem" },
+        "cell": {
+          "source": "$data-table-cell-padding",
+          "$value": {
+            "x": ".5rem",
+            "y": ".75rem"
+          }
+        }
       },
-      "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
+      "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
     }
   }
 }
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index 02e15914c2..f125a25cfc 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -1,67 +1,62 @@
 {
   "typography": {
     "dropdown": {
-      "font-size": {
-        "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size"
-      },
+      "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" },
       "item": {
-        "text-decoration": {
-          "value": "none", "type": "textDecoration"
-        }
+        "$type": "textDecoration",
+        "text-decoration": { "$value": "none" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "dropdown": {
-      "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" },
+      "min-width": { "source": "$dropdown-min-width", "$value": "18rem" },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" },
+        "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "base": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius"
-          },
+          "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" },
           "inner": {
-            "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
-            "type": "dimension",
-            "source": "$dropdown-inner-border-radius"
+            "source": "$dropdown-inner-border-radius",
+            "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})"
           }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "dropdown": {
-      "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" },
+      "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" },
       "padding": {
         "x": {
-          "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" },
-          "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" }
+          "base": { "source": "$dropdown-padding-x", "$value": "0" },
+          "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" }
         },
         "y": {
-          "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" },
-          "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" }
+          "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
+          "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
         },
         "header": {
-          "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}",
-          "type": "dimension",
-          "source": "$dropdown-header-padding"
+          "source": "$dropdown-header-padding",
+          "$value": {
+            "x": "{spacing.dropdown.padding.x.item}",
+            "y": ".5rem"
+          }
         }
       },
       "divider": {
-        "margin-y": {
-          "value": "calc({spacing.spacer.base} / 2)",
-          "type": "dimension",
-          "source": "$dropdown-divider-margin-y"
-        }
+        "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
       },
       "close-container": {
-        "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" }
+        "top": { "source": "$modal-close-container-top", "$value": ".625rem" }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "dropdown": {
-      "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" }
+      "zindex": { "source": "$zindex-dropdown", "$value": "1000" }
     }
   }
 }
diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
index 6217177202..9cfcb28071 100644
--- a/tokens/src/core/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -1,20 +1,18 @@
 {
   "typography": {
+    "$type": "dimension",
     "dropzone": {
       "restriction-msg": {
-        "font-size": {
-          "value": "{typography.font.size.small.x}",
-          "type": "dimension",
-          "source": "$dropzone-restriction-msg-font-size"
-        }
+        "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "dropzone": {
-      "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
+      "padding": { "source": "$dropzone-padding", "$value": "1.5rem" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" }
+        "base": { "source": "$dropzone-border-default", "$value": "1px" }
       }
     }
   }
diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json
index fbae55b536..aa14828016 100644
--- a/tokens/src/core/components/Form/other.json
+++ b/tokens/src/core/components/Form/other.json
@@ -2,11 +2,12 @@
   "other": {
     "form": {
       "control": {
-        "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
-        "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" },
+        "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" },
+        "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" },
         "custom-file": {
-          "lang": { "value": "en", "type": "text" },
-          "content": { "value": "Browse", "type": "text" }
+          "$type": "text",
+          "lang": { "$value": "en" },
+          "content": { "$value": "Browse" }
         }
       }
     }
diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
index 695bfd149a..dcf0e043e5 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -2,225 +2,178 @@
   "size": {
     "form": {
       "input": {
+        "$type": "dimension",
         "height": {
           "base": {
-            "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height"
+            "source": "$input-height",
+            "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})"
           },
           "sm": {
-            "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height-sm"
+            "source": "$input-height-sm",
+            "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})"
           },
           "lg": {
-            "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height-lg"
+            "source": "$input-height-lg",
+            "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})"
           },
           "inner": {
             "base": {
-              "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
-              "type": "dimension",
-              "source": "$input-height-inner"
+              "source": "$input-height-inner",
+              "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)"
             },
             "half": {
-              "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
-              "type": "dimension",
-              "source": "$input-height-inner-half"
+              "source": "$input-height-inner-half",
+              "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})"
             },
             "quarter": {
-              "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
-              "type": "dimension",
-              "source": "$input-height-inner-quarter"
+              "source": "$input-height-inner-quarter",
+              "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))"
             }
           },
-          "border": {
-            "value": "calc({size.form.input.width.border} * 2)",
-            "type": "dimension",
-            "source": "$input-height-border"
-          }
+          "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" }
         },
         "width": {
-          "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" },
-          "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" },
-          "border": {
-            "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width"
-          }
+          "hover": { "source": "$input-hover-width", "$value": "0.063rem" },
+          "focus": { "source": "$input-focus-width", "$value": "0.063rem" },
+          "border": { "source": "$input-border-width", "$value": "{size.input.btn.border-width}" }
         },
         "radius": {
           "border": {
-            "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" },
-            "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" },
-            "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" }
+            "base": { "source": "$input-border-radius", "$value": "{size.border.radius.base}" },
+            "lg": { "source": "$input-border-radius-lg", "$value": "{size.border.radius.lg}" },
+            "sm": { "source": "$input-border-radius-sm", "$value": "{size.border.radius.sm}" }
           }
         }
       },
       "control": {
         "indicator": {
-          "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
-          "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
+          "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" },
+          "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" },
           "border": {
-            "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" }
+            "$type": "dimension",
+            "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" }
           }
         },
         "switch": {
-          "width": {
-            "value": "calc({size.form.control.indicator.base} * 1.75)",
-            "type": "dimension",
-            "source": "$custom-switch-width"
-          },
+          "$type": "dimension",
+          "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" },
           "indicator": {
             "base": {
-              "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
-              "type": "dimension",
-              "source": "$custom-switch-indicator-size"
+              "source": "$custom-switch-indicator-size",
+              "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)"
             },
             "border": {
               "radius": {
-                "value": "calc({size.form.control.indicator.base} / 2)",
-                "type": "dimension",
-                "source": "$custom-switch-indicator-border-radius"
+                "source": "$custom-switch-indicator-border-radius",
+                "$value": "calc({size.form.control.indicator.base} / 2)"
               }
             }
           }
         },
         "select": {
+          "$type": "dimension",
           "height": {
-            "base": {
-              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height"
-            },
-            "lg": {
-              "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg"
-            },
-            "sm": {
-              "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm"
-            }
+            "base": { "source": "$custom-select-height", "$value": "{size.form.input.height.base}" },
+            "lg": { "source": "$custom-select-height-lg", "$value": "{size.form.input.height.lg}" },
+            "sm": { "source": "$custom-select-height-sm", "$value": "{size.form.input.height.sm}" }
           },
           "feedback": {
             "icon": {
-              "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
-              "type": "dimension",
-              "source": "$custom-select-feedback-icon-size"
+              "source": "$custom-select-feedback-icon-size",
+              "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}"
             }
           },
           "border": {
             "width": {
-              "base": {
-                "value": "{size.form.input.width.border}",
-                "type": "dimension",
-                "source": "$custom-select-border-width"
-              }
+              "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" }
             },
-            "radius": {
-              "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius"
-            }
+            "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" }
           }
         },
         "range": {
           "track": {
-            "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" },
-            "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" },
+            "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" },
+            "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" },
             "border": {
-              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" }
+              "$type": "dimension",
+              "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" }
             }
           },
           "thumb": {
-            "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" },
-            "height": {
-              "value": "{size.form.control.range.thumb.width}",
-              "type": "dimension",
-              "source": "$custom-range-thumb-height"
-            },
+            "$type": "dimension",
+            "width": { "source": "$custom-range-thumb-width", "$value": "1rem" },
+            "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" },
             "border": {
-              "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" },
-              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" }
+              "base": { "source": "$custom-range-thumb-border", "$value": "0" },
+              "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" }
             },
             "focus": {
-              "width": {
-                "value": "{size.form.input.width.focus}",
-                "type": "dimension",
-                "source": "$custom-range-thumb-focus-box-shadow-width"
-              }
+              "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" }
             }
           }
         },
         "file": {
-          "width": {
-            "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width"
-          },
+          "$type": "dimension",
+          "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" },
           "height": {
-            "base": {
-              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height"
-            },
-            "inner": {
-              "value": "{size.form.input.height.inner.base}",
-              "type": "dimension",
-              "source": "$custom-file-height-inner"
-            }
+            "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" },
+            "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" }
           },
           "border": {
-            "radius": {
-              "value": "{size.form.input.radius.border.base}",
-              "type": "dimension",
-              "source": "$custom-file-border-radius"
-            }
+            "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" }
           }
         },
         "icon": {
-          "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" }
+          "$type": "dimension",
+          "width": { "source": "$form-control-icon-width", "$value": "2rem" }
         },
         "border": {
           "checkbox": {
+            "$type": "dimension",
             "indicator": {
-              "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" }
+              "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" }
             }
           },
           "radio": {
+            "$type": "percentage",
             "indicator": {
-              "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" }
+              "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" }
             }
           }
         }
       },
       "grid": {
-        "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" }
+        "$type": "dimension",
+        "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" }
       },
       "autosuggest": {
+        "$type": "dimension",
         "icon": {
-          "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" },
-          "height": {
-            "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height"
-          }
+          "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" },
+          "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" }
         },
         "spinner": {
-          "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" },
-          "height": {
-            "value": "{size.form.autosuggest.spinner.width}",
-            "type": "dimension",
-            "source": "$form-autosuggest-spinner-height"
-          }
+          "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" },
+          "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" }
         },
         "border": {
-          "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" }
+          "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" }
         }
       },
       "border": {
+        "$type": "dimension",
         "radius": {
           "check": {
-            "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" }
+            "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" }
           },
-          "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" }
+          "width": { "source": "$form-check-border-width", "$value": ".125rem" }
         }
       },
       "feedback": {
+        "$type": "dimension",
         "tooltip": {
           "border": {
-            "radius": {
-              "value": "{size.border.radius.base}",
-              "type": "dimension",
-              "source": "$form-feedback-tooltip-border-radius"
-            }
+            "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" }
           }
         }
       }
diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
index 207ceab897..065a110f54 100644
--- a/tokens/src/core/components/Form/spacing.json
+++ b/tokens/src/core/components/Form/spacing.json
@@ -1,152 +1,108 @@
 {
   "spacing": {
+    "$type": "dimension",
     "form": {
       "input": {
         "padding": {
           "y": {
-            "base": {
-              "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y"
-            },
-            "sm": {
-              "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm"
-            },
-            "lg": {
-              "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg"
-            }
+            "base": { "source": "$input-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+            "sm": { "source": "$input-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" },
+            "lg": { "source": "$input-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" }
           },
           "x": {
-            "base": {
-              "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x"
-            },
-            "sm": {
-              "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm"
-            },
-            "lg": {
-              "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg"
-            }
+            "base": { "source": "$input-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+            "sm": { "source": "$input-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" },
+            "lg": { "source": "$input-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" }
           }
         },
         "check": {
-          "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" },
+          "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" },
           "margin": {
             "x": {
-              "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" },
-              "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" }
+              "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" },
+              "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" }
             },
-            "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" }
+            "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" }
           }
         }
       },
       "text": {
         "margin": {
-          "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" }
+          "top": { "source": "$form-text-margin-top", "$value": ".25rem" }
         }
       },
       "check": {
         "inline": {
           "margin": {
-            "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" }
+            "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" }
           }
         },
         "position": {
-          "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" }
+          "axis": { "source": "$form-check-position-axis", "$value": ".375rem" }
         }
       },
       "group": {
         "margin": {
-          "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" }
+          "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" }
         }
       },
       "control": {
-        "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" },
+        "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" },
         "spacer": {
-          "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" }
+          "x": { "source": "$custom-control-spacer-x", "$value": "1rem" }
         },
         "select": {
           "padding": {
             "y": {
-              "base": {
-                "value": "{spacing.form.input.padding.y.base}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y"
-              },
-              "sm": {
-                "value": "{spacing.form.input.padding.y.sm}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y-sm"
-              },
-              "lg": {
-                "value": "{spacing.form.input.padding.y.lg}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y-lg"
-              }
+              "base": { "source": "$custom-select-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+              "sm": { "source": "$custom-select-padding-y-sm", "$value": "{spacing.form.input.padding.y.sm}" },
+              "lg": { "source": "$custom-select-padding-y-lg", "$value": "{spacing.form.input.padding.y.lg}" }
             },
             "x": {
-              "base": {
-                "value": "{spacing.form.input.padding.x.base}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x"
-              },
-              "sm": {
-                "value": "{spacing.form.input.padding.x.sm}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x-sm"
-              },
-              "lg": {
-                "value": "{spacing.form.input.padding.x.lg}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x-lg"
-              }
+              "base": { "source": "$custom-select-padding-x", "$value": "{spacing.form.input.padding.x.base}" },
+              "sm": { "source": "$custom-select-padding-x-sm", "$value": "{spacing.form.input.padding.x.sm}" },
+              "lg": { "source": "$custom-select-padding-x-lg", "$value": "{spacing.form.input.padding.x.lg}" }
             }
           },
           "indicator": {
-            "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" }
+            "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" }
           },
           "feedback": {
             "icon": {
               "padding": {
                 "right": {
-                  "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
-                  "type": "dimension",
-                  "source": "$custom-select-feedback-icon-padding-right"
+                  "source": "$custom-select-feedback-icon-padding-right",
+                  "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})"
                 }
               },
               "position": {
-                "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
-                "type": "dimension",
-                "source": "$custom-select-feedback-icon-position"
+                "source": "$custom-select-feedback-icon-position",
+                "$value": {
+                  "position-y": "center",
+                  "position-x": "right",
+                  "offset-x": "calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+                  "offset-y": "0"
+                }
               }
             },
             "margin": {
-              "top": {
-                "value": "{spacing.form.text.margin.top}",
-                "type": "dimension",
-                "source": "$form-feedback-margin-top"
-              }
+              "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" }
             },
             "tooltip": {
               "padding": {
-                "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" },
-                "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" }
+                "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" },
+                "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" }
               }
             }
           },
           "icon": {
-            "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" }
+            "padding": { "source": "$select-icon-padding", "$value": ".5625rem" }
           }
         },
         "file": {
           "padding": {
-            "y": {
-              "value": "{spacing.form.input.padding.y.base}",
-              "type": "dimension",
-              "source": "$custom-file-padding-y"
-            },
-            "x": {
-              "value": "{spacing.form.input.padding.x.base}",
-              "type": "dimension",
-              "source": "$custom-file-padding-x"
-            }
+            "y": { "source": "$custom-file-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+            "x": { "source": "$custom-file-padding-x", "$value": "{spacing.form.input.padding.x.base}" }
           }
         }
       }
diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
index 0cd752e9f9..14b7c2afc5 100644
--- a/tokens/src/core/components/Form/transition.json
+++ b/tokens/src/core/components/Form/transition.json
@@ -1,15 +1,51 @@
 {
   "transition": {
+    "$type": "transition",
     "form": {
       "input": {
-        "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$input-transition"
+        "source": "$input-transition",
+        "$value": [
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       },
-      "control": { 
-        "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$custom-forms-transition" 
+      "control": {
+        "source": "$custom-forms-transition",
+        "$value": [
+          {
+            "property": "background-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       }
     }
   }
diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
index 5974f22657..dd4973969b 100644
--- a/tokens/src/core/components/Form/typography.json
+++ b/tokens/src/core/components/Form/typography.json
@@ -3,118 +3,54 @@
     "form": {
       "input": {
         "font": {
-          "family": {
-            "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family"
-          },
+          "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
           "size": {
-            "base": {
-              "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size"
-            },
-            "sm": {
-              "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm"
-            },
-            "lg": {
-              "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg"
-            }
+            "$type": "dimension",
+            "base": { "source": "$input-font-size", "$value": "{typography.input.btn.font.size.base}" },
+            "sm": { "source": "$input-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+            "lg": { "source": "$input-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
           },
-          "weight": {
-            "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight"
-          }
+          "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
         },
         "line-height": {
-          "base": {
-            "value": "{typography.input.btn.line-height.base}",
-            "type": "dimension",
-            "source": "$input-line-height"
-          },
-          "sm": {
-            "value": "{typography.input.btn.line-height.sm}",
-            "type": "dimension",
-            "source": "$input-line-height-sm"
-          },
-          "lg": {
-            "value": "{typography.input.btn.line-height.lg}",
-            "type": "dimension",
-            "source": "$input-line-height-lg"
-          }
+          "$type": "number",
+          "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" },
+          "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+          "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
         }
       },
       "control": {
         "select": {
           "font": {
-            "family": {
-              "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-select-font-family"
-            },
+            "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
             "size": {
-              "base": {
-                "value": "{typography.form.input.font.size.base}",
-                "type": "dimension",
-                "source": "$custom-select-font-size"
-              },
-              "sm": {
-                "value": "{typography.form.input.font.size.sm}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-sm"
-              },
-              "lg": {
-                "value": "{typography.form.input.font.size.lg}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-lg"
-              }
+              "$type": "dimension",
+              "base": { "source": "$custom-select-font-size", "$value": "{typography.form.input.font.size.base}" },
+              "sm": { "source": "$custom-select-font-size-sm", "$value": "{typography.form.input.font.size.sm}" },
+              "lg": { "source": "$custom-select-font-size-lg", "$value": "{typography.form.input.font.size.lg}" }
             },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-select-font-weight"
-            }
+            "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
           },
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-select-line-height"
-          }
+          "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }
         },
         "file": {
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-file-line-height"
-          },
+          "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" },
           "font": {
-            "family": { "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-file-font-family" },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-file-font-weight"
-            }
+            "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
+            "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
           }
         }
       },
       "feedback": {
+        "$type": "dimension",
         "font": {
-          "size": {
-            "value": "{typography.font.size.small.base}",
-            "type": "dimension",
-            "source": "$form-feedback-font-size"
-          }
+          "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" }
         },
         "tooltip": {
           "font": {
-            "size": {
-              "value": "{typography.font.size.sm}",
-              "type": "dimension",
-              "source": "$form-feedback-tooltip-font-size"
-            }
+            "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
           },
-          "line-height": {
-            "value": "{typography.line-height.base}",
-            "type": "dimension",
-            "source": "$form-feedback-tooltip-line-height"
-          }
+          "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" }
         }
       }
     }
diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json
index bb018fdffc..775992bfe5 100644
--- a/tokens/src/core/components/Icon.json
+++ b/tokens/src/core/components/Icon.json
@@ -1,11 +1,12 @@
 {
   "size": {
+    "$type": "dimension",
     "icon": {
-      "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" },
-      "xs": { "value": "1rem", "type": "dimension", "source": "$icon-xs" },
-      "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" },
-      "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" },
-      "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" }
+      "inline": { "source": "$icon-inline", "$value": ".8em" },
+      "xs": { "source": "$icon-xs", "$value": "1rem" },
+      "sm": { "source": "$icon-sm", "$value": "1.25rem" },
+      "md": { "source": "$icon-md", "$value": "1.5rem" },
+      "lg": { "source": "$icon-lg", "$value": "1.75rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json
index be573f9fc7..57c3b225be 100644
--- a/tokens/src/core/components/IconButton.json
+++ b/tokens/src/core/components/IconButton.json
@@ -1,14 +1,11 @@
 {
   "size": {
+    "$type": "dimension",
     "icon-button": {
       "diameter": {
-        "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
-        "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
-        "inline": {
-          "value": "calc({typography.line-height.base} * 1em + .1em)",
-          "type": "dimension",
-          "source": "$btn-icon-diameter-inline"
-        }
+        "md": { "source": "$btn-icon-diameter-md", "$value": "2.75rem" },
+        "sm": { "source": "$btn-icon-diameter-sm", "$value": "2.25rem" },
+        "inline": { "source": "$btn-icon-diameter-inline", "$value": "calc({typography.line-height.base} * 1em + .1em)" }
       }
     }
   }
diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
index 5e388523de..0e62fd3bc8 100644
--- a/tokens/src/core/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -1,27 +1,28 @@
 {
   "typography": {
+    "$type": "percentage",
     "image": {
       "figure-caption": {
-        "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" }
+        "font-size": { "source": "$figure-caption-font-size", "$value": "90%" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "image": {
       "thumbnail": {
         "border": {
-          "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" },
-          "radius": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius"
-          }
+          "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" },
+          "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "image": {
       "thumbnail": {
-        "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" }
+        "padding": { "source": "$thumbnail-padding", "$value": ".25rem" }
       }
     }
   }
diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json
index 8451663fd9..a9ed30dc57 100644
--- a/tokens/src/core/components/Menu.json
+++ b/tokens/src/core/components/Menu.json
@@ -1,15 +1,16 @@
 {
   "spacing": {
+    "$type": "dimension",
     "menu": {
       "item": {
         "padding": {
-          "x": { "value": "{spacing.btn.padding.x.base}", "type": "dimension", "source": "$menu-item-padding-x" },
-          "y": { "value": "{spacing.btn.padding.y.base}", "type": "dimension", "source": "$menu-item-padding-y" }
+          "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" },
+          "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" }
         },
         "icon": {
           "margin": {
-            "left": { "value": ".25em", "type": "dimension", "source": "$menu-item-icon-margin-left" },
-            "right": { "value": "{spacing.menu.item.icon.margin.left}", "type": "dimension", "source": "$menu-item-icon-margin-right" }
+            "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" },
+            "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" }
           }
         }
       }
@@ -20,27 +21,28 @@
       "select": {
         "btn-link": {
           "text-decoration": {
-            "line": { "value": "underline", "type": "textDecoration", "source": "$menu-select-btn-link-text-decoration-line" },
-            "thickness": { "value": ".125rem", "type": "dimension", "source": "$menu-select-btn-link-text-decoration-thickness" }
+            "line": { "source": "$menu-select-btn-link-text-decoration-line", "$value": "underline", "$type": "textDecoration" },
+            "thickness": { "source": "$menu-select-btn-link-text-decoration-thickness", "$value": ".125rem", "$type": "dimension" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "menu": {
       "base": {
-        "border-radius": { "value": ".25em", "type": "dimension", "source": "$menu-border-radius" },
-        "max-height": { "value": "16.813rem", "type": "dimension", "source": "$menu-max-height" }
+        "border-radius": { "source": "$menu-border-radius", "$value": ".25em" },
+        "max-height": { "source": "$menu-max-height", "$value": "16.813rem" }
       },
       "item": {
-        "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" },
+        "height": { "source": "$menu-item-height", "$value": "3rem" },
         "width": {
-          "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" },
-          "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" }
+          "base": { "source": "$menu-item-width", "$value": "19rem" },
+          "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" }
         },
         "border": {
-          "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-border-width" }
+          "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" }
         }
       }
     }
diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json
index a8322e6484..de3e27ee52 100644
--- a/tokens/src/core/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -1,47 +1,52 @@
 {
   "elevation": {
+    "$type": "number",
     "modal": {
-      "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" },
-      "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" }
+      "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" },
+      "zindex": { "source": "$zindex-modal", "$value": "1050" }
     }
   },
   "size": {
+    "$type": "dimension",
     "modal": {
-      "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" },
-      "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" },
-      "md": { "value": "500px", "type": "dimension", "source": "$modal-md" },
-      "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" },
+      "xl": { "source": "$modal-xl", "$value": "1140px" },
+      "lg": { "source": "$modal-lg", "$value": "800px" },
+      "md": { "source": "$modal-md", "$value": "500px" },
+      "sm": { "source": "$modal-sm", "$value": "400px" },
       "content-border": {
-        "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" },
-        "radius": {
-          "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius"
-        }
+        "width": { "source": "$modal-content-border-width", "$value": "0px" },
+        "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "modal": {
       "inner-padding": {
-        "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" },
-        "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" }
+        "base": { "source": "$modal-inner-padding", "$value": "1.5rem" },
+        "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
       },
       "footer-padding": {
         "base": {
-          "value": "{spacing.modal.footer-padding.y} 1.5rem",
-          "type": "dimension",
-          "source": "$modal-footer-padding"
+          "source": "$modal-footer-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.footer-padding.y}"
+          }
         },
-        "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" }
+        "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
       },
       "header-padding": {
         "base": {
-          "value": "{spacing.modal.header-padding.y} 1.5rem",
-          "type": "dimension",
-          "source": "$modal-header-padding"
+          "source": "$modal-header-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.header-padding.y}"
+          }
         },
-        "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" }
+        "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
       },
-      "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" }
+      "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index 4f4de47f4c..6daea697dc 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -2,50 +2,48 @@
   "typography": {
     "nav": {
       "link": {
-        "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" },
-        "text-decoration": { "value": "none", "type": "textDecoration" }
+        "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" },
+        "text-decoration": { "$value": "none", "$type": "textDecoration" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "nav": {
       "pills": {
-        "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" },
+        "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" },
         "link": {
-          "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" }
+          "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" }
         },
         "inverse-link": {
-          "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-pills-link-border-width" }
+          "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" }
         }
       },
       "tabs": {
         "link": {
           "border-bottom": {
-            "width": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" }
+            "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" }
           }
         },
         "inverse-link": {
-          "active-border-bottom-width": {
-            "value": "{size.nav.tabs.link.border-bottom.width}",
-            "type": "dimension",
-            "source": "$nav-inverse-tabs-link-active-border-bottom-width"
-          }
+          "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" }
         },
         "border": {
-          "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
-          "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
+          "width": { "source": "$nav-tabs-border-width", "$value": "2px" },
+          "radius": { "source": "$nav-tabs-border-radius", "$value": "0" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "nav": {
       "link": {
         "padding": {
-          "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
+          "y": { "source": "$nav-link-padding-y", "$value": ".5rem" },
+          "x": { "source": "$nav-link-padding-x", "$value": "1rem" }
         },
-        "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+        "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" }
       }
     }
   }
diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json
index 4dd3062b49..2ea5f56ca0 100644
--- a/tokens/src/core/components/Navbar.json
+++ b/tokens/src/core/components/Navbar.json
@@ -1,69 +1,54 @@
 {
   "spacing": {
+    "$type": "dimension",
     "navbar": {
       "padding": {
-        "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
+        "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" },
         "x": {
-          "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
-          "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
+          "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" },
+          "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" }
         }
       },
       "brand": {
         "padding": {
-          "y": {
-            "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
-            "type": "dimension",
-            "source": "$navbar-brand-padding-y"
-          }
+          "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" }
         }
       },
       "toggler": {
         "padding": {
-          "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
-          "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
+          "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" },
+          "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" }
         }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "navbar": {
       "brand": {
-        "font-size": {
-          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
-        }
+        "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" }
       },
       "nav-link": {
-        "height": {
-          "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
-          "type": "dimension",
-          "source": "$nav-link-height"
-        }
+        "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" }
       },
       "toggler": {
-        "font-size": {
-          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
-        }
+        "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "navbar": {
       "nav": {
         "scroll": {
-          "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
+          "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" }
         }
       },
       "brand": {
-        "height": {
-          "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
-          "type": "dimension",
-          "source": "$navbar-brand-height"
-        }
+        "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" }
       },
       "toggler": {
-        "border-radius": {
-          "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
-        }
+        "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" }
       }
     }
   }
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index 691f063515..dc1460a37f 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -2,64 +2,63 @@
   "typography": {
     "pagination": {
       "font-size": {
-        "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" }
+        "$type": "dimension",
+        "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
       },
-      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" }
+      "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "pagination": {
       "padding": {
         "y": {
-          "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" },
-          "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" },
-          "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" }
+          "base": { "source": "$pagination-padding-y", "$value": ".625rem" },
+          "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" },
+          "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" }
         },
         "x": {
-          "base": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" },
-          "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
-          "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
+          "base": { "source": "$pagination-padding-x", "$value": "1rem" },
+          "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" },
+          "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "pagination": {
       "icon": {
-        "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" },
-        "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" }
+        "width": { "source": "$pagination-icon-width", "$value": "2.25rem" },
+        "height": { "source": "$pagination-icon-height", "$value": "2.25rem" }
       },
       "secondary": {
         "height": {
-          "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" },
-          "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" }
+          "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" },
+          "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" }
         }
       },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" },
+        "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "sm": {
-            "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm"
-          },
-          "lg": {
-            "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg"
-          }
+          "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" },
+          "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" }
         }
       },
       "reduced": {
         "dropdown": {
-          "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" },
-          "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" }
+          "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" },
+          "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" }
         }
       },
       "toggle": {
         "border": {
-          "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" },
-          "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" }
+          "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" },
+          "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" }
         }
       },
       "focus": {
-        "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
+        "outline": { "source": "$pagination-focus-outline", "$value": "0" }
       }
     }
   }
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index b2f2c7e929..7a2bcc2f98 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -1,47 +1,51 @@
 {
   "typography": {
+    "$type": "dimension",
     "popover": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
+      "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" }
     }
   },
   "size": {
+    "$type": "dimension",
     "popover": {
-      "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
+      "max-width": { "source": "$popover-max-width", "$value": "480px" },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" },
-        "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" }
+        "width": { "source": "$popover-border-width", "$value": "{size.border.width}" },
+        "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" }
       },
       "icon": {
-        "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
-        "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
+        "height": { "source": "$popover-icon-height", "$value": "1rem" },
+        "width": { "source": "$popover-icon-width", "$value": "1rem" }
       },
       "arrow": {
-        "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
-        "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
+        "width": { "source": "$popover-arrow-width", "$value": "1rem" },
+        "height": { "source": "$popover-arrow-height", "$value": ".5rem" }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "popover": {
-      "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
+      "zindex": { "source": "$zindex-popover", "$value": "1060" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "popover": {
       "header": {
         "padding": {
-          "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
+          "y": { "source": "$popover-header-padding-y", "$value": ".5rem" },
+          "x": { "source": "$popover-header-padding-x", "$value": "1rem" }
         }
       },
       "body": {
         "padding": {
-          "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" },
-          "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" }
+          "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" },
+          "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" }
         }
       },
       "icon": {
-        "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
+        "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" }
       }
     }
   }
diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json
index 772e194f69..13aa5c5679 100644
--- a/tokens/src/core/components/ProductTour.json
+++ b/tokens/src/core/components/ProductTour.json
@@ -1,31 +1,25 @@
 {
   "size": {
+    "$type": "dimension",
     "product-tour": {
       "checkpoint": {
         "width": {
-          "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" },
-          "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" },
-          "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" }
+          "border": { "source": "$checkpoint-border-width", "$value": "8px" },
+          "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" },
+          "max": { "source": "$checkpoint-max-width", "$value": "480px" }
         },
         "arrow": {
-          "top": {
-            "value": "{size.product-tour.checkpoint.width.arrow}",
-            "type": "dimension",
-            "source": "$checkpoint-arrow-border-top"
-          },
-          "transparent": {
-            "value": "{size.product-tour.checkpoint.width.arrow}",
-            "type": "dimension",
-            "source": "$checkpoint-arrow-border-transparent"
-          }
+          "top": { "source": "$checkpoint-arrow-border-top", "$value": "{size.product-tour.checkpoint.width.arrow}" },
+          "transparent": { "source": "$checkpoint-arrow-border-transparent", "$value": "{size.product-tour.checkpoint.width.arrow}" }
         }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "product-tour": {
       "checkpoint": {
-        "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" }
+        "zindex": { "source": "$checkpoint-z-index", "$value": "1060" }
       }
     }
   }
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index 82a0626871..09a2edd5db 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -1,38 +1,53 @@
 {
   "typography": {
+    "$type": "dimension",
     "progress-bar": {
-      "font-size": {
-        "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size"
-      }
+      "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" }
     }
   },
   "size": {
+    "$type": "dimension",
     "progress-bar": {
       "height": {
-        "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" },
-        "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" }
+        "base": { "source": "$progress-height", "$value": "1rem" },
+        "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" }
       },
       "border": {
-        "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" },
-        "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" }
+        "width": { "source": "$progress-bar-border-width", "$value": "1px" },
+        "radius": { "source": "$progress-border-radius", "$value": "0" }
       },
-      "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
+      "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "progress-bar": {
       "hint": {
-        "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" }
+        "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" }
       }
     }
   },
   "transition": {
+    "$type": "transition",
     "progress-bar": {
-      "bar": {
-        "animation-timing": {
-          "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing"
-        },
-        "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" }
+      "animation-timing": {
+        "source": "$progress-bar-animation-timing",
+        "$value": {
+          "duration": "1s",
+          "timing-function": "linear",
+          "delay": "0s",
+          "iteration-count": "infinite"
+        }
+      },
+      "transition": {
+        "source": "$progress-bar-transition",
+        "$value": {
+          "property": "width",
+          "duration": ".6s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        }
       }
     }
   }
diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json
index 75eb4ec290..795c27de0f 100644
--- a/tokens/src/core/components/SearchField.json
+++ b/tokens/src/core/components/SearchField.json
@@ -1,23 +1,21 @@
 {
   "size": {
+    "$type": "dimension",
     "search-field": {
       "border": {
         "width": {
-          "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
-          "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
+          "base": { "source": "$search-border-width", "$value": ".0625rem" },
+          "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" }
         },
-        "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
+        "radius": { "source": "$search-border-radius", "$value": "0" }
       },
-      "search-input-height": {
-        "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
-        "type": "dimension",
-        "source": "$input-height-search"
-      }
+      "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "search-field": {
-      "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
+      "margin-button": { "source": "$search-button-margin", "$value": ".5rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json
index aa4c0a71ab..b3b89e747b 100644
--- a/tokens/src/core/components/SelectableBox.json
+++ b/tokens/src/core/components/SelectableBox.json
@@ -1,9 +1,10 @@
 {
   "spacing": {
+    "$type": "dimension",
     "selectable-box": {
-      "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" },
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" },
-      "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" }
+      "padding": { "source": "$selectable-box-padding", "$value": "1rem" },
+      "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" },
+      "box-space": { "source": "$selectable-box-space", "$value": ".75rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index 86b7358b82..12f8cb0c1b 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -1,9 +1,10 @@
 {
   "elevation": {
+    "$type": "number",
     "sheet": {
       "zindex": {
-        "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
-        "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
+        "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" },
+        "main": { "source": "$zindex-sheet", "$value": "1032" }
       }
     }
   }
diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json
index 2c642554bf..4a086b811d 100644
--- a/tokens/src/core/components/Spinner.json
+++ b/tokens/src/core/components/Spinner.json
@@ -1,19 +1,21 @@
 {
   "size": {
+    "$type": "dimension",
     "spinner": {
       "base": {
-        "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" },
-        "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" },
-        "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" }
+        "width": { "source": "$spinner-width", "$value": "2rem" },
+        "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" },
+        "border-width": { "source": "$spinner-border-width", "$value": ".25em" }
       },
       "sm": {
-        "width": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" },
-        "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" },
-        "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" }
+        "width": { "source": "$spinner-width-sm", "$value": "1rem" },
+        "height": { "source": "$spinner-height-sm", "$value": "{size.spinner.sm.width}" },
+        "border-width": { "source": "$spinner-border-width-sm", "$value": ".2em" }
       }
     }
   },
   "spacing": {
-    "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" }
+    "$type": "dimension",
+    "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" }
   }
 }
diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json
index 8faa1f01ff..1a51bc842c 100644
--- a/tokens/src/core/components/Stack.json
+++ b/tokens/src/core/components/Stack.json
@@ -1,7 +1,8 @@
 {
   "size": {
+    "$type": "dimension",
     "stack": {
-      "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" }
+      "gap": { "source": "$stack-gap", "$value": "0" }
     }
   }
 }
diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json
index 27b3e77b5c..f292871793 100644
--- a/tokens/src/core/components/Stepper.json
+++ b/tokens/src/core/components/Stepper.json
@@ -1,42 +1,40 @@
 {
   "spacing": {
+    "$type": "dimension",
     "stepper": {
       "header": {
         "padding": {
-          "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" },
-          "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" }
+          "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" },
+          "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" }
         },
         "step": {
-          "padding": {
-            "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding"
-          },
+          "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" },
           "list": {
             "padding": {
-              "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" },
-              "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" }
+              "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" },
+              "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" }
             },
-            "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" }
+            "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "stepper": {
       "header": {
-        "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" }
+        "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" }
       },
       "step": {
-        "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" },
-        "bubble-error-shadow-width": {
-          "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width"
-        }
+        "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" },
+        "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" }
       }
     }
   },
   "typography": {
     "spacer": {
-      "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" }
+      "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" }
     }
   }
 }
diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json
index 9246a1e8d4..e85f22aca8 100644
--- a/tokens/src/core/components/Sticky.json
+++ b/tokens/src/core/components/Sticky.json
@@ -1,7 +1,8 @@
 {
   "spacing": {
+    "$type": "dimension",
     "sticky": {
-      "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
+      "offset": { "source": "$sticky-offset", "$value": "0" }
     }
   }
 }
diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
index 4413acf5da..6bc272e388 100644
--- a/tokens/src/core/components/Tab.json
+++ b/tokens/src/core/components/Tab.json
@@ -1,18 +1,19 @@
 {
   "spacing": {
+    "$type": "dimension",
     "tab": {
       "more-link-dropdown-toggle": {
-        "padding-x": { "value": ".7rem", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-y" }
+        "padding-x": { "source": "$tab-more-link-dropdown-toggle-padding-x", "$value": ".7rem" },
+        "padding-y": { "source": "$tab-more-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
       },
       "inverse-pills-link-dropdown-toggle": {
-        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" }
+        "padding-x": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+        "padding-y": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
       },
       "inverse-tabs-link-dropdown-toggle": {
-        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
-        "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
+        "padding-x": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+        "padding-y": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" },
+        "distance": { "source": "$tab-inverse-pills-link-dropdown-distance", "$value": "5px" }
       }
     }
   }
diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json
index 47a480abb6..7670ff130a 100644
--- a/tokens/src/core/components/Tabs.json
+++ b/tokens/src/core/components/Tabs.json
@@ -1,18 +1,18 @@
 {
   "size": {
+    "$type": "dimension",
     "tabs": {
       "notification": {
-        "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" },
-        "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" }
+        "height": { "source": "$tab-notification-height", "$value": "1rem" },
+        "width": { "source": "$tab-notification-width", "$value": "1rem" }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "tabs": {
       "notification": {
-        "font-size": {
-          "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size"
-        }
+        "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   }
diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json
index c375011455..5da5d6e1fe 100644
--- a/tokens/src/core/components/Toast.json
+++ b/tokens/src/core/components/Toast.json
@@ -1,28 +1,31 @@
 {
   "typography": {
+    "$type": "dimension",
     "toast": {
-      "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
+      "font-size": { "source": "$toast-font-size", "$value": ".875rem" }
     }
   },
   "size": {
+    "$type": "dimension",
     "toast": {
-      "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
+      "max-width": { "source": "$toast-max-width", "$value": "400px" },
       "border": {
-        "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
-        "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
+        "width": { "source": "$toast-border-width", "$value": "1px" },
+        "radius": { "source": "$toast-border-radius", "$value": ".25rem" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "toast": {
       "padding": {
-        "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
-        "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
+        "x": { "source": "$toast-padding-x", "$value": ".75rem" },
+        "y": { "source": "$toast-padding-y", "$value": ".25rem" }
       },
       "container": {
         "gutter": {
-          "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
-          "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
+          "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" },
+          "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" }
         }
       }
     }
diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json
index 664263b894..092a2d8124 100644
--- a/tokens/src/core/components/Tooltip.json
+++ b/tokens/src/core/components/Tooltip.json
@@ -1,33 +1,35 @@
 {
   "typography": {
+    "$type": "dimension",
     "tooltip": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" }
+      "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "tooltip": {
       "padding": {
-        "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" }
+        "y": { "source": "$tooltip-padding-y", "$value": ".5rem" },
+        "x": { "source": "$tooltip-padding-x", "$value": ".5rem" }
       },
-      "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" }
+      "margin": { "source": "$tooltip-margin", "$value": "0" }
     }
   },
   "elevation": {
+    "$type": "number",
     "tooltip": {
-      "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" }
+      "zindex": { "source": "$zindex-tooltip", "$value": "1070" }
     }
   },
   "size": {
+    "$type": "dimension",
     "tooltip": {
-      "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" },
+      "max-width": { "source": "$tooltip-max-width", "$value": "200px" },
       "arrow": {
-        "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" },
-        "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" }
+        "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" },
+        "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" }
       },
-      "border-radius": {
-        "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius"
-      }
+      "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
index b9e9fdac9c..cb713a455c 100644
--- a/tokens/src/core/components/general/caret.json
+++ b/tokens/src/core/components/general/caret.json
@@ -1,13 +1,15 @@
 {
   "size": {
+    "$type": "dimension",
     "caret": {
-      "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" }
+      "width": { "source": "$caret-width", "$value": ".3em" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "caret": {
-      "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" },
-      "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" }
+      "base": { "source": "$caret-spacing", "$value": ".255em" },
+      "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index 045e188af2..c631e3d2d6 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -2,15 +2,16 @@
   "typography": {
     "headings": {
       "font": {
-        "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" },
-        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" }
+        "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" },
+        "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       },
-      "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" }
+      "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "headings": {
-      "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" }
+      "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json
index 2bb05ca012..baeb366d2d 100644
--- a/tokens/src/core/components/general/hr.json
+++ b/tokens/src/core/components/general/hr.json
@@ -1,9 +1,10 @@
 {
   "size": {
+    "$type": "dimension",
     "hr": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" },
-        "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" }
+        "width": { "source": "$hr-border-width", "$value": "{size.border.width}" },
+        "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" }
       }
     }
   }
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index 821dc85692..0bdc756950 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -3,48 +3,48 @@
     "input": {
       "btn": {
         "font": {
-          "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" },
+          "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" },
           "size": {
-            "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" },
-            "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" },
-            "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" }
+            "$type": "dimension",
+            "base": { "source": "$input-btn-font-size", "$value": "1.125rem" },
+            "sm": { "source": "$input-btn-font-size-sm", "$value": ".875rem" },
+            "lg": { "source": "$input-btn-font-size-lg", "$value": "1.325rem" }
           }
         },
         "line-height": {
-          "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" },
-          "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" },
-          "lg": {
-            "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg"
-          }
+          "$type": "number",
+          "base": { "source": "$input-btn-line-height", "$value": "1.3333" },
+          "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" },
+          "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "input": {
       "btn": {
         "padding": {
-          "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" },
+          "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" },
+          "x": { "source": "$input-btn-padding-x", "$value": "1rem" },
           "sm": {
-            "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" },
-            "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" }
+            "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" },
+            "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" }
           },
           "lg": {
-            "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" },
-            "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" }
+            "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" },
+            "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "input": {
       "btn": {
-        "border-width": {
-          "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width"
-        },
-        "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" }
+        "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" },
+        "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" }
       }
     }
   }
diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json
index bb48968eb1..8b6e4d34bb 100644
--- a/tokens/src/core/components/general/link.json
+++ b/tokens/src/core/components/general/link.json
@@ -2,26 +2,27 @@
   "typography": {
     "link": {
       "decoration": {
-        "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" },
-        "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" },
+        "$type": "textDecoration",
+        "base": { "source": "$link-decoration", "$value": "none" },
+        "hover": { "source": "$link-hover-decoration", "$value": "underline" },
         "inline": {
-          "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" }
+          "base": { "source": "$inline-link-decoration", "$value": "underline" },
+          "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" }
         },
         "muted": {
-          "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" },
+          "base": { "source": "$muted-link-decoration", "$value": "none" },
+          "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" },
           "inline": {
-            "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" },
-            "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" }
+            "base": { "source": "$muted-inline-link-decoration", "$value": "underline" },
+            "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" }
           }
         },
         "brand": {
-          "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" },
+          "base": { "source": "$brand-link-decoration", "$value": "none" },
+          "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" },
           "inline": {
-            "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" },
-            "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" }
+            "base": { "source": "$brand-inline-link-decoration", "$value": "underline" },
+            "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" }
           }
         }
       }
diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json
index 1b946b49d5..071f3b6a05 100644
--- a/tokens/src/core/components/general/list.json
+++ b/tokens/src/core/components/general/list.json
@@ -1,25 +1,28 @@
 {
   "typography": {
+    "$type": "fontWeight",
     "dt": {
-      "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" }
+      "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "list": {
-      "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" },
+      "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" },
       "group-item": {
         "padding": {
-          "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" },
-          "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" }
+          "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" },
+          "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "list-group": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" },
-        "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" }
+        "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" },
+        "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" }
       }
     }
   }
diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json
index c1104eb1bf..4a2f13eb2d 100644
--- a/tokens/src/core/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -1,24 +1,18 @@
 {
   "spacing": {
+    "$type": "dimension",
     "paragraph": {
-      "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" }
+      "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" }
     },
-    "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" }
+    "mark-padding": { "source": "$mark-padding", "$value": ".2em" }
   },
   "typography": {
+    "$type": "dimension",
     "blockquote": {
       "small": {
-        "font-size": {
-          "value": "{typography.font.size.small.base}",
-          "type": "dimension",
-          "source": "$blockquote-small-font-size"
-        }
+        "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" }
       },
-      "font-size": {
-        "value": "calc({typography.font.size.base} * 1.25)",
-        "type": "dimension",
-        "source": "$blockquote-font-size"
-      }
+      "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
     }
   }
 }
diff --git a/tokens/src/core/global/breakpoints.json b/tokens/src/core/global/breakpoints.json
index f4d4ee65bf..ab0a976bc3 100644
--- a/tokens/src/core/global/breakpoints.json
+++ b/tokens/src/core/global/breakpoints.json
@@ -1,12 +1,31 @@
 {
   "size": {
+    "$type": "dimension",
     "breakpoint": {
-      "xs": { "value": "0", "type": "dimension", "description": "Starting breakpoint for portrait phones." },
-      "sm": { "value": "576px", "type": "dimension", "description": "Starting breakpoint for landscape phones." },
-      "md": { "value": "768px", "type": "dimension", "description": "Starting breakpoint for tablets." },
-      "lg": { "value": "992px", "type": "dimension", "description": "Starting breakpoint for desktops." },
-      "xl": { "value": "1200px", "type": "dimension", "description": "Starting breakpoint for large desktops." },
-      "xxl": { "value": "1400px", "type": "dimension", "description": "Starting breakpoint for large desktops, more than 1400px." }
+      "xs": {
+        "$value": "0px",
+        "$description": "Starting breakpoint for portrait phones."
+      },
+      "sm": {
+        "$value": "576px",
+        "$description": "Starting breakpoint for landscape phones."
+      },
+      "md": {
+        "$value": "768px",
+        "$description": "Starting breakpoint for tablets."
+      },
+      "lg": {
+        "$value": "992px",
+        "$description": "Starting breakpoint for desktops."
+      },
+      "xl": {
+        "$value": "1200px",
+        "$description": "Starting breakpoint for large desktops."
+      },
+      "xxl": {
+        "$value": "1400px",
+        "$description": "Starting breakpoint for large desktops, more than 1400px."
+      }
     }
   }
 }
diff --git a/tokens/src/core/global/display.json b/tokens/src/core/global/display.json
deleted file mode 100644
index 3f892d460b..0000000000
--- a/tokens/src/core/global/display.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "typography": {
-    "display": {
-      "line-height": {
-        "base": { "value": "1", "type": "dimension", "source": "$display-line-height", "description": "Standard line height." },
-        "mobile": { "value": "3.5rem", "type": "dimension", "source": "$display-mobile-line-height", "description": "Mobile line height." }
-      },
-      "1": { "value": "3.75rem", "type": "dimension", "source": "$display1-size", "description": "Font size for heading of level 1." },
-      "2": { "value": "4.875rem", "type": "dimension", "source": "$display2-size", "description": "Font size for heading of level 2." },
-      "3": { "value": "5.625rem", "type": "dimension", "source": "$display3-size", "description": "Font size for heading of level 3." },
-      "4": { "value": "7.5rem", "type": "dimension", "source": "$display4-size", "description": "Font size for heading of level 4." },
-      "mobile": { "value": "3.25rem", "type": "dimension", "source": "$display-mobile-size", "description": "Font size for mobile devices." },
-      "weight": {
-        "1": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display1-weight", "description": "Font weight of level 1." },
-        "2": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display2-weight", "description": "Font weight of level 2." },
-        "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." },
-        "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." }
-      }
-    },
-    "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" }
-  }
-}
diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json
index a4b88e4240..16f42c3061 100644
--- a/tokens/src/core/global/elevation.json
+++ b/tokens/src/core/global/elevation.json
@@ -1,19 +1,61 @@
 {
   "elevation": {
+    "$type": "number",
     "zindex": {
-      "0": { "value": 0, "type": "ratio", "description": "z-index of level 0." },
-      "200": { "value": 200, "type": "ratio", "description": "z-index of level 200." },
-      "400": { "value": 400, "type": "ratio", "description": "z-index of level 400." },
-      "600": { "value": 600, "type": "ratio", "description": "z-index of level 600." },
-      "800": { "value": 800, "type": "ratio", "description": "z-index of level 800." },
-      "1000": { "value": 1000, "type": "ratio", "description": "z-index of level 1000." },
-      "1200": { "value": 1200, "type": "ratio", "description": "z-index of level 1200." },
-      "1400": { "value": 1400, "type": "ratio", "description": "z-index of level 1400." },
-      "1600": { "value": 1600, "type": "ratio", "description": "z-index of level 1600." },
-      "1800": { "value": 1800, "type": "ratio", "description": "z-index of level 1800." },
-      "2000": { "value": 2000, "type": "ratio", "description": "z-index of level 2000." },
-      "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio", "description": "z-index for sticky element." },
-      "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio", "description": "z-index of for fixed element." }
+      "0": {
+        "$value": 0,
+        "$description": "z-index of level 0."
+      },
+      "200": {
+        "$value": 200,
+        "$description": "z-index of level 200."
+      },
+      "400": {
+        "$value": 400,
+        "$description": "z-index of level 400."
+      },
+      "600": {
+        "$value": 600,
+        "$description": "z-index of level 600."
+      },
+      "800": {
+        "$value": 800,
+        "$description": "z-index of level 800."
+      },
+      "1000": {
+        "$value": 1000,
+        "$description": "z-index of level 1000."
+      },
+      "1200": {
+        "$value": 1200,
+        "$description": "z-index of level 1200."
+      },
+      "1400": {
+        "$value": 1400,
+        "$description": "z-index of level 1400."
+      },
+      "1600": {
+        "$value": 1600,
+        "$description": "z-index of level 1600."
+      },
+      "1800": {
+        "$value": 1800,
+        "$description": "z-index of level 1800."
+      },
+      "2000": {
+        "$value": 2000,
+        "$description": "z-index of level 2000."
+      },
+      "sticky": {
+        "source": "$zindex-sticky",
+        "$value": 1020,
+        "$description": "z-index for sticky element."
+      },
+      "fixed": {
+        "source": "$zindex-fixed",
+        "$value": 1030,
+        "$description": "z-index of for fixed element."
+      }
     }
   }
 }
diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json
index aa57039186..5ea9056694 100644
--- a/tokens/src/core/global/other.json
+++ b/tokens/src/core/global/other.json
@@ -1,4 +1,8 @@
 {
   "yiq-contrasted-threshold": 128,
-  "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" }
+  "theme-interval": {
+    "$type": "percentage",
+    "source": "$theme-color-interval",
+    "$value": "8%"
+  }
 }
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index 4c4f3f2344..fb48d6a6b3 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -1,36 +1,89 @@
 {
   "spacing": {
+    "$type": "dimension",
     "spacer": {
-      "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" },
-      "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" },
-      "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" },
-      "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" },
-      "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
-      "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
-      "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" },
-      "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
-      "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
-      "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" },
-      "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
+      "0": {
+        "$value": "0",
+        "$description": "Space value of level 0"
+      },
+      "1": {
+        "$value": "calc({spacing.spacer.base} * .25)",
+        "$description": "Space value of level 1"
+      },
+      "2": {
+        "$value": "calc({spacing.spacer.base} * .5)",
+        "$description": "Space value of level 2"
+      },
+      "3": {
+        "$value": "{spacing.spacer.base}",
+        "$description": "Space value of level 3"
+      },
+      "4": {
+        "$value": "calc({spacing.spacer.base} * 1.5)",
+        "$description": "Space value of level 4"
+      },
+      "5": {
+        "$value": "calc({spacing.spacer.base} * 3)",
+        "$description": "Space value of level 5"
+      },
+      "6": {
+        "$value": "calc({spacing.spacer.base} * 5)",
+        "$description": "Space value of level 6"
+      },
+      "base": {
+        "source": "$spacer",
+        "$value": "1rem",
+        "$description": "Basic space value"
+      },
+      "1.5": {
+        "$value": "calc({spacing.spacer.base} * .375)",
+        "$description": "Space value of level 1.5"
+      },
+      "2.5": {
+        "$value": "calc({spacing.spacer.base} * .75)",
+        "$description": "Space value of level 2.5"
+      },
+      "3.5": {
+        "$value": "calc({spacing.spacer.base} * 1.25)",
+        "$description": "Space value of level 3.5"
+      },
+      "4.5": {
+        "$value": "calc({spacing.spacer.base} * 2)",
+        "$description": "Space value of level 4.5"
+      },
+      "5.5": {
+        "$value": "calc({spacing.spacer.base} * 4)",
+        "$description": "Space value of level 5.5"
+      }
     },
     "label": {
       "margin-bottom": {
-        "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label."
+        "source": "$label-margin-bottom",
+        "$value": ".5rem",
+        "$description": "Margin bottom for label."
       }
     },
     "table": {
       "cell": {
         "padding": {
-          "base": { "value": ".75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." },
-          "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." }
+          "base": {
+            "source": "$table-cell-padding",
+            "$value": ".75rem",
+            "$description": "Padding for tables."
+          },
+          "sm": {
+            "source": "$table-cell-padding-sm",
+            "$value": ".3rem",
+            "$description": "Padding sm for tables."
+          }
         }
       }
     },
     "grid": {
       "gutter-width": {
-        "value": "24px", "type": "dimension", "source": "$grid-gutter-width", "description": "Grid gutter width value."
+        "source": "$grid-gutter-width",
+        "$value": "24px",
+        "$description": "Grid gutter width value."
       }
     }
   }
diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
index 7cd6c13d3b..657ee85e2f 100644
--- a/tokens/src/core/global/transition.json
+++ b/tokens/src/core/global/transition.json
@@ -1,13 +1,50 @@
 {
   "transition": {
-    "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" },
-    "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" },
+    "$type": "transition",
+    "base": {
+      "source": "$transition-base",
+      "$value": {
+        "property": "all",
+        "duration": ".2s",
+        "timing-function": "ease-in-out",
+        "delay": "0s",
+        "behavior": "normal"
+      },
+      "$description": "Generic transition for any property change"
+    },
+    "fade": {
+      "source": "$transition-fade",
+      "$value": {
+        "property": "opacity",
+        "duration": ".15s",
+        "timing-function": "linear",
+        "delay": "0s",
+        "behavior": "normal"
+      },
+      "$description": "Opacity transition that takes 150ms"
+    },
     "collapse": {
       "height": {
-        "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms"
+        "source": "$transition-collapse",
+        "$value": {
+          "property": "height",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
+        "$description": "Collapse transition for height that takes 350ms"
       },
       "width": {
-        "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms"
+        "source": "$transition-collapse-width",
+        "$value": {
+          "property": "width",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
+        "$description": "Collapse transition for width that takes 350ms"
       }
     }
   }
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 935fa96e9b..0dec9157f8 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -2,90 +2,285 @@
   "typography": {
     "font": {
       "family": {
+        "$type": "fontFamily",
         "base": {
-          "value": "{typography.font.family.sans.serif}",
-          "type": "fontFamily",
           "source": "$font-family-base",
-          "description": "Basic font family."
+          "$value": "{typography.font.family.sans.serif}",
+          "$description": "Basic font family."
         },
         "sans": {
           "serif": {
-            "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",  Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",  \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
-            "type": "fontFamily",
             "source": "$font-family-sans-serif",
-            "description": "Sans-serif font family."
+            "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
+            "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
+            "$description": "Sans-serif font family."
           }
         },
-        "serif": { "value": "serif", "source": "$font-family-serif", "description": "Serif font family." },
+        "serif": {
+          "source": "$font-family-serif",
+          "$value": "serif",
+          "$description": "Serif font family."
+        },
         "monospace": {
-          "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",  \"Courier New\", monospace",
-          "type": "fontFamily",
           "source": "$font-family-monospace",
-          "description": "Monospace font family."
+          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
+          "$description": "Monospace font family."
         }
       },
       "size": {
-        "base": { "value": "1.125rem", "type": "dimension", "source": "$font-size-base", "description": "Base font size." },
-        "lg": { "value": "1.4063rem", "type": "dimension", "source": "$font-size-lg", "description": "Large font size." },
-        "sm": { "value": ".875rem", "type": "dimension", "source": "$font-size-sm", "description": "Small font size." },
-        "xs": { "value": ".75rem", "type": "dimension", "source": "$font-size-xs", "description": "Extra-small font size." },
-        "small": {
-          "base": { "value": "87.5%", "type": "percentage", "source": "$small-font-size", "description": "Small font size." },
-          "x": { "value": "75%", "type": "percentage", "source": "$x-small-font-size", "description": "X-small font size." }
-        },
-        "h1": { "value": "2.5rem", "type": "dimension", "source": "$h1-font-size", "description": "Font size of heading level 1." },
-        "h2": { "value": "2rem", "type": "dimension", "source": "$h2-font-size", "description": "Font size of heading level 2." },
-        "h3": { "value": "1.375rem", "type": "dimension", "source": "$h3-font-size", "description": "Font size of heading level 3." },
-        "h4": { "value": "1.125rem", "type": "dimension", "source": "$h4-font-size", "description": "Font size of heading level 4." },
-        "h5": { "value": ".875rem", "type": "dimension", "source": "$h5-font-size", "description": "Font size of heading level 5." },
-        "h6": { "value": ".75rem", "type": "dimension", "source": "$h6-font-size", "description": "Font size of heading level 6." },
-        "mobile": {
-          "h1": { "value": "2.25rem", "type": "dimension", "source": "$h1-mobile-font-size", "description": "Mobile font size of heading level 1." },
-          "h2": { "value": "{typography.font.size.h2}", "type": "dimension", "source": "$h2-mobile-font-size", "description": "Mobile font size of heading level 2." },
-          "h3": { "value": "{typography.font.size.h3}", "type": "dimension", "source": "$h3-mobile-font-size", "description": "Mobile font size of heading level 3." },
-          "h4": { "value": "{typography.font.size.h4}", "type": "dimension", "source": "$h4-mobile-font-size", "description": "Mobile font size of heading level 4." },
-          "h5": { "value": "{typography.font.size.h5}", "type": "dimension", "source": "$h5-mobile-font-size", "description": "Mobile font size of heading level 5." },
-          "h6": { "value": "{typography.font.size.h6}", "type": "dimension", "source": "$h6-mobile-font-size", "description": "Mobile font size of heading level 6." }
+        "$type": "dimension",
+        "base": {
+          "source": "$font-size-base",
+          "$value": "1.125rem",
+          "$description": "Base font size."
         },
-        "lead": {
-          "value": "calc({typography.font.size.base} * 1.25)",
-          "type": "dimension",
+        "lg": {
           "source": "$lead-font-size",
-          "description": "Lead text font size."
+          "$value": "calc({typography.font.size.base} * 1.25)",
+          "$description": "Lead text font size."
+        },
+        "sm": {
+          "source": "$small-font-size",
+          "$value": "87.5%",
+          "$description": "Small font size."
+        },
+        "xs": {
+          "source": "$x-small-font-size",
+          "$value": "75%",
+          "$description": "X-small font size."
         },
         "micro": {
-          "value": ".688rem",
-          "type": "dimension",
           "source": "$micro-font-size",
-          "description": "Micro utils text font size."
+          "$value": ".688rem",
+          "$type": "dimension",
+          "$description": "Micro utils text font size."
+        },
+        "h1": {
+          "base": {
+            "source": "$h1-font-size",
+            "$value": "2.5rem",
+            "$description": "Base font size of heading level 1."
+          },
+          "mobile": {
+            "source": "$h1-mobile-font-size",
+            "$value": "2.25rem",
+            "$description": "Mobile font size of heading level 1."
+          }
+        },
+        "h2": {
+          "base": {
+            "source": "$h2-font-size",
+            "$value": "2rem",
+            "$description": "Font size of heading level 2."
+          },
+          "mobile": {
+            "source": "$h2-mobile-font-size",
+            "$value": "{typography.font.size.h2.base}",
+            "$description": "Mobile font size of heading level 2."
+          }
+        },
+        "h3": {
+          "base": {
+            "source": "$h3-font-size",
+            "$value": "1.375rem",
+            "$description": "Font size of heading level 3."
+          },
+          "mobile": {
+            "source": "$h3-mobile-font-size",
+            "$value": "{typography.font.size.h3.base}",
+            "$description": "Mobile font size of heading level 3."
+          }
+        },
+        "h4": {
+          "base": {
+            "source": "$h4-font-size",
+            "$value": "1.125rem",
+            "$description": "Font size of heading level 4."
+          },
+          "mobile": {
+            "source": "$h4-mobile-font-size",
+            "$value": "{typography.font.size.h4.base}",
+            "$description": "Mobile font size of heading level 4."
+          }
+        },
+        "h5": {
+          "base": {
+            "source": "$h5-font-size",
+            "$value": ".875rem",
+            "$description": "Font size of heading level 5."
+          },
+          "mobile": {
+            "source": "$h5-mobile-font-size",
+            "$value": "{typography.font.size.h5.base}",
+            "$description": "Mobile font size of heading level 5."
+          }
+        },
+        "h6": {
+          "base": {
+            "source": "$h6-font-size",
+            "$value": ".75rem",
+            "$description": "Font size of heading level 6."
+          },
+          "mobile": {
+            "source": "$h6-mobile-font-size",
+            "$value": "{typography.font.size.h6.base}",
+            "$description": "Mobile font size of heading level 6."
+          }
+        },
+        "display": {
+          "1": {
+            "source": "$display1-size",
+            "$value": "3.75rem",
+            "$description": "Font size for heading of level 1."
+          },
+          "2": {
+            "source": "$display2-size",
+            "$value": "4.875rem",
+            "$description": "Font size for heading of level 2."
+          },
+          "3": {
+            "source": "$display3-size",
+            "$value": "5.625rem",
+            "$description": "Font size for heading of level 3."
+          },
+          "4": {
+            "source": "$display4-size",
+            "$value": "7.5rem",
+            "$description": "Font size for heading of level 4."
+          },
+          "mobile": {
+            "1": {
+              "source": "$display-mobile-size",
+              "$value": "3.25rem",
+              "$description": "Mobile font size for heading of level 1."
+            },
+            "2": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 2."
+            },
+            "3": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 3."
+            },
+            "4": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 4."
+            }
+          }
         }
       },
       "weight": {
-        "lighter": { "value": "lighter", "type": "fontWeight", "source": "$font-weight-lighter", "description": "Lighter font weight." },
-        "light": { "value": "300", "type": "fontWeight", "source": "$font-weight-light", "description": "Light font weight." },
-        "normal": { "value": "400", "type": "fontWeight", "source": "$font-weight-normal", "description": "Normal font weight." },
+        "$type": "fontWeight",
+        "lighter": {
+          "source": "$font-weight-lighter",
+          "$value": "lighter",
+          "$description": "Lighter font weight."
+        },
+        "light": {
+          "source": "$font-weight-light",
+          "$value": "300",
+          "$description": "Light font weight."
+        },
+        "normal": {
+          "source": "$font-weight-normal",
+          "$value": "400",
+          "$description": "Normal font weight."
+        },
         "semi": {
-          "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold", "description": "Semi-bold font weight." }
+          "bold": {
+            "source": "$font-weight-semi-bold",
+            "$value": "500",
+            "$description": "Semi-bold font weight."
+          }
+        },
+        "bold": {
+          "source": "$font-weight-bold",
+          "$value": "700",
+          "$description": "Bold font weight."
+        },
+        "bolder": {
+          "source": "$font-weight-bolder",
+          "$value": "bolder",
+          "$description": "Bolder font weight."
         },
-        "bold": { "value": "700", "type": "fontWeight", "source": "$font-weight-bold", "description": "Bold font weight." },
-        "bolder": { "value": "bolder", "type": "fontWeight", "source": "$font-weight-bolder", "description": "Bolder font weight." },
         "base": {
-          "value": "{typography.font.weight.normal}",
-          "type": "fontWeight",
           "source": "$font-weight-base",
-          "description": "Basic font weight."
+          "$value": "{typography.font.weight.normal}",
+          "$description": "Basic font weight."
+        },
+        "lead": {
+          "source": "$lead-font-weight",
+          "$value": "inherit",
+          "$description": "Lead text font weight."
         },
-        "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." },
-        "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." }
+        "table-th": {
+          "source": "$table-th-font-weight",
+          "$value": "bold",
+          "$description": "Table th font weight."
+        },
+        "display": {
+          "1": {
+            "source": "$display1-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 1."
+          },
+          "2": {
+            "source": "$display2-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 2."
+          },
+          "3": {
+            "source": "$display3-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 3."
+          },
+          "4": {
+            "source": "$display4-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 4."
+          }
+        }
       }
     },
     "line-height": {
-      "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." },
-      "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." },
-      "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." },
+      "$type": "number",
+      "base": {
+        "source": "$line-height-base",
+        "$value": "1.5556",
+        "$description": "Basic line height."
+      },
+      "lg": {
+        "source": "$line-height-lg",
+        "$value": "1.5",
+        "$description": "Large line height."
+      },
+      "sm": {
+        "source": "$line-height-sm",
+        "$value": "1.5",
+        "$description": "Small line height."
+      },
       "micro": {
-        "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height."
+        "source": "$micro-line-height",
+        "$value": ".938rem",
+        "$description": "Micro utils line height."
+      },
+      "display": {
+        "base": {
+          "source": "$display-line-height",
+          "$value": "1",
+          "$description": "Standard display line height."
+        },
+        "mobile": {
+          "source": "$display-mobile-line-height",
+          "$value": "3.5rem",
+          "$description": "Mobile display line height."
+        }
       }
+    },
+    "print-page-size": {
+      "source": "$print-page-size",
+      "$value": "a3",
+      "$type": "dimension"
     }
   }
 }
diff --git a/tokens/src/core/utilities/color.json b/tokens/src/core/utilities/color.json
index c07768a755..92149da6d2 100644
--- a/tokens/src/core/utilities/color.json
+++ b/tokens/src/core/utilities/color.json
@@ -2,11 +2,42 @@
   "utilities": [
     {
       "filters": {
-        "category": ["color"],
-        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
-        "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"]
+        "category": [
+          "color"
+        ],
+        "type": [
+          "gray",
+          "primary",
+          "secondary",
+          "brand",
+          "success",
+          "info",
+          "warning",
+          "danger",
+          "light",
+          "dark",
+          "accent"
+        ],
+        "item": [
+          "base",
+          "100",
+          "200",
+          "300",
+          "400",
+          "500",
+          "600",
+          "700",
+          "800",
+          "900",
+          "a",
+          "b"
+        ]
       },
-      "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"]
+      "utilityFunctionsToApply": [
+        "bgVariant",
+        "textEmphasisVariant",
+        "borderColor"
+      ]
     }
   ]
 }
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index 58e1b3753e..e945ebcfe6 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -1,113 +1,314 @@
 {
   "color": {
+    "$type": "color",
     "bg": {
-      "base": { "value": "{color.white}", "type": "color", "description": "Basic background color." },
-      "active": { "value": "{color.primary.500}", "type": "color", "source": "$component-active-bg", "description": "Active background color." }
+      "base": { "$value": "{color.white}", "$description": "Basic background color." },
+      "active": {
+        "source": "$component-active-bg",
+        "$value": "{color.primary.500}",
+        "$description": "Active background color."
+      }
     },
     "text": {
-      "50":{
+      "50": {
         "black": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$text-black-50",
           "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "description": "Black text color with transparency of 50%."
+          "$value": "{color.black}",
+          "$description": "Black text color with transparency of 50%."
         },
         "white": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$text-white-50",
           "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "description": "White text color with transparency of 50%."
+          "$value": "{color.white}",
+          "$description": "White text color with transparency of 50%."
         }
       }
     },
-    "active": { "value": "{color.white}", "type": "color", "source": "$component-active-color", "description": "Color for active element." },
-    "disabled": { "value": "{color.gray.500}", "type": "color", "description": "Color for disabled element." },
+    "active": {
+      "source": "$component-active-color",
+      "$value": "{color.white}",
+      "$description": "Color for active element."
+    },
+    "disabled": {
+      "$value": "{color.gray.500}",
+      "$description": "Color for disabled element."
+    },
     "input": {
-      "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." }
+      "focus": {
+        "$value": "{color.primary.500}",
+        "$description": "Focused input value color."
+      }
     },
     "table": {
       "caption": {
-        "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color."
+        "source": "$table-caption-color",
+        "$value": "{color.text-muted}",
+        "$description": "Table caption color."
       },
       "border": {
-        "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color."
+        "source": "$table-border-color",
+        "$value": "{color.border}",
+        "$description": "Table border color."
       }
     },
-    "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." },
+    "border": {
+      "source": "$border-color",
+      "$value": "{color.gray.200}",
+      "$description": "Border color."
+    },
     "theme": {
       "bg": {
-        "primary": { "value": "{color.primary.100}", "type": "color", "description": "Theme-specific primary background color." },
-        "secondary": { "value": "{color.secondary.100}", "type": "color", "description": "Theme-specific secondary background color." },
-        "brand": { "value": "{color.brand.100}", "type": "color", "description": "Theme-specific brand background color." },
-        "success": { "value": "{color.success.100}", "type": "color", "description": "Theme-specific success background color." },
-        "info": { "value": "{color.info.100}", "type": "color", "description": "Theme-specific info background color." },
-        "warning": { "value": "{color.warning.100}", "type": "color", "description": "Theme-specific warning background color." },
-        "danger": { "value": "{color.danger.100}", "type": "color", "description": "Theme-specific danger background color." },
-        "light": { "value": "{color.light.100}", "type": "color", "description": "Theme-specific light background color." },
-        "dark": { "value": "{color.dark.100}", "type": "color", "description": "Theme-specific dark background color." },
-        "gray": { "value": "{color.gray.100}", "type": "color", "description": "Theme-specific gray background color." }
+        "primary": {
+          "$value": "{color.primary.100}",
+          "$description": "Theme-specific primary background color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.100}",
+          "$description": "Theme-specific secondary background color."
+        },
+        "brand": {
+          "$value": "{color.brand.100}",
+          "$description": "Theme-specific brand background color."
+        },
+        "success": {
+          "$value": "{color.success.100}",
+          "$description": "Theme-specific success background color."
+        },
+        "info": {
+          "$value": "{color.info.100}",
+          "$description": "Theme-specific info background color."
+        },
+        "warning": {
+          "$value": "{color.warning.100}",
+          "$description": "Theme-specific warning background color."
+        },
+        "danger": {
+          "$value": "{color.danger.100}",
+          "$description": "Theme-specific danger background color."
+        },
+        "light": {
+          "$value": "{color.light.100}",
+          "$description": "Theme-specific light background color."
+        },
+        "dark": {
+          "$value": "{color.dark.100}",
+          "$description": "Theme-specific dark background color."
+        },
+        "gray": {
+          "$value": "{color.gray.100}",
+          "$description": "Theme-specific gray background color."
+        }
       },
       "border": {
-        "primary": { "value": "{color.primary.200}", "type": "color", "description": "Theme-specific primary border color." },
-        "secondary": { "value": "{color.secondary.200}", "type": "color", "description": "Theme-specific secondary border color." },
-        "brand": { "value": "{color.brand.200}", "type": "color", "description": "Theme-specific brand border color." },
-        "success": { "value": "{color.success.200}", "type": "color", "description": "Theme-specific success border color." },
-        "info": { "value": "{color.info.200}", "type": "color", "description": "Theme-specific info border color." },
-        "warning": { "value": "{color.warning.200}", "type": "color", "description": "Theme-specific warning border color." },
-        "danger": { "value": "{color.danger.200}", "type": "color", "description": "Theme-specific danger border color." },
-        "light": { "value": "{color.light.200}", "type": "color", "description": "Theme-specific light border color." },
-        "dark": { "value": "{color.dark.200}", "type": "color", "description": "Theme-specific dark border color." },
-        "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." }
+        "primary": {
+          "$value": "{color.primary.200}",
+          "$description": "Theme-specific primary border color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.200}",
+          "$description": "Theme-specific secondary border color."
+        },
+        "brand": {
+          "$value": "{color.brand.200}",
+          "$description": "Theme-specific brand border color."
+        },
+        "success": {
+          "$value": "{color.success.200}",
+          "$description": "Theme-specific success border color."
+        },
+        "info": {
+          "$value": "{color.info.200}",
+          "$description": "Theme-specific info border color."
+        },
+        "warning": {
+          "$value": "{color.warning.200}",
+          "$description": "Theme-specific warning border color."
+        },
+        "danger": {
+          "$value": "{color.danger.200}",
+          "$description": "Theme-specific danger border color."
+        },
+        "light": {
+          "$value": "{color.light.200}",
+          "$description": "Theme-specific light border color."
+        },
+        "dark": {
+          "$value": "{color.dark.200}",
+          "$description": "Theme-specific dark border color."
+        },
+        "gray": {
+          "$value": "{color.gray.200}",
+          "$description": "Theme-specific gray border color."
+        }
       },
       "focus": {
-        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." },
-        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." },
-        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." },
-        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." },
-        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." },
-        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." },
-        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." },
-        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." },
-        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." },
-        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." }
+        "primary": {
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary focus color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary focus color."
+        },
+        "brand": {
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand focus color."
+        },
+        "success": {
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success focus color."
+        },
+        "info": {
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info focus color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning focus color."
+        },
+        "danger": {
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger focus color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light focus color."
+        },
+        "dark": {
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark focus color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray focus color."
+        }
       },
       "default": {
-        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." },
-        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary default color." },
-        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand default color." },
-        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success default color." },
-        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info default color." },
-        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning default color." },
-        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger default color." },
-        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light default color." },
-        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark default color." },
-        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray default color." }
+        "primary": {
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary default color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary default color."
+        },
+        "brand": {
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand default color."
+        },
+        "success": {
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success default color."
+        },
+        "info": {
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info default color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning default color."
+        },
+        "danger": {
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger default color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light default color."
+        },
+        "dark": {
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark default color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray default color."
+        }
       },
       "hover": {
-        "primary": { "value": "{color.primary.700}", "type": "color", "description": "Theme-specific primary hover color." },
-        "secondary": { "value": "{color.secondary.700}", "type": "color", "description": "Theme-specific secondary hover color." },
-        "brand": { "value": "{color.brand.700}", "type": "color", "description": "Theme-specific brand hover color." },
-        "success": { "value": "{color.success.700}", "type": "color", "description": "Theme-specific success hover color." },
-        "info": { "value": "{color.info.700}", "type": "color", "description": "Theme-specific info hover color." },
-        "warning": { "value": "{color.warning.700}", "type": "color", "description": "Theme-specific warning hover color." },
-        "danger": { "value": "{color.danger.700}", "type": "color", "description": "Theme-specific danger hover color." },
-        "light": { "value": "{color.light.700}", "type": "color", "description": "Theme-specific light hover color." },
-        "dark": { "value": "{color.dark.700}", "type": "color", "description": "Theme-specific dark hover color." },
-        "gray": { "value": "{color.gray.700}", "type": "color", "description": "Theme-specific gray hover color." }
+        "primary": {
+          "$value": "{color.primary.700}",
+          "$description": "Theme-specific primary hover color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.700}",
+          "$description": "Theme-specific secondary hover color."
+        },
+        "brand": {
+          "$value": "{color.brand.700}",
+          "$description": "Theme-specific brand hover color."
+        },
+        "success": {
+          "$value": "{color.success.700}",
+          "$description": "Theme-specific success hover color."
+        },
+        "info": {
+          "$value": "{color.info.700}",
+          "$description": "Theme-specific info hover color."
+        },
+        "warning": {
+          "$value": "{color.warning.700}",
+          "$description": "Theme-specific warning hover color."
+        },
+        "danger": {
+          "$value": "{color.danger.700}",
+          "$description": "Theme-specific danger hover color."
+        },
+        "light": {
+          "$value": "{color.light.700}",
+          "$description": "Theme-specific light hover color."
+        },
+        "dark": {
+          "$value": "{color.dark.700}",
+          "$description": "Theme-specific dark hover color."
+        },
+        "gray": {
+          "$value": "{color.gray.700}",
+          "$description": "Theme-specific gray hover color."
+        }
       },
       "active": {
-        "primary": { "value": "{color.primary.900}", "type": "color", "description": "Theme-specific primary active color." },
-        "secondary": { "value": "{color.secondary.900}", "type": "color", "description": "Theme-specific secondary active color." },
-        "brand": { "value": "{color.brand.900}", "type": "color", "description": "Theme-specific brand active color." },
-        "success": { "value": "{color.success.900}", "type": "color", "description": "Theme-specific success active color." },
-        "info": { "value": "{color.info.900}", "type": "color", "description": "Theme-specific info active color." },
-        "warning": { "value": "{color.warning.900}", "type": "color", "description": "Theme-specific warning active color." },
-        "danger": { "value": "{color.danger.900}", "type": "color", "description": "Theme-specific danger active color." },
-        "light": { "value": "{color.light.900}", "type": "color", "description": "Theme-specific light active color." },
-        "dark": { "value": "{color.dark.900}", "type": "color", "description": "Theme-specific dark active color." },
-        "gray": { "value": "{color.gray.900}", "type": "color", "description": "Theme-specific gray active color." }
+        "primary": {
+          "$value": "{color.primary.900}",
+          "$description": "Theme-specific primary active color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.900}",
+          "$description": "Theme-specific secondary active color."
+        },
+        "brand": {
+          "$value": "{color.brand.900}",
+          "$description": "Theme-specific brand active color."
+        },
+        "success": {
+          "$value": "{color.success.900}",
+          "$description": "Theme-specific success active color."
+        },
+        "info": {
+          "$value": "{color.info.900}",
+          "$description": "Theme-specific info active color."
+        },
+        "warning": {
+          "$value": "{color.warning.900}",
+          "$description": "Theme-specific warning active color."
+        },
+        "danger": {
+          "$value": "{color.danger.900}",
+          "$description": "Theme-specific danger active color."
+        },
+        "light": {
+          "$value": "{color.light.900}",
+          "$description": "Theme-specific light active color."
+        },
+        "dark": {
+          "$value": "{color.dark.900}",
+          "$description": "Theme-specific dark active color."
+        },
+        "gray": {
+          "$value": "{color.gray.900}",
+          "$description": "Theme-specific gray active color."
+        }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json
index 723ab050b5..ffb40b3c53 100644
--- a/tokens/src/themes/light/components/Alert.json
+++ b/tokens/src/themes/light/components/Alert.json
@@ -1,37 +1,26 @@
 {
   "color": {
+    "$type": "color",
     "alert": {
-      "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" },
-      "content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" },
+      "title": { "source": "$alert-title-color", "$value": "{color.black}" },
+      "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
       "icon": {
-        "success": {
-          "value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color"
-        },
-        "info": { "value": "{color.theme.default.info}", "type": "color", "source": "$alert-info-icon-color" },
-        "danger": {
-          "value": "{color.theme.default.danger}", "type": "color", "source": "$alert-danger-icon-color"
-        },
-        "warning": {
-          "value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color"
-        }
+        "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" },
+        "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" },
+        "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" },
+        "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" }
       },
       "bg": {
-        "success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" },
-        "info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" },
-        "danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" },
-        "warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" }
+        "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" },
+        "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" },
+        "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" },
+        "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" }
       },
       "border": {
-        "success": {
-          "value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color"
-        },
-        "info": { "value": "{color.theme.border.info}", "type": "color", "source": "$alert-info-border-color" },
-        "danger": {
-          "value": "{color.theme.border.danger}", "type": "color", "source": "$alert-danger-border-color"
-        },
-        "warning": {
-          "value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color"
-        }
+        "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" },
+        "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" },
+        "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" },
+        "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index 868e08e3d4..2bad75960e 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -1,28 +1,42 @@
 {
   "elevation": {
+    "$type": "shadow",
     "annotation": {
       "box-shadow": {
-        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
-        "type": "shadow",
-        "source": "$annotation-box-shadow"
+        "source": "$annotation-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
       }
     }
   },
   "color": {
+    "$type": "color",
     "annotation": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" },
-        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" },
-        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" },
-        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" },
-        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" }
+        "success": { "source": "$annotation-success-color", "$value": "{color.white}" },
+        "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" },
+        "error": { "source": "$annotation-error-color", "$value": "{color.white}" },
+        "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" },
+        "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" },
-        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" },
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" },
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" }
+        "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" },
+        "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" },
+        "light": { "source": "$annotation-light-bg", "$value": "{color.white}" },
+        "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json
index 614960f5f8..be1da05fe3 100644
--- a/tokens/src/themes/light/components/Avatar.json
+++ b/tokens/src/themes/light/components/Avatar.json
@@ -1,7 +1,8 @@
 {
   "color": {
+    "$type": "color",
     "avatar": {
-      "border": { "value": "{color.light.300}", "type": "color" }
+      "border": { "$value": "{color.light.300}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json
index 6ff6e21587..0eca2c6651 100644
--- a/tokens/src/themes/light/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -1,183 +1,118 @@
 {
   "color": {
+    "$type": "color",
     "badge": {
       "text": {
-        "primary": {
-          "value": "{color.primary.base}",
-          "type": "color",
-          "source": "$badge-primary-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "secondary": {
-          "value": "{color.secondary.base}",
-          "type": "color",
-          "source": "$badge-secondary-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "success": {
-          "value": "{color.success.base}",
-          "type": "color",
-          "source": "$badge-success-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "danger": {
-          "value": "{color.danger.base}",
-          "type": "color",
-          "source": "$badge-danger-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "warning": {
-          "value": "{color.warning.base}",
-          "type": "color",
-          "source": "$badge-warning-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "info": {
-          "value": "{color.info.base}",
-          "type": "color",
-          "source": "$badge-info-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "light": {
-          "value": "{color.light.base}",
-          "type": "color",
-          "source": "$badge-light-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "dark": {
-          "value": "{color.dark.base}",
-          "type": "color",
-          "source": "$badge-dark-color",
-          "modify": [{ "type": "color-yiq" }]
-        }
+        "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" },
+        "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" },
+        "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" },
+        "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" }
       },
       "bg": {
-        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" },
-        "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" },
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" },
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" },
-        "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" },
-        "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" },
-        "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" },
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" }
+        "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" },
+        "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" },
+        "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" }
       },
       "focus": {
-        "primary": {
-          "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color"
-        },
-        "secondary": {
-          "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color"
-        },
-        "success": {
-          "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color"
-        },
-        "warning": {
-          "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color"
-        },
-        "danger": {
-          "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color"
-        },
-        "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" },
-        "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" },
-        "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" },
+        "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" },
+        "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" },
+        "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" },
+        "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" },
+        "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" },
+        "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" },
+        "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" },
+        "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" },
         "bg": {
           "primary": {
-            "value": "{color.badge.bg.primary}",
-            "type": "color",
             "source": "$badge-primary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.primary}"
           },
           "secondary": {
-            "value": "{color.badge.bg.secondary}",
-            "type": "color",
             "source": "$badge-secondary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.secondary}"
           },
           "success": {
-            "value": "{color.badge.bg.success}",
-            "type": "color",
             "source": "$badge-success-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.success}"
           },
           "danger": {
-            "value": "{color.badge.bg.danger}",
-            "type": "color",
             "source": "$badge-danger-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.danger}"
           },
           "warning": {
-            "value": "{color.badge.bg.warning}",
-            "type": "color",
             "source": "$badge-warning-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.warning}"
           },
           "info": {
-            "value": "{color.badge.bg.info}",
-            "type": "color",
             "source": "$badge-info-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.info}"
           },
           "light": {
-            "value": "{color.badge.bg.light}",
-            "type": "color",
             "source": "$badge-light-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.light}"
           },
           "dark": {
-            "value": "{color.badge.bg.dark}",
-            "type": "color",
             "source": "$badge-dark-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.dark}"
           }
         },
         "box-shadow": {
           "primary": {
-            "value": "{color.badge.bg.primary}",
-            "type": "color",
             "source": "$badge-primary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.primary}"
           },
           "secondary": {
-            "value": "{color.badge.bg.secondary}",
-            "type": "color",
             "source": "$badge-secondary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.secondary}"
           },
           "success": {
-            "value": "{color.badge.bg.success}",
-            "type": "color",
             "source": "$badge-success-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.success}"
           },
           "danger": {
-            "value": "{color.badge.bg.danger}",
-            "type": "color",
             "source": "$badge-danger-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.danger}"
           },
           "warning": {
-            "value": "{color.badge.bg.warning}",
-            "type": "color",
             "source": "$badge-warning-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.warning}"
           },
           "info": {
-            "value": "{color.badge.bg.info}",
-            "type": "color",
             "source": "$badge-info-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.info}"
           },
           "light": {
-            "value": "{color.badge.bg.light}",
-            "type": "color",
             "source": "$badge-light-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.light}"
           },
           "dark": {
-            "value": "{color.badge.bg.dark}",
-            "type": "color",
             "source": "$badge-dark-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.dark}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
index 25ec20acef..e745bc3616 100644
--- a/tokens/src/themes/light/components/Breadcrumb.json
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -1,12 +1,13 @@
 {
   "color": {
+    "$type": "color",
     "breadcrumb": {
-      "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
-      "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
+      "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" },
+      "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" },
       "inverse": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
-        "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
-        "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
+        "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" },
+        "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" },
+        "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json
index b69eaec093..eabea9b6cd 100644
--- a/tokens/src/themes/light/components/Bubble.json
+++ b/tokens/src/themes/light/components/Bubble.json
@@ -1,17 +1,18 @@
 {
   "color": {
+    "$type": "color",
     "bubble": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" },
-        "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" },
-        "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" },
-        "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" }
+        "success": { "source": "$bubble-success-color", "$value": "{color.white}" },
+        "warning": { "source": "$bubble-warning-color", "$value": "{color.white}" },
+        "error": { "source": "$bubble-error-color", "$value": "{color.white}" },
+        "primary": { "source": "$bubble-primary-color", "$value": "{color.white}" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" },
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" },
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" },
-        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" }
+        "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" },
+        "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" },
+        "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 7b16f40169..23b6357841 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -1,257 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "brand": {
-          "value": "{color.btn.bg.brand}",
-          "type": "color",
           "source": "$btn-brand-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.brand}"
+        },
+        "outline-brand": {
+          "source": "$btn-brand-outline-color",
+          "$value": "{color.brand.base}"
+        },
+        "inverse-brand": {
+          "source": "$btn-brand-inverse-color",
+          "$value": "{color.brand.base}"
         },
-        "outline-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-color" },
-        "inverse-brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-inverse-color" },
         "inverse-outline-brand": {
-          "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-color"
+          "source": "$btn-brand-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" },
-        "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" },
+        "brand": {
+          "source": "$btn-brand-bg",
+          "$value": "{color.brand.base}"
+        },
+        "outline-brand": {
+          "source": "$btn-brand-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-brand": {
-          "value": "{color.btn.text.inverse-brand}",
-          "type": "color",
           "source": "$btn-brand-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-brand}"
         },
         "inverse-outline-brand": {
-          "value": "transparent",
-          "type": "color",
-          "source": "$btn-brand-inverse-outline-bg"
+          "source": "$btn-brand-inverse-outline-bg",
+          "$value": "transparent"
         }
       },
       "border": {
-        "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-border-color" },
+        "brand": {
+          "source": "$btn-brand-border-color",
+          "$value": "{color.btn.bg.brand}"
+        },
         "outline-brand": {
-          "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-outline-border-color"
+          "source": "$btn-brand-outline-border-color",
+          "$value": "{color.brand.base}"
         },
         "inverse-outline-brand": {
-          "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color"
+          "source": "$btn-brand-inverse-outline-border-color",
+          "$value": "{color.white}"
         },
-        "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" }
+        "inverse-brand": {
+          "source": "$btn-brand-inverse-border-color",
+          "$value": "transparent"
+        }
       },
       "hover": {
         "text": {
           "brand": {
-            "value": "{color.btn.hover.bg.brand}",
-            "type": "color",
             "source": "$btn-brand-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.brand}"
           },
           "outline-brand": {
-            "value": "{color.theme.hover.brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-hover-color"
+            "source": "$btn-brand-outline-hover-color",
+            "$value": "{color.theme.hover.brand}"
           },
           "inverse-brand": {
-            "value": "{color.btn.text.inverse-brand}",
-            "type": "color",
             "source": "$btn-brand-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.theme.hover.brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-hover-color"
+            "source": "$btn-brand-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.brand}"
           }
         },
         "bg": {
-          "brand": { "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-bg" },
-          "outline-brand": { "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-outline-hover-bg" },
+          "brand": {
+            "source": "$btn-brand-hover-bg",
+            "$value": "{color.theme.hover.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-hover-bg",
+            "$value": "{color.brand.100}"
+          },
           "inverse-brand": {
-            "value": "{color.btn.bg.inverse-brand}",
-            "type": "color",
             "source": "$btn-brand-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.brand.100}", "type": "color", "source": "$btn-brand-inverse-outline-hover-bg"
+            "source": "$btn-brand-inverse-outline-hover-bg",
+            "$value": "{color.brand.100}"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.theme.hover.brand}", "type": "color", "source": "$btn-brand-hover-border-color"
+            "source": "$btn-brand-hover-border-color",
+            "$value": "{color.theme.hover.brand}"
           },
           "outline-brand": {
-            "value": "{color.brand.900}", "type": "color", "source": "$btn-brand-outline-hover-border-color"
+            "source": "$btn-brand-outline-hover-border-color",
+            "$value": "{color.brand.900}"
           },
           "inverse-outline-brand": {
-            "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color"
+            "source": "$btn-brand-inverse-outline-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" }
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-hover-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "active": {
         "text": {
           "brand": {
-            "value": "{color.btn.active.bg.brand}",
-            "type": "color",
             "source": "$btn-brand-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.brand}"
           },
           "outline-brand": {
-            "value": "{color.btn.active.bg.outline-brand}",
-            "type": "color",
             "source": "$btn-brand-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-brand}"
           },
           "inverse-brand": {
-            "value": "{color.btn.text.inverse-brand}",
-            "type": "color",
             "source": "$btn-brand-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.active.bg.inverse-outline-brand}",
-            "type": "color",
             "source": "$btn-brand-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-brand}"
+          }
         },
         "bg": {
           "brand": {
-            "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-bg"
+            "source": "$btn-brand-active-bg",
+            "$value": "{color.theme.active.brand}"
           },
           "outline-brand": {
-            "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-outline-active-bg"
+            "source": "$btn-brand-outline-active-bg",
+            "$value": "{color.theme.bg.brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg"
+            "source": "$btn-brand-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.brand}"
           },
-          "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" }
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
         },
         "border": {
           "brand": {
-            "value": "{color.theme.active.brand}", "type": "color", "source": "$btn-brand-active-border-color"
+            "source": "$btn-brand-active-border-color",
+            "$value": "{color.theme.active.brand}"
           },
           "outline-brand": {
-            "value": "{color.theme.active.brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-active-border-color"
+            "source": "$btn-brand-outline-active-border-color",
+            "$value": "{color.theme.active.brand}"
           },
           "inverse-brand": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-brand-inverse-active-border-color"
+            "source": "$btn-brand-inverse-active-border-color",
+            "$value": "transparent"
           },
           "inverse-outline-brand": {
-            "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color"
+            "source": "$btn-brand-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" },
+          "brand": {
+            "source": "$btn-brand-focus-color",
+            "$value": "{color.btn.text.brand}"
+          },
           "inverse-brand": {
-            "value": "{color.btn.text.inverse-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-focus-color"
+            "source": "$btn-brand-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-brand}"
           },
           "outline-brand": {
-            "value": "{color.btn.text.outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-focus-color"
+            "source": "$btn-brand-outline-focus-color",
+            "$value": "{color.btn.text.outline-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.text.inverse-outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-focus-color"
+            "source": "$btn-brand-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
+            "source": "$btn-brand-focus-border-color",
+            "$value": "{color.btn.border.brand}"
           },
           "outline-brand": {
-            "value": "{color.btn.border.outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-focus-border-color"
+            "source": "$btn-brand-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-brand}"
           },
           "inverse-brand": {
-            "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color"
+            "source": "$btn-brand-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.border.inverse-outline-brand}", "type": "color",  "source": "$btn-brand-inverse-outline-focus-border-color"
+            "source": "$btn-brand-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-brand}"
           }
         },
         "bg": {
-          "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" },
+          "brand": {
+            "source": "$btn-brand-focus-bg",
+            "$value": "{color.btn.bg.brand}"
+          },
           "inverse-brand": {
-            "value": "{color.btn.bg.inverse-brand}",
             "source": "$btn-brand-inverse-focus-bg",
-            "type": "color"
+            "$value": "{color.btn.bg.inverse-brand}"
           },
-          "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" },
-          "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" }
+          "outline-brand": {
+            "source": "$btn-brand-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-brand": {
+            "source": "$btn-brand-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" },
+          "brand": {
+            "source": "$btn-brand-focus-outline-color",
+            "$value": "{color.theme.focus.brand}"
+          },
           "outline-brand": {
-            "value": "{color.theme.focus.brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-focus-outline-color"
+            "source": "$btn-brand-outline-focus-outline-color",
+            "$value": "{color.theme.focus.brand}"
           },
           "inverse-brand": {
-            "value": "{color.btn.focus.border.inverse-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-focus-outline-color"
+            "source": "$btn-brand-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.focus.border.inverse-outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-focus-outline-color"
+            "source": "$btn-brand-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-brand}"
           }
         }
       },
       "disabled": {
         "text": {
-          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" },
-          "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" },
+          "brand": {
+            "source": "$btn-brand-disabled-color",
+            "$value": "{color.btn.text.brand}"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-disabled-color",
+            "$value": "{color.brand.500}"
+          },
           "outline-brand": {
-            "value": "{color.btn.hover.text.outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-disabled-color"
+            "source": "$btn-brand-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.text.inverse-outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-disabled-color"
+            "source": "$btn-brand-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
           }
         },
         "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": "{color.white}", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
+          "brand": {
+            "source": "$btn-brand-disabled-bg",
+            "$value": "{color.btn.bg.brand}"
+          },
+          "outline-brand": {
+            "source": "$btn-brand-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-brand": {
+            "source": "$btn-brand-inverse-disabled-bg",
+            "$value": "{color.white}"
+          },
           "inverse-outline-brand": {
-            "value": "{color.btn.bg.inverse-outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-disabled-bg"
+            "source": "$btn-brand-inverse-outline-disabled-bg",
+            "$value": "{color.btn.bg.inverse-outline-brand}"
           }
         },
         "border": {
-          "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" },
+          "brand": {
+            "source": "$btn-brand-disabled-border-color",
+            "$value": "{color.btn.border.brand}"
+          },
           "outline-brand": {
-            "value": "{color.btn.border.outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-outline-disabled-border-color"
+            "source": "$btn-brand-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-brand}"
           },
           "inverse-brand": {
-            "value": "{color.btn.disabled.bg.inverse-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-disabled-border-color"
+            "source": "$btn-brand-inverse-disabled-border-color",
+            "$value": "{color.btn.disabled.bg.inverse-brand}"
           },
           "inverse-outline-brand": {
-            "value": "{color.btn.text.inverse-outline-brand}",
-            "type": "color",
-            "source": "$btn-brand-inverse-outline-disabled-border-color"
+            "source": "$btn-brand-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.text.inverse-outline-brand}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
index 8eabdf63ae..2a8c1f4bfe 100644
--- a/tokens/src/themes/light/components/Button/core.json
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -1,24 +1,23 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
-      "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
+      "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" }
     }
   },
-  "elevation":  {
+  "elevation": {
+    "$type": "shadow",
     "btn": {
       "box-shadow": {
-        "base": {
-          "value": "none",
-          "type": "shadow",
-          "source": "$btn-box-shadow"
-        },
-        "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
+        "base": { "source": "$btn-box-shadow", "$value": "none" },
+        "active": { "source": "$btn-active-box-shadow", "$value": "none" }
       }
     }
   },
   "other": {
+    "$type": "number",
     "btn": {
-      "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
+      "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index 9272c9473c..92ec188b21 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -1,244 +1,303 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "danger": {
-          "value": "{color.btn.bg.danger}",
-          "type": "color",
           "source": "$btn-danger-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "outline-danger": {
-          "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-color"
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.danger}"
         },
+        "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" },
         "inverse-danger": {
-          "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-color"
+          "source": "$btn-danger-inverse-color",
+          "$value": "{color.danger.base}"
         },
         "inverse-outline-danger": {
-          "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-color"
+          "source": "$btn-danger-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" },
-        "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" },
+        "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" },
+        "outline-danger": {
+          "source": "$btn-danger-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-danger": {
-          "value": "{color.btn.text.inverse-danger}",
-          "type": "color",
           "source": "$btn-danger-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-danger}"
         },
-        "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" }
+        "inverse-outline-danger": {
+          "source": "$btn-danger-inverse-outline-bg",
+          "$value": "transparent"
+        }
       },
       "border": {
-        "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" },
+        "danger": {
+          "source": "$btn-danger-border-color",
+          "$value": "{color.btn.bg.danger}"
+        },
         "outline-danger": {
-          "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color"
+          "source": "$btn-danger-outline-border-color",
+          "$value": "{color.danger.base}"
+        },
+        "inverse-danger": {
+          "source": "$btn-danger-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" },
         "inverse-outline-danger": {
-          "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color"
+          "source": "$btn-danger-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "danger": {
-            "value": "{color.btn.hover.bg.danger}",
-            "type": "color",
             "source": "$btn-danger-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.danger}"
           },
           "outline-danger": {
-            "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-outline-hover-color"
+            "source": "$btn-danger-outline-hover-color",
+            "$value": "{color.theme.hover.danger}"
           },
           "inverse-danger": {
-            "value": "{color.btn.text.inverse-danger}",
-            "type": "color",
             "source": "$btn-danger-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-danger}"
           },
           "inverse-outline-danger": {
-            "value": "{color.theme.hover.danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-outline-hover-color"
+            "source": "$btn-danger-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.danger}"
           }
         },
         "bg": {
-          "danger": { "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-bg" },
+          "danger": {
+            "source": "$btn-danger-hover-bg",
+            "$value": "{color.theme.hover.danger}"
+          },
           "outline-danger": {
-            "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-outline-hover-bg"
+            "source": "$btn-danger-outline-hover-bg",
+            "$value": "{color.danger.100}"
           },
           "inverse-danger": {
-            "value": "{color.btn.bg.inverse-danger}",
-            "type": "color",
             "source": "$btn-danger-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-danger}"
           },
           "inverse-outline-danger": {
-            "value": "{color.danger.100}", "type": "color", "source": "$btn-danger-inverse-outline-hover-bg"
+            "source": "$btn-danger-inverse-outline-hover-bg",
+            "$value": "{color.danger.100}"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.theme.hover.danger}", "type": "color", "source": "$btn-danger-hover-border-color"
+            "source": "$btn-danger-hover-border-color",
+            "$value": "{color.theme.hover.danger}"
           },
           "outline-danger": {
-            "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color"
+            "source": "$btn-danger-outline-hover-border-color",
+            "$value": "{color.danger.900}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" },
           "inverse-outline-danger": {
-            "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color"
+            "source": "$btn-danger-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "danger": {
-            "value": "{color.btn.active.bg.danger}",
-            "type": "color",
             "source": "$btn-danger-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.danger}"
           },
           "outline-danger": {
-            "value": "{color.btn.active.bg.outline-danger}",
-            "type": "color",
             "source": "$btn-danger-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-danger}"
           },
           "inverse-danger": {
-            "value": "{color.btn.text.inverse-danger}",
-            "type": "color",
             "source": "$btn-danger-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-danger}"
           },
           "inverse-outline-danger": {
-            "value": "{color.btn.active.bg.inverse-outline-danger}",
-            "type": "color",
             "source": "$btn-danger-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-danger}"
+          }
         },
         "bg": {
           "danger": {
-            "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-bg"
+            "source": "$btn-danger-active-bg",
+            "$value": "{color.theme.active.danger}"
           },
           "outline-danger": {
-            "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg"
+            "source": "$btn-danger-outline-active-bg",
+            "$value": "{color.theme.bg.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" },
           "inverse-outline-danger": {
-            "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg"
+            "source": "$btn-danger-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.danger}"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.theme.active.danger}", "type": "color", "source": "$btn-danger-active-border-color"
+            "source": "$btn-danger-active-border-color",
+            "$value": "{color.theme.active.danger}"
           },
           "outline-danger": {
-            "value": "{color.theme.active.danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-active-border-color"
+            "source": "$btn-danger-outline-active-border-color",
+            "$value": "{color.theme.active.danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-active-border-color",
+            "$value": "transparent"
           },
-          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" },
           "inverse-outline-danger": {
-            "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" }
+            "source": "$btn-danger-inverse-outline-active-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "focus": {
         "text": {
-          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" },
+          "danger": {
+            "source": "$btn-danger-focus-color",
+            "$value": "{color.btn.text.danger}"
+          },
           "inverse-danger": {
-            "value": "{color.btn.text.inverse-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-focus-color"
+            "source": "$btn-danger-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-danger}"
           },
           "outline-danger": {
-            "value": "{color.btn.text.outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-focus-color"
+            "source": "$btn-danger-outline-focus-color",
+            "$value": "{color.btn.text.outline-danger}"
           },
           "inverse-outline-danger": {
-            "value": "{color.btn.text.inverse-outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-outline-focus-color"
+            "source": "$btn-danger-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-danger}"
           }
         },
         "border": {
           "danger": {
-            "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
+            "source": "$btn-danger-focus-border-color",
+            "$value": "{color.btn.focus.bg.danger}"
           },
           "outline-danger": {
-            "value": "{color.btn.border.outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-focus-border-color"
+            "source": "$btn-danger-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-danger}"
           },
           "inverse-danger": {
-            "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-focus-border-color"
+            "source": "$btn-danger-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-danger": {
-            "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color"
+            "source": "$btn-danger-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
           }
         },
         "bg": {
-          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" },
-          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" },
-          "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" },
-          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" }
+          "danger": {
+            "source": "$btn-danger-focus-bg",
+            "$value": "{color.btn.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-danger}"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" },
+          "danger": {
+            "source": "$btn-danger-focus-outline-color",
+            "$value": "{color.theme.focus.danger}"
+          },
           "outline-danger": {
-            "value": "{color.theme.focus.danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-focus-outline-color"
+            "source": "$btn-danger-outline-focus-outline-color",
+            "$value": "{color.theme.focus.danger}"
           },
           "inverse-danger": {
-            "value": "{color.btn.focus.border.inverse-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-focus-outline-color"
+            "source": "$btn-danger-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-danger}"
           },
           "inverse-outline-danger": {
-            "value": "{color.btn.focus.border.inverse-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-outline-focus-outline-color"
+            "source": "$btn-danger-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-danger}"
           }
         }
       },
       "disabled": {
         "text": {
-          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" },
+          "danger": {
+            "source": "$btn-danger-disabled-color",
+            "$value": "{color.btn.text.danger}"
+          },
           "outline-danger": {
-            "value": "{color.btn.hover.text.outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-disabled-color"
+            "source": "$btn-danger-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-danger}"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-disabled-color",
+            "$value": "{color.danger.base}"
           },
-          "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" },
           "inverse-outline-danger": {
-            "value": "{color.btn.text.inverse-outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-outline-disabled-color"
+            "source": "$btn-danger-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-danger}"
           }
         },
         "bg": {
-          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" },
-          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" },
-          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" },
-          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" }
+          "danger": {
+            "source": "$btn-danger-disabled-bg",
+            "$value": "{color.btn.bg.danger}"
+          },
+          "outline-danger": {
+            "source": "$btn-danger-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-danger": {
+            "source": "$btn-danger-inverse-disabled-bg",
+            "$value": "transparent"
+          },
+          "inverse-outline-danger": {
+            "source": "$btn-danger-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" },
+          "danger": {
+            "source": "$btn-danger-disabled-border-color",
+            "$value": "{color.btn.border.danger}"
+          },
           "outline-danger": {
-            "value": "{color.btn.border.outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-outline-disabled-border-color"
+            "source": "$btn-danger-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-danger}"
           },
           "inverse-danger": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-danger-inverse-disabled-border-color"
+            "source": "$btn-danger-inverse-disabled-border-color",
+            "$value": "transparent"
           },
           "inverse-outline-danger": {
-            "value": "{color.btn.border.inverse-outline-danger}",
-            "type": "color",
-            "source": "$btn-danger-inverse-outline-disabled-border-color"
+            "source": "$btn-danger-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-danger}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index dcb73c0d64..1256ed603c 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -1,227 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "dark": {
-          "value": "{color.btn.bg.dark}",
-          "type": "color",
           "source": "$btn-dark-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.dark}"
+        },
+        "outline-dark": {
+          "source": "$btn-dark-outline-color",
+          "$value": "{color.dark.base}"
+        },
+        "inverse-dark": {
+          "source": "$btn-dark-inverse-color",
+          "$value": "{color.dark.base}"
         },
-        "outline-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-color" },
-        "inverse-dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-inverse-color" },
         "inverse-outline-dark": {
-          "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-color"
+          "source": "$btn-dark-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" },
-        "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" },
+        "dark": {
+          "source": "$btn-dark-bg",
+          "$value": "{color.dark.base}"
+        },
+        "outline-dark": {
+          "source": "$btn-dark-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-dark": {
-          "value": "{color.btn.text.inverse-dark}",
-          "type": "color",
           "source": "$btn-dark-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-dark}"
         },
-        "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" }
+        "inverse-outline-dark": {
+          "source": "$btn-dark-inverse-outline-bg",
+          "$value": "transparent"
+        }
       },
       "border": {
-        "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" },
+        "dark": {
+          "source": "$btn-dark-border-color",
+          "$value": "{color.btn.bg.dark}"
+        },
         "outline-dark": {
-          "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color"
+          "source": "$btn-dark-outline-border-color",
+          "$value": "{color.dark.base}"
+        },
+        "inverse-dark": {
+          "source": "$btn-dark-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-border-color" },
         "inverse-outline-dark": {
-          "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color"
+          "source": "$btn-dark-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "dark": {
-            "value": "{color.btn.hover.bg.dark}",
-            "type": "color",
             "source": "$btn-dark-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.dark}"
           },
           "outline-dark": {
-            "value": "{color.theme.hover.dark}", "type": "color",  "source": "$btn-dark-outline-hover-color"
+            "source": "$btn-dark-outline-hover-color",
+            "$value": "{color.theme.hover.dark}"
           },
           "inverse-dark": {
-            "value": "{color.btn.text.inverse-dark}",
-            "type": "color",
             "source": "$btn-dark-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-dark}"
           },
           "inverse-outline-dark": {
-            "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-inverse-outline-hover-color"
+            "source": "$btn-dark-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.dark}"
           }
         },
         "bg": {
-          "dark": { "value": "{color.theme.hover.dark}", "type": "color", "source": "$btn-dark-hover-bg" },
-          "outline-dark": { "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-outline-hover-bg" },
+          "dark": {
+            "source": "$btn-dark-hover-bg",
+            "$value": "{color.theme.hover.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-hover-bg",
+            "$value": "{color.dark.100}"
+          },
           "inverse-dark": {
-            "value": "{color.btn.bg.inverse-dark}",
-            "type": "color",
             "source": "$btn-dark-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-dark}"
           },
           "inverse-outline-dark": {
-            "value": "{color.dark.100}", "type": "color", "source": "$btn-dark-inverse-outline-hover-bg"
+            "source": "$btn-dark-inverse-outline-hover-bg",
+            "$value": "{color.dark.100}"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.theme.hover.dark}", "type": "color",  "source": "$btn-dark-hover-border-color"
+            "source": "$btn-dark-hover-border-color",
+            "$value": "{color.theme.hover.dark}"
           },
           "outline-dark": {
-            "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color"
+            "source": "$btn-dark-outline-hover-border-color",
+            "$value": "{color.dark.900}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-hover-border-color" },
           "inverse-outline-dark": {
-            "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color"
+            "source": "$btn-dark-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "dark": {
-            "value": "{color.btn.active.bg.dark}",
-            "type": "color",
             "source": "$btn-dark-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.dark}"
           },
           "outline-dark": {
-            "value": "{color.btn.active.bg.outline-dark}",
-            "type": "color",
             "source": "$btn-dark-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-dark}"
           },
           "inverse-dark": {
-            "value": "{color.btn.text.inverse-dark}",
-            "type": "color",
             "source": "$btn-dark-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-dark}"
           },
           "inverse-outline-dark": {
-            "value": "{color.btn.active.bg.inverse-outline-dark}",
-            "type": "color",
             "source": "$btn-dark-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-dark}"
+          }
         },
         "bg": {
-          "dark": { "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-bg" },
+          "dark": {
+            "source": "$btn-dark-active-bg",
+            "$value": "{color.theme.active.dark}"
+          },
           "outline-dark": {
-            "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg"
+            "source": "$btn-dark-outline-active-bg",
+            "$value": "{color.theme.bg.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-dark": { "value": "{color.gray.100}", "type": "color", "source": "$btn-dark-inverse-active-bg" },
           "inverse-outline-dark": {
-            "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg"
+            "source": "$btn-dark-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.dark}"
           }
         },
         "border": {
           "dark": {
-            "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-active-border-color"
+            "source": "$btn-dark-active-border-color",
+            "$value": "{color.theme.active.dark}"
           },
           "outline-dark": {
-            "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color"
+            "source": "$btn-dark-outline-active-border-color",
+            "$value": "{color.theme.active.dark}"
           },
           "inverse-dark": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-dark-inverse-active-border-color"
+            "source": "$btn-dark-inverse-active-border-color",
+            "$value": "transparent"
           },
           "inverse-outline-dark": {
-            "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color"
+            "source": "$btn-dark-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-focus-color" },
-          "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-color" },
-          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-color" },
+          "dark": {
+            "source": "$btn-dark-focus-color",
+            "$value": "{color.btn.text.dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-color",
+            "$value": "inherit"
+          },
           "inverse-outline-dark": {
-            "value": "{color.btn.text.inverse-outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-outline-focus-color"
+            "source": "$btn-dark-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-dark}"
           }
         },
         "border": {
-          "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" },
+          "dark": {
+            "source": "$btn-dark-focus-border-color",
+            "$value": "{color.btn.focus.bg.dark}"
+          },
           "outline-dark": {
-            "value": "{color.btn.border.outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-outline-focus-border-color"
+            "source": "$btn-dark-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-dark}"
           },
           "inverse-dark": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-dark-inverse-focus-border-color"
+            "source": "$btn-dark-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-dark": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-dark-inverse-outline-focus-border-color"
+            "source": "$btn-dark-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
           }
         },
         "bg": {
-          "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-focus-bg" },
-          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-bg" },
-          "inverse-dark": { "value": "{color.btn.bg.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-bg" },
-          "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-focus-bg" }
+          "dark": {
+            "source": "$btn-dark-focus-bg",
+            "$value": "{color.btn.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-dark}"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-outline-color" },
-          "outline-dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-outline-color" },
+          "dark": {
+            "source": "$btn-dark-focus-outline-color",
+            "$value": "{color.theme.focus.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-focus-outline-color",
+            "$value": "{color.theme.focus.dark}"
+          },
           "inverse-dark": {
-            "value": "{color.btn.focus.border.inverse-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-focus-outline-color"
+            "source": "$btn-dark-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-dark}"
           },
           "inverse-outline-dark": {
-            "value": "{color.btn.focus.border.inverse-outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-outline-focus-border-color"
+            "source": "$btn-dark-inverse-outline-focus-border-color",
+            "$value": "{color.btn.focus.border.inverse-outline-dark}"
           }
         }
       },
       "disabled": {
         "text": {
-          "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-disabled-color" },
-          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-color" },
+          "dark": {
+            "source": "$btn-dark-disabled-color",
+            "$value": "{color.btn.text.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-disabled-color",
+            "$value": "inherit"
+          },
           "inverse-dark": {
-            "value": "{color.btn.text.inverse-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-disabled-color"
+            "source": "$btn-dark-inverse-disabled-color",
+            "$value": "{color.btn.text.inverse-dark}"
           },
           "inverse-outline-dark": {
-            "value": "{color.btn.text.inverse-outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-outline-disabled-color"
+            "source": "$btn-dark-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-dark}"
           }
         },
         "bg": {
-          "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-disabled-bg" },
-          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-bg" },
-          "inverse-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-disabled-bg" },
-          "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-disabled-bg" }
+          "dark": {
+            "source": "$btn-dark-disabled-bg",
+            "$value": "{color.btn.bg.dark}"
+          },
+          "outline-dark": {
+            "source": "$btn-dark-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-dark": {
+            "source": "$btn-dark-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
           "dark": {
-            "value": "{color.btn.border.dark}",
-            "type": "color",
-            "source": "$btn-dark-disabled-border-color"
+            "source": "$btn-dark-disabled-border-color",
+            "$value": "{color.btn.border.dark}"
           },
           "outline-dark": {
-            "value": "{color.btn.hover.text.outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-outline-disabled-border-color"
+            "source": "$btn-dark-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-dark}"
+          },
+          "inverse-dark": {
+            "source": "$btn-dark-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" },
           "inverse-outline-dark": {
-            "value": "{color.btn.focus.border.inverse-outline-dark}",
-            "type": "color",
-            "source": "$btn-dark-inverse-outline-disabled-border-color"
+            "source": "$btn-dark-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.focus.border.inverse-outline-dark}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 5f777e9524..91d38cfe14 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -1,235 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "info": {
-          "value": "{color.btn.bg.info}",
-          "type": "color",
           "source": "$btn-info-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.info}"
+        },
+        "outline-info": {
+          "source": "$btn-info-outline-color",
+          "$value": "{color.info.base}"
+        },
+        "inverse-info": {
+          "source": "$btn-info-inverse-color",
+          "$value": "{color.info.base}"
         },
-        "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-color" },
-        "inverse-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-inverse-color" },
         "inverse-outline-info": {
-          "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-color"
+          "source": "$btn-info-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" },
-        "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" },
+        "info": {
+          "source": "$btn-info-bg",
+          "$value": "{color.info.base}"
+        },
+        "outline-info": {
+          "source": "$btn-info-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-info": {
-          "value": "{color.btn.text.inverse-info}",
-          "type": "color",
           "source": "$btn-info-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-info}"
         },
-        "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" }
+        "inverse-outline-info": {
+          "source": "$btn-info-inverse-outline-bg",
+          "$value": "inherit"
+        }
       },
       "border": {
-        "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" },
+        "info": {
+          "source": "$btn-info-border-color",
+          "$value": "{color.btn.bg.info}"
+        },
         "outline-info": {
-          "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color"
+          "source": "$btn-info-outline-border-color",
+          "$value": "{color.info.base}"
+        },
+        "inverse-info": {
+          "source": "$btn-info-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" },
         "inverse-outline-info": {
-          "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color"
+          "source": "$btn-info-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "info": {
-            "value": "{color.btn.hover.bg.info}",
-            "type": "color",
             "source": "$btn-info-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.info}"
           },
           "outline-info": {
-            "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color"
+            "source": "$btn-info-outline-hover-color",
+            "$value": "{color.theme.hover.info}"
           },
           "inverse-info": {
-            "value": "{color.btn.text.inverse-info}",
-            "type": "color",
             "source": "$btn-info-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-info}"
           },
           "inverse-outline-info": {
-            "value": "{color.theme.hover.info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-hover-color"
+            "source": "$btn-info-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.info}"
           }
         },
         "bg": {
-          "info": { "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-bg" },
-          "outline-info": { "value": "{color.info.100}", "type": "color", "source": "$btn-info-outline-hover-bg" },
+          "info": {
+            "source": "$btn-info-hover-bg",
+            "$value": "{color.theme.hover.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-hover-bg",
+            "$value": "{color.info.100}"
+          },
           "inverse-info": {
-            "value": "{color.btn.bg.inverse-info}",
-            "type": "color",
             "source": "$btn-info-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-info}"
           },
           "inverse-outline-info": {
-            "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg"
+            "source": "$btn-info-inverse-outline-hover-bg",
+            "$value": "{color.info.100}"
           }
         },
         "border": {
           "info": {
-            "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color"
+            "source": "$btn-info-hover-border-color",
+            "$value": "{color.theme.hover.info}"
           },
           "outline-info": {
-            "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color"
+            "source": "$btn-info-outline-hover-border-color",
+            "$value": "{color.info.900}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" },
           "inverse-outline-info": {
-            "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color"
+            "source": "$btn-info-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "info": {
-            "value": "{color.btn.active.bg.info}",
-            "type": "color",
             "source": "$btn-info-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.info}"
           },
           "outline-info": {
-            "value": "{color.btn.active.bg.outline-info}",
-            "type": "color",
             "source": "$btn-info-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-info}"
           },
           "inverse-info": {
-            "value": "{color.btn.text.inverse-info}",
-            "type": "color",
             "source": "$btn-info-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-info}"
           },
           "inverse-outline-info": {
-            "value": "{color.btn.active.bg.inverse-outline-info}",
-            "type": "color",
             "source": "$btn-info-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-info}"
+          }
         },
         "bg": {
-          "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" },
+          "info": {
+            "source": "$btn-info-active-bg",
+            "$value": "{color.theme.active.info}"
+          },
           "outline-info": {
-            "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg"
+            "source": "$btn-info-outline-active-bg",
+            "$value": "{color.theme.bg.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" },
           "inverse-outline-info": {
-            "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg"
+            "source": "$btn-info-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.info}"
           }
         },
         "border": {
           "info": {
-            "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color"
+            "source": "$btn-info-active-border-color",
+            "$value": "{color.theme.active.info}"
           },
           "outline-info": {
-            "value": "{color.theme.active.info}",
-            "type": "color",
-            "source": "$btn-info-outline-active-border-color"
+            "source": "$btn-info-outline-active-border-color",
+            "$value": "{color.theme.active.info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-active-border-color",
+            "$value": "transparent"
           },
-          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" },
           "inverse-outline-info": {
-            "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color"
+            "source": "$btn-info-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" },
+          "info": {
+            "source": "$btn-info-focus-color",
+            "$value": "{color.btn.text.info}"
+          },
           "outline-info": {
-            "value": "{color.btn.text.outline-info}",
-            "type": "color",
-            "source": "$btn-info-outline-focus-color"
+            "source": "$btn-info-outline-focus-color",
+            "$value": "{color.btn.text.outline-info}"
           },
           "inverse-info": {
-            "value": "{color.btn.text.inverse-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-focus-color"
+            "source": "$btn-info-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-info}"
           },
           "inverse-outline-info": {
-            "value": "{color.btn.text.inverse-outline-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-focus-color"
+            "source": "$btn-info-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-info}"
           }
         },
         "border": {
-          "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" },
+          "info": {
+            "source": "$btn-info-focus-border-color",
+            "$value": "{color.btn.border.info}"
+          },
           "outline-info": {
-            "value": "{color.btn.border.outline-info}",
-            "type": "color",
-            "source": "$btn-info-outline-focus-border-color"
+            "source": "$btn-info-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
-          "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" },
           "inverse-outline-info": {
-            "value": "{color.btn.border.inverse-outline-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-focus-border-color"
+            "source": "$btn-info-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-info}"
           }
         },
         "bg": {
-          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" },
-          "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" },
-          "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" },
-          "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" }
+          "info": {
+            "source": "$btn-info-focus-bg",
+            "$value": "{color.btn.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-info}"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" },
+          "info": {
+            "source": "$btn-info-focus-outline-color",
+            "$value": "{color.theme.focus.info}"
+          },
           "outline-info": {
-            "value": "{color.theme.focus.info}",
-            "type": "color",
-            "source": "$btn-info-outline-focus-outline-color"
+            "source": "$btn-info-outline-focus-outline-color",
+            "$value": "{color.theme.focus.info}"
           },
           "inverse-info": {
-            "value": "{color.btn.focus.border.inverse-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-focus-outline-color"
+            "source": "$btn-info-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-info}"
           },
           "inverse-outline-info": {
-            "value": "{color.btn.focus.border.inverse-outline-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-focus-outline-color"
+            "source": "$btn-info-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-info}"
           }
         }
       },
       "disabled": {
         "text": {
-          "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" },
+          "info": {
+            "source": "$btn-info-disabled-color",
+            "$value": "{color.btn.text.info}"
+          },
           "outline-info": {
-            "value": "{color.btn.text.outline-info}",
-            "type": "color",
-            "source": "$btn-info-outline-disabled-color"
+            "source": "$btn-info-outline-disabled-color",
+            "$value": "{color.btn.text.outline-info}"
           },
           "inverse-info": {
-            "value": "{color.info.base}",
-            "type": "color",
-            "source": "$btn-info-inverse-disabled-color"
+            "source": "$btn-info-inverse-disabled-color",
+            "$value": "{color.info.base}"
           },
           "inverse-outline-info": {
-            "value": "{color.btn.text.inverse-outline-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-disabled-color"
+            "source": "$btn-info-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-info}"
           }
         },
         "bg": {
-          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" },
-          "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" },
-          "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" },
-          "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" }
+          "info": {
+            "source": "$btn-info-disabled-bg",
+            "$value": "{color.btn.bg.info}"
+          },
+          "outline-info": {
+            "source": "$btn-info-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-info": {
+            "source": "$btn-info-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" },
+          "info": {
+            "source": "$btn-info-disabled-border-color",
+            "$value": "{color.btn.bg.info}"
+          },
           "outline-info": {
-            "value": "{color.btn.border.outline-info}",
-            "type": "color",
-            "source": "$btn-info-outline-disabled-border-color"
+            "source": "$btn-info-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-info}"
+          },
+          "inverse-info": {
+            "source": "$btn-info-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" },
           "inverse-outline-info": {
-            "value": "{color.btn.border.inverse-outline-info}",
-            "type": "color",
-            "source": "$btn-info-inverse-outline-disabled-border-color"
+            "source": "$btn-info-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-info}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index 83c4abc465..f7e76f50d8 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -1,233 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "light": {
-          "value": "{color.btn.bg.light}",
-          "type": "color",
           "source": "$btn-light-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.light}"
+        },
+        "outline-light": {
+          "source": "$btn-light-outline-color",
+          "$value": "{color.light.base}"
+        },
+        "inverse-light": {
+          "source": "$btn-light-inverse-color",
+          "$value": "{color.light.base}"
         },
-        "outline-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-color" },
-        "inverse-light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-inverse-color" },
         "inverse-outline-light": {
-          "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-color"
+          "source": "$btn-light-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "light": { "value": "{color.light.base}", "type": "color", "source": "$btn-light-bg" },
+        "light": {
+          "source": "$btn-light-bg",
+          "$value": "{color.light.base}"
+        },
         "inverse-light": {
-          "value": "{color.btn.text.inverse-light}",
-          "type": "color",
           "source": "$btn-light-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-light}"
+        },
+        "outline-light": {
+          "source": "$btn-light-outline-bg",
+          "$value": "inherit"
         },
-        "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-bg" },
-        "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-bg" }
+        "inverse-outline-light": {
+          "source": "$btn-light-inverse-outline-bg",
+          "$value": "inherit"
+        }
       },
       "border": {
-        "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" },
+        "light": {
+          "source": "$btn-light-border-color",
+          "$value": "{color.btn.bg.light}"
+        },
         "outline-light": {
-          "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color"
+          "source": "$btn-light-outline-border-color",
+          "$value": "{color.light.base}"
+        },
+        "inverse-light": {
+          "source": "$btn-light-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-border-color" },
         "inverse-outline-light": {
-          "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color"
+          "source": "$btn-light-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "light": {
-            "value": "{color.btn.hover.bg.light}",
-            "type": "color",
             "source": "$btn-light-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.light}"
           },
           "outline-light": {
-            "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-outline-hover-color"
+            "source": "$btn-light-outline-hover-color",
+            "$value": "{color.theme.hover.light}"
           },
           "inverse-light": {
-            "value": "{color.btn.text.inverse-light}",
-            "type": "color",
             "source": "$btn-light-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.theme.hover.light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-hover-color"
+            "source": "$btn-light-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.light}"
           }
         },
         "bg": {
-          "light": { "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-bg" },
+          "light": {
+            "source": "$btn-light-hover-bg",
+            "$value": "{color.theme.hover.light}"
+          },
           "outline-light": {
-            "value": "{color.light.100}", "type": "color", "source": "$btn-light-outline-hover-bg"
+            "source": "$btn-light-outline-hover-bg",
+            "$value": "{color.light.100}"
           },
           "inverse-light": {
-            "value": "{color.btn.bg.inverse-light}",
-            "type": "color",
             "source": "$btn-light-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.light.100}", "type": "color", "source": "$btn-light-inverse-outline-hover-bg"
+            "source": "$btn-light-inverse-outline-hover-bg",
+            "$value": "{color.light.100}"
           }
         },
         "border": {
           "light": {
-            "value": "{color.theme.hover.light}", "type": "color", "source": "$btn-light-hover-border-color"
+            "source": "$btn-light-hover-border-color",
+            "$value": "{color.theme.hover.light}"
           },
           "outline-light": {
-            "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color"
+            "source": "$btn-light-outline-hover-border-color",
+            "$value": "{color.light.900}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-hover-border-color" },
           "inverse-outline-light": {
-            "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color"
+            "source": "$btn-light-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "light": {
-            "value": "{color.btn.active.bg.light}",
-            "type": "color",
             "source": "$btn-light-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.light}"
           },
           "outline-light": {
-            "value": "{color.btn.active.bg.outline-light}",
-            "type": "color",
             "source": "$btn-light-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-light}"
           },
           "inverse-light": {
-            "value": "{color.btn.text.inverse-light}",
-            "type": "color",
             "source": "$btn-light-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.btn.active.bg.inverse-outline-light}",
-            "type": "color",
             "source": "$btn-light-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-light}"
+          }
         },
         "bg": {
-          "light": { "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-bg" },
+          "light": {
+            "source": "$btn-light-active-bg",
+            "$value": "{color.theme.active.light}"
+          },
           "outline-light": {
-            "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg"
+            "source": "$btn-light-outline-active-bg",
+            "$value": "{color.theme.bg.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-light": { "value": "{color.gray.100}", "type": "color", "source": "$btn-light-inverse-active-bg" },
           "inverse-outline-light": {
-            "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg"
+            "source": "$btn-light-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.light}"
           }
         },
         "border": {
           "light": {
-            "value": "{color.theme.active.light}", "type": "color", "source": "$btn-light-active-border-color"
+            "source": "$btn-light-active-border-color",
+            "$value": "{color.theme.active.light}"
           },
           "outline-light": {
-            "value": "{color.theme.active.light}",
-            "type": "color",
-            "source": "$btn-light-outline-active-border-color"
+            "source": "$btn-light-outline-active-border-color",
+            "$value": "{color.theme.active.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-active-border-color",
+            "$value": "inherit"
           },
-          "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" },
           "inverse-outline-light": {
-            "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color"
+            "source": "$btn-light-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" },
+          "light": {
+            "source": "$btn-light-focus-color",
+            "$value": "{color.btn.text.light}"
+          },
           "outline-light": {
-            "value": "{color.btn.text.outline-light}",
-            "type": "color",
-            "source": "$btn-light-outline-focus-color"
+            "source": "$btn-light-outline-focus-color",
+            "$value": "{color.btn.text.outline-light}"
           },
           "inverse-light": {
-            "value": "{color.btn.text.inverse-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-focus-color"
+            "source": "$btn-light-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.btn.text.inverse-outline-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-focus-color"
+            "source": "$btn-light-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-light}"
           }
         },
         "border": {
-          "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" },
+          "light": {
+            "source": "$btn-light-focus-border-color",
+            "$value": "{color.btn.border.light}"
+          },
           "outline-light": {
-            "value": "{color.btn.border.outline-light}",
-            "type": "color",
-            "source": "$btn-light-outline-focus-border-color"
+            "source": "$btn-light-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-light}"
           },
           "inverse-light": {
-            "value": "{color.btn.border.inverse-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-focus-border-color"
+            "source": "$btn-light-inverse-focus-border-color",
+            "$value": "{color.btn.border.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.btn.border.inverse-outline-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-focus-border-color"
+            "source": "$btn-light-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-light}"
           }
         },
         "bg": {
-          "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-focus-bg" },
-          "outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-outline-focus-bg" },
-          "inverse-light": { "value": "{color.btn.bg.inverse-light}", "type": "color", "source": "$btn-light-inverse-focus-bg" },
-          "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-focus-bg" }
+          "light": {
+            "source": "$btn-light-focus-bg",
+            "$value": "{color.btn.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-bg",
+            "$value": "transparent"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-light}"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "light": { "value": "{color.primary.300}", "type": "color", "source": "$btn-light-focus-outline-color" },
-          "outline-light": { "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-outline-focus-outline-color" },
-          "inverse-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-outline-color" },
+          "light": {
+            "source": "$btn-light-focus-outline-color",
+            "$value": "{color.primary.300}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-focus-outline-color",
+            "$value": "{color.theme.focus.light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-focus-outline-color",
+            "$value": "{color.white}"
+          },
           "inverse-outline-light": {
-            "value": "{color.btn.focus.border.inverse-outline-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-focus-outline-color"
+            "source": "$btn-light-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-light}"
           }
         }
       },
       "disabled": {
         "text": {
-          "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" },
+          "light": {
+            "source": "$btn-light-disabled-color",
+            "$value": "{color.btn.text.light}"
+          },
           "outline-light": {
-            "value": "{color.btn.hover.text.outline-light}",
-            "type": "color",
-            "source": "$btn-light-outline-disabled-color"
+            "source": "$btn-light-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-light}"
           },
           "inverse-light": {
-            "value": "{color.btn.text.inverse-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-disabled-color"
+            "source": "$btn-light-inverse-disabled-color",
+            "$value": "{color.btn.text.inverse-light}"
           },
           "inverse-outline-light": {
-            "value": "{color.btn.text.inverse-outline-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-disabled-color"
+            "source": "$btn-light-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-light}"
           }
         },
         "bg": {
-          "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-disabled-bg" },
-          "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-disabled-bg" },
-          "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-disabled-bg" },
-          "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-disabled-bg" }
+          "light": {
+            "source": "$btn-light-disabled-bg",
+            "$value": "{color.btn.bg.light}"
+          },
+          "outline-light": {
+            "source": "$btn-light-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-light": {
+            "source": "$btn-light-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" },
+          "light": {
+            "source": "$btn-light-disabled-border-color",
+            "$value": "{color.btn.border.light}"
+          },
           "outline-light": {
-            "value": "{color.btn.hover.text.outline-light}",
-            "type": "color",
-            "source": "$btn-light-outline-disabled-border-color"
+            "source": "$btn-light-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-light}"
+          },
+          "inverse-light": {
+            "source": "$btn-light-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" },
           "inverse-outline-light": {
-            "value": "{color.btn.border.inverse-outline-light}",
-            "type": "color",
-            "source": "$btn-light-inverse-outline-disabled-border-color"
+            "source": "$btn-light-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-light}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index edf5c1f037..1344fbb04b 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -1,247 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "primary": {
-          "value": "{color.btn.bg.primary}",
-          "type": "color",
           "source": "$btn-primary-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.primary}"
         },
         "outline-primary": {
-          "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-color"
+          "source": "$btn-primary-outline-color",
+          "$value": "{color.primary.base}"
         },
         "inverse-primary": {
-          "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-inverse-color"
+          "source": "$btn-primary-inverse-color",
+          "$value": "{color.primary.base}"
         },
         "inverse-outline-primary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-color"
+          "source": "$btn-primary-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-bg" },
-        "outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-outline-bg" },
-        "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-bg" },
+        "primary": {
+          "source": "$btn-primary-bg",
+          "$value": "{color.primary.base}"
+        },
+        "outline-primary": {
+          "source": "$btn-primary-outline-bg",
+          "$value": "transparent"
+        },
+        "inverse-outline-primary": {
+          "source": "$btn-primary-inverse-outline-bg",
+          "$value": "transparent"
+        },
         "inverse-primary": {
-          "value": "{color.btn.text.inverse-primary}",
-          "type": "color",
           "source": "$btn-primary-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-primary}"
         }
       },
       "border": {
-        "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-border-color" },
+        "primary": {
+          "source": "$btn-primary-border-color",
+          "$value": "{color.btn.bg.primary}"
+        },
         "outline-primary": {
-          "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-outline-border-color"
+          "source": "$btn-primary-outline-border-color",
+          "$value": "{color.primary.base}"
         },
         "inverse-outline-primary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color"
+          "source": "$btn-primary-inverse-outline-border-color",
+          "$value": "{color.white}"
         },
-        "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" }
+        "inverse-primary": {
+          "source": "$btn-primary-inverse-border-color",
+          "$value": "transparent"
+        }
       },
       "hover": {
         "text": {
           "primary": {
-            "value": "{color.btn.hover.bg.primary}",
-            "type": "color",
             "source": "$btn-primary-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.primary}"
           },
           "outline-primary": {
-            "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-outline-hover-color"
+            "source": "$btn-primary-outline-hover-color",
+            "$value": "{color.theme.hover.primary}"
           },
           "inverse-primary": {
-            "value": "{color.btn.text.inverse-primary}",
-            "type": "color",
             "source": "$btn-primary-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.theme.hover.primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-hover-color"
+            "source": "$btn-primary-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.primary}"
           }
         },
         "bg": {
           "primary": {
-            "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-bg"
+            "source": "$btn-primary-hover-bg",
+            "$value": "{color.theme.hover.primary}"
           },
           "outline-primary": {
-            "value": "{color.primary.100}", "type": "color",  "source": "$btn-primary-outline-hover-bg"
+            "source": "$btn-primary-outline-hover-bg",
+            "$value": "{color.primary.100}"
           },
           "inverse-primary": {
-            "value": "{color.btn.bg.inverse-primary}",
-            "type": "color",
             "source": "$btn-primary-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.primary.100}", "type": "color", "source": "$btn-primary-inverse-outline-hover-bg"
+            "source": "$btn-primary-inverse-outline-hover-bg",
+            "$value": "{color.primary.100}"
           }
         },
         "border": {
           "primary": {
-            "value": "{color.theme.hover.primary}", "type": "color", "source": "$btn-primary-hover-border-color"
+            "source": "$btn-primary-hover-border-color",
+            "$value": "{color.theme.hover.primary}"
           },
           "outline-primary": {
-            "value": "{color.primary.900}", "type": "color", "source": "$btn-primary-outline-hover-border-color"
+            "source": "$btn-primary-outline-hover-border-color",
+            "$value": "{color.primary.900}"
           },
           "inverse-outline-primary": {
-            "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color"
+            "source": "$btn-primary-inverse-outline-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" }
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-hover-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "active": {
         "text": {
           "primary": {
-            "value": "{color.btn.active.bg.primary}",
-            "type": "color",
             "source": "$btn-primary-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.primary}"
           },
           "outline-primary": {
-            "value": "{color.btn.active.bg.outline-primary}",
-            "type": "color",
             "source": "$btn-primary-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-primary}"
           },
           "inverse-primary": {
-            "value": "{color.btn.text.inverse-primary}",
-            "type": "color",
             "source": "$btn-primary-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.btn.active.bg.inverse-outline-primary}",
-            "type": "color",
             "source": "$btn-primary-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-primary}"
+          }
         },
         "bg": {
           "primary": {
-            "value": "{color.theme.active.primary}", "type": "color", "source": "$btn-primary-active-bg"
+            "source": "$btn-primary-active-bg",
+            "$value": "{color.theme.active.primary}"
           },
           "outline-primary": {
-            "value": "{color.theme.bg.primary}", "type": "color", "source": "$btn-primary-outline-active-bg"
+            "source": "$btn-primary-outline-active-bg",
+            "$value": "{color.theme.bg.primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.theme.bg.primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-active-bg"
+            "source": "$btn-primary-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.primary}"
           },
-          "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" }
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
         },
         "border": {
           "primary": {
-            "value": "{color.theme.active.primary}",
-            "type": "color",
-            "source": "$btn-primary-active-border-color"
+            "source": "$btn-primary-active-border-color",
+            "$value": "{color.theme.active.primary}"
           },
           "outline-primary": {
-            "value": "{color.theme.active.primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-active-border-color"
+            "source": "$btn-primary-outline-active-border-color",
+            "$value": "{color.theme.active.primary}"
           },
           "inverse-outline-primary": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-active-border-color"
+            "source": "$btn-primary-inverse-outline-active-border-color",
+            "$value": "transparent"
           },
-          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" }
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-active-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "focus": {
         "text": {
-          "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" },
+          "primary": {
+            "source": "$btn-primary-focus-color",
+            "$value": "{color.btn.text.primary}"
+          },
           "outline-primary": {
-            "value": "{color.btn.text.outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-focus-color"
+            "source": "$btn-primary-outline-focus-color",
+            "$value": "{color.btn.text.outline-primary}"
           },
           "inverse-primary": {
-            "value": "{color.btn.text.inverse-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-focus-color"
+            "source": "$btn-primary-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.btn.text.inverse-outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-focus-color"
+            "source": "$btn-primary-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
           }
         },
         "border": {
-          "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" },
+          "primary": {
+            "source": "$btn-primary-focus-border-color",
+            "$value": "{color.btn.border.primary}"
+          },
           "outline-primary": {
-            "value": "{color.btn.border.outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-focus-border-color"
+            "source": "$btn-primary-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
-          "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" },
           "inverse-outline-primary": {
-            "value": "{color.btn.border.inverse-outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-focus-border-color"
+            "source": "$btn-primary-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-primary}"
           }
         },
         "outline": {
-          "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" },
+          "primary": {
+            "source": "$btn-primary-focus-focus-outline-color",
+            "$value": "{color.theme.focus.primary}"
+          },
           "outline-primary": {
-            "value": "{color.theme.focus.primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-focus-outline-color"
+            "source": "$btn-primary-outline-focus-outline-color",
+            "$value": "{color.theme.focus.primary}"
           },
           "inverse-primary": {
-            "value": "{color.btn.focus.border.inverse-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-focus-outline-color"
+            "source": "$btn-primary-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.btn.border.inverse-outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-focus-outline-color"
+            "source": "$btn-primary-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.border.inverse-outline-primary}"
           }
         },
         "bg": {
-          "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-focus-bg" },
-          "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-focus-bg" },
-          "inverse-primary": { "value": "{color.btn.bg.inverse-primary}", "type": "color", "source": "$btn-primary-inverse-focus-bg" },
-          "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-focus-bg" }
+          "primary": {
+            "source": "$btn-primary-focus-bg",
+            "$value": "{color.btn.bg.primary}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-primary}"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         }
       },
       "disabled": {
         "text": {
-          "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-disabled-color" },
-          "inverse-primary": { "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-inverse-disabled-color" },
+          "primary": {
+            "source": "$btn-primary-disabled-color",
+            "$value": "{color.btn.text.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-color",
+            "$value": "{color.primary.500}"
+          },
           "outline-primary": {
-            "value": "{color.btn.hover.text.outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-disabled-color"
+            "source": "$btn-primary-outline-disabled-color",
+            "$value": "{color.btn.hover.text.outline-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.btn.text.inverse-outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-disabled-color"
+            "source": "$btn-primary-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
           }
         },
         "bg": {
-          "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-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" }
+          "primary": {
+            "source": "$btn-primary-disabled-bg",
+            "$value": "{color.btn.bg.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-bg",
+            "$value": "{color.white}"
+          },
+          "outline-primary": {
+            "source": "$btn-primary-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-primary": {
+            "source": "$btn-primary-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-disabled-border-color" },
-          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-disabled-border-color" },
+          "primary": {
+            "source": "$btn-primary-disabled-border-color",
+            "$value": "{color.btn.border.primary}"
+          },
+          "inverse-primary": {
+            "source": "$btn-primary-inverse-disabled-border-color",
+            "$value": "transparent"
+          },
           "outline-primary": {
-            "value": "{color.btn.hover.text.outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-outline-disabled-border-color"
+            "source": "$btn-primary-outline-disabled-border-color",
+            "$value": "{color.btn.hover.text.outline-primary}"
           },
           "inverse-outline-primary": {
-            "value": "{color.btn.text.inverse-outline-primary}",
-            "type": "color",
-            "source": "$btn-primary-inverse-outline-disabled-border-color"
+            "source": "$btn-primary-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.text.inverse-outline-primary}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index c2b6c680d3..c8057ffa9b 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -1,275 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "secondary": {
-          "value": "{color.btn.bg.secondary}",
-          "type": "color",
           "source": "$btn-secondary-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.secondary}"
         },
         "outline-secondary": {
-          "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-color"
+          "source": "$btn-secondary-outline-color",
+          "$value": "{color.secondary.base}"
         },
         "inverse-secondary": {
-          "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-inverse-color"
+          "source": "$btn-secondary-inverse-color",
+          "$value": "{color.secondary.base}"
         },
         "inverse-outline-secondary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-color"
+          "source": "$btn-secondary-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
         "secondary": {
-          "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg"
+          "source": "$btn-secondary-bg",
+          "$value": "{color.secondary.base}"
+        },
+        "outline-secondary": {
+          "source": "$btn-secondary-outline-bg",
+          "$value": "inherit"
+        },
+        "inverse-outline-secondary": {
+          "source": "$btn-secondary-inverse-outline-bg",
+          "$value": "inherit"
         },
-        "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-bg" },
-        "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-bg" },
         "inverse-secondary": {
-          "value": "{color.btn.text.inverse-secondary}",
-          "type": "color",
           "source": "$btn-secondary-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-secondary}"
         }
       },
       "border": {
         "secondary": {
-          "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-border-color"
+          "source": "$btn-secondary-border-color",
+          "$value": "{color.btn.bg.secondary}"
         },
         "outline-secondary": {
-          "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-outline-border-color"
+          "source": "$btn-secondary-outline-border-color",
+          "$value": "{color.secondary.base}"
         },
         "inverse-outline-secondary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color"
+          "source": "$btn-secondary-inverse-outline-border-color",
+          "$value": "{color.white}"
         },
-        "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" }
+        "inverse-secondary": {
+          "source": "$btn-secondary-inverse-border-color",
+          "$value": "transparent"
+        }
       },
       "hover": {
         "text": {
           "secondary": {
-            "value": "{color.btn.hover.bg.secondary}",
-            "type": "color",
             "source": "$btn-secondary-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.theme.hover.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-outline-hover-color"
+            "source": "$btn-secondary-outline-hover-color",
+            "$value": "{color.theme.hover.secondary}"
           },
           "inverse-secondary": {
-            "value": "{color.btn.text.inverse-secondary}",
-            "type": "color",
             "source": "$btn-secondary-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.theme.hover.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-hover-color"
+            "source": "$btn-secondary-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.secondary}"
           }
         },
         "bg": {
           "secondary": {
-            "value": "{color.theme.hover.secondary}", "type": "color", "source": "$btn-secondary-hover-bg"
+            "source": "$btn-secondary-hover-bg",
+            "$value": "{color.theme.hover.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.secondary.100}", "type": "color", "source": "$btn-secondary-outline-hover-bg"
+            "source": "$btn-secondary-outline-hover-bg",
+            "$value": "{color.secondary.100}"
           },
           "inverse-secondary": {
-            "value": "{color.btn.bg.inverse-secondary}",
-            "type": "color",
             "source": "$btn-secondary-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.secondary.100}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-hover-bg"
+            "source": "$btn-secondary-inverse-outline-hover-bg",
+            "$value": "{color.secondary.100}"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.theme.hover.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-hover-border-color"
+            "source": "$btn-secondary-hover-border-color",
+            "$value": "{color.theme.hover.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.secondary.900}",
-            "type": "color",
-            "source": "$btn-secondary-outline-hover-border-color"
+            "source": "$btn-secondary-outline-hover-border-color",
+            "$value": "{color.secondary.900}"
           },
           "inverse-outline-secondary": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-hover-border-color"
+            "source": "$btn-secondary-inverse-outline-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" }
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-hover-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "active": {
         "text": {
           "secondary": {
-            "value": "{color.btn.active.bg.secondary}",
-            "type": "color",
             "source": "$btn-secondary-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.btn.active.bg.outline-secondary}",
-            "type": "color",
             "source": "$btn-secondary-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-secondary}"
           },
           "inverse-secondary": {
-            "value": "{color.btn.text.inverse-secondary}",
-            "type": "color",
             "source": "$btn-secondary-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.btn.active.bg.inverse-outline-secondary}",
-            "type": "color",
             "source": "$btn-secondary-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-secondary}"
+          }
         },
         "bg": {
           "secondary": {
-            "value": "{color.theme.active.secondary}", "type": "color", "source": "$btn-secondary-active-bg"
+            "source": "$btn-secondary-active-bg",
+            "$value": "{color.theme.active.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.theme.bg.secondary}", "type": "color", "source": "$btn-secondary-outline-active-bg"
+            "source": "$btn-secondary-outline-active-bg",
+            "$value": "{color.theme.bg.secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.theme.bg.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-active-bg"
+            "source": "$btn-secondary-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.secondary}"
           },
-          "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" }
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-active-bg",
+            "$value": "{color.gray.100}"
+          }
         },
         "border": {
           "secondary": {
-            "value": "{color.theme.active.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-active-border-color"
+            "source": "$btn-secondary-active-border-color",
+            "$value": "{color.theme.active.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.theme.active.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-outline-active-border-color"
+            "source": "$btn-secondary-outline-active-border-color",
+            "$value": "{color.theme.active.secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color"
+            "source": "$btn-secondary-inverse-outline-active-border-color",
+            "$value": "transparent"
           },
-          "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" }
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-active-border-color",
+            "$value": "transparent"
+          }
         }
       },
       "focus": {
         "text": {
-          "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-focus-color" },
-          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-focus-color" },
+          "secondary": {
+            "source": "$btn-secondary-focus-color",
+            "$value": "{color.btn.text.secondary}"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-focus-color",
+            "$value": "inherit"
+          },
           "outline-secondary": {
-            "value": "{color.btn.text.outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-outline-focus-color"
+            "source": "$btn-secondary-outline-focus-color",
+            "$value": "{color.btn.text.outline-secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.btn.text.inverse-outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-focus-color"
+            "source": "$btn-secondary-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-secondary}"
           }
         },
         "border": {
           "secondary": {
-            "value": "{color.btn.bg.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-focus-border-color"
+            "source": "$btn-secondary-focus-border-color",
+            "$value": "{color.btn.bg.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.btn.border.outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-outline-focus-border-color"
+            "source": "$btn-secondary-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-secondary}"
           },
           "inverse-secondary": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-focus-border-color"
+            "source": "$btn-secondary-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-focus-border-color"
+            "source": "$btn-secondary-inverse-outline-focus-border-color",
+            "$value": "{color.white}"
           }
         },
         "outline": {
           "secondary": {
-            "value": "{color.theme.focus.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-focus-outline-color"
+            "source": "$btn-secondary-focus-outline-color",
+            "$value": "{color.theme.focus.secondary}"
           },
           "outline-secondary": {
-            "value": "{color.theme.focus.secondary}",
-            "type": "color",
-            "source": "$btn-secondary-outline-focus-outline-color"
+            "source": "$btn-secondary-outline-focus-outline-color",
+            "$value": "{color.theme.focus.secondary}"
           },
           "inverse-secondary": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-focus-outline-color"
+            "source": "$btn-secondary-inverse-focus-outline-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.btn.border.inverse-outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-focus-outline-color"
+            "source": "$btn-secondary-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.border.inverse-outline-secondary}"
           }
         },
         "bg": {
-          "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-bg" },
-          "outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-outline-focus-bg" },
+          "secondary": {
+            "source": "$btn-secondary-focus-bg",
+            "$value": "{color.btn.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-focus-bg",
+            "$value": "transparent"
+          },
           "inverse-secondary": {
-            "value": "{color.btn.bg.inverse-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-focus-bg"
+            "source": "$btn-secondary-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-secondary}"
           },
-          "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" }
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         }
       },
       "disabled": {
         "text": {
-          "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" },
+          "secondary": {
+            "source": "$btn-secondary-disabled-color",
+            "$value": "{color.btn.text.secondary}"
+          },
           "outline-secondary": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-secondary-outline-disabled-color"
+            "source": "$btn-secondary-outline-disabled-color",
+            "$value": "inherit"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-disabled-color",
+            "$value": "inherit"
           },
-          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" },
           "inverse-outline-secondary": {
-            "value": "{color.btn.text.inverse-outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-disabled-color"
+            "source": "$btn-secondary-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-secondary}"
           }
         },
         "bg": {
-          "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-disabled-bg" },
-          "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-disabled-bg" },
-          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-bg" },
-          "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-disabled-bg" }
+          "secondary": {
+            "source": "$btn-secondary-disabled-bg",
+            "$value": "{color.btn.bg.secondary}"
+          },
+          "outline-secondary": {
+            "source": "$btn-secondary-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-secondary": {
+            "source": "$btn-secondary-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-secondary": {
+            "source": "$btn-secondary-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" },
+          "secondary": {
+            "source": "$btn-secondary-disabled-border-color",
+            "$value": "inherit"
+          },
           "outline-secondary": {
-            "value": "{color.secondary.base}",
-            "type": "color",
-            "source": "$btn-secondary-outline-disabled-border-color"
+            "source": "$btn-secondary-outline-disabled-border-color",
+            "$value": "{color.secondary.base}"
           },
           "inverse-secondary": {
-            "value": "{color.btn.border.inverse-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-disabled-border-color"
+            "source": "$btn-secondary-inverse-disabled-border-color",
+            "$value": "{color.btn.border.inverse-secondary}"
           },
           "inverse-outline-secondary": {
-            "value": "{color.btn.border.inverse-outline-secondary}",
-            "type": "color",
-            "source": "$btn-secondary-inverse-outline-disabled-border-color"
+            "source": "$btn-secondary-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-secondary}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index 4b68d59462..e27a0aaca9 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -1,251 +1,310 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "success": {
-          "value": "{color.btn.bg.success}",
-          "type": "color",
           "source": "$btn-success-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.success}"
         },
         "outline-success": {
-          "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color"
+          "source": "$btn-success-outline-color",
+          "$value": "{color.success.base}"
         },
         "inverse-success": {
-          "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color"
+          "source": "$btn-success-inverse-color",
+          "$value": "{color.success.base}"
         },
         "inverse-outline-success": {
-          "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color"
+          "source": "$btn-success-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" },
-        "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" },
+        "success": {
+          "source": "$btn-success-bg",
+          "$value": "{color.success.base}"
+        },
+        "outline-success": {
+          "source": "$btn-success-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-success": {
-          "value": "{color.btn.text.inverse-success}",
-          "type": "color",
           "source": "$btn-success-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-success}"
         },
-        "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" }
+        "inverse-outline-success": {
+          "source": "$btn-success-inverse-outline-bg",
+          "$value": "inherit"
+        }
       },
       "border": {
-        "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" },
+        "success": {
+          "source": "$btn-success-border-color",
+          "$value": "{color.btn.bg.success}"
+        },
         "outline-success": {
-          "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color"
+          "source": "$btn-success-outline-border-color",
+          "$value": "{color.success.base}"
+        },
+        "inverse-success": {
+          "source": "$btn-success-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-border-color" },
         "inverse-outline-success": {
-          "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color"
+          "source": "$btn-success-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "success": {
-            "value": "{color.btn.hover.bg.success}",
-            "type": "color",
             "source": "$btn-success-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.success}"
           },
           "outline-success": {
-            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color"
+            "source": "$btn-success-outline-hover-color",
+            "$value": "{color.theme.hover.success}"
           },
           "inverse-success": {
-            "value": "{color.btn.text.inverse-success}",
-            "type": "color",
             "source": "$btn-success-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-success}"
           },
           "inverse-outline-success": {
-            "value": "{color.theme.hover.success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-hover-color"
+            "source": "$btn-success-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.success}"
           }
         },
         "bg": {
           "success": {
-            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg"
+            "source": "$btn-success-hover-bg",
+            "$value": "{color.theme.hover.success}"
           },
           "outline-success": {
-            "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg"
+            "source": "$btn-success-outline-hover-bg",
+            "$value": "{color.success.100}"
           },
           "inverse-success": {
-            "value": "{color.btn.bg.inverse-success}",
-            "type": "color",
             "source": "$btn-success-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-success}"
           },
           "inverse-outline-success": {
-            "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg"
+            "source": "$btn-success-inverse-outline-hover-bg",
+            "$value": "{color.success.100}"
           }
         },
         "border": {
           "success": {
-            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color"
+            "source": "$btn-success-hover-border-color",
+            "$value": "{color.theme.hover.success}"
           },
           "outline-success": {
-            "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color"
+            "source": "$btn-success-outline-hover-border-color",
+            "$value": "{color.success.900}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-hover-border-color" },
           "inverse-outline-success": {
-            "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color"
+            "source": "$btn-success-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "success": {
-            "value": "{color.btn.active.bg.success}",
-            "type": "color",
             "source": "$btn-success-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.success}"
           },
           "outline-success": {
-            "value": "{color.btn.active.bg.outline-success}",
-            "type": "color",
             "source": "$btn-success-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-success}"
           },
           "inverse-success": {
-            "value": "{color.btn.text.inverse-success}",
-            "type": "color",
             "source": "$btn-success-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-success}"
           },
           "inverse-outline-success": {
-            "value": "{color.btn.active.bg.inverse-outline-success}",
-            "type": "color",
             "source": "$btn-success-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-success}"
+          }
         },
         "bg": {
           "success": {
-            "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg"
+            "source": "$btn-success-active-bg",
+            "$value": "{color.theme.active.success}"
           },
           "outline-success": {
-            "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg"
+            "source": "$btn-success-outline-active-bg",
+            "$value": "{color.theme.bg.success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" },
           "inverse-outline-success": {
-            "value": "{color.theme.bg.success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-active-bg"
+            "source": "$btn-success-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.success}"
           }
         },
         "border": {
           "success": {
-            "value": "{color.theme.active.success}",
-            "type": "color",
-            "source": "$btn-success-active-border-color"
+            "source": "$btn-success-active-border-color",
+            "$value": "{color.theme.active.success}"
           },
           "outline-success": {
-            "value": "{color.theme.active.success}",
-            "type": "color",
-            "source": "$btn-success-outline-active-border-color"
+            "source": "$btn-success-outline-active-border-color",
+            "$value": "{color.theme.active.success}"
           },
           "inverse-success": {
-            "value": "inherit",
-            "source": "$btn-success-inverse-active-border-color"
+            "source": "$btn-success-inverse-active-border-color",
+            "$value": "inherit"
           },
           "inverse-outline-success": {
-            "value": "transparent",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-active-border-color"
+            "source": "$btn-success-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" },
+          "success": {
+            "source": "$btn-success-focus-color",
+            "$value": "{color.btn.text.success}"
+          },
           "outline-success": {
-            "value": "{color.btn.text.outline-success}",
-            "type": "color",
-            "source": "$btn-success-outline-focus-color"
+            "source": "$btn-success-outline-focus-color",
+            "$value": "{color.btn.text.outline-success}"
           },
           "inverse-success": {
-            "value": "{color.btn.text.inverse-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-focus-color"
+            "source": "$btn-success-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-success}"
           },
           "inverse-outline-success": {
-            "value": "{color.btn.text.inverse-outline-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-focus-color"
+            "source": "$btn-success-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-success}"
           }
         },
         "border": {
-          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" },
+          "success": {
+            "source": "$btn-success-focus-border-color",
+            "$value": "{color.btn.border.success}"
+          },
           "outline-success": {
-            "value": "{color.btn.border.outline-success}",
-            "type": "color",
-            "source": "$btn-success-outline-focus-border-color"
+            "source": "$btn-success-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-success}"
           },
           "inverse-success": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-success-inverse-focus-border-color"
+            "source": "$btn-success-inverse-focus-border-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-success": {
-            "value": "{color.btn.border.inverse-outline-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-focus-border-color"
+            "source": "$btn-success-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-success}"
           }
         },
         "bg": {
-          "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-focus-bg" },
-          "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-focus-bg" },
-          "inverse-success": { "value": "{color.btn.bg.inverse-success}", "type": "color", "source": "$btn-success-inverse-focus-bg" },
-          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-focus-bg" }
+          "success": {
+            "source": "$btn-success-focus-bg",
+            "$value": "{color.btn.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-focus-bg",
+            "$value": "inherit"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-success}"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-focus-bg",
+            "$value": "inherit"
+          }
         },
         "outline": {
-          "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" },
+          "success": {
+            "source": "$btn-success-focus-outline-color",
+            "$value": "{color.theme.focus.success}"
+          },
           "outline-success": {
-            "value": "{color.theme.focus.success}",
-            "type": "color",
-            "source": "$btn-success-outline-focus-outline-color"
+            "source": "$btn-success-outline-focus-outline-color",
+            "$value": "{color.theme.focus.success}"
           },
           "inverse-success": {
-            "value": "{color.btn.focus.border.inverse-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-focus-outline-color"
+            "source": "$btn-success-inverse-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-success}"
           },
           "inverse-outline-success": {
-            "value": "{color.btn.focus.border.inverse-outline-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-focus-outline-color"
+            "source": "$btn-success-inverse-outline-focus-outline-color",
+            "$value": "{color.btn.focus.border.inverse-outline-success}"
           }
         }
       },
       "disabled": {
         "text": {
-          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" },
+          "success": {
+            "source": "$btn-success-disabled-color",
+            "$value": "{color.btn.text.success}"
+          },
           "outline-success": {
-            "value": "{color.btn.text.outline-success}",
-            "type": "color",
-            "source": "$btn-success-outline-disabled-color"
+            "source": "$btn-success-outline-disabled-color",
+            "$value": "{color.btn.text.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-color",
+            "$value": "{color.success.base}"
           },
-          "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" },
           "inverse-outline-success": {
-            "value": "{color.btn.text.inverse-outline-success}",
-            "type": "color",
-            "source": "$btn-success-inverse-outline-disabled-color"
+            "source": "$btn-success-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-success}"
           }
         },
         "bg": {
-          "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-disabled-bg" },
-          "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-disabled-bg" },
-          "inverse-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-disabled-bg" },
-          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-bg" }
+          "success": {
+            "source": "$btn-success-disabled-bg",
+            "$value": "{color.btn.bg.success}"
+          },
+          "outline-success": {
+            "source": "$btn-success-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" },
+          "success": {
+            "source": "$btn-success-disabled-border-color",
+            "$value": "{color.btn.border.success}"
+          },
           "outline-success": {
-            "value": "{color.btn.border.outline-success}",
-            "type": "color",
-            "source": "$btn-success-outline-disabled-border-color"
+            "source": "$btn-success-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-success}"
+          },
+          "inverse-success": {
+            "source": "$btn-success-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-disabled-border-color" },
-          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-border-color" }
+          "inverse-outline-success": {
+            "source": "$btn-success-inverse-outline-disabled-border-color",
+            "$value": "inherit"
+          }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
index a743b5f0de..bfb8c43e22 100644
--- a/tokens/src/themes/light/components/Button/tertiary.json
+++ b/tokens/src/themes/light/components/Button/tertiary.json
@@ -1,107 +1,81 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
-        "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" },
-        "inverse-tertiary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color"
-        }
+        "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
       },
       "bg": {
-        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" },
-        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" }
+        "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
       },
       "border": {
-        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" },
-        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" }
+        "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
       },
       "hover": {
         "text": {
-          "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" },
-          "inverse-tertiary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
         },
         "bg": {
-          "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" },
+          "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" },
           "inverse-tertiary": {
-            "value": "{color.white}",
-            "type": "color",
             "source": "$btn-inverse-tertiary-hover-bg",
-            "modify": [{ "type": "alpha", "amount": 0.1 }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
           }
         },
         "border": {
-          "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" },
-          "inverse-tertiary": {
-            "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
         }
       },
       "active": {
         "text": {
-          "tertiary": {
-            "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color"
-          },
-          "inverse-tertiary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
         },
         "bg": {
-          "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" },
-          "inverse-tertiary":  {
-            "value": "{color.btn.hover.bg.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-active-bg"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.light.500}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" }
         },
         "border": {
-          "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" },
-          "inverse-tertiary": {
-            "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
         }
       },
       "focus": {
         "text": {
-          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.text.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-focus-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" }
         },
         "border": {
-          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" },
-          "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" }
+          "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" }
         },
         "bg": {
-          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" },
-          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" }
+          "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
         },
         "outline": {
-          "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" },
-          "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" }
+          "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" }
         }
       },
       "disabled": {
         "text": {
-          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.text.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-disabled-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" }
         },
         "bg": {
-          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" },
-          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" }
+          "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
         },
         "border": {
-          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index 0d47ce0e22..eeb6ff1806 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -1,273 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
           "source": "$btn-warning-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.warning}"
         },
         "outline-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color"
+          "source": "$btn-warning-outline-color",
+          "$value": "{color.warning.base}"
         },
         "inverse-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color"
+          "source": "$btn-warning-inverse-color",
+          "$value": "{color.warning.base}"
         },
         "inverse-outline-warning": {
-          "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color"
+          "source": "$btn-warning-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" },
-        "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" },
+        "warning": {
+          "source": "$btn-warning-bg",
+          "$value": "{color.warning.base}"
+        },
+        "outline-warning": {
+          "source": "$btn-warning-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-warning": {
-          "value": "{color.btn.text.inverse-warning}",
-          "type": "color",
           "source": "$btn-warning-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-warning}"
         },
-        "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" }
+        "inverse-outline-warning": {
+          "source": "$btn-warning-inverse-outline-bg",
+          "$value": "inherit"
+        }
       },
       "border": {
-        "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" },
+        "warning": {
+          "source": "$btn-warning-border-color",
+          "$value": "{color.btn.bg.warning}"
+        },
         "outline-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color"
+          "source": "$btn-warning-outline-border-color",
+          "$value": "{color.warning.base}"
+        },
+        "inverse-warning": {
+          "source": "$btn-warning-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" },
         "inverse-outline-warning": {
-          "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color"
+          "source": "$btn-warning-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "warning": {
-            "value": "{color.btn.hover.bg.warning}",
-            "type": "color",
             "source": "$btn-warning-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color"
+            "source": "$btn-warning-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.theme.hover.warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-hover-color"
+            "source": "$btn-warning-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
           }
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg"
+            "source": "$btn-warning-hover-bg",
+            "$value": "{color.theme.hover.warning}"
           },
           "outline-warning": {
-            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg"
+            "source": "$btn-warning-outline-hover-bg",
+            "$value": "{color.warning.100}"
           },
           "inverse-warning": {
-            "value": "{color.btn.bg.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg"
+            "source": "$btn-warning-inverse-outline-hover-bg",
+            "$value": "{color.warning.100}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color"
+            "source": "$btn-warning-hover-border-color",
+            "$value": "{color.theme.hover.warning}"
           },
           "outline-warning": {
-            "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color"
+            "source": "$btn-warning-outline-hover-border-color",
+            "$value": "{color.warning.900}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" },
           "inverse-outline-warning": {
-            "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color"
+            "source": "$btn-warning-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "warning": {
-            "value": "{color.btn.active.bg.warning}",
-            "type": "color",
             "source": "$btn-warning-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.warning}"
           },
           "outline-warning": {
-            "value": "{color.btn.active.bg.outline-warning}",
-            "type": "color",
             "source": "$btn-warning-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.active.bg.inverse-outline-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-warning}"
+          }
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg"
+            "source": "$btn-warning-active-bg",
+            "$value": "{color.theme.active.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg"
+            "source": "$btn-warning-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" },
           "inverse-outline-warning": {
-            "value": "{color.theme.bg.warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-active-bg"
+            "source": "$btn-warning-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
-            "source": "$btn-warning-active-border-color"
+            "source": "$btn-warning-active-border-color",
+            "$value": "{color.theme.active.warning}"
           },
           "inverse-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-active-border-color"
+            "source": "$btn-warning-inverse-active-border-color",
+            "$value": "inherit"
           },
           "outline-warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-active-border-color"
+            "source": "$btn-warning-outline-active-border-color",
+            "$value": "{color.theme.active.warning}"
           },
           "inverse-outline-warning": {
-            "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color"
+            "source": "$btn-warning-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" },
+          "warning": {
+            "source": "$btn-warning-focus-color",
+            "$value": "{color.btn.text.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.text.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-color"
+            "source": "$btn-warning-outline-focus-color",
+            "$value": "{color.btn.text.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-color"
+            "source": "$btn-warning-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.text.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-color"
+            "source": "$btn-warning-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.btn.border.warning}",
-            "type": "color",
-            "source": "$btn-warning-focus-border-color"
+            "source": "$btn-warning-focus-border-color",
+            "$value": "{color.btn.border.warning}"
           },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-border-color"
+            "source": "$btn-warning-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.border.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-border-color"
+            "source": "$btn-warning-inverse-focus-border-color",
+            "$value": "{color.btn.border.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.border.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-border-color"
+            "source": "$btn-warning-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
           }
         },
         "bg": {
-          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" },
-          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" },
+          "warning": {
+            "source": "$btn-warning-focus-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-bg",
+            "$value": "inherit"
+          },
           "inverse-warning": {
-            "value": "{color.btn.bg.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-bg"
+            "source": "$btn-warning-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-bg"
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
           }
         },
         "outline": {
           "warning": {
-            "value": "{color.theme.focus.warning}",
-            "type": "color",
-            "source": "$btn-warning-focus-outline-color"
+            "source": "$btn-warning-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.focus.warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-outline-color"
+            "source": "$btn-warning-outline-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
           },
           "inverse-warning": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-outline-color"
+            "source": "$btn-warning-inverse-focus-outline-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-bg"
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
           }
         }
       },
       "disabled": {
         "text": {
-          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" },
+          "warning": {
+            "source": "$btn-warning-disabled-color",
+            "$value": "{color.btn.text.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.text.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-disabled-color"
+            "source": "$btn-warning-outline-disabled-color",
+            "$value": "{color.btn.text.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.warning.base}",
-            "type": "color",
-            "source": "$btn-warning-inverse-disabled-color"
+            "source": "$btn-warning-inverse-disabled-color",
+            "$value": "{color.warning.base}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.text.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-disabled-color"
+            "source": "$btn-warning-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
           }
         },
         "bg": {
-          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" },
-          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" },
-          "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" },
-          "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" }
+          "warning": {
+            "source": "$btn-warning-disabled-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" },
+          "warning": {
+            "source": "$btn-warning-disabled-border-color",
+            "$value": "{color.btn.border.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-disabled-border-color"
+            "source": "$btn-warning-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" },
           "inverse-outline-warning": {
-            "value": "{color.btn.border.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-disabled-border-color"
+            "source": "$btn-warning-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
index c7deddea25..faf3412fee 100644
--- a/tokens/src/themes/light/components/Card.json
+++ b/tokens/src/themes/light/components/Card.json
@@ -1,36 +1,25 @@
 {
   "color": {
+    "$type": "color",
     "card": {
-      "base": { "value": "inherit", "type": "color", "source": "$card-color" },
+      "base": { "source": "$card-color", "$value": "inherit" },
       "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" }
+        "base": { "source": "$card-bg", "$value": "{color.bg.base}" },
+        "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" },
+        "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" }
       },
       "border": {
         "base": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$card-border-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.125
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.125 }],
+          "$value": "{color.black}"
         },
         "focus": {
-          "base": {
-            "value": "{color.primary.500}",
-            "type": "color",
-            "source": "$card-border-focus-color"
-          },
-          "dark": {
-            "value": "{color.theme.focus.primary}",
-            "type": "color",
-            "source": "$card-border-focus-color-dark"
-          }
+          "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
+          "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
         }
       },
-      "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
+      "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json
index 834fcf832b..024aaf47b7 100644
--- a/tokens/src/themes/light/components/Carousel.json
+++ b/tokens/src/themes/light/components/Carousel.json
@@ -1,43 +1,44 @@
 {
   "color": {
+    "$type": "color",
     "carousel": {
       "control": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" }
+        "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
       },
       "indicator": {
-        "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" }
+        "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
       },
-      "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" }
+      "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
     }
   },
   "content": {
+    "$type": "file",
     "carousel": {
       "control": {
         "bg": {
           "prev-icon": {
-            "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$carousel-control-prev-icon-bg",
             "outputReferences": false,
-            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")"
           },
           "next-icon": {
-            "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$carousel-control-next-icon-bg",
             "outputReferences": false,
-            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")"
           }
         }
       }
     }
   },
   "other": {
+    "$type": "number",
     "carousel": {
       "control": {
         "opacity": {
-          "base": { "value": ".5", "type": "ratio", "source": "$carousel-control-opacity" },
-          "hover": { "value": ".9", "type": "ratio", "source": "$carousel-control-hover-opacity" }
+          "base": { "source": "$carousel-control-opacity", "$value": ".5" },
+          "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json
index d67be11327..b11b7c36ea 100644
--- a/tokens/src/themes/light/components/Chip.json
+++ b/tokens/src/themes/light/components/Chip.json
@@ -1,50 +1,38 @@
 {
   "color": {
+    "$type": "color",
     "chip": {
       "text": {
-        "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
-        "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
+        "light": { "source": "$chip-light-color", "$value": "{color.black}" },
+        "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
       },
       "bg": {
-        "light": { "value": "{color.white}", "type": "color", "source": "$chip-light-bg-color" },
-        "dark": { "value": "{color.primary.300}", "type": "color", "source": "$chip-dark-bg" }
+        "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
+        "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
       },
       "border": {
-        "base": {
-          "value": "{color.light.800}", "type": "color", "source": "$chip-border-color"
-        },
+        "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
         "focus": {
           "selected": {
-            "dark": {
-              "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-selected-focus-border-color"
-            },
-            "light": {
-              "value": "{color.dark.500}", "type": "color", "source": "$chip-light-selected-focus-border-color"
-            }
+            "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" },
+            "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" }
           }
         }
       },
       "label": {
-        "base": {
-          "value": "{color.primary.700}", "type": "color", "source": "$chip-label-color"
-        },
-        "dark": {
-          "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-label-color"
-        }
+        "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
+        "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
       },
       "outline": {
-        "dark": {
-          "value": "{color.white}", "type": "color", "source": "$chip-dark-outline-color"
-        },
-        "light": {
-          "value": "{color.chip.label.base}", "type": "color", "source": "$chip-light-outline-color"
-        }
+        "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
+        "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
       }
     }
   },
   "other": {
+    "$type": "number",
     "chip": {
-      "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
+      "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index 8d00637ca3..dcba0a2d29 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -1,10 +1,20 @@
 {
   "color": {
-    "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
+    "$type": "color",
+    "close-button": { "source": "$close-color", "$value": "{color.black}" }
   },
   "elevation": {
+    "$type": "shadow",
     "close-button": {
-      "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
index bfdf221bde..07785b9754 100644
--- a/tokens/src/themes/light/components/Code.json
+++ b/tokens/src/themes/light/components/Code.json
@@ -1,22 +1,20 @@
 {
   "color": {
+    "$type": "color",
     "code": {
-      "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
+      "base": { "source": "$code-color", "$value": "#E83E8C" },
       "kbd": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
-        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
+        "base": { "source": "$kbd-color", "$value": "{color.white}" },
+        "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
       },
-      "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
+      "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "code": {
       "kbd": {
-        "box-shadow": {
-          "value": "none",
-          "type": "shadow",
-          "source": "$kbd-box-shadow"
-        }
+        "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index bf26918ac5..fae700aa26 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -1,26 +1,22 @@
 {
   "color": {
+    "$type": "color",
     "data-table": {
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
+        "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
         "is-loading": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$data-table-is-loading-bg",
-          "modify": [
-            {
-              "type": "alpha",
-              "amount": 0.7
-            }
-          ]
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.white}"
         }
       },
-      "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
+      "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "data-table": {
-      "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" }
+      "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index bf2f03a253..ba760ef4c0 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -1,41 +1,38 @@
 {
   "color": {
+    "$type": "color",
     "dropdown": {
-      "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" },
-      "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" },
+      "text": { "source": "$dropdown-color", "$value": "{color.body.base}" },
+      "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" },
+      "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$dropdown-border-color",
-        "modify": [{
-          "type": "alpha",
-          "amount": 0.15
-        }]
+        "modify": [{ "type": "alpha", "amount": 0.15 }],
+        "$value": "{color.black}"
       },
-      "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" },
+      "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" },
       "link": {
-        "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
+        "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
         "hover": {
-          "base": { 
-            "value": "{color.gray.900}", 
-            "type": "color", 
+          "base": {
             "source": "$dropdown-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.5 }]
+            "modify": [{ "type": "darken", "amount": 0.5 }],
+            "$value": "{color.gray.900}"
           },
-          "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
+          "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" }
         },
         "active": {
-          "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" },
-          "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" }
+          "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
+          "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
         },
-        "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" }
+        "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "dropdown": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" }
+      "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index ef252e9d6f..4641968f7c 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -1,23 +1,61 @@
 {
   "color": {
+    "$type": "color",
     "dropzone": {
-      "error-wrapper": {
-        "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color"
-      },
-      "restriction-msg": {
-        "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
-      },
+      "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" },
+      "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" },
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }
+        "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "dropzone": {
-      "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" },
-      "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" },
-      "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" },
-      "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" }
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index c477d6541c..261f97bddd 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -2,266 +2,212 @@
   "color": {
     "form": {
       "input": {
-        "base": { "value": "{color.gray.700}", "type": "color", "source": "$input-color" },
-        "placeholder": { "value": "{color.gray.500}", "type": "color", "source": "$input-placeholder-color" },
-        "plaintext": { "value": "{color.body.base}", "type": "color", "source": "$input-plaintext-color" },
-        "border": { "value": "{color.gray.500}", "type": "color", "source": "$input-border-color" },
+        "$type": "color",
+        "base": { "source": "$input-color", "$value": "{color.gray.700}" },
+        "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" },
+        "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" },
+        "border": { "source": "$input-border-color", "$value": "{color.gray.500}" },
         "bg": {
-          "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" },
-          "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" }
+          "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
+          "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
         },
         "group": {
           "addon": {
-            "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" },
-            "border": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color"
-            },
-            "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" }
+            "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" },
+            "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" },
+            "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" }
           }
         },
         "focus": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-focus-color" },
-          "border": { "value": "{color.input.focus}", "type": "color", "source": "$input-focus-border-color" },
-          "bg": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$input-focus-bg" }
+          "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" },
+          "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" },
+          "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" }
         }
       },
       "control": {
         "indicator": {
-          "border": {
-            "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
-          },
+          "$type": "color",
+          "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
           "bg": {
-            "base": {
-              "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
-            },
-            "disabled": {
-              "value": "{color.form.input.bg.disabled}",
-              "type": "color",
-              "source": "$custom-control-indicator-disabled-bg"
-            }
+            "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
           },
           "checked": {
-            "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-color" },
-            "valid": { "value": "{color.success.base}", "type": "color", "source": "$custom-control-indicator-checked-valid-color" },
-            "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$custom-control-indicator-checked-invalid-color" },
+            "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" },
+            "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.success.base}" },
+            "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.danger.base}" },
             "bg": {
-              "base": {
-                "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
-              },
+              "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
               "disabled": {
-                "value": "{color.primary.base}",
-                "type": "color",
                 "source": "$custom-control-indicator-checked-disabled-bg",
-                "modify": [{ "type": "alpha", "amount": 0.5 }]
+                "modify": [{ "type": "alpha", "amount": 0.5 }],
+                "$value": "{color.primary.base}"
               }
             },
             "border": {
-              "base": {
-                "value": "{color.form.control.indicator.checked.base}",
-                "type": "color",
-                "source": "$custom-control-indicator-checked-border-color"
-              },
-              "focus": {
-                "value": "{color.form.input.focus.border}",
-                "type": "color",
-                "source": "$custom-control-indicator-focus-border-color"
-              }
+              "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" }
             }
           },
           "active": {
-            "base": {
-              "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
-            },
-            "bg": {
-              "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg"
-            },
-            "border": {
-              "value": "{color.form.control.indicator.active.bg}",
-              "type": "color",
-              "source": "$custom-control-indicator-active-border-color"
-            }
+            "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" },
+            "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" },
+            "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" }
           }
         },
         "label": {
-          "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" },
-          "disabled": {
-            "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
-          },
+          "$type": "color",
+          "base": { "source": "$custom-control-label-color", "$value": "inherit" },
+          "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
           "floating": {
             "text": {
-              "value": "{color.form.input.bg.base}",
-              "type": "color",
               "source": "$form-control-floating-label-text-bg",
-              "modify": [{ "type": "alpha", "amount": 0.1 }]
+              "modify": [{ "type": "alpha", "amount": 0.1 }],
+              "$value": "{color.form.input.bg.base}"
             }
           }
         },
         "checkbox": {
+          "$type": "color",
           "indicator": {
             "indeterminate": {
-              "base": {
-                "value": "{color.form.control.indicator.checked.base}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-color"
-              },
-              "bg": {
-                "value": "{color.bg.active}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-bg"
-              },
-              "border": {
-                "value": "{color.form.control.checkbox.indicator.indeterminate.bg}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-border-color"
-              }
+              "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" }
             }
           }
         },
         "switch": {
+          "$type": "color",
           "indicator": {
             "checked": {
-              "bg": {
-                "value": "{color.success.base}",
-                "type": "color",
-                "source": "$custom-switch-indicator-checked-bg"
-              }
+              "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
             }
           }
         },
         "select": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-select-color" },
-          "disabled": { "value": "{color.disabled}", "type": "color", "source": "$custom-select-disabled-color" },
+          "base": {
+            "source": "$custom-select-color",
+            "$value": "{color.form.input.base}",
+            "$type": "color"
+          },
+          "disabled": {
+            "source": "$custom-select-disabled-color",
+            "$value": "{color.disabled}",
+            "$type": "color"
+          },
           "indicator": {
-            "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" }
+            "$type": "color",
+            "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
           },
           "bg": {
-            "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" },
-            "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" },
-            "size": { "value": "24px 24px", "type": "dimension", "source": "$custom-select-bg-size" }
-          },
-          "border": {
             "base": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color"
+              "source": "$custom-select-bg",
+              "$value": "{color.form.input.bg.base}",
+              "$type": "color"
             },
-            "focus": {
-              "value": "{color.form.input.focus.border}",
-              "type": "color",
-              "source": "$custom-select-focus-border-color"
+            "disabled": {
+              "source": "$custom-select-disabled-bg",
+              "$value": "{color.gray.100}",
+              "$type": "color"
+            },
+            "size": {
+              "source": "$custom-select-bg-size",
+              "$value": "{color.gray.100}",
+              "$type": "dimension"
             }
+          },
+          "border": {
+            "$type": "color",
+            "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" }
           }
         },
         "range": {
+          "$type": "color",
           "track": {
-            "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" }
+            "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
           },
           "thumb": {
             "bg": {
-              "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" },
-              "disabled": {
-                "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg"
-              },
+              "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
+              "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
               "active": {
-                "value": "{color.bg.active}",
-                "type": "color",
                 "source": "$custom-range-thumb-active-bg",
-                "modify": [{ "type": "lighten", "amount": "0.35" }]
+                "modify": [{ "type": "lighten", "amount": "0.35" }],
+                "$value": "{color.bg.active}"
               }
             }
           }
         },
         "file": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" },
+          "$type": "color",
+          "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
           "bg": {
-            "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" },
-            "disabled": {
-              "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg"
-            }
+            "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
           },
           "button": {
-            "base": {
-              "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color"
-            },
-            "bg": {
-              "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg"
-            }
+            "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" },
+            "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" }
           },
           "border": {
-            "base": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color"
-            },
-            "focus": {
-              "value": "{color.form.input.focus.border}",
-              "type": "color",
-              "source": "$custom-file-focus-border-color"
-            }
+            "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
           }
         }
       },
       "feedback": {
-        "valid": { "value": "{color.success.base}", "type": "color", "source": "$form-feedback-valid-color" },
-        "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$form-feedback-invalid-color" },
+        "$type": "color",
+        "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" },
+        "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" },
         "icon": {
-          "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
-            "source": "$form-feedback-icon-valid-color"
-          },
-          "invalid": {
-            "value": "{color.form.feedback.invalid}",
-            "type": "color",
-            "source": "$form-feedback-icon-invalid-color"
-          }
+          "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" },
+          "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" }
         },
         "tooltip": {
           "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
             "source": "$form-feedback-tooltip-valid-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.form.feedback.valid}"
           },
           "bg": {
             "valid": {
-              "value": "{color.form.feedback.valid}",
-              "type": "color",
               "source": "$form-feedback-tooltip-valid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }]
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.valid}"
             },
             "invalid": {
-              "value": "{color.form.feedback.invalid}",
-              "type": "color",
               "source": "$form-feedback-tooltip-invalid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }]
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.invalid}"
             }
           },
           "box-shadow": {
             "focus": {
               "valid": {
-                "value": "{color.form.feedback.valid}",
-                "type": "color",
                 "source": "$form-feedback-focus-box-shadow-valid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }]
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.valid}"
               },
               "invalid": {
-                "value": "{color.form.feedback.invalid}",
-                "type": "color",
                 "source": "$form-feedback-focus-box-shadow-invalid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }]
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.invalid}"
               }
             }
           }
         },
         "checked": {
           "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
             "source": "$form-feedback-checked-valid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }]
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.valid}"
           },
           "invalid": {
-            "value": "{color.form.feedback.invalid}",
-            "type": "color",
             "source": "$form-feedback-checked-invalid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }]
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.invalid}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index 49f3b256c3..6554295dc1 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -1,73 +1,69 @@
 {
   "elevation": {
+    "$type": "shadow",
     "form": {
       "input": {
-        "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
+        "base": { "source": "$input-box-shadow", "$value": "none" },
         "focus": {
-          "value": "0 0 0 1px {color.primary.500}",
-          "type": "shadow",
-          "source": "$input-focus-box-shadow"
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       },
       "control": {
         "indicator": {
-          "base": {
-            "value": "{elevation.form.input.base}",
-            "type": "shadow",
-            "source": "$custom-control-indicator-box-shadow"
-          },
+          "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
           "checked": {
-            "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" },
+            "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
             "focus": {
-              "value": "0 0 0 4px rgba(0, 0, 0, .1)",
-              "type": "shadow",
-              "source": "$custom-control-indicator-focus-box-shadow"
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
             }
           },
-          "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" }
+          "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
         },
         "checkbox": {
           "indicator": {
-            "indeterminate": {
-              "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
-            }
+            "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
           }
         },
         "range": {
-          "track": {
-            "value": "none",
-            "type": "shadow",
-            "source": "$custom-range-track-box-shadow"
-          },
+          "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
           "thumb": {
-            "base": {
-              "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
-            },
+            "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
             "focus": {
-              "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}",
-              "type": "shadow",
-              "source": "$custom-range-thumb-focus-box-shadow"
+              "source": "$custom-range-thumb-focus-box-shadow",
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "0",
+                  "offsetX": "0",
+                  "offsetY": ".1rem",
+                  "blur": ".25rem"
+                }
+              ]
             }
           }
         },
         "file": {
-          "base": {
-            "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow"
-          },
-          "focus": {
-            "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow"
-          }
+          "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" },
+          "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" }
         },
         "select": {
           "border": {
-            "base": {
-              "value": "none", "type": "shadow", "source": "$custom-select-box-shadow"
-            },
-            "focus": {
-              "value": "{elevation.input.btn-focus.box-shadow}",
-              "type": "shadow",
-              "source": "$custom-select-focus-box-shadow"
-            }
+            "base": { "source": "$custom-select-box-shadow", "$value": "none" },
+            "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 3e4876afbe..5970074591 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -1,127 +1,130 @@
 {
   "other": {
     "form": {
+      "$type": "number",
       "feedback": {
-        "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" }
+        "tooltip-opacity": {
+          "source": "$form-feedback-tooltip-opacity",
+          "$value": ".9"
+        }
       }
     },
     "content": {
       "form": {
         "control": {
           "checkbox": {
+            "$type": "file",
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")"
                 },
                 "valid": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")"
                 },
                 "invalid": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")"
                 }
               },
               "indeterminate": {
                 "icon": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-indeterminate",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")"
                 }
               }
             }
           },
           "radio": {
+            "$type": "file",
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
                 },
                 "valid": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")"
                 },
                 "invalid": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")"
                 }
               }
             }
           },
           "switch": {
+            "$type": "file",
             "indicator": {
               "icon-off": {
-                "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
-                "type": "file",
                 "source": "$custom-switch-indicator-icon-off",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
               },
               "icon-on": {
-                "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")",
-                "type": "file",
                 "source": "$custom-switch-indicator-icon-on",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")"
               }
             }
           },
           "select": {
             "indicator": {
+              "$type": "file",
               "icon": {
-                "value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')",
-                "type": "file",
                 "source": "$custom-select-indicator",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')"
               }
             },
             "bg": {
-              "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}",
-              "type": "background",
-              "source": "$custom-select-background"
+              "source": "$custom-select-background",
+              "$value": {
+                "color": "{color.form.control.select.bg.base}",
+                "image": "{other.content.form.control.select.indicator.icon}",
+                "repeat": "no-repeat",
+                "position-x": "right",
+                "offset-y": "{spacing.form.input.padding.y.base}",
+                "position-y": "center"
+              },
+              "$type": "background"
             }
           }
         },
         "feedback": {
+          "$type": "file",
           "icon": {
             "valid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")",
-              "type": "file",
               "source": "$form-feedback-icon-valid",
               "outputReferences": false,
-              "modify": [
-                { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")"
             },
             "invalid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")",
-              "type": "file",
               "source": "$form-feedback-icon-invalid",
               "outputReferences": false,
-              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")"
             }
           }
         }
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index 692a6b1b70..d2e1b47e0b 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -1,449 +1,601 @@
 {
   "color": {
+    "$type": "color",
     "icon-button": {
-      "bg": { 
-        "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" }, 
+      "bg": {
+        "base": { "source": "$btn-icon-bg", "$value": "transparent" },
         "primary": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.icon-button.text.primary.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.text.primary.base}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.text.primary.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "secondary": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.secondary.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.secondary.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.secondary.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" }
+            "base": { "$value": "{color.secondary.base}" },
+            "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "brand": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.brand.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.brand.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.brand.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" }
+            "base": { "$value": "{color.brand.base}" },
+            "hover": { "$value": "{color.icon-button.bg.brand.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.brand.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "success": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.success.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.success.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.success.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" }
+            "base": { "$value": "{color.success.base}" },
+            "hover": { "$value": "{color.icon-button.bg.success.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.success.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "warning": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.warning.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.warning.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.warning.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" }
+            "base": { "$value": "{color.warning.base}" },
+            "hover": { "$value": "{color.icon-button.bg.warning.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.warning.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "danger": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.danger.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.danger.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.danger.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" }
+            "base": { "$value": "{color.danger.base}" },
+            "hover": { "$value": "{color.icon-button.bg.danger.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.danger.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "light": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.light.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.light.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.light.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" }
+            "base": { "$value": "{color.light.base}" },
+            "hover": { "$value": "{color.icon-button.bg.light.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.light.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "dark": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.dark.base}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.dark.base}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.dark.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" }
+            "base": { "$value": "{color.dark.base}" },
+            "hover": { "$value": "{color.icon-button.bg.dark.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.dark.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         },
         "black": {
-          "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-          "hover": { "value": "{color.black}", "type": "color" },
-          "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
+          "base": { "$value": "{color.icon-button.bg.base}" },
+          "hover": { "$value": "{color.black}" },
+          "focus": { "$value": "{color.icon-button.bg.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.bg.base}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.bg.base}" }
           },
           "active": {
-            "base": { "value": "{color.black}", "type": "color" },
-            "hover": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" }
+            "base": { "$value": "{color.black}" },
+            "hover": { "$value": "{color.icon-button.bg.black.active.base}" },
+            "focus": { "$value": "{color.icon-button.bg.black.active.base}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           }
         }
       },
       "text": {
         "primary": {
-          "base": { "value": "{color.primary.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
+          "base": { "$value": "{color.primary.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.primary.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
-            "hover": { "value": "color.icon-button.text.primary.base", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
+            "base": { "$value": "{color.icon-button.text.primary.base}" },
+            "hover": { "$value": "{color.icon-button.text.primary.base}" },
+            "focus": { "$value": "{color.icon-button.text.primary.base}" }
           }
         },
         "secondary": {
-          "base": { "value": "{color.secondary.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.secondary.base}", "type": "color" },
+          "base": { "$value": "{color.secondary.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.secondary.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.secondary.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.secondary.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.secondary.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.secondary.base}" },
+            "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }
           }
         },
         "brand": {
-          "base": { "value": "{color.brand.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.brand.base}", "type": "color" },
+          "base": { "$value": "{color.brand.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.brand.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.brand.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.brand.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.brand.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.brand.base}" },
+            "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }
           }
         },
         "success": {
-          "base": { "value": "{color.success.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.success.base}", "type": "color" },
+          "base": { "$value": "{color.success.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.success.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.success.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.success.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.success.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.success.base}" },
+            "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" }
           }
         },
         "warning": {
-          "base": { "value": "{color.warning.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.warning.base}", "type": "color" },
+          "base": { "$value": "{color.warning.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.warning.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.warning.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.warning.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.warning.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.warning.base}" },
+            "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }
           }
         },
         "danger": {
-          "base": { "value": "{color.danger.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.danger.base}", "type": "color" },
+          "base": { "$value": "{color.danger.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.danger.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.danger.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.danger.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.danger.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.danger.base}" },
+            "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }
           }
         },
         "light": {
-          "base": { "value": "{color.light.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.light.base}", "type": "color" },
+          "base": { "$value": "{color.light.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.light.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.light.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.light.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.light.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.light.base}" },
+            "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" }
           }
         },
         "dark": {
-          "base": { "value": "{color.dark.base}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.dark.base}", "type": "color" },
+          "base": { "$value": "{color.dark.base}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.dark.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.dark.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.dark.base}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.dark.base}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.dark.base}" },
+            "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }
           }
         },
         "black": {
-          "base": { "value": "{color.black}", "type": "color" },
-          "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-          "focus": { "value": "{color.icon-button.text.black.base}", "type": "color" },
+          "base": { "$value": "{color.black}" },
+          "hover": { "$value": "{color.icon-button.accent}" },
+          "focus": { "$value": "{color.icon-button.text.black.base}" },
           "inverse": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.black}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.black}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "active": {
-            "base": { "value": "{color.icon-button.accent}", "type": "color" },
-            "hover": { "value": "{color.icon-button.accent}", "type": "color" },
-            "focus": { "value": "{color.icon-button.accent}", "type": "color" }
+            "base": { "$value": "{color.icon-button.accent}" },
+            "hover": { "$value": "{color.icon-button.accent}" },
+            "focus": { "$value": "{color.icon-button.accent}" }
           },
           "inverse-active": {
-            "base": { "value": "{color.black}", "type": "color" },
-            "hover": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" },
-            "focus": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" }
+            "base": { "$value": "{color.black}" },
+            "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" },
+            "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" }
           }
         }
       },
-      "accent": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" },
-      "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" }
+      "accent": {
+        "source": "$btn-icon-accent-color",
+        "$value": "{color.white}"
+      },
+      "black": {
+        "source": "$btn-icon-black",
+        "$value": "{color.black}"
+      }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "icon-button": {
       "box-shadow": {
         "primary": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.primary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "secondary": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.secondary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "brand": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.brand.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "success": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.success.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "warning": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.warning.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "danger": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.danger.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "light": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.light.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "dark": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.dark.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         },
         "black": {
           "base": {
-            "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}", "type": "shadow"
+            "$value": {
+              "color": "{color.icon-button.text.black.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
           },
-          "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
-          "active": { "value": "none", "type": "shadow" },
-          "inverse-active": { "value": "none", "type": "shadow" }
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": "inset"
+            }
+          },
+          "active": { "$value": "none" },
+          "inverse-active": { "$value": "none" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
index bd743ec210..8c4df0f914 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -1,17 +1,20 @@
 {
   "color": {
+    "$type": "color",
     "image": {
-      "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
+      "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
       "thumbnail": {
-        "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
-        "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
+        "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
+        "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
+        }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "image": {
       "thumbnail": {
-        "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" }
+        "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json
index cbe7f88ef7..74d45ae499 100644
--- a/tokens/src/themes/light/components/Menu.json
+++ b/tokens/src/themes/light/components/Menu.json
@@ -1,28 +1,30 @@
 {
   "elevation": {
+    "$type": "shadow",
     "menu": {
-      "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" }
+      "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
     }
   },
   "color": {
+    "$type": "color",
     "menu": {
-      "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" },
+      "bg": { "source": "$menu-bg", "$value": "{color.white}" },
       "item": {
-        "color": { "value": "{color.body.base}", "type": "color", "source": "$menu-item-color" },
-        "bg": { "value": "transparent", "type": "color", "source": "$menu-item-bg" },
-        "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-border-color" },
+        "color": { "source": "$menu-item-color", "$value": "{color.body.base}" },
+        "bg": { "source": "$menu-item-bg", "$value": "transparent" },
+        "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" },
         "hover": {
-          "color": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$menu-item-hover-color" },
-          "bg": { "value": "{color.btn.hover.bg.tertiary}", "type": "color", "source": "$menu-item-hover-bg" },
-          "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-hover-border-color" }
+          "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" },
+          "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" },
+          "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
         },
         "focus": {
-          "bg": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" }
+          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
         }
       },
       "select": {
         "btn-link": {
-          "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" }
+          "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 8b76a512ac..b11fd11149 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -1,29 +1,39 @@
 {
   "color": {
+    "$type": "color",
     "modal": {
       "content": {
-        "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
+        "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
         "border": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$modal-content-border-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.2
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.2 }],
+          "$value": "{color.black}"
         }
       },
-      "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
+      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "modal": {
       "content": {
         "box-shadow": {
           "sm-up": {
-            "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
-            "type": "shadow",
-            "source": "$modal-content-box-shadow-sm-up"
+            "source": "$modal-content-box-shadow-sm-up",
+            "$value": [
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "10px",
+                "blur": "20px"
+              },
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "8px",
+                "blur": "20px"
+              }
+            ]
           }
         }
       }
@@ -31,7 +41,7 @@
   },
   "other": {
     "modal": {
-      "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" }
+      "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index 074eae400c..d9c0ac6f86 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -1,84 +1,99 @@
 {
   "border-color": {
+    "$type": "color",
     "nav": {
       "tabs-link": {
         "border": {
-          "active": {
-            "value": "{color.primary.500}",
-            "type": "color",
-            "source": "$nav-tabs-link-active-border-color"
-          },
+          "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
           "hover": {
-            "value": "transparent transparent {color.nav.tabs.base.border.base}",
-            "type": "color",
-            "source": "$nav-tabs-link-hover-border-color"
+            "source": "$nav-tabs-link-hover-border-color",
+            "$value": {
+              "top": "transparent",
+              "right": "transparent",
+              "bottom": "{color.nav.tabs.base.border.base}",
+              "left": "transparent"
+            }
           },
           "focus": {
-            "value": "{color.nav.tabs.base.link.active.text}",
-            "type": "color",
-            "source": "$nav-tabs-link-focus-border-color"
+            "source": "$nav-tabs-link-focus-border-color",
+            "$value": "{color.nav.tabs.base.link.active.text}"
           }
         }
       }
     }
   },
   "color": {
+    "$type": "color",
     "nav": {
       "link": {
         "text": {
-          "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" },
-          "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" }
+          "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
+          "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
         },
-        "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" }
+        "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
       },
       "tabs": {
         "base": {
           "text": {
-            "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
-          },
-          "bg": {
-            "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+            "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
           },
+          "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } },
           "border": {
-            "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
-            "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+            "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" },
+            "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" }
           },
           "link": {
-            "hover": {
-              "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
-            },
+            "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } },
             "active": {
-              "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
-              "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+              "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" },
+              "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
             },
             "disabled": {
-              "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
+              "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
             }
           }
         },
         "inverse": {
           "link": {
-            "text": {
-              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" }
-            },
+            "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
             "border": {
-              "bottom": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-tabs-link-border-bottom-color" },
-              "active": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-active-border-color" }
+              "bottom": {
+                "source": "$nav-inverse-tabs-link-border-bottom-color",
+                "$value": "{color.dark.300}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-border-color",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              }
             },
             "bg": {
-              "hover": { "value": "{color.nav.tabs.inverse.link.border.bottom}", "type": "color", "source": "$nav-inverse-tabs-link-hover-bg" },
-              "active": { "value": "{color.nav.tabs.inverse.link.bg.hover}", "type": "color", "source": "$nav-inverse-tabs-link-active-bg" },
-              "focus": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-focus-bg" },
+              "hover": {
+                "source": "$nav-inverse-tabs-link-hover-bg",
+                "$value": "{color.nav.tabs.inverse.link.border.bottom}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-bg",
+                "$value": "{color.nav.tabs.inverse.link.bg.hover}"
+              },
+              "focus": {
+                "source": "$nav-inverse-tabs-link-focus-bg",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              },
               "active-hover": {
-                "value": "transparent",
-                "type": "color",
-                "source": "$nav-inverse-tabs-link-active-hover-bg"
+                "source": "$nav-inverse-tabs-link-active-hover-bg",
+                "$value": "transparent"
               }
             },
-          "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+            "tab-content-color": {
+              "source": "$nav-inverse-tabs-tab-content-color",
+              "$value": "{color.nav.tabs.inverse.link.text.base}"
+            }
           },
           "dropdown": {
-            "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
+            "border": {
+              "source": "$nav-inverse-tabs-dropdown-border-color",
+              "$value": "{color.nav.tabs.inverse.link.bg.active-hover}"
+            }
           }
         }
       },
@@ -86,80 +101,53 @@
         "base": {
           "link": {
             "active": {
-              "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
-              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
-              "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
+              "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" },
+              "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" }
             },
-            "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
+            "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
           }
         },
         "inverse": {
           "link": {
             "text": {
-              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-pills-link-color" },
-              "focus": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-focus-color" },
-              "active": { "value": "{color.primary.500}", "type": "color", "source": "$nav-inverse-pills-link-active-color" },
-              "hover": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-color" },
-              "active-focus": {
-                "value": "{color.nav.pills.inverse.link.text.active}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-color"
-              },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-color"
-              }
+              "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" },
+              "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" },
+              "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }
             },
             "border": {
-              "base": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-pills-link-border-color" },
-              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-border-color" },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.border.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-border-color"
-              },
-              "active-focus": {
-                "value": "{color.primary.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-border-color"
-              },
-              "focus-hover": {
-                "value": "{color.nav.pills.inverse.link.border.active-focus}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
-              }
+              "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" },
+              "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" },
+              "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" }
             },
             "bg": {
-              "hover": { "value": "{color.nav.pills.inverse.link.border.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-bg" },
-              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-bg" },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.border.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-bg"
-              },
-              "active-focus-hover": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-hover-bg"
-              }
+              "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }
             }
           },
-          "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" }
+          "tab-content-color": {
+            "source": "$nav-inverse-pills-tab-content-color",
+            "$value": "{color.nav.pills.inverse.link.text.base}"
+          }
         }
       },
-      "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" },
+      "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
       "dark": {
-        "value": "{color.white}",
-        "type": "color",
         "source": "$navbar-dark-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.white}"
       },
       "light": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$navbar-light-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.black}"
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json
index b855507ab0..5b157599c3 100644
--- a/tokens/src/themes/light/components/Navbar.json
+++ b/tokens/src/themes/light/components/Navbar.json
@@ -1,133 +1,89 @@
 {
   "color": {
+    "$type": "color",
     "navbar": {
       "dark": {
         "text": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.5
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.white}"
         },
         "hover": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-hover-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.75
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.75 }],
+          "$value": "{color.white}"
         },
-        "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" },
+        "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
         "disabled": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-disabled-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.25
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.25 }],
+          "$value": "{color.white}"
         },
         "toggler": {
           "border": {
-            "value": "{color.white}",
-            "type": "color",
             "source": "$navbar-dark-toggler-border-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.1
-            }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
           }
         },
         "brand": {
-          "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" },
-          "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" }
+          "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" },
+          "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" }
         }
       },
       "light": {
         "text": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$navbar-light-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.5
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}"
         },
-        "hover": { 
-          "value": "{color.black}",
-          "type": "color",
+        "hover": {
           "source": "$navbar-light-hover-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.7
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.black}"
         },
-        "active": { 
-          "value": "{color.black}",
-          "type": "color",
+        "active": {
           "source": "$navbar-light-active-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.9
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.9 }],
+          "$value": "{color.black}"
         },
-        "disabled": { 
-          "value": "{color.black}",
-          "type": "color",
+        "disabled": {
           "source": "$navbar-light-disabled-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.3
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
         },
         "toggler": {
           "border": {
-            "value": "{color.black}",
-            "type": "color",
             "source": "$navbar-light-toggler-border-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.1
-            }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.black}"
           }
         },
         "brand": {
-          "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" },
-          "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" }
+          "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" },
+          "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" }
         }
       }
     }
   },
   "content": {
+    "$type": "file",
     "navbar": {
       "toggler": {
         "dark": {
           "icon-bg": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$navbar-dark-toggler-icon-bg",
             "outputReferences": false,
-            "modify": [{
-              "type": "str-replace",
-              "toReplace": "#",
-              "replaceWith": "%23"
-            }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
           }
         },
         "light": {
           "icon-bg": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$navbar-light-toggler-icon-bg",
             "outputReferences": false,
-            "modify": [{
-              "type": "str-replace",
-              "toReplace": "#",
-              "replaceWith": "%23"
-            }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json
index da6de0c447..d02b743145 100644
--- a/tokens/src/themes/light/components/OverflowScroll.json
+++ b/tokens/src/themes/light/components/OverflowScroll.json
@@ -1,8 +1,10 @@
 {
   "color": {
+    "$type": "color",
     "overflow-scroll": {
       "opacity-mask-transparent": {
-        "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent"
+        "source": "$overflow-scroll-opacity-mask-transparent",
+        "$value": "rgba(0, 0, 0, .4)"
       }
     }
   }
diff --git a/tokens/src/themes/light/components/PageBanner.json b/tokens/src/themes/light/components/PageBanner.json
index 6d520cbee9..1450d8c0a8 100644
--- a/tokens/src/themes/light/components/PageBanner.json
+++ b/tokens/src/themes/light/components/PageBanner.json
@@ -1,23 +1,24 @@
 {
   "color": {
+    "$type": "color",
     "page-banner": {
       "bg": {
-        "dark": { "value": "{color.dark.500}", "type": "color" },
-        "light": { "value": "{color.light.400}", "type": "color" },
+        "dark": { "$value": "{color.dark.500}" },
+        "light": { "$value": "{color.light.400}" },
         "accent": {
-          "a": { "value": "{color.accent.a}", "type": "color" },
-          "b": { "value": "{color.accent.b}", "type": "color" }
+          "a": { "$value": "{color.accent.a}" },
+          "b": { "$value": "{color.accent.b}" }
         },
-        "warning": { "value": "{color.warning.100}", "type": "color" }
+        "warning": { "$value": "{color.warning.100}" }
       },
       "text": {
-        "dark": { "value": "{color.white}", "type": "color" },
-        "light": { "value": "{color.black}", "type": "color" },
+        "dark": { "$value": "{color.white}" },
+        "light": { "$value": "{color.black}" },
         "accent": {
-          "a": { "value": "{color.black}", "type": "color" },
-          "b": { "value": "{color.black}", "type": "color" }
+          "a": { "$value": "{color.black}" },
+          "b": { "$value": "{color.black}" }
         },
-        "warning": { "value": "{color.black}", "type": "color" }
+        "warning": { "$value": "{color.black}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
index 557e914bf0..d879de7302 100644
--- a/tokens/src/themes/light/components/Pagination.json
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -1,44 +1,40 @@
 {
   "color": {
+    "$type": "color",
     "pagination": {
       "text": {
-        "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
-        "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
-        "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
-        "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
-        "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
+        "base": { "source": "$pagination-color", "$value": "{color.link.base}" },
+        "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" },
+        "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" },
+        "active": { "source": "$pagination-active-color", "$value": "{color.active}" },
+        "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" }
       },
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
-        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
-        "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
-        "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
+        "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" },
+        "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" },
+        "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" }
       },
       "border": {
-        "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
-        "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
-        "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" },
-        "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" }
+        "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" },
+        "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" },
+        "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" }
       },
       "focus": {
-        "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
-        "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
+        "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
+        "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
       },
       "dropdown": {
-        "text-inverse": {
-          "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse"
-        }
+        "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "pagination": {
       "focus": {
-        "box-shadow": {
-          "value": "{elevation.input.btn-focus.box-shadow}",
-          "type": "shadow",
-          "source": "$pagination-focus-box-shadow"
-        }
+        "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 3ba213c768..0741490cfc 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -1,55 +1,50 @@
 {
   "color": {
+    "$type": "color",
     "popover": {
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" },
-      "border": { "value": "rgba(0, 0, 0, .2)", "type": "color",  "source": "$popover-border-color" },
+      "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
+      "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" },
       "header": {
-        "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" },
-        "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" },
+        "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
+        "bg": { "source": "$popover-header-bg", "$value": "{color.white}" },
         "bg-dark": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$popover-header-bg-dark",
-          "modify": [{ "type": "darken", "amount": 0.5 }]
+          "modify": [{ "type": "darken", "amount": 0.5 }],
+          "$value": "{color.white}"
         },
         "border-bottom-dark": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$popover-header-border-bottom-darken",
-          "modify": [{ "type": "darken", "amount": 0.05 }]
+          "modify": [{ "type": "darken", "amount": 0.05 }],
+          "$value": "{color.white}"
         }
       },
-      "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" },
-      "arrow": { 
-        "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" },
+      "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
+      "arrow": {
+        "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
         "outer": {
-          "value": "{color.popover.border}",
-          "type": "color",
           "source": "$popover-arrow-outer-color",
-          "modify": [{ "type": "alpha", "amount": 0.05 }]
+          "modify": [{ "type": "alpha", "amount": 0.05 }],
+          "$value": "{color.popover.border}"
         }
       },
       "success": {
-        "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" },
-        "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" }
+        "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
+        "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
       },
       "warning": {
-        "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" },
-        "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" }
+        "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
+        "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
       },
       "danger": {
-        "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
-        "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
+        "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
+        "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "popover": {
-      "box-shadow": {
-        "value": "none",
-        "type": "shadow",
-        "source": "$popover-box-shadow"
-      }
+      "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
index 4814f474f5..61b561110b 100644
--- a/tokens/src/themes/light/components/ProductTour.json
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -1,32 +1,21 @@
 {
   "color": {
+    "$type": "color",
     "product-tour": {
       "checkpoint": {
-        "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
-        "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
-        "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" },
-        "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+        "bg": { "source": "$checkpoint-background-color", "$value": "{color.light.300}" },
+        "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" },
+        "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" },
+        "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.primary.base}" },
         "box-shadow": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$checkpoint-box-shadow-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.3
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
         },
         "arrow": {
           "border": {
-            "top": {
-              "value": "{color.product-tour.checkpoint.bg}",
-              "type": "color",
-              "source": "$checkpoint-arrow-border-top-color"
-            },
-            "transparent": {
-              "value": "transparent",
-              "type": "color",
-              "source": "$checkpoint-arrow-border-color-transparent"
-            }
+            "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" },
+            "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" }
           }
         }
       }
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
index 400017cabf..81e1f9c36c 100644
--- a/tokens/src/themes/light/components/ProgressBar.json
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -1,20 +1,22 @@
 {
   "color": {
+    "$type": "color",
     "progress-bar": {
-      "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
-      "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
-      "bar": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
-        "bg": {
-          "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
-          "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
-        }
-      }
+      "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+      "bg": {
+        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+      },
+      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+    },
+    "progress": {
+      "bg": { "source": "$progress-bg", "$value": "transparent" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "progress-bar": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
+      "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json
index 12d6f06b55..87da8f709c 100644
--- a/tokens/src/themes/light/components/Scrollable.json
+++ b/tokens/src/themes/light/components/Scrollable.json
@@ -1,12 +1,12 @@
 {
   "elevation": {
+    "$type": "shadow",
     "scrollable": {
       "body": {
         "box-shadow": {
-          "value": "{color.black}",
-          "type": "shadow",
           "source": "$scrollable-body-box-shadow",
-          "modify": [{ "type": "alpha", "amount": 0.55 }]
+          "modify": [{ "type": "alpha", "amount": 0.55 }],
+          "$value": "{color.black}"
         }
       }
     }
diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json
index 4cd19bbf0e..16f2fd39d3 100644
--- a/tokens/src/themes/light/components/SearchField.json
+++ b/tokens/src/themes/light/components/SearchField.json
@@ -1,25 +1,25 @@
 {
   "color": {
+    "$type": "color",
     "search-field": {
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" },
-        "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" },
-        "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" }
+        "base": { "source": "$search-border-color", "$value": "{color.gray.500}" },
+        "interaction": { "source": "$search-border-color-interaction", "$value": "{color.black}" },
+        "focus": { "source": "$search-border-focus-color", "$value": "{color.black}" }
       },
       "button": {
         "bg": {
-          "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" },
-          "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" }
+          "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
+          "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
         }
       },
-      "form-bg": {
-        "value": "{color.white}", "type": "color", "source": "$search-form-background-color"
-      }
+      "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" }
     }
   },
   "other": {
+    "$type": "number",
     "search-field": {
-      "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" }
+      "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json
index 996e689bfa..9084a8eb52 100644
--- a/tokens/src/themes/light/components/Sheet.json
+++ b/tokens/src/themes/light/components/Sheet.json
@@ -1,19 +1,18 @@
 {
   "color": {
+    "$type": "color",
     "sheet": {
       "skrim": {
-        "bg": { 
-          "value": "{color.gray.300}",
-          "type": "color",
+        "bg": {
           "source": "$sheet-skrim-bg",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.gray.300}"
         },
         "component": {
           "box-shadow": {
-            "value": "{color.black}",
-            "type": "color",
             "source": "$sheet-skrim-component-box-shadow",
-            "modify": [{ "type": "alpha", "amount": 0.15 }]
+            "modify": [{ "type": "alpha", "amount": 0.15 }],
+            "$value": "{color.black}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json
index a4f2a62ba2..eeb118dec2 100644
--- a/tokens/src/themes/light/components/Stepper.json
+++ b/tokens/src/themes/light/components/Stepper.json
@@ -1,31 +1,26 @@
 {
   "color": {
+    "$type": "color",
     "stepper": {
       "header": {
-        "bg": { 
-          "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" },
-          "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" }
+        "bg": {
+          "base": { "source": "$stepper-header-bg", "$value": "transparent" },
+          "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
         },
         "step": {
-          "base": {
-            "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color"
-          },
+          "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" },
           "bg": {
-            "base": {
-              "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg"
-            },
-            "active": {
-              "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg"
-            }
+            "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
+            "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
           },
-          "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" },
+          "border": { "source": "$stepper-header-step-border", "$value": "none" },
           "bubble-error": {
-            "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color"
+            "source": "$stepper-header-step-error-bubble-color",
+            "$value": "{color.danger.base}"
           },
           "description-error": {
-            "value": "{color.stepper.header.step.bubble-error}", 
-            "type": "color", 
-            "source": "$stepper-header-step-error-description-color"
+            "source": "$stepper-header-step-error-description-color",
+            "$value": "{color.stepper.header.step.bubble-error}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
index 396aa1d04f..6fe18059fe 100644
--- a/tokens/src/themes/light/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -1,16 +1,41 @@
 {
   "elevation": {
+    "$type": "shadow",
     "sticky": {
       "shadow": {
         "top": {
-          "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$sticky-shadow-top"
+          "source": "$sticky-shadow-top",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ]
         },
         "bottom": {
-          "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$sticky-shadow-bottom"
+          "source": "$sticky-shadow-bottom",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ]
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json
index b8647e01c7..5e7c601ff2 100644
--- a/tokens/src/themes/light/components/Tab.json
+++ b/tokens/src/themes/light/components/Tab.json
@@ -1,59 +1,82 @@
 {
   "color": {
+    "$type": "color",
     "tab": {
       "more-link-dropdown-toggle": {
         "btn": {
           "text": {
             "focus": {
-              "value": "{color.tab.more-link-dropdown-toggle.text.focus}",
-              "type": "color",
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-color"
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
             }
           },
           "border": {
             "focus": {
-              "value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
-              "type": "color",
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color"
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
             }
           }
         },
         "text": {
-          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-color" },
-          "active": { "value": "{color.tab.more-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-active-color" },
-          "hover": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-hover-color" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-color",
+            "$value": "{color.white}"
+          },
+          "active": {
+            "source": "$tab-more-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+          },
+          "hover": {
+            "source": "$tab-more-link-dropdown-toggle-hover-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
         },
         "bg": {
-          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-bg",
+            "$value": "{color.primary.500}"
+          }
         },
         "border": {
-          "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
         }
       },
       "inverse-pills-link-dropdown-toggle": {
         "text": {
-          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" },
-          "active": { "value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" },
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color",
+            "$value": "{color.primary.500}"
+          },
+          "active": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}"
+          },
           "active-hover": {
-            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
           }
         },
         "bg": {
-          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" },
-          "hover": { "value": "transparent", "type": "color", "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" },
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg",
+            "$value": "{color.white}"
+          },
+          "hover": {
+            "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg",
+            "$value": "transparent"
+          },
           "active-hover": {
-            "value": "{color.primary.300}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg",
+            "$value": "{color.primary.300}"
           }
         },
         "border": {
           "focus": {
-            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index b40da24624..57f9d6d4d6 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -1,32 +1,44 @@
 {
   "color": {
+    "$type": "color",
     "toast": {
-      "base": { "value": "inherit", "type": "color", "source": "$toast-color" },
-      "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" },
+      "base": { "source": "$toast-color", "$value": "inherit" },
+      "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$toast-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.1 }]
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.black}"
       },
       "header": {
-        "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" },
-        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" },
-        "border": { 
-          "value": "{color.black}",
-          "type": "color",
+        "text": { "source": "$toast-header-color", "$value": "{color.white}" },
+        "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" },
+        "border": {
           "source": "$toast-header-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}"
         }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "toast": {
       "box-shadow": {
-        "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)",
-        "type": "shadow",
-        "source": "$toast-box-shadow"
+        "source": "$toast-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "1.25rem",
+            "blur": "2.5rem"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": ".5rem",
+            "blur": "3rem"
+          }
+        ]
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index a73762aba6..81062e6ec8 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -1,30 +1,45 @@
 {
   "color": {
+    "$type": "color",
     "tooltip": {
-      "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
-      "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
+      "text": { "source": "$tooltip-color", "$value": "{color.white}" },
+      "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
       "bg": {
-        "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
+        "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
+        "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
       },
       "arrow": {
-        "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
+        "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
+        "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "tooltip": {
       "box-shadow": {
-        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
-        "type": "shadow",
-        "source": "$tooltip-box-shadow"
+        "source": "$tooltip-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
       }
     }
   },
   "other": {
+    "$type": "number",
     "tooltip": {
-      "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
+      "opacity": { "source": "$tooltip-opacity", "$value": "1" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json
index 39f2dce270..f894be2efe 100644
--- a/tokens/src/themes/light/components/general/body.json
+++ b/tokens/src/themes/light/components/general/body.json
@@ -1,8 +1,9 @@
 {
   "color": {
+    "$type": "color",
     "body": {
-      "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" }
+      "base": { "source": "$body-color", "$value": "{color.gray.700}" },
+      "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
index 989214871b..755ccf7fd9 100644
--- a/tokens/src/themes/light/components/general/headings.json
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -1,7 +1,8 @@
 {
   "color": {
+    "$type": "color",
     "headings": {
-      "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
+      "base": { "source": "$headings-color", "$value": "{color.black}" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json
index 3c40c8d618..2d5ad16dbf 100644
--- a/tokens/src/themes/light/components/general/hr.json
+++ b/tokens/src/themes/light/components/general/hr.json
@@ -1,14 +1,11 @@
 {
   "color": {
+    "$type": "color",
     "hr": {
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$hr-border-color",
-        "modify": [{
-          "type": "alpha",
-          "amount": 0.1
-        }]
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.black}"
       }
     }
   }
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index f62b15e999..424b099dbb 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -1,16 +1,23 @@
 {
   "color": {
+    "$type": "color",
     "input": {
-      "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" }
+      "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "input": {
       "btn-focus": {
         "box-shadow": {
-          "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
-          "type": "shadow",
-          "source": "$input-btn-focus-box-shadow"
+          "source": "$input-btn-focus-box-shadow",
+          "$value": {
+            "color": "{color.input.btn-focus}",
+            "spread": "{size.input.btn.focus-width}",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
index 5a990dcb38..3669afa336 100644
--- a/tokens/src/themes/light/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -1,96 +1,85 @@
 {
   "color": {
+    "$type": "color",
     "link": {
-      "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" },
+      "base": { "source": "$link-color", "$value": "{color.info.500}" },
       "hover": {
-        "value": "{color.link.base}",
-        "type": "color",
         "source": "$link-hover-color",
-        "modify": [{ "type": "darken", "amount": 0.15 }]
+        "modify": [{ "type": "darken", "amount": 0.15 }],
+        "$value": "{color.link.base}"
       },
       "inline": {
-        "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" },
+        "base": { "source": "$inline-link-color", "$value": "{color.info.500}" },
         "decoration": {
-          "value": "{color.link.inline.base}",
-          "type": "color",
           "source": "$inline-link-decoration-color",
-          "modify": [{ "type": "alpha", "amount": 0.3 }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.link.inline.base}"
         },
         "hover": {
           "base": {
-            "value": "{color.link.inline.base}",
-            "type": "color",
             "source": "$inline-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.15 }]
+            "modify": [{ "type": "darken", "amount": 0.15 }],
+            "$value": "{color.link.inline.base}"
           },
           "decoration": {
-            "value": "{color.link.inline.hover.base}",
-            "type": "color",
             "source": "$inline-link-hover-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 1 }]
+            "modify": [{ "type": "alpha", "amount": 1 }],
+            "$value": "{color.link.inline.hover.base}"
           }
         }
       },
       "muted": {
-        "base": { "value": "{color.primary.500}", "type": "color",  "source": "$muted-link-color" },
+        "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" },
         "hover": {
-          "value": "{color.link.muted.base}",
-          "type": "color",
           "source": "$muted-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }]
+          "modify": [{ "type": "darken", "amount": 0.15 }],
+          "$value": "{color.link.muted.base}"
         },
         "inline": {
-          "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },
+          "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" },
           "decoration": {
-            "value": "{color.link.muted.inline.base}",
-            "type": "color",
             "source": "$muted-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }]
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.muted.inline.base}"
           },
           "hover": {
             "base": {
-              "value": "{color.link.muted.inline.base}",
-              "type": "color",
               "source": "$muted-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }]
+              "modify": [{ "type": "darken", "amount": 0.15 }],
+              "$value": "{color.link.muted.inline.base}"
             },
             "decoration": {
-              "value": "{color.link.muted.inline.hover.base}",
-              "type": "color",
               "source": "$muted-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }]
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.muted.inline.hover.base}"
             }
           }
         }
       },
       "brand": {
-        "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" },
+        "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" },
         "hover": {
-          "value": "{color.link.brand.base}",
-          "type": "color",
           "source": "$brand-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }]
+          "modify": [{ "type": "darken", "amount": 0.15 }],
+          "$value": "{color.link.brand.base}"
         },
         "inline": {
-          "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" },
+          "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" },
           "decoration": {
-            "value": "{color.link.brand.inline.base}",
-            "type": "color",
             "source": "$brand-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }]
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.brand.inline.base}"
           },
           "hover": {
             "base": {
-              "value": "{color.link.brand.inline.base}",
-              "type": "color",
               "source": "$brand-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }]
+              "modify": [{ "type": "darken", "amount": 0.15 }],
+              "$value": "{color.link.brand.inline.base}"
             },
             "decoration": {
-              "value": "{color.link.brand.inline.hover.base}",
-              "type": "color",
               "source": "$brand-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }]
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.brand.inline.hover.base}"
             }
           }
         }
@@ -98,10 +87,12 @@
     }
   },
   "other": {
+    "$type": "percentage",
     "link": {
       "emphasized-hover": {
         "darken-percentage": {
-          "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage"
+          "source": "$emphasized-link-hover-darken-percentage",
+          "$value": "15%"
         }
       }
     }
diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json
index 516b93c479..85059c7369 100644
--- a/tokens/src/themes/light/components/general/list.json
+++ b/tokens/src/themes/light/components/general/list.json
@@ -1,36 +1,32 @@
 {
   "color": {
+    "$type": "color",
     "list-group": {
-      "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
+      "base": { "source": "$list-group-color", "$value": "inherit" },
       "bg": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" },
-        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
+        "base": { "source": "$list-group-bg", "$value": "{color.white}" },
+        "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
       },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$list-group-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.125 }]
+        "modify": [{ "type": "alpha", "amount": 0.125 }],
+        "$value": "{color.black}"
       },
       "active": {
-        "base": { "value": "{color.active}", "type": "color",  "source": "$list-group-active-color" },
-        "border": {
-          "value": "{color.list-group.active.bg}", "type": "color",  "source": "$list-group-active-border-color"
-        },
-        "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" }
+        "base": { "source": "$list-group-active-color", "$value": "{color.active}" },
+        "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" },
+        "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" }
       },
       "disabled": {
-        "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" },
-        "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" }
+        "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
+        "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
       },
       "action": {
-        "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" },
-        "hover": {
-          "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color"
-        },
+        "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" },
+        "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" },
         "active": {
-          "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" },
-          "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" }
+          "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
+          "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json
index ab01882469..af658a6d6b 100644
--- a/tokens/src/themes/light/components/general/text.json
+++ b/tokens/src/themes/light/components/general/text.json
@@ -1,12 +1,11 @@
 {
   "color": {
-    "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
-    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" },
+    "$type": "color",
+    "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" },
+    "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
     "blockquote": {
-      "small": {
-        "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color"
-      }
+      "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" }
     },
-    "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" }
+    "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
   }
 }
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 5cb19068bb..5cc2c0c9b2 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -1,1658 +1,2383 @@
 {
   "color": {
-    "white": { "value": "#FFFFFF", "type": "color", "source": "$white", "description": "White color." },
-    "black": { "value": "#000000", "type": "color", "source": "$black", "description": "Black color." },
-    "blue": { "value": "#23419F", "type": "color", "source": "$blue", "description": "Blue color." },
-    "red": { "value": "#C32D3A", "type": "color", "source": "$red", "description": "Red color." },
-    "green": { "value": "#178253", "type": "color", "source": "$green", "description": "Green color." },
-    "yellow": { "value": "#FFD900", "type": "color", "source": "$yellow", "description": "Yellow color." },
-    "teal": { "value": "#006DAA", "type": "color", "source": "$teal", "description": "Teal color." },
+    "$type": "color",
+    "white": {
+      "source": "$white",
+      "$value": "#FFFFFF",
+      "$description": "White color."
+    },
+    "black": {
+      "source": "$black",
+      "$value": "#000000",
+      "$description": "Black color."
+    },
+    "blue": {
+      "source": "$blue",
+      "$value": "#23419F",
+      "$description": "Blue color."
+    },
+    "red": {
+      "source": "$red",
+      "$value": "#C32D3A",
+      "$description": "Red color."
+    },
+    "green": {
+      "source": "$green",
+      "$value": "#178253",
+      "$description": "Green color."
+    },
+    "yellow": {
+      "source": "$yellow",
+      "$value": "#FFD900",
+      "$description": "Yellow color."
+    },
+    "teal": {
+      "source": "$teal",
+      "$value": "#006DAA",
+      "$description": "Teal color."
+    },
     "accent": {
       "a": {
-        "value": "#00BBF9",
-        "type": "color",
         "source": "$accent-a",
-        "description": "Accent-A color.",
         "actions": {
           "default": "{color.action.default.accent.a}"
-        }
+        },
+        "$value": "#00BBF9",
+        "$description": "Accent-A color."
       },
       "b": {
-        "value": "#FFEE88",
-        "type": "color",
         "source": "$accent-b",
-        "description": "Accent-B color.",
         "actions": {
           "default": "{color.action.default.accent.b}"
-        }
+        },
+        "$value": "#FFEE88",
+        "$description": "Accent-B color."
       }
     },
     "gray": {
-      "base": {
-        "value": "#707070",
-        "type": "color",
-        "source": "$gray",
-        "description": "Basic gray color.",
-        "actions": {
-          "default": "{color.action.default.gray.base}"
-        }
-      },
       "100": {
-        "value": "#EBEBEB",
-        "type": "color",
         "source": "$gray-100",
-        "description": "Gray color of level 100.",
         "actions": {
           "default": "{color.action.default.gray.100}"
-        }
+        },
+        "$value": "#EBEBEB",
+        "$description": "Gray color of level 100."
       },
       "200": {
-        "value": "#CCCCCC",
-        "type": "color",
         "source": "$gray-200",
-        "description": "Gray color of level 200.",
         "actions": {
           "default": "{color.action.default.gray.200}"
-        }
+        },
+        "$value": "#CCCCCC",
+        "$description": "Gray color of level 200."
       },
       "300": {
-        "value": "#ADADAD",
-        "type": "color",
         "source": "$gray-300",
-        "description": "Gray color of level 300.",
         "actions": {
           "default": "{color.action.default.gray.300}"
-        }
+        },
+        "$value": "#ADADAD",
+        "$description": "Gray color of level 300."
       },
       "400": {
-        "value": "#8F8F8F",
-        "type": "color",
         "source": "$gray-400",
-        "description": "Gray color of level 400.",
         "actions": {
           "default": "{color.action.default.gray.400}"
-        }
+        },
+        "$value": "#8F8F8F",
+        "$description": "Gray color of level 400."
       },
       "500": {
-        "value": "{color.gray.base}",
-        "type": "color",
         "source": "$gray-500",
-        "description": "Gray color of level 500.",
         "actions": {
           "default": "{color.action.default.gray.500}"
-        }
-       },
+        },
+        "$value": "{color.gray.base}",
+        "$description": "Gray color of level 500."
+      },
       "600": {
-        "value": "#5C5C5C",
-        "type": "color",
         "source": "$gray-600",
-        "description": "Gray color of level 600.",
         "actions": {
           "default": "{color.action.default.gray.600}"
-        }
+        },
+        "$value": "#5C5C5C",
+        "$description": "Gray color of level 600."
       },
       "700": {
-        "value": "#454545",
-        "type": "color",
         "source": "$gray-700",
-        "description": "Gray color of level 700.",
         "actions": {
           "default": "{color.action.default.gray.700}"
-        }
+        },
+        "$value": "#454545",
+        "$description": "Gray color of level 700."
       },
       "800": {
-        "value": "#333333",
-        "type": "color",
         "source": "$gray-800",
-        "description": "Gray color of level 800.",
         "actions": {
           "default": "{color.action.default.gray.800}"
-        }
+        },
+        "$value": "#333333",
+        "$description": "Gray color of level 800."
       },
       "900": {
-        "value": "#212529",
-        "type": "color",
         "source": "$gray-900",
-        "description": "Gray color of level 900.",
         "actions": {
           "default": "{color.action.default.gray.900}"
-        }
+        },
+        "$value": "#212529",
+        "$description": "Gray color of level 900."
+      },
+      "base": {
+        "source": "$gray",
+        "actions": {
+          "default": "{color.action.default.gray.base}"
+        },
+        "$value": "#707070",
+        "$description": "Basic gray color."
       }
     },
     "primary": {
-      "base": {
-        "value": "#0A3055",
-        "type": "color",
-        "source": "$primary",
-        "description": "Basic primary color.",
-        "actions": {
-          "default": "{color.action.default.primary.base}"
-        }
-      },
       "100": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Primary color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.primary.100}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 100."
       },
       "200": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Primary color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.primary.200}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 200."
       },
       "300": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Primary color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.primary.300}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 300."
       },
       "400": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Primary color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.primary.400}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 400."
       },
       "500": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-500",
-        "description": "Primary color of level 500.",
         "actions": {
           "default": "{color.action.default.primary.500}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 500."
       },
       "600": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-600",
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Primary color of level 600.",
         "actions": {
           "default": "{color.action.default.primary.600}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 600."
       },
       "700": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-700",
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Primary color of level 700.",
         "actions": {
           "default": "{color.action.default.primary.700}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 700."
       },
       "800": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-800",
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Primary color of level 800.",
         "actions": {
           "default": "{color.action.default.primary.800}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 800."
       },
       "900": {
-        "value": "{color.primary.base}",
-        "type": "color",
         "source": "$primary-900",
         "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Primary color of level 900.",
         "actions": {
           "default": "{color.action.default.primary.900}"
-        }
+        },
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 900."
+      },
+      "base": {
+        "source": "$primary",
+        "actions": {
+          "default": "{color.action.default.primary.base}"
+        },
+        "$value": "#0A3055",
+        "$description": "Basic primary color."
       }
     },
     "secondary": {
-      "base": {
-        "value": "{color.gray.700}",
-        "type": "color",
-        "source": "$secondary",
-        "description": "Basic secondary color.",
-        "actions": {
-          "default": "{color.action.default.secondary.base}"
-        }
-      },
       "100": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-100",
         "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Secondary color of level 100.",
         "actions": {
           "default": "{color.action.default.secondary.100}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 100."
       },
       "200": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-200",
         "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Secondary color of level 200.",
         "actions": {
           "default": "{color.action.default.secondary.200}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 200."
       },
       "300": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-300",
         "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Secondary color of level 300.",
         "actions": {
           "default": "{color.action.default.secondary.300}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 300."
       },
       "400": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Secondary color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.secondary.400}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 400."
       },
       "500": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-500",
-        "description": "Secondary color of level 500.",
         "actions": {
           "default": "{color.action.default.secondary.500}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 500."
       },
       "600": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Secondary color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.secondary.600}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 600."
       },
       "700": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Secondary color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.secondary.700}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 700."
       },
       "800": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Secondary color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.secondary.800}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 800."
       },
       "900": {
-        "value": "{color.secondary.base}",
-        "type": "color",
         "source": "$secondary-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Secondary color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.secondary.900}"
-        }
+        },
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 900."
+      },
+      "base": {
+        "source": "$secondary",
+        "actions": {
+          "default": "{color.action.default.secondary.base}"
+        },
+        "$value": "{color.gray.700}",
+        "$description": "Basic secondary color."
       }
     },
     "brand": {
-      "base": {
-        "value": "#9D0054",
-        "type": "color",
-        "source": "$brand",
-        "description": "Basic brand color.",
-        "actions": {
-          "default": "{color.action.default.brand.base}"
-        }
-      },
       "100": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Brand color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.100}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 100."
       },
       "200": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Brand color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.200}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 200."
       },
       "300": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Brand color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.300}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 300."
       },
       "400": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Brand color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.400}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 400."
       },
       "500": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-500",
-        "description": "Brand color of level 500.",
         "actions": {
           "default": "{color.action.default.brand.500}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 500."
       },
       "600": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Brand color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.600}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 600."
       },
       "700": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Brand color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.700}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 700."
       },
       "800": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Brand color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.800}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 800."
       },
       "900": {
-        "value": "{color.brand.base}",
-        "type": "color",
         "source": "$brand-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Brand color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.brand.900}"
-        }
+        },
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 900."
+      },
+      "base": {
+        "source": "$brand",
+        "actions": {
+          "default": "{color.action.default.brand.base}"
+        },
+        "$value": "#9D0054",
+        "$description": "Basic brand color."
       }
     },
     "success": {
-      "base": {
-        "value": "{color.green}",
-        "type": "color",
-        "source": "$success",
-        "description": "Basic success color.",
-        "actions": {
-          "default": "{color.action.default.success.base}"
-        }
-      },
       "100": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Success color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.100}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 100."
       },
       "200": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Success color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.200}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 200."
       },
       "300": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Success color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.300}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 300."
       },
       "400": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Success color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.400}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 400."
       },
       "500": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-500",
-        "description": "Success color of level 500.",
         "actions": {
           "default": "{color.action.default.success.500}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 500."
       },
       "600": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Success color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.600}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 600."
       },
       "700": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Success color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.700}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 700."
       },
       "800": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Success color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.800}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 800."
       },
       "900": {
-        "value": "{color.success.base}",
-        "type": "color",
         "source": "$success-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Success color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.success.900}"
-        }
+        },
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 900."
+      },
+      "base": {
+        "source": "$success",
+        "actions": {
+          "default": "{color.action.default.success.base}"
+        },
+        "$value": "{color.green}",
+        "$description": "Basic success color."
       }
     },
     "info": {
-      "base": {
-        "value": "{color.teal}",
-        "type": "color",
-        "source": "$info",
-        "description": "Basic info color.",
-        "actions": {
-          "default": "{color.action.default.info.base}"
-        }
-      },
       "100": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Info color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.100}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 100."
       },
       "200": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Info color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.200}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 200."
       },
       "300": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Info color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.300}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 300."
       },
       "400": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Info color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.400}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 400."
       },
       "500": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-500",
-        "description": "Info color of level 500.",
         "actions": {
           "default": "{color.action.default.info.500}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 500."
       },
       "600": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Info color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.600}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 600."
       },
       "700": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Info color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.700}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 700."
       },
       "800": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Info color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.800}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 800."
       },
       "900": {
-        "value": "{color.info.base}",
-        "type": "color",
         "source": "$info-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Info color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.info.900}"
-        }
+        },
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 900."
+      },
+      "base": {
+        "source": "$info",
+        "actions": {
+          "default": "{color.action.default.info.base}"
+        },
+        "$value": "{color.teal}",
+        "$description": "Basic info color."
       }
     },
     "warning": {
-      "base": {
-        "value": "{color.yellow}",
-        "type": "color",
-        "source": "$warning",
-        "description": "Basic warning color.",
-        "actions": {
-          "default": "{color.action.default.warning.base}"
-        }
-      },
       "100": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Warning color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.100}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 100."
       },
       "200": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Warning color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.200}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 200."
       },
       "300": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Warning color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.300}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 300."
       },
       "400": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Warning color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.400}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 400."
       },
       "500": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-500",
-        "description": "Warning color of level 500.",
         "actions": {
           "default": "{color.action.default.warning.500}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 500."
       },
       "600": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Warning color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.600}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 600."
       },
       "700": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Warning color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.700}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 700."
       },
       "800": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Warning color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.800}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 800."
       },
       "900": {
-        "value": "{color.warning.base}",
-        "type": "color",
         "source": "$warning-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Warning color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.warning.900}"
-        }
+        },
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 900."
+      },
+      "base": {
+        "source": "$warning",
+        "actions": {
+          "default": "{color.action.default.warning.base}"
+        },
+        "$value": "{color.yellow}",
+        "$description": "Basic warning color."
       }
     },
     "danger": {
-      "base": {
-        "value": "{color.red}",
-        "type": "color",
-        "source": "$danger",
-        "description": "Basic danger color.",
-        "actions": {
-          "default": "{color.action.default.danger.base}"
-        }
-      },
       "100": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Danger color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.100}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 100."
       },
       "200": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Danger color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.200}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 200."
       },
       "300": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Danger color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.300}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 300."
       },
       "400": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Danger color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.400}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 400."
       },
       "500": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-500",
-        "description": "Danger color of level 500.",
         "actions": {
           "default": "{color.action.default.danger.500}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 500."
       },
       "600": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Danger color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.600}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 600."
       },
       "700": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Danger color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.700}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 700."
       },
       "800": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Danger color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.800}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 800."
       },
       "900": {
-        "value": "{color.danger.base}",
-        "type": "color",
         "source": "$danger-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Danger color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.danger.900}"
-        }
+        },
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 900."
+      },
+      "base": {
+        "source": "$danger",
+        "actions": {
+          "default": "{color.action.default.danger.base}"
+        },
+        "$value": "{color.red}",
+        "$description": "Basic danger color."
       }
     },
     "light": {
-      "base": {
-        "value": "#E1DDDB",
-        "type": "color",
-        "source": "$light",
-        "description": "Basic light color.",
-        "actions": {
-          "default": "{color.action.default.light.base}"
-        }
-      },
       "100": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Light color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.100}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 100."
       },
       "200": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Light color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.200}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 200."
       },
       "300": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Light color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.300}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 300."
       },
       "400": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Light color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.400}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 400."
       },
       "500": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-500",
-        "description": "Light color of level 500.",
         "actions": {
           "default": "{color.action.default.light.500}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 500."
       },
       "600": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Light color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.600}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 600."
       },
       "700": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Light color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.700}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 700."
       },
       "800": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Light color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.800}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 800."
       },
       "900": {
-        "value": "{color.light.base}",
-        "type": "color",
         "source": "$light-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Light color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.light.900}"
-        }
+        },
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 900."
+      },
+      "base": {
+        "source": "$light",
+        "actions": {
+          "default": "{color.action.default.light.base}"
+        },
+        "$value": "#E1DDDB",
+        "$description": "Basic light color."
       }
     },
     "dark": {
-      "base": {
-        "value": "#273F2F",
-        "type": "color",
-        "source": "$dark",
-        "description": "Basic dark color.",
-        "actions": {
-          "default": "{color.action.default.dark.base}"
-        }
-      },
       "100": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
-        "description": "Dark color of level 100.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.100}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 100."
       },
       "200": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
-        "description": "Dark color of level 200.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.200}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 200."
       },
       "300": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
-        "description": "Dark color of level 300.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.300}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 300."
       },
       "400": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-400",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.25" }],
-        "description": "Dark color of level 400.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.400}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 400."
       },
       "500": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-500",
-        "description": "Dark color of level 500.",
         "actions": {
           "default": "{color.action.default.dark.500}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 500."
       },
       "600": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
-        "description": "Dark color of level 600.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.600}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 600."
       },
       "700": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
-        "description": "Info color of level 700.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.700}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Info color of level 700."
       },
       "800": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
-        "description": "Dark color of level 800.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.800}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 800."
       },
       "900": {
-        "value": "{color.dark.base}",
-        "type": "color",
         "source": "$dark-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
-        "description": "Dark color of level 900.",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ],
         "actions": {
           "default": "{color.action.default.dark.900}"
-        }
+        },
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 900."
+      },
+      "base": {
+        "source": "$dark",
+        "actions": {
+          "default": "{color.action.default.dark.base}"
+        },
+        "$value": "#273F2F",
+        "$description": "Basic dark color."
       }
     },
     "action": {
       "default": {
         "gray": {
-          "base": {
-            "value": "{color.gray.base}",
-            "type": "color",
-            "source": "$action-default-gray-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.gray.100}",
-            "type": "color",
             "source": "$action-default-gray-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.100}"
           },
           "200": {
-            "value": "{color.gray.200}",
-            "type": "color",
             "source": "$action-default-gray-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.200}"
           },
           "300": {
-            "value": "{color.gray.300}",
-            "type": "color",
             "source": "$action-default-gray-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.300}"
           },
           "400": {
-            "value": "{color.gray.400}",
-            "type": "color",
             "source": "$action-default-gray-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.400}"
           },
           "500": {
-            "value": "{color.gray.500}",
-            "type": "color",
             "source": "$action-default-gray-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.500}"
           },
           "600": {
-            "value": "{color.gray.600}",
-            "type": "color",
             "source": "$action-default-gray-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.600}"
           },
           "700": {
-            "value": "{color.gray.700}",
-            "type": "color",
             "source": "$action-default-gray-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.700}"
           },
           "800": {
-            "value": "{color.gray.800}",
-            "type": "color",
             "source": "$action-default-gray-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.800}"
           },
           "900": {
-            "value": "{color.gray.900}",
-            "type": "color",
             "source": "$action-default-gray-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.900}"
+          },
+          "base": {
+            "source": "$action-default-gray-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.gray.base}"
           }
         },
         "primary": {
-          "base": {
-            "value": "{color.primary.base}",
-            "type": "color",
-            "source": "$action-default-primary-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.primary.100}",
-            "type": "color",
             "source": "$action-default-primary-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.100}"
           },
           "200": {
-            "value": "{color.primary.200}",
-            "type": "color",
             "source": "$action-default-primary-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.200}"
           },
           "300": {
-            "value": "{color.primary.300}",
-            "type": "color",
             "source": "$action-default-primary-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.300}"
           },
           "400": {
-            "value": "{color.primary.400}",
-            "type": "color",
             "source": "$action-default-primary-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.400}"
           },
           "500": {
-            "value": "{color.primary.500}",
-            "type": "color",
             "source": "$action-default-primary-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.500}"
           },
           "600": {
-            "value": "{color.primary.600}",
-            "type": "color",
             "source": "$action-default-primary-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.600}"
           },
           "700": {
-            "value": "{color.primary.700}",
-            "type": "color",
             "source": "$action-default-primary-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.700}"
           },
           "800": {
-            "value": "{color.primary.800}",
-            "type": "color",
             "source": "$action-default-primary-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.800}"
           },
           "900": {
-            "value": "{color.primary.900}",
-            "type": "color",
             "source": "$action-default-primary-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.900}"
+          },
+          "base": {
+            "source": "$action-default-primary-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.primary.base}"
           }
         },
         "secondary": {
-          "base": {
-            "value": "{color.secondary.base}",
-            "type": "color",
-            "source": "$action-default-secondary-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.secondary.100}",
-            "type": "color",
             "source": "$action-default-secondary-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.100}"
           },
           "200": {
-            "value": "{color.secondary.200}",
-            "type": "color",
             "source": "$action-default-secondary-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.200}"
           },
           "300": {
-            "value": "{color.secondary.300}",
-            "type": "color",
             "source": "$action-default-secondary-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.300}"
           },
           "400": {
-            "value": "{color.secondary.400}",
-            "type": "color",
             "source": "$action-default-secondary-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.400}"
           },
           "500": {
-            "value": "{color.secondary.500}",
-            "type": "color",
             "source": "$action-default-secondary-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.500}"
           },
           "600": {
-            "value": "{color.secondary.600}",
-            "type": "color",
             "source": "$action-default-secondary-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.600}"
           },
           "700": {
-            "value": "{color.secondary.700}",
-            "type": "color",
             "source": "$action-default-secondary-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.700}"
           },
           "800": {
-            "value": "{color.secondary.800}",
-            "type": "color",
             "source": "$action-default-secondary-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.800}"
           },
           "900": {
-            "value": "{color.secondary.900}",
-            "type": "color",
             "source": "$action-default-secondary-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.900}"
+          },
+          "base": {
+            "source": "$action-default-secondary-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.secondary.base}"
           }
         },
         "brand": {
-          "base": {
-            "value": "{color.brand.base}",
-            "type": "color",
-            "source": "$action-default-brand-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.brand.100}",
-            "type": "color",
             "source": "$action-default-brand-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.100}"
           },
           "200": {
-            "value": "{color.brand.200}",
-            "type": "color",
             "source": "$action-default-brand-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.200}"
           },
           "300": {
-            "value": "{color.brand.300}",
-            "type": "color",
             "source": "$action-default-brand-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.300}"
           },
           "400": {
-            "value": "{color.brand.400}",
-            "type": "color",
             "source": "$action-default-brand-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.400}"
           },
           "500": {
-            "value": "{color.brand.500}",
-            "type": "color",
             "source": "$action-default-brand-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.500}"
           },
           "600": {
-            "value": "{color.brand.600}",
-            "type": "color",
             "source": "$action-default-brand-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.600}"
           },
           "700": {
-            "value": "{color.brand.700}",
-            "type": "color",
             "source": "$action-default-brand-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.700}"
           },
           "800": {
-            "value": "{color.brand.800}",
-            "type": "color",
             "source": "$action-default-brand-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.800}"
           },
           "900": {
-            "value": "{color.brand.900}",
-            "type": "color",
             "source": "$action-default-brand-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.900}"
+          },
+          "base": {
+            "source": "$action-default-brand-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.brand.base}"
           }
         },
         "success": {
-          "base": {
-            "value": "{color.success.base}",
-            "type": "color",
-            "source": "$action-default-success-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.success.100}",
-            "type": "color",
             "source": "$action-default-success-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.100}"
           },
           "200": {
-            "value": "{color.success.200}",
-            "type": "color",
             "source": "$action-default-success-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.200}"
           },
           "300": {
-            "value": "{color.success.300}",
-            "type": "color",
             "source": "$action-default-success-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.300}"
           },
           "400": {
-            "value": "{color.success.400}",
-            "type": "color",
             "source": "$action-default-success-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.400}"
           },
           "500": {
-            "value": "{color.success.500}",
-            "type": "color",
             "source": "$action-default-success-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.500}"
           },
           "600": {
-            "value": "{color.success.600}",
-            "type": "color",
             "source": "$action-default-success-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.600}"
           },
           "700": {
-            "value": "{color.success.700}",
-            "type": "color",
             "source": "$action-default-success-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.700}"
           },
           "800": {
-            "value": "{color.success.800}",
-            "type": "color",
             "source": "$action-default-success-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.800}"
           },
           "900": {
-            "value": "{color.success.900}",
-            "type": "color",
             "source": "$action-default-success-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.900}"
+          },
+          "base": {
+            "source": "$action-default-success-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.success.base}"
           }
         },
         "info": {
-          "base": {
-            "value": "{color.info.base}",
-            "type": "color",
-            "source": "$action-default-info-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.info.100}",
-            "type": "color",
             "source": "$action-default-info-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.100}"
           },
           "200": {
-            "value": "{color.info.200}",
-            "type": "color",
             "source": "$action-default-info-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.200}"
           },
           "300": {
-            "value": "{color.info.300}",
-            "type": "color",
             "source": "$action-default-info-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.300}"
           },
           "400": {
-            "value": "{color.info.400}",
-            "type": "color",
             "source": "$action-default-info-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.400}"
           },
           "500": {
-            "value": "{color.info.500}",
-            "type": "color",
             "source": "$action-default-info-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.500}"
           },
           "600": {
-            "value": "{color.info.600}",
-            "type": "color",
             "source": "$action-default-info-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.600}"
           },
           "700": {
-            "value": "{color.info.700}",
-            "type": "color",
             "source": "$action-default-info-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.700}"
           },
           "800": {
-            "value": "{color.info.800}",
-            "type": "color",
             "source": "$action-default-info-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.800}"
           },
           "900": {
-            "value": "{color.info.900}",
-            "type": "color",
             "source": "$action-default-info-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.900}"
+          },
+          "base": {
+            "source": "$action-default-info-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.info.base}"
           }
         },
         "warning": {
-          "base": {
-            "value": "{color.warning.base}",
-            "type": "color",
-            "source": "$action-default-warning-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.warning.100}",
-            "type": "color",
             "source": "$action-default-warning-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.100}"
           },
           "200": {
-            "value": "{color.warning.200}",
-            "type": "color",
             "source": "$action-default-warning-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.200}"
           },
           "300": {
-            "value": "{color.warning.300}",
-            "type": "color",
             "source": "$action-default-warning-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.300}"
           },
           "400": {
-            "value": "{color.warning.400}",
-            "type": "color",
             "source": "$action-default-warning-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.400}"
           },
           "500": {
-            "value": "{color.warning.500}",
-            "type": "color",
             "source": "$action-default-warning-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.500}"
           },
           "600": {
-            "value": "{color.warning.600}",
-            "type": "color",
             "source": "$action-default-warning-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.600}"
           },
           "700": {
-            "value": "{color.warning.700}",
-            "type": "color",
             "source": "$action-default-warning-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.700}"
           },
           "800": {
-            "value": "{color.warning.800}",
-            "type": "color",
             "source": "$action-default-warning-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.800}"
           },
           "900": {
-            "value": "{color.warning.900}",
-            "type": "color",
             "source": "$action-default-warning-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.900}"
+          },
+          "base": {
+            "source": "$action-default-warning-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.warning.base}"
           }
         },
         "danger": {
-          "base": {
-            "value": "{color.danger.base}",
-            "type": "color",
-            "source": "$action-default-danger-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.danger.100}",
-            "type": "color",
             "source": "$action-default-danger-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.100}"
           },
           "200": {
-            "value": "{color.danger.200}",
-            "type": "color",
             "source": "$action-default-danger-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.200}"
           },
           "300": {
-            "value": "{color.danger.300}",
-            "type": "color",
             "source": "$action-default-danger-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.300}"
           },
           "400": {
-            "value": "{color.danger.400}",
-            "type": "color",
             "source": "$action-default-danger-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.400}"
           },
           "500": {
-            "value": "{color.danger.500}",
-            "type": "color",
             "source": "$action-default-danger-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.500}"
           },
           "600": {
-            "value": "{color.danger.600}",
-            "type": "color",
             "source": "$action-default-danger-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.600}"
           },
           "700": {
-            "value": "{color.danger.700}",
-            "type": "color",
             "source": "$action-default-danger-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.700}"
           },
           "800": {
-            "value": "{color.danger.800}",
-            "type": "color",
             "source": "$action-default-danger-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.800}"
           },
           "900": {
-            "value": "{color.danger.900}",
-            "type": "color",
             "source": "$action-default-danger-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.900}"
+          },
+          "base": {
+            "source": "$action-default-danger-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.danger.base}"
           }
         },
         "light": {
-          "base": {
-            "value": "{color.light.base}",
-            "type": "color",
-            "source": "$action-default-light-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.light.100}",
-            "type": "color",
             "source": "$action-default-light-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.100}"
           },
           "200": {
-            "value": "{color.light.200}",
-            "type": "color",
             "source": "$action-default-light-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.200}"
           },
           "300": {
-            "value": "{color.light.300}",
-            "type": "color",
             "source": "$action-default-light-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.300}"
           },
           "400": {
-            "value": "{color.light.400}",
-            "type": "color",
             "source": "$action-default-light-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.400}"
           },
           "500": {
-            "value": "{color.light.500}",
-            "type": "color",
             "source": "$action-default-light-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.500}"
           },
           "600": {
-            "value": "{color.light.600}",
-            "type": "color",
             "source": "$action-default-light-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.600}"
           },
           "700": {
-            "value": "{color.light.700}",
-            "type": "color",
             "source": "$action-default-light-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.700}"
           },
           "800": {
-            "value": "{color.light.800}",
-            "type": "color",
             "source": "$action-default-light-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.800}"
           },
           "900": {
-            "value": "{color.light.900}",
-            "type": "color",
             "source": "$action-default-light-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.900}"
+          },
+          "base": {
+            "source": "$action-default-light-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.light.base}"
           }
         },
         "dark": {
-          "base": {
-            "value": "{color.dark.base}",
-            "type": "color",
-            "source": "$action-default-dark-base",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
-          },
           "100": {
-            "value": "{color.dark.100}",
-            "type": "color",
             "source": "$action-default-dark-100",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.100}"
           },
           "200": {
-            "value": "{color.dark.200}",
-            "type": "color",
             "source": "$action-default-dark-200",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.200}"
           },
           "300": {
-            "value": "{color.dark.300}",
-            "type": "color",
             "source": "$action-default-dark-300",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.300}"
           },
           "400": {
-            "value": "{color.dark.400}",
-            "type": "color",
             "source": "$action-default-dark-400",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.400}"
           },
           "500": {
-            "value": "{color.dark.500}",
-            "type": "color",
             "source": "$action-default-dark-500",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.500}"
           },
           "600": {
-            "value": "{color.dark.600}",
-            "type": "color",
             "source": "$action-default-dark-600",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.600}"
           },
           "700": {
-            "value": "{color.dark.700}",
-            "type": "color",
             "source": "$action-default-dark-700",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.700}"
           },
           "800": {
-            "value": "{color.dark.800}",
-            "type": "color",
             "source": "$action-default-dark-800",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.800}"
           },
           "900": {
-            "value": "{color.dark.900}",
-            "type": "color",
             "source": "$action-default-dark-900",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.900}"
+          },
+          "base": {
+            "source": "$action-default-dark-base",
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.dark.base}"
           }
         },
         "accent": {
           "a": {
-            "value": "{color.accent.a}",
-            "type": "color",
             "source": "$action-default-accent-a",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.accent.a}"
           },
           "b": {
-            "value": "{color.accent.b}",
-            "type": "color",
             "source": "$action-default-accent-b",
-            "modify": [{ "type": "darken", "amount": "0.1" }]
+            "modify": [
+              {
+                "type": "darken",
+                "amount": "0.1"
+              }
+            ],
+            "$value": "{color.accent.b}"
           }
         }
       }
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index 56dc9d3b87..ba0697b0af 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -1,199 +1,587 @@
 {
   "elevation": {
+    "$type": "shadow",
     "box-shadow": {
       "level": {
         "1": {
-          "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$level-1-box-shadow",
-          "description": "Basic box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 1."
         },
         "2": {
-          "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$level-2-box-shadow",
-          "description": "Basic box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 2."
         },
         "3": {
-          "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$level-3-box-shadow",
-          "description": "Basic box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 3."
         },
         "4": {
-          "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$level-4-box-shadow",
-          "description": "Basic box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 4."
         },
         "5": {
-          "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$level-5-box-shadow",
-          "description": "Basic box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 5."
         }
       },
-      "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow", "description": "Default box shadow." },
-      "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm", "description": "Small box shadow." },
-      "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg", "description": "Large box shadow." },
+      "base": {
+        "source": "$box-shadow",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".125rem",
+          "blur": ".25rem"
+        },
+        "$description": "Default box shadow."
+      },
+      "sm": {
+        "source": "$box-shadow-sm",
+        "$value": {
+          "color": "rgba(0, 0, 0, .2)",
+          "offsetX": "0",
+          "offsetY": ".0625rem",
+          "blur": ".125rem"
+        },
+        "$description": "Small box shadow."
+      },
+      "lg": {
+        "source": "$box-shadow-lg",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".25rem",
+          "blur": ".5rem"
+        },
+        "$description": "Large box shadow."
+      },
       "down": {
         "1": {
-          "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-down-1",
-          "description": "Bottom box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 1."
         },
         "2": {
-          "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-down-2",
-          "description": "Bottom box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 2."
         },
         "3": {
-          "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-down-3",
-          "description": "Bottom box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 3."
         },
         "4": {
-          "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-down-4",
-          "description": "Bottom box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 4."
         },
         "5": {
-          "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-down-5",
-          "description": "Bottom box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
+          "$description": "Bottom box shadow of level 5."
         }
       },
       "left": {
         "1": {
-          "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-left-1",
-          "description": "Left box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Left box shadow of level 1."
         },
         "2": {
-          "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-left-2",
-          "description": "Left box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Left box shadow of level 2."
         },
         "3": {
-          "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-left-3",
-          "description": "Left box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Left box shadow of level 3."
         },
         "4": {
-          "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-left-4",
-          "description": "Left box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Left box shadow of level 4."
         },
         "5": {
-          "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-left-5",
-          "description": "Left box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Left box shadow of level 5."
         }
       },
       "up": {
         "1": {
-          "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-up-1",
-          "description": "Top box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Top box shadow of level 1."
         },
         "2": {
-          "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-up-2",
-          "description": "Top box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Top box shadow of level 2."
         },
         "3": {
-          "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-up-3",
-          "description": "Top box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Top box shadow of level 3."
         },
         "4": {
-          "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-up-4",
-          "description": "Top box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Top box shadow of level 4."
         },
         "5": {
-          "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-up-5",
-          "description": "Basic box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Basic box shadow of level 5."
         }
       },
       "right": {
         "1": {
-          "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-right-1",
-          "description": "Right box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Right box shadow of level 1."
         },
         "2": {
-          "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-right-2",
-          "description": "Right box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Right box shadow of level 2."
         },
         "3": {
-          "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-right-3",
-          "description": "Right box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
+          "$description": "Right box shadow of level 3."
         },
         "4": {
-          "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-right-4",
-          "description": "Right box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Right box shadow of level 4."
         },
         "5": {
-          "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-right-5",
-          "description": "Right box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Right box shadow of level 5."
         }
       },
       "centered": {
         "1": {
-          "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-centered-1",
-          "description": "Centered box shadow of level 1."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 1."
         },
         "2": {
-          "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-centered-2",
-          "description": "Centered box shadow of level 2."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 2."
         },
         "3": {
-          "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-centered-3",
-          "description": "Centered box shadow of level 3."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 3."
         },
         "4": {
-          "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-centered-4",
-          "description": "Centered box shadow of level 4."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 4."
         },
         "5": {
-          "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
           "source": "$box-shadow-centered-5",
-          "description": "Centered box shadow of level 5."
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
+          "$description": "Centered box shadow of level 5."
         }
       }
     }
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 5193d87475..0a435616e6 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -2,30 +2,92 @@
  * This module creates and exports custom StyleDictionary instance for Paragon.
  */
 const toml = require('js-toml');
-const StyleDictionary = require('style-dictionary');
+const chalk = require('chalk');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
 const cssUtilities = require('./css-utilities');
-const { composeBreakpointName } = require('./utils');
+const { composeBreakpointName, processAndUpdateTokens } = require('./utils');
 
-const { fileHeader, sortByReference } = StyleDictionary.formatHelpers;
+/* eslint-disable import/no-unresolved */
+const getStyleDictionary = async () => (await import('style-dictionary')).default;
+const getStyleDictionaryUtils = async () => import('style-dictionary/utils');
+const getTokensStudioTransforms = async () => import('@tokens-studio/sd-transforms');
+/* eslint-enable import/no-unresolved */
 
-const colorTransform = (token, theme) => {
+/**
+ * @typedef {import('style-dictionary/types').DesignToken} DesignToken
+ */
+
+/**
+ * @typedef ModifyColorYiq
+ * @property {'color-yiq'} type - The type of modification.
+ * @property {number} [amount] - The amount of modification to apply.
+ * @property {string} [otherColor] - The other color to mix with.
+ * @property {number} [light] - The light color to use for color-yiq.
+ * @property {number} [dark] - The dark color to use for color-yiq.
+ * @property {number} [threshold] - The threshold to use for color-yiq.
+ */
+
+/**
+ * @typedef ModifyColorDarken
+ * @property {'darken'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef ModifyColorLighten
+ * @property {'lighten'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef ModifyColorMix
+ * @property {'mix'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ * @property {string} otherColor - The other color to mix with.
+ */
+
+/**
+ * @typedef ModifyColorAlpha
+ * @property {'alpha'} type - The type of modification.
+ * @property {number} amount - The amount of modification to apply.
+ */
+
+/**
+ * @typedef DesignTokenModify
+ * @type {ModifyColorYiq | ModifyColorDarken | ModifyColorLighten | ModifyColorMix | ModifyColorAlpha}
+ */
+
+/**
+ * @typedef {DesignToken & {
+ *   outputReferences?: boolean;
+ *   modify?: DesignTokenModify[];
+ * }} ParagonDesignToken
+ */
+
+/**
+ * Transforms a color token based on various modifications.
+ *
+ * @param {ParagonDesignToken} token - The token object containing color information and modifications.
+ * @param {string} themeVariant - The themeVariant object containing additional information for color transformations.
+ * @returns {string} - The transformed color value in hexadecimal format, including alpha if applicable.
+ */
+const colorTransform = (token, themeVariant) => {
   const {
     name: tokenName,
-    value,
+    $value,
     original,
-    modify = [],
+    modify,
   } = token;
-  const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor'];
+  const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor', 'none'];
 
-  if (reservedColorValues.includes(original.value)) {
-    return original.value;
+  if (reservedColorValues.includes(original.$value)) {
+    return original.$value;
   }
 
-  let color = chroma(value);
+  let color = chroma($value);
 
-  if (modify && modify.length > 0) {
+  if (modify?.length > 0) {
     modify.forEach((modifier) => {
       const { type, amount, otherColor } = modifier;
       switch (type) {
@@ -40,7 +102,7 @@ const colorTransform = (token, theme) => {
             light,
             dark,
             threshold,
-            theme,
+            themeVariant,
           });
           break;
         }
@@ -50,8 +112,16 @@ const colorTransform = (token, theme) => {
         case 'lighten':
           color = lighten(color, amount);
           break;
-        default:
+        default: {
+          if (!color[type]) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              chalk.keyword('orange').bold(`[Paragon] Warning: Invalid color modification type "${type}" for ${tokenName}.`),
+            );
+            return;
+          }
           color = color[type](amount);
+        }
       }
     });
   }
@@ -65,165 +135,293 @@ const colorTransform = (token, theme) => {
  * 2. 'theme' to output only theme's variables (e.g, 'light' or 'dark'), if theme is not provided - only
  * core tokens are built.
  */
-const createCustomCSSVariables = ({
-  formatterArgs,
-  themeVariant,
-}) => {
+const createCustomCSSVariables = async ({ formatterArgs }) => {
+  const { fileHeader, formattedVariables } = await getStyleDictionaryUtils();
   const { dictionary, options, file } = formatterArgs;
+  const { outputReferences, formatting } = options;
+  const variables = formattedVariables({
+    format: 'css',
+    dictionary,
+    outputReferences: (token) => {
+      // Formatter options configured to never output references
+      if (!outputReferences) {
+        return false;
+      }
+      // Token has modifications (e.g., mix, darken, lighten); the computed
+      // value should be output instead of the reference.
+      if (token.modify) {
+        return false;
+      }
+      // Formatter options configured to show output references, but handle when individual tokens might opt-out.
+      return token.outputReferences ?? true;
+    },
+    usesDtcg: true,
+  });
+  const header = await fileHeader({ file, formatting });
+  return `${header}:root {\n${variables}\n}\n`;
+};
+
+/**
+ * @typedef {type import("style-dictionary/types").StyleDictionary} StyleDictionary
+ */
 
-  const outputTokens = themeVariant
-    ? dictionary.allTokens.filter(token => token.filePath.includes(themeVariant))
-    : dictionary.allTokens;
+/**
+ * Initializes and configures Style Dictionary with custom transforms, formatters, filters, and parsers.
+ *
+ * @returns {Promise<StyleDictionary>} - A promise that resolves to the configured Style Dictionary instance.
+ */
+const initializeStyleDictionary = async ({ themes }) => {
+  const StyleDictionary = await getStyleDictionary();
+  const sdUtils = await getStyleDictionaryUtils();
+  const {
+    register: registerTokensStudioTransforms,
+    getTransforms: tokensStudioTransforms,
+  } = await getTokensStudioTransforms();
 
-  const variables = outputTokens.sort(sortByReference(dictionary)).map(token => {
-    let { value } = token;
+  StyleDictionary.registerPreprocessor({
+    name: 'pgn-annotate-token-extensions-with-references',
+    preprocessor: (dictionary) => {
+      // Define the extension properties to add to the tokens $extensions object
+      const extensionProperties = [
+        {
+          name: 'isReferencedBySourceToken',
+          filter: tkn => tkn.isSource,
+          referenceTokenFilter: tkn => !tkn.isSource,
+        },
+        {
+          name: 'isReferencedByThemeVariant',
+          filter: tkn => themes.some(theme => tkn.filePath.includes(theme)),
+          referenceTokenFilter: tkn => !themes.some(theme => tkn.filePath.includes(theme)),
+        },
+      ];
 
-    const outputReferencesForToken = (token.original.outputReferences === false) ? false : options.outputReferences;
+      // Pass the dictionary to the recursive function to process and update tokens in place
+      const dictionaryCopy = { ...dictionary };
+      processAndUpdateTokens(dictionary, extensionProperties, sdUtils, dictionaryCopy);
 
-    if (dictionary.usesReference(token.original.value) && outputReferencesForToken) {
-      const refs = dictionary.getReferences(token.original.value);
-      refs.forEach(ref => {
-        value = value.replace(ref.value, `var(--${ref.name})`);
-      });
-    }
+      // Return the updated dictionary
+      return dictionary;
+    },
+  });
 
-    return `  --${token.name}: ${value};`;
-  }).join('\n');
+  /**
+   * Registers transforms from @tokens-studio/sd-transforms.
+   */
+  registerTokensStudioTransforms(StyleDictionary);
 
-  return `${fileHeader({ file })}:root {\n${variables}\n}\n`;
-};
+  /**
+   * Transforms tokens by applying SASS color functions to tokens.
+   */
+  StyleDictionary.registerTransform({
+    name: 'color/sass-color-functions',
+    transitive: true,
+    type: 'value',
+    filter: (token) => token.attributes?.category === 'color' || token.$value.toString().startsWith('#'),
+    transform: (token) => colorTransform(token),
+  });
 
-/**
- * Transformer that applies SASS color functions to tokens.
- */
-StyleDictionary.registerTransform({
-  name: 'color/sass-color-functions',
-  transitive: true,
-  type: 'value',
-  matcher(token) {
-    return token.attributes.category === 'color' || token.value?.toString().startsWith('#');
-  },
-  transformer: colorTransform,
-});
+  /**
+   * Transforms that implements str-replace from SASS.
+   */
+  StyleDictionary.registerTransform({
+    name: 'str-replace',
+    transitive: true,
+    type: 'value',
+    filter: (token) => token.modify && token.modify[0].type === 'str-replace',
+    transform: (token) => {
+      const { $value, modify } = token;
+      const { toReplace, replaceWith } = modify[0];
+      return $value.replaceAll(toReplace, replaceWith);
+    },
+  });
 
-/**
- * Transforms that implements str-replace from SASS.
- */
-StyleDictionary.registerTransform({
-  name: 'str-replace',
-  transitive: true,
-  type: 'value',
-  matcher(token) {
-    return token.modify && token.modify[0].type === 'str-replace';
-  },
-  transformer(token) {
-    const { value, modify } = token;
-    const { toReplace, replaceWith } = modify[0];
-    return value.replaceAll(toReplace, replaceWith);
-  },
-});
+  /**
+   * Registers a custom transform group for Paragon CSS.
+   */
+  const customTransforms = [
+    'color/sass-color-functions',
+    'str-replace',
+  ];
+  StyleDictionary.registerTransformGroup({
+    name: 'paragon-css',
+    transforms: [
+      ...tokensStudioTransforms({ platform: 'css' }),
+      ...StyleDictionary.hooks.transformGroups.css,
+      ...customTransforms,
+    ],
+  });
 
-/**
- * The custom formatter to create CSS variables for core tokens.
- */
-StyleDictionary.registerFormat({
-  name: 'css/custom-variables',
-  formatter: formatterArgs => createCustomCSSVariables({ formatterArgs }),
-});
+  /**
+   * The custom formatter to create CSS variables for core tokens.
+   */
+  StyleDictionary.registerFormat({
+    name: 'css/custom-variables',
+    format: formatterArgs => createCustomCSSVariables({ formatterArgs }),
+  });
 
-/**
- * Formatter to generate CSS utility classes.
- * Looks in ./src/utilities/ to get utility classes configuration, filters tokens by 'filters' object attributes
- * (see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item for possible keys in the object,
- * each key should have a list of valid values) and generates CSS classes with using functions defined in
- * 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string.
- */
-StyleDictionary.registerFormat({
-  name: 'css/utility-classes',
-  formatter({ dictionary, file }) {
-    const { utilities } = dictionary.properties;
+  /**
+   * Formatter to generate CSS utility classes.
+   * Looks in ./src/utilities/ to get utility classes configuration, filters tokens by 'filters' object attributes
+   * (see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item for possible keys in the object,
+   * each key should have a list of valid values) and generates CSS classes with using functions defined in
+   * 'utilityFunctionsToApply' list, those functions must be located in css-utilities.js module and return string.
+   */
+  StyleDictionary.registerFormat({
+    name: 'css/utility-classes',
+    format: async ({ dictionary, file, options = {} }) => {
+      const { formatting } = options;
+      const { fileHeader } = await getStyleDictionaryUtils();
+      const { utilities } = dictionary.tokens;
+      if (!utilities) {
+        return '';
+      }
 
-    if (!utilities) {
-      return '';
-    }
+      let utilityClasses = '';
 
-    let utilityClasses = '';
+      utilities.forEach(({ filters, utilityFunctionsToApply }) => {
+        let tokens = dictionary.allTokens;
 
-    utilities.forEach(({ filters, utilityFunctionsToApply }) => {
-      let tokens = dictionary.allTokens;
+        Object.entries(filters).forEach(([attributeName, allowedValues]) => {
+          tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName]));
+        });
 
-      Object.entries(filters).forEach(([attributeName, allowedValues]) => {
-        tokens = tokens.filter((token) => allowedValues.includes(token.attributes[attributeName]));
+        // eslint-disable-next-line no-restricted-syntax
+        for (const token of tokens) {
+          // Get action token by reference
+          const ref = sdUtils.getReferences(token.original.actions.default, dictionary.tokens)[0];
+          token.actions = { default: `var(--${ref.name})` };
+          // eslint-disable-next-line no-restricted-syntax
+          for (const funcName of utilityFunctionsToApply) {
+            utilityClasses += cssUtilities[funcName](token);
+          }
+        }
       });
+      const header = await fileHeader({ file, formatting });
+      return `${header}${utilityClasses}`;
+    },
+  });
 
-      // eslint-disable-next-line no-restricted-syntax
-      for (const token of tokens) {
-        // Get action token by reference
-        const ref = dictionary.getReferences(token.original.actions.default)[0];
-        token.actions = { default: `var(--${ref.name})` };
-        // eslint-disable-next-line no-restricted-syntax
-        for (const funcName of utilityFunctionsToApply) {
-          utilityClasses += cssUtilities[funcName](token);
+  /**
+   * Formatter to generate CSS custom media queries for responsive breakpoints.
+   * Gets input about existing tokens of the 'size' category,
+   * 'breakpoints' subcategory, and generates a CSS custom media queries.
+   */
+  StyleDictionary.registerFormat({
+    name: 'css/custom-media-breakpoints',
+    format: async ({ dictionary, file, options = {} }) => {
+      const { fileHeader } = await getStyleDictionaryUtils();
+      const { formatting } = options;
+      const { breakpoint } = dictionary.tokens.size;
+
+      let customMediaVariables = '';
+      const breakpoints = Object.values(breakpoint || {});
+
+      for (let i = 0; i < breakpoints.length; i++) {
+        const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
+        customMediaVariables
+          += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.$value});\n`;
+        if (nextBreakpoint) {
+          customMediaVariables
+            += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.$value});\n`;
         }
       }
-    });
+      const header = await fileHeader({ file, formatting });
+      return `${header}${customMediaVariables}`;
+    },
+  });
 
-    return fileHeader({ file }) + utilityClasses;
-  },
-});
+  /**
+   * @typedef {function} StyleDictionaryFilterFunction
+   * @param {import('style-dictionary/types').TransformedToken} token - The token object to filter.
+   * @param {object} [opts] - The options object passed to the filter.
+   */
 
-/**
- * Formatter to generate CSS custom media queries for responsive breakpoints.
- * Gets input about existing tokens of the 'size' category,
- * 'breakpoints' subcategory, and generates a CSS custom media queries.
- */
-StyleDictionary.registerFormat({
-  name: 'css/custom-media-breakpoints',
-  formatter({ dictionary, file }) {
-    const { size: { breakpoint } } = dictionary.properties;
-
-    let customMediaVariables = '';
-    const breakpoints = Object.values(breakpoint || {});
-
-    for (let i = 0; i < breakpoints.length; i++) {
-      const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
-      customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'min')} (min-width: ${currentBreakpoint.value});\n`;
-      if (nextBreakpoint) {
-        customMediaVariables += `${composeBreakpointName(currentBreakpoint.name, 'max')} (max-width: ${nextBreakpoint.value});\n`;
-      }
+  /**
+   * @typedef {object} StyleDictionaryFilterOptions
+   * @property {boolean} hasThemeVariants - Indicates whether the filter should also be registered with theme variants.
+   */
+
+  /**
+   * Registers a custom filter with Style Dictionary.
+   * @param {string} name Name for the filter.
+   * @param {StyleDictionaryFilterFunction} filter Filter value or function.
+   * @param {StyleDictionaryFilterOptions} [filterOptions] Custom options for the filter.
+   */
+  function registerStyleDictionaryFilter(name, filter, filterOptions = {}) {
+    StyleDictionary.registerFilter({ name, filter });
+    if (filterOptions.hasThemeVariants) {
+      themes.forEach((themeVariant) => {
+        StyleDictionary.registerFilter({
+          name: `${name}.${themeVariant}`,
+          filter: (token, opts) => {
+            const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+            const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant;
+            const baseFilterResult = typeof filter === 'function' ? filter(token, opts) || isReferencedByThemeVariant : filter;
+            if (!baseFilterResult) {
+              return false;
+            }
+            return token.filePath.includes(themeVariant) || isReferencedByThemeVariant;
+          },
+        });
+      });
     }
+  }
 
-    return fileHeader({ file }) + customMediaVariables;
-  },
-});
+  const paragonFilters = [
+    /**
+     * Registers a filter `isSource` that filters output to only include source tokens.
+     */
+    {
+      name: 'isSource',
+      filter: (token) => {
+        const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+        const isReferencedBySourceToken = !!paragonExtensions?.isReferencedBySourceToken;
+        return token.isSource || isReferencedBySourceToken;
+      },
+      opts: { hasThemeVariants: true },
+    },
+    /**
+     * Registers filter(s) `isThemeVariant.{variant}` that only include the requested theme variant tokens.
+     */
+    ...themes.map((themeVariant) => ({
+      name: `isThemeVariant.${themeVariant}`,
+      filter: (token) => {
+        const isThemeVariantToken = token.filePath.includes(themeVariant);
+        const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+        const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant;
+        return isThemeVariantToken || isReferencedByThemeVariant;
+      },
+    })),
+  ];
+  paragonFilters.forEach(({ name, filter, opts }) => registerStyleDictionaryFilter(name, filter, opts));
 
-/**
- * Custom file header for custom and built-in formatters.
- */
-StyleDictionary.registerFileHeader({
-  name: 'customFileHeader',
-  fileHeader: (defaultMessage) => [
-    'IMPORTANT: This file is the result of assembling design tokens',
-    ...defaultMessage,
-  ],
-});
+  /**
+   * Registers a custom TOML parser with Style Dictionary.
+   */
+  StyleDictionary.registerParser({
+    name: 'toml-parser',
+    pattern: /\.toml$/,
+    parser: ({ contents }) => toml.load(contents),
+  });
 
-/**
- * Registers a filter `isSource` that filters output to only include tokens
- * that are marked as `isSource` in their metadata.
- */
-StyleDictionary.registerFilter({
-  name: 'isSource',
-  matcher: token => token?.isSource === true,
-});
+  /**
+   * Registers a custom fileHeader.
+   */
+  StyleDictionary.registerFileHeader({
+    name: 'customFileHeader',
+    fileHeader: (defaultMessage) => [
+      `${defaultMessage} while transforming design tokens.`,
+      'See <root>/tokens/README.md for more details.',
+    ],
+  });
 
-StyleDictionary.registerParser({
-  pattern: /\.toml$/,
-  parse: ({ contents }) => toml.load(contents),
-});
+  return StyleDictionary;
+};
 
 module.exports = {
-  StyleDictionary,
+  initializeStyleDictionary,
+  getTokensStudioTransforms,
   createCustomCSSVariables,
   colorTransform,
+  getStyleDictionaryUtils,
 };
diff --git a/tokens/utils.js b/tokens/utils.js
index 83ff09c7dc..1398219951 100644
--- a/tokens/utils.js
+++ b/tokens/utils.js
@@ -2,6 +2,142 @@ const fs = require('fs');
 const readline = require('readline');
 const path = require('path');
 
+const visitedTokens = {};
+
+const commonCssFiles = ['variables.css', 'abstraction-variables.css'];
+
+/**
+ * Finds a token by its path in the token tree.
+ * @param {string} path - The path to the token in the token tree.
+ * @returns {DesignToken} - The token object found at the specified path.
+ */
+function findTokenByPath(tokenPath, allTokens) {
+  const keys = tokenPath.split('.');
+  return keys.reduce((acc, key) => acc && acc[key], allTokens);
+}
+
+/**
+ * @typedef {object} ExtensionProperty
+ * @property {string} name - The name of the extension property.
+ * @property {(token: DesignToken) => boolean} filter - The filter function to determine
+ * if the token should be annotated.
+ * @property {(token: DesignToken) => boolean} referenceTokenFilter - The filter function to determine if
+ * the referenced token should be annotated.
+ */
+
+/**
+ * @typedef {object} AnnotateReferencedTokenExtensionsArgs
+ * @property {DesignToken} token - The token object to annotate.
+ * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with.
+ * @property {object} sdUtils - The Style Dictionary utility functions.
+ */
+
+/**
+ * Annotates referenced token $extensions with the specified properties.
+ * @param {AnnotateReferencedTokenExtensionsArgs} args - The arguments object.
+ */
+function annotateReferencedTokenExtensions({
+  token,
+  extensionProperties,
+  sdUtils,
+  dictionary,
+}) {
+  const stack = [token]; // Stack to process tokens iteratively
+
+  while (stack.length > 0) {
+    const currentToken = stack.pop();
+
+    // Get all references for the current token
+    const references = sdUtils.getReferences(currentToken, dictionary);
+    extensionProperties.forEach(({ name: propertyName, filter: propertyFilter, referenceTokenFilter }) => {
+      if (!propertyFilter(token)) {
+        // Skip processing if the token does not match the filter for the property
+        return;
+      }
+
+      // Iterate over each reference and mark the referenced token
+      references.forEach((foundReference) => {
+        const foundReferenceTokenPath = foundReference.ref.join('.');
+        if (visitedTokens[propertyName]?.has(foundReferenceTokenPath)) {
+          // Skip processing if the referenced token has already been marked
+          return;
+        }
+
+        if (!referenceTokenFilter?.(foundReference)) {
+          // Filter the reference tokens to only include the ones that match the filter
+          return;
+        }
+
+        // Directly access the referenced token from the returned reference object
+        const referencedToken = findTokenByPath(foundReferenceTokenPath, dictionary);
+        if (!referencedToken) {
+          return;
+        }
+
+        // Mark the referenced token
+        referencedToken.$extensions = {
+          ...referencedToken.$extensions,
+          'org.openedx.paragon': {
+            ...referencedToken.$extensions?.['org.openedx.paragon'],
+            [propertyName]: true,
+          },
+        };
+
+        visitedTokens[propertyName].add(foundReferenceTokenPath);
+
+        if (sdUtils.usesReferences(referencedToken)) {
+          // Push the referenced token to the stack to process its references
+          stack.push(referencedToken);
+        }
+      });
+    });
+  }
+}
+
+/**
+ * Processes and updates tokens in place by annotating referenced tokens with extension properties.
+ * @typedef {object} ProcessAndUpdateTokensArgs
+ * @property {object} tokens - The tokens object to process.
+ * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with.
+ * @property {object} sdUtils - The Style Dictionary utility functions.
+ */
+function processAndUpdateTokens(tokens, extensionProperties, sdUtils, dictionary) {
+  Object.keys(tokens).forEach(async (key) => {
+    const token = tokens[key];
+    if (typeof token !== 'object') {
+      // Skip non-object tokens
+      return;
+    }
+
+    // If this is a group (nested tokens), recurse into it
+    if (!Object.prototype.hasOwnProperty.call(token, '$value')) {
+      processAndUpdateTokens(token, extensionProperties, sdUtils, dictionary);
+    } else if (sdUtils.usesReferences(token)) {
+      // Initialize the visited tokens for each extension property
+      extensionProperties.forEach((property) => {
+        visitedTokens[property.name] = new Set();
+      });
+
+      // If the token uses reference(s), update the referenced token(s) $extensions metadata.
+      annotateReferencedTokenExtensions({
+        token,
+        extensionProperties,
+        sdUtils,
+        dictionary,
+      });
+    }
+  });
+}
+
+/**
+ * Recursively retrieves files with a specific extension from a given directory.
+ *
+ * @param {string} location - The path to the directory or file to start the search.
+ * @param {string} extension - The file extension to search for (e.g., '.js', '.css').
+ * @param {string[]} [files=[]] - An array to accumulate the file paths that match the extension.
+ * @param {string[]} [excludeDirectories=[]] - An array of directory names to exclude from the search.
+ * @returns {string[]} - An array of file paths that have the specified extension.
+ */
 function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) {
   const content = fs.statSync(location);
   if (content.isDirectory()) {
@@ -17,6 +153,14 @@ function getFilesWithExtension(location, extension, files = [], excludeDirectori
   return files;
 }
 
+/**
+ * Generates a mapping of SCSS variables to corresponding CSS variables.
+ *
+ * @param {string} prefix - The prefix used to build the CSS variable names (e.g., '--my-prefix').
+ * @param {Object} tokensObject - The object representing the design tokens, which may be nested.
+ * @param {Object} result - The object where the mapping of SCSS to CSS variables will be stored.
+ * @returns {Object} - The `result` object containing the SCSS-to-CSS variable mappings.
+ */
 function getSCSStoCSSMap(prefix, tokensObject, result) {
   Object.entries(tokensObject).forEach(([node, value]) => {
     if (value?.constructor.name === 'Object') {
@@ -30,6 +174,16 @@ function getSCSStoCSSMap(prefix, tokensObject, result) {
   return result;
 }
 
+/**
+ * Replaces variable usage in a file based on a provided mapping and direction.
+ *
+ * @param {string} filePath - The path to the file where variables should be replaced.
+ * @param {Object} variablesMap - A map of variables to their replacement values.
+ * @param {string} [direction='scss-to-css'] - The direction of the replacement, either `scss-to-css` or `css-to-scss`.
+ * - `scss-to-css`: Replaces SCSS variables (e.g., `$some-variable`) with CSS variables.
+ * - `css-to-scss`: Replaces CSS variables (e.g., `var(--some-variable)`) with SCSS variables.
+ * @returns {Promise<void>} - A promise that resolves when the file has been successfully processed and written.
+ */
 async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-to-css') {
   let variableRegex;
   let result = '';
@@ -162,8 +316,17 @@ async function transformInPath(location, variablesMap, transformType = 'definiti
   }
 }
 
-function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isTheme, themeVariant }) {
-  const directoryPath = isTheme ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
+/**
+ * Creates an `index.css` file that imports all other CSS files in a directory.
+ *
+ * @param {Object} options - The options for creating the `index.css` file.
+ * @param {string} [options.buildDir=path.resolve(__dirname, '../styles/css')]
+ * - The base directory where the CSS files are located.
+ * @param {boolean} options.isThemeVariant - A flag indicating whether the directory is for theme files.
+ * @param {string} options.themeVariant - The specific theme variant to be used (e.g., 'dark', 'light').
+ */
+function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'), isThemeVariant, themeVariant }) {
+  const directoryPath = isThemeVariant ? `${buildDir}/themes/${themeVariant}` : `${buildDir}/core`;
 
   fs.readdir(directoryPath, (errDir, files) => {
     if (errDir) {
@@ -173,11 +336,17 @@ function createIndexCssFile({ buildDir = path.resolve(__dirname, '../styles/css'
     }
 
     const outputCssFiles = files.filter(file => file !== 'index.css');
-    // When creating themes, there are typically two files: one for utility classes and one for variables.
-    // It's organized them to allow variables be reading first.
-    if (isTheme) { outputCssFiles.reverse(); }
 
-    const exportStatements = outputCssFiles.map((file) => `@import "${file}";`);
+    // For theme variants, files are ordered with variables first, abstraction variables second,
+    // and utility classes last. This ensures that variables are available before other files use them.
+    // For the core styles, custom media breakpoints replace utility classes in the order.
+    const sortOrder = isThemeVariant
+      ? [...commonCssFiles, 'utility-classes.css']
+      : [...commonCssFiles, 'custom-media-breakpoints.css'];
+
+    const sortedCssFiles = outputCssFiles.sort((a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b));
+
+    const exportStatements = sortedCssFiles.map((file) => `@import "${file}";`);
 
     const indexContent = `${exportStatements.join('\n')}\n`;
 
@@ -207,4 +376,5 @@ module.exports = {
   getSCSStoCSSMap,
   transformInPath,
   composeBreakpointName,
+  processAndUpdateTokens,
 };
diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx
index f0a20f0b8e..113394990d 100644
--- a/www/src/components/ComponentsList.tsx
+++ b/www/src/components/ComponentsList.tsx
@@ -41,9 +41,9 @@ function ComponentsList() {
   return (
     <Container className="py-3 bg-light-200 border-top border-light-300">
       <Container size="xl" className="py-5">
-        <div className="pgn-doc__menu-all-components pt-5">
+        <div className="pgn-doc__menu-all-components">
           <h3 className="mb-4">All components (A-Z)</h3>
-          <ul className="pgn-doc__menu-component-list list-unstyled small mb-4">
+          <ul className="pgn-doc__menu-component-list list-unstyled small">
             {all.map((node: IComponentNavItem) => <ComponentNavItem key={node.id} {...node} />)}
           </ul>
         </div>
diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx
index 646cafcc54..77e7ab3078 100644
--- a/www/src/components/MeasuredItem.tsx
+++ b/www/src/components/MeasuredItem.tsx
@@ -41,8 +41,6 @@ function MeasuredItem({
         }, {});
         setMeasurements(measurementsItems);
       };
-      // Needs a moment to finish switching theme and re-render children to DOM first.
-      setMeasurements(initialMeasurements);
       const timeout = setTimeout(measure, 1000);
       return () => clearTimeout(timeout);
     },
@@ -51,9 +49,9 @@ function MeasuredItem({
 
   return (
     <>
-      {renderBefore ? renderBefore(measurements) : null}
+      {renderBefore?.(measurements)}
       {React.cloneElement(children as React.ReactElement, { ref: itemRef })}
-      {renderAfter ? renderAfter(measurements) : null}
+      {renderAfter?.(measurements)}
     </>
   );
 }
diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss
index 9b885eb332..e444c50f47 100644
--- a/www/src/components/Menu.scss
+++ b/www/src/components/Menu.scss
@@ -7,7 +7,7 @@
   border-right: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
 
   .pgn-doc__menu-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     line-height: var(--pgn-typography-line-height-base);
     font-weight: var(--pgn-typography-font-weight-normal);
     color: var(--pgn-color-gray-700);
@@ -24,7 +24,7 @@
 
       .btn {
         width: 50%;
-        font-size: var(--pgn-typography-font-size-xs);
+        font-size: var(--pgn-typography-font-size-sm);
         line-height: var(--pgn-typography-headings-line-height);
       }
     }
@@ -40,7 +40,7 @@
     margin-bottom: var(--pgn-spacing-spacer-base);
 
     .pgn_collapsible {
-      font-size: var(--pgn-typography-font-size-xs);
+      font-size: var(--pgn-typography-font-size-sm);
       line-height: var(--pgn-typography-headings-line-height);
       font-weight: var(--pgn-typography-font-weight-normal);
       color: var(--pgn-color-gray-700);
@@ -86,7 +86,6 @@
     }
 
     .collapsible-basic .collapsible-trigger {
-      font-size: var(--pgn-typography-font-size-sm);
       text-decoration: none;
       justify-content: start;
       flex-direction: row-reverse;
diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx
index 2dd00c84a2..339aefb06b 100644
--- a/www/src/components/TableCells.tsx
+++ b/www/src/components/TableCells.tsx
@@ -6,6 +6,18 @@ export type CodeCellType = {
   value: string | number | undefined,
 };
 
+export type ClassNameRowType = {
+  className: string | undefined,
+  text: string,
+  hasClass?: boolean,
+};
+
+export type ClassNameCellType = {
+  row: {
+    original: ClassNameRowType,
+  },
+} & CodeCellType;
+
 export type DataTableRowType = {
   row: {
     original: {
@@ -17,13 +29,17 @@ export type DataTableRowType = {
   },
 };
 
-export function ClassNameCell({ value }: CodeCellType) {
+export function ClassNameCell({ row, value }: ClassNameCellType) {
+  if (row.original.hasClass === false) {
+    return null;
+  }
+
   if (!value) {
     return null;
   }
 
   return (
-    <code className="fs-16">
+    <code className="font-size-normal">
       .{value}
     </code>
   );
@@ -31,7 +47,7 @@ export function ClassNameCell({ value }: CodeCellType) {
 
 export function TextCell({ value }: CodeCellType) {
   return (
-    <p className="m-0 fs-16">
+    <p className="m-0 font-size-normal">
       {value}
     </p>
   );
@@ -39,7 +55,7 @@ export function TextCell({ value }: CodeCellType) {
 
 export function CodeCell({ value }: CodeCellType) {
   return (
-    <code className="fs-16">
+    <code className="font-size-normal">
       {value}
     </code>
   );
@@ -69,7 +85,7 @@ export function MobileMeasuredCell({ row } : DataTableRowType) {
 
 export function StyleCell({ row } : DataTableRowType) {
   return (
-    <p className={`fs-16 ${row.original.className}`}>
+    <p className={`font-size-normal ${row.original.className}`}>
       {row.original.text}
     </p>
   );
diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss
index bfff2bae46..99f6d3dfc8 100644
--- a/www/src/components/_CodeBlock.scss
+++ b/www/src/components/_CodeBlock.scss
@@ -1,10 +1,11 @@
 .pgn-doc__code-block {
   margin: var(--pgn-spacing-spacer-base) 0 2rem;
-  background-color: var(--pgn-color-light-200);
-  border: solid 2px var(--pgn-color-light-300);
-  border-radius: var(--pgn-size-border-radius-base);
 
   .pgn-doc__code-block-preview {
+    background-color: var(--pgn-color-light-200);
+    border: solid 2px var(--pgn-color-light-300);
+    border-bottom: 0;
+    border-radius: var(--pgn-size-border-radius-base) var(--pgn-size-border-radius-base) 0 0;
     padding: var(--pgn-spacing-spacer-base);
   }
 
diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index 94d3e937cd..f020023563 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -327,6 +327,52 @@
 
 .color-palette {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
-  grid-row-gap: 2rem;
+  grid-gap: 2rem;
+  grid-template-columns: repeat(2, 1fr); // Default to 2 columns
+}
+
+@media (--pgn-size-breakpoint-min-width-md) {
+  .color-palette {
+    grid-template-columns: repeat(3, 1fr);  // 3 columns for medium+ screens
+  }
+}
+
+@media (--pgn-size-breakpoint-min-width-lg) {
+  .color-palette {
+    grid-template-columns: repeat(4, 1fr); // 4 columns for large+ screens
+  }
+}
+
+.pgn-doc__code-display-block,
+.pgn-doc__code-headings-block {
+  .pgn__data-table-cell-wrap {
+    max-width: max-content;
+  }
+
+  @media (--pgn-size-breakpoint-max-width-md) {
+    overflow: hidden;
+    overflow-x: scroll;
+
+    .pgn__data-table-layout-wrapper {
+      overflow-x: initial;
+    }
+  }
+
+  .heading-label {
+    font-size: var(--pgn-typography-font-size-base);
+    line-height: var(--pgn-typography-line-height-base);
+  }
+}
+
+.pgn-doc__code-body-block {
+  .lead,
+  .font-size-normal,
+  .small,
+  .x-small {
+    line-height: var(--pgn-typography-line-height-base);
+  }
+
+  .pgn__data-table-wrapper {
+    font-size: inherit;
+  }
 }
diff --git a/www/src/components/header/Header.scss b/www/src/components/header/Header.scss
index 327433df9d..ddd9dad3f2 100644
--- a/www/src/components/header/Header.scss
+++ b/www/src/components/header/Header.scss
@@ -17,12 +17,12 @@
     }
 
     &-logo {
-      font-size: var(--pgn-typography-font-size-mobile-h1);
-      line-height: var(--pgn-typography-display-line-height-base);
+      font-size: var(--pgn-typography-font-size-h1-mobile);
+      line-height: var(--pgn-typography-line-height-display-base);
     }
 
     &-heading {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: var(--pgn-typography-font-size-h3-base);
       line-height: var(--pgn-typography-line-height-base);
       margin: 0;
       color: var(--pgn-color-white);
diff --git a/www/src/components/header/Navbar.tsx b/www/src/components/header/Navbar.tsx
index ffef619923..dd7f188ec7 100644
--- a/www/src/components/header/Navbar.tsx
+++ b/www/src/components/header/Navbar.tsx
@@ -35,7 +35,7 @@ export default function Navbar({
   return (
     <Container as="header" className="py-3 bg-dark text-white sticky-top">
       <Row className="align-items-center text-center text-sm-left">
-        <Col className="pgn-doc__header-button--menu mb-2 mb-sm-0 col-4" sm={5}>
+        <Col className="pgn-doc__header-button--menu mb-2 mb-sm-0">
           {showMinimizedTitle && (
             <Button
               ref={setTarget}
@@ -48,10 +48,10 @@ export default function Navbar({
             </Button>
           )}
         </Col>
-        <Col className="mb-2 mb-sm-0 col-4" sm={showMinimizedTitle ? 2 : 3}>
+        <Col className="mb-2 mb-sm-0 text-center" sm={showMinimizedTitle ? 3 : 4}>
           <SiteTitle isFullVersion={!showMinimizedTitle} title={siteTitle} />
         </Col>
-        <Col className="small mb-2 mb-sm-0 col-4" sm={5} xl={showMinimizedTitle ? 5 : 4}>
+        <Col className="small mb-2 mb-sm-0">
           {showSettingsIcon && (
             <Nav className="pgn-doc__header-settings-and-search">
               <Nav.Item>
diff --git a/www/src/components/header/SiteTitle.tsx b/www/src/components/header/SiteTitle.tsx
index bfe5165019..1d3d3c6749 100644
--- a/www/src/components/header/SiteTitle.tsx
+++ b/www/src/components/header/SiteTitle.tsx
@@ -15,7 +15,7 @@ export default function SiteTitle({ title, isFullVersion, className } : SiteTitl
   return (
     <Link
       to="/"
-      className={classNames('d-block text-decoration-none', className)}
+      className={classNames('d-inline-block text-decoration-none', className)}
     >
       <div className="pgn-doc__header-title">
         <span
diff --git a/www/src/components/typography-page/Body.tsx b/www/src/components/typography-page/Body.tsx
index 2b2c62be8f..c18c626653 100644
--- a/www/src/components/typography-page/Body.tsx
+++ b/www/src/components/typography-page/Body.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { DataTable } from '~paragon-react';
 
-import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';
+import { DesktopMeasuredCell, ClassNameCell, ClassNameRowType } from '../TableCells';
 
-const bodyClassesAndDescriptions = [
+const bodyClassesAndDescriptions: ClassNameRowType[] = [
   { className: 'lead', text: 'Large Body' },
-  { className: '', text: 'Body' },
+  { className: 'font-size-normal', text: 'Body', hasClass: false },
   { className: 'small', text: 'Small Body' },
   { className: 'x-small', text: 'Extra Small Body' },
   { className: 'micro', text: 'Micro Body' },
@@ -15,9 +15,9 @@ export default function Body() {
   return (
     <>
       <h2 className="mb-2">Body</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-body-block">
         <DataTable
-          itemCount={5}
+          itemCount={bodyClassesAndDescriptions.length}
           data={bodyClassesAndDescriptions}
           columns={[
             {
diff --git a/www/src/components/typography-page/Display.tsx b/www/src/components/typography-page/Display.tsx
index 9fc3a6bfe1..26c7379637 100644
--- a/www/src/components/typography-page/Display.tsx
+++ b/www/src/components/typography-page/Display.tsx
@@ -10,9 +10,9 @@ export default function Display() {
   return (
     <>
       <h2 className="mb-2">Display</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-display-block">
         <DataTable
-          itemCount={4}
+          itemCount={displaySizes.length}
           data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
           columns={[
             {
diff --git a/www/src/components/typography-page/Headings.tsx b/www/src/components/typography-page/Headings.tsx
index 4b2e11b94c..ab01ea7f6b 100644
--- a/www/src/components/typography-page/Headings.tsx
+++ b/www/src/components/typography-page/Headings.tsx
@@ -7,13 +7,21 @@ import { MobileMeasuredCell, ClassNameCell, DesktopMeasuredCell } from '../Table
 const headingSizes = [1, 2, 3, 4, 5, 6];
 
 export default function Headings() {
+  const headingSizesTableData = headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }));
+  const tableData = [
+    ...headingSizesTableData,
+    {
+      text: 'Heading Label',
+      className: 'heading-label',
+    },
+  ];
   return (
     <>
       <h2 className="mb-2">Headings</h2>
-      <div className="mb-4">
+      <div className="mb-4 pgn-doc__code-headings-block">
         <DataTable
-          itemCount={6}
-          data={headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }))}
+          itemCount={tableData.length}
+          data={tableData}
           columns={[
             {
               Header: 'Desktop',
diff --git a/www/src/components/typography-page/Links.tsx b/www/src/components/typography-page/Links.tsx
index 3adc083b64..2af8c0ea42 100644
--- a/www/src/components/typography-page/Links.tsx
+++ b/www/src/components/typography-page/Links.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 // @ts-ignore
-import { DataTable } from '~paragon-react';
+import { DataTable, Alert } from '~paragon-react';
+import { Info } from '~paragon-icons';
 import { TextCell } from '../TableCells';
 
 const linksClassesAndDescriptions = [
-  {
-    example: <a href="/#">Standalone Link</a>,
-    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
-  },
   {
     example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
     description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
@@ -34,6 +31,9 @@ export default function Links() {
   return (
     <>
       <h2 className="mb-2">Links</h2>
+      <Alert variant="info" icon={Info}>
+        <a href="/#">Standalone Link</a> - the default style for <code>a</code> tag that appear outside of <code>p</code> tag.
+      </Alert>
       <div className="mb-4">
         <DataTable
           itemCount={4}
diff --git a/www/src/components/typography-page/measuredTypeProps.tsx b/www/src/components/typography-page/measuredTypeProps.tsx
index 82e5075cd7..38a9c9caec 100644
--- a/www/src/components/typography-page/measuredTypeProps.tsx
+++ b/www/src/components/typography-page/measuredTypeProps.tsx
@@ -13,9 +13,12 @@ const weightLabels: Record<string, string> = {
 const measuredTypeProps = {
   properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
   renderAfter: (measurements: { [x: string]: string; }) => {
-    const fontFamily = measurements['font-family']
-      ? measurements['font-family'].split(',')[0]
-      : null;
+    if (!measurements || Object.keys(measurements).length === 0) {
+      return (
+        <p className="m-0 text-muted">&nbsp;</p>
+      );
+    }
+    const fontFamily = measurements['font-family']?.split(',')[0];
     const weight = weightLabels[measurements['font-weight']];
     // only one significant digit if needed
     const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index 52b423e899..5084d56f67 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -9,27 +9,52 @@ import { SettingsContext } from '../../context/SettingsContext';
 import { CodeCell } from '../../components/TableCells';
 
 const utilityClasses = {
-  bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
+  bg: (color: string, level?: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
   border: (color: string, level: number) => (level ? `border-${color}-${level}` : `border-${color}`),
   text: (color: string, level: number) => (level ? `text-${color}-${level}` : `text-${color}`),
 };
 
-export interface IColors {
+type UnusedLevels = number[];
+
+interface ColorVariant {
+  name: string,
+  unusedLevels?: UnusedLevels,
+  hasLevels?: boolean,
+}
+
+export interface IColorsBase {
   themeName: string,
-  color: string,
-  unusedLevels: number[],
 }
 
+export interface IColorsWithUnusedLevels extends IColorsBase {
+  unusedLevels?: UnusedLevels,
+  variants?: never,
+}
+
+export interface IColorsWithVariants extends IColorsBase {
+  variants: ColorVariant[],
+  unusedLevels?: never,
+}
+
+export type IColors = IColorsWithUnusedLevels | IColorsWithVariants;
+
 const colors: IColors[] = [
-  { themeName: 'gray', color: 'gray', unusedLevels: [] },
-  { themeName: 'primary', color: 'blue', unusedLevels: [] },
-  { themeName: 'brand', color: 'blue', unusedLevels: [] },
-  { themeName: 'light', color: 'light', unusedLevels: [] },
-  { themeName: 'dark', color: 'dark', unusedLevels: [] },
-  { themeName: 'success', color: 'green', unusedLevels: [] },
-  { themeName: 'info', color: 'teal', unusedLevels: [] },
-  { themeName: 'danger', color: 'red', unusedLevels: [] },
-  { themeName: 'warning', color: 'yellow', unusedLevels: [] },
+  { themeName: 'gray' },
+  { themeName: 'primary' },
+  { themeName: 'brand' },
+  { themeName: 'light' },
+  { themeName: 'dark' },
+  { themeName: 'success' },
+  { themeName: 'info' },
+  { themeName: 'danger' },
+  { themeName: 'warning' },
+  {
+    themeName: 'accent',
+    variants: [
+      { name: 'a', hasLevels: false },
+      { name: 'b', hasLevels: false },
+    ],
+  },
 ];
 
 const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -61,21 +86,20 @@ export interface ISwatch {
 function Swatch({
   name, colorClassName, isUnused, styles,
 }: ISwatch) {
-  const computedValue = styles?.getPropertyValue(name);
+  const computedValue = styles?.getPropertyValue(`--pgn-color-${name}`);
+
+  if (isUnused) {
+    return null;
+  }
 
   return (
     <div className="d-flex align-items-center mb-2">
-      <div
-        className={classNames('p-3 mr-2 rounded', colorClassName, {
-          'unused-level': isUnused,
-        })}
-      />
+      <div className={classNames('p-3 mr-2 rounded', colorClassName)} />
       <div style={{ lineHeight: 1 }} className="small">
-        <code className="mb-0 d-block text-lowercase text-dark-700">
-          {`var(${name})`}
+        <code className="d-block text-lowercase text-dark">
+          {name}
         </code>
-
-        <code style={{ fontSize: '65%' }} className="text-muted">
+        <code className="text-muted micro">
           {computedValue}
         </code>
       </div>
@@ -93,20 +117,70 @@ Swatch.defaultProps = {
   isUnused: false,
 };
 
-const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => (
-  <div
-    key={`${themeName}`}
-  >
+export interface IRenderColorRampBase {
+  themeName: string;
+  styles: CSSStyleDeclarationType;
+}
+
+export interface IRenderColorRampWithUnusedLevels extends IRenderColorRampBase {
+  unusedLevels?: UnusedLevels;
+  variants?: never;
+}
+
+export interface IRenderColorRampWithVariants extends IRenderColorRampBase {
+  variants: ColorVariant[];
+  unusedLevels?: never;
+}
+
+export type IRenderColorRamp = IRenderColorRampWithUnusedLevels | IRenderColorRampWithVariants;
+
+const renderColorRamp = ({
+  themeName,
+  unusedLevels = [],
+  variants = [],
+  styles,
+}: IRenderColorRamp) => (
+  <div key={`${themeName}`}>
     <p className="h5">{themeName}</p>
-    {levels.map(level => (
-      <Swatch
-        key={`${themeName}-${level}`}
-        name={`--pgn-color-${themeName}-${level}`}
-        colorClassName={utilityClasses.bg(themeName, level)}
-        isUnused={unusedLevels.includes(level)}
-        styles={styles}
-      />
-    ))}
+    {variants.length > 0
+      ? variants.map(({
+        name,
+        unusedLevels: variantUnusedLevels = [],
+        hasLevels = true,
+      }) => {
+        if (hasLevels) {
+          return (
+            <div key={`${themeName}-${name}`}>
+              {levels.map(level => (
+                <Swatch
+                  key={`${themeName}-${name}-${level}`}
+                  name={`${name}-${level}`}
+                  colorClassName={utilityClasses.bg(`${themeName}-${name}`, level)}
+                  isUnused={variantUnusedLevels.includes(level)}
+                  styles={styles}
+                />
+              ))}
+            </div>
+          );
+        }
+        return (
+          <Swatch
+            key={`${themeName}-${name}`}
+            name={`${themeName}-${name}`}
+            colorClassName={utilityClasses.bg(`${themeName}-${name}`)}
+            styles={styles}
+          />
+        );
+      })
+      : levels.map(level => (
+        <Swatch
+          key={`${themeName}-${level}`}
+          name={`${themeName}-${level}`}
+          colorClassName={utilityClasses.bg(themeName, level)}
+          isUnused={unusedLevels.includes(level)}
+          styles={styles}
+        />
+      ))}
   </div>
 );
 
@@ -144,18 +218,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
       <Container size={settings.containerWidth} className="py-5">
         <h1>Colors</h1>
         <div className="color-palette mb-3">
-          {colors
-            .slice(0, 3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
-          {colors
-            .slice(3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
-          <div>
-            <p className="h5">accents</p>
-
-            <Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" styles={styles} />
-            <Swatch name="--pgn-color-accent-b" colorClassName="bg-accent-b" styles={styles} />
-          </div>
+          {colors.map((colorArgs) => renderColorRamp({ ...colorArgs, styles }))}
         </div>
 
         <h3>CSS Color Usage</h3>
@@ -283,7 +346,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
         <div className="d-flex">
           {[500, 700, 900].map(level => (
             <div key={level} style={{ flexBasis: '33%' }}>
-              {colors.map(({ themeName, unusedLevels }) => {
+              {colors.map(({ themeName, unusedLevels = [] }) => {
                 if (unusedLevels.includes(level)) { return null; }
                 return (
                   <code
diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss
index 11f132a15b..6f411506f5 100644
--- a/www/src/scss/base.scss
+++ b/www/src/scss/base.scss
@@ -27,7 +27,3 @@ body {
 .container-fluid {
   max-width: none;
 }
-
-.fs-16 {
-  font-size: 16px;
-}
diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss
index 2d9186b421..8a621a45ab 100644
--- a/www/src/scss/edxorg-theme.scss
+++ b/www/src/scss/edxorg-theme.scss
@@ -1,3 +1,4 @@
-@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
-@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
+@import "~paragon-style/scss/core/core";
 @import "base";
+@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/light.min.css");
diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss
index 2ab84d006f..7f449b3b77 100644
--- a/www/src/scss/openedx-theme.scss
+++ b/www/src/scss/openedx-theme.scss
@@ -1,7 +1,5 @@
-@import "~@openedx/brand-openedx/paragon/fonts";
-@import "~@openedx/brand-openedx/paragon/variables";
 @import "~paragon-style/scss/core/core";
 @import "~paragon-style/css/themes/light/variables";
+@import "~paragon-style/css/themes/light/abstraction-variables";
 @import "~paragon-style/css/themes/light/utility-classes";
-@import "~@openedx/brand-openedx/paragon/overrides";
 @import "base";
diff --git a/www/theme-config.js b/www/theme-config.js
index d2232f4322..70f586d4be 100644
--- a/www/theme-config.js
+++ b/www/theme-config.js
@@ -17,7 +17,7 @@ const THEMES = [
   },
   {
     id: 'edxorg',
-    label: 'edX',
+    label: 'edX.org',
     stylesheet: 'edxorg-theme',
     pathToVariables: '@edx/brand-edx.org/paragon/_variables.scss',
   },