diff --git a/json-key-order-linter.js b/json-key-order-linter.js
new file mode 100644
index 0000000000..fbb244cdbc
--- /dev/null
+++ b/json-key-order-linter.js
@@ -0,0 +1,193 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+
+const folderPath = 'tokens/';
+
+const KEY_ORDERS = {
+  main: ['$type', '$value', '$description', 'outputReferences', 'modify', 'source'],
+  value: ['behavior', 'delay', 'duration', 'property', 'timing-function'],
+  modify: ['type', 'toReplace', 'replaceWith'],
+};
+
+const shouldFix = process.argv.includes('--fix');
+let warningsCount = 0;
+let processedFileCount = 0;
+
+/**
+ * Reorders the keys in an object based on a specified key order.
+ * @param {Object} obj - The object to reorder.
+ * @param {string[]} desiredKeyOrder - The desired order for the keys.
+ * @returns {Object} - An object containing the reordered object and
+ * a flag indicating if the key order was mismatched and mismatched keys.
+ */
+function reorderObjectKeys(obj, desiredKeyOrder) {
+  const reorderedObject = {};
+  const originalKeyList = Object.keys(obj);
+  let isKeyOrderMismatched = false;
+  const mismatchedKeysList = [];
+
+  desiredKeyOrder.forEach((key) => {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      reorderedObject[key] = obj[key];
+    }
+  });
+
+  originalKeyList.forEach((key) => {
+    if (!Object.prototype.hasOwnProperty.call(reorderedObject, key)) {
+      reorderedObject[key] = obj[key];
+    }
+  });
+
+  if (JSON.stringify(originalKeyList) !== JSON.stringify(Object.keys(reorderedObject))) {
+    isKeyOrderMismatched = true;
+    mismatchedKeysList.push(...originalKeyList.filter((key, index) => key !== Object.keys(reorderedObject)[index]));
+  }
+
+  return { reorderedObject, isKeyOrderMismatched, mismatchedKeys: mismatchedKeysList };
+}
+
+/**
+ * Recursively reorders keys in JSON data based on specified key orders for nested objects.
+ * @param {*} data - The JSON data (object, array, or primitive) to process.
+ * @param {string} currentPath - The path to the current data within the JSON structure.
+ * @returns {Object} - An object containing the reordered data and
+ * a flag indicating if any key order mismatches were found.
+ */
+function reorderKeysInJson(data, currentPath = '') {
+  if (Array.isArray(data)) {
+    return data.map((item, index) => reorderKeysInJson(item, `${currentPath}[${index}]`));
+  }
+  if (typeof data === 'object' && data !== null) {
+    const {
+      reorderedObject: reorderedData, isKeyOrderMismatched: mainMismatch, mismatchedKeys: mainMismatchedKeys,
+    } = reorderObjectKeys(data, KEY_ORDERS.main);
+    let hasAnyKeyOrderMismatch = mainMismatch;
+    const mismatches = mainMismatch ? { [currentPath]: mainMismatchedKeys } : {};
+
+    if (
+      Object.prototype.hasOwnProperty.call(reorderedData, '$value')
+      && typeof reorderedData.$value === 'object'
+      && reorderedData.$value !== null
+    ) {
+      if (Object.values(reorderedData.$value).every((item) => typeof item === 'object' && item !== null)) {
+        Object.keys(reorderedData.$value).forEach((key) => {
+          const {
+            reorderedObject, isKeyOrderMismatched, mismatchedKeys: valueMismatchedKeys,
+          } = reorderObjectKeys(reorderedData.$value[key], KEY_ORDERS.value);
+          reorderedData.$value[key] = reorderedObject;
+          if (isKeyOrderMismatched) {
+            hasAnyKeyOrderMismatch = true;
+            mismatches[`${currentPath}.$value.${key}`] = valueMismatchedKeys;
+          }
+        });
+      } else {
+        const {
+          reordered: reorderedValue, isKeyOrderMismatched, mismatchedKeys: valueMismatchedKeys,
+        } = reorderObjectKeys(reorderedData.$value, KEY_ORDERS.value);
+        reorderedData.$value = reorderedValue;
+        if (isKeyOrderMismatched) {
+          hasAnyKeyOrderMismatch = true;
+          mismatches[`${currentPath}.$value`] = valueMismatchedKeys;
+        }
+      }
+    }
+
+    if (Array.isArray(reorderedData.modify)) {
+      reorderedData.modify = reorderedData.modify.map((item, index) => {
+        if (typeof item === 'object' && item !== null) {
+          const {
+            reorderedObject,
+            isKeyOrderMismatched, mismatchedKeys: modifyMismatchedKeys,
+          } = reorderObjectKeys(item, KEY_ORDERS.modify);
+          if (isKeyOrderMismatched) {
+            hasAnyKeyOrderMismatch = true;
+            mismatches[`${currentPath}.modify[${index}]`] = modifyMismatchedKeys;
+          }
+          return reorderedObject;
+        }
+        return item;
+      });
+    }
+
+    Object.keys(reorderedData).forEach((key) => {
+      const result = reorderKeysInJson(reorderedData[key], `${currentPath}.${key}`);
+      reorderedData[key] = result.reorderedData || result;
+      if (result.isKeyOrderMismatched) {
+        Object.assign(mismatches, result.mismatches);
+        hasAnyKeyOrderMismatch = true;
+      }
+    });
+
+    return {
+      reorderedData,
+      isKeyOrderMismatched: hasAnyKeyOrderMismatch,
+      mismatches,
+    };
+  }
+  return {
+    reorderedData: data,
+    isKeyOrderMismatched: false,
+    mismatches: {},
+  };
+}
+
+/**
+ * Processes all JSON files in a given directory path, reordering keys in each file based on predefined key orders.
+ * @param {string} directoryPath - The path of the directory containing JSON files.
+ */
+function processJsonFilesInDirectory(directoryPath) {
+  fs.readdirSync(directoryPath).forEach((fileName) => {
+    const filePath = path.join(directoryPath, fileName);
+    const fileStats = fs.statSync(filePath);
+
+    if (fileStats.isDirectory()) {
+      processJsonFilesInDirectory(filePath);
+    } else if (fileStats.isFile() && path.extname(fileName) === '.json') {
+      try {
+        let fileContent = fs.readFileSync(filePath, 'utf-8');
+        const jsonData = JSON.parse(fileContent);
+
+        const { reorderedData, isKeyOrderMismatched, mismatches } = reorderKeysInJson(jsonData);
+
+        if (isKeyOrderMismatched) {
+          warningsCount++;
+          if (shouldFix) {
+            fs.writeFileSync(filePath, JSON.stringify(reorderedData, null, 2), 'utf-8');
+          } else {
+            console.warn(chalk.yellow(`Warning: Key order mismatch in ${filePath}.`));
+            console.warn(chalk.red('Mismatched keys by path:'));
+            Object.entries(mismatches).forEach(([keyPath, keys]) => {
+              console.warn(chalk.cyan(`  Path: ${keyPath.slice(1)}`));
+              console.warn(chalk.magenta(`  Mismatched keys: ${keys.join(', ')}`));
+              console.warn();
+            });
+          }
+        }
+
+        if (!fileContent.endsWith('\n')) {
+          fileContent += '\n';
+          fs.writeFileSync(filePath, fileContent, 'utf-8');
+        }
+
+        processedFileCount++;
+      } catch (error) {
+        console.error(chalk.red(`Error processing file ${filePath}:`), error);
+      }
+    }
+  });
+}
+
+processJsonFilesInDirectory(folderPath);
+
+let statusMessage;
+
+if (shouldFix) {
+  statusMessage = chalk.green(`Processed ${processedFileCount} files. ${warningsCount} files were updated.`);
+} else if (warningsCount > 0) {
+  statusMessage = chalk.yellow(`Processed ${processedFileCount} files. ${warningsCount} files have key order mismatches.`);
+} else {
+  statusMessage = chalk.green(`Processed ${processedFileCount} files. All files are in correct order.`);
+}
+
+console.log(statusMessage);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 60832e4bf2..788bb7ec3b 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -21,7 +21,8 @@
   --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-zindex-0-is-key-order-mismatched: false; /* z-index of level 0. */
+  --pgn-elevation-zindex-0-reordered-data: 0; /* z-index of level 0. */
   --pgn-elevation-tooltip-zindex: 1070;
   --pgn-elevation-sheet-zindex-main: 1032;
   --pgn-elevation-sheet-zindex-backdrop: 1031;
@@ -30,76 +31,46 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --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-collapse-width-is-key-order-mismatched: false; /* Collapse transition for width that takes 350ms */
+  --pgn-transition-collapse-height-is-key-order-mismatched: false; /* Collapse transition for height that takes 350ms */
+  --pgn-transition-fade-is-key-order-mismatched: false; /* Opacity transition that takes 150ms */
+  --pgn-transition-base-is-key-order-mismatched: false; /* Generic transition for any property change */
+  --pgn-transition-progress-bar-transition-is-key-order-mismatched: false;
+  --pgn-transition-progress-bar-animation-timing-is-key-order-mismatched: false;
+  --pgn-transition-form-control-3-is-key-order-mismatched: false;
+  --pgn-transition-form-control-3-reordered-data-timing-function: ease-in-out;
+  --pgn-transition-form-control-3-reordered-data-property: box-shadow;
+  --pgn-transition-form-control-3-reordered-data-duration: 0.15s;
+  --pgn-transition-form-control-3-reordered-data-delay: 0s;
+  --pgn-transition-form-control-3-reordered-data-behavior: normal;
+  --pgn-transition-form-control-2-is-key-order-mismatched: false;
+  --pgn-transition-form-control-2-reordered-data-timing-function: ease-in-out;
+  --pgn-transition-form-control-2-reordered-data-property: border-color;
+  --pgn-transition-form-control-2-reordered-data-duration: 0.15s;
+  --pgn-transition-form-control-2-reordered-data-delay: 0s;
+  --pgn-transition-form-control-2-reordered-data-behavior: normal;
+  --pgn-transition-form-control-1-is-key-order-mismatched: false;
+  --pgn-transition-form-control-1-reordered-data-timing-function: ease-in-out;
+  --pgn-transition-form-control-1-reordered-data-property: background-color;
+  --pgn-transition-form-control-1-reordered-data-duration: 0.15s;
+  --pgn-transition-form-control-1-reordered-data-delay: 0s;
+  --pgn-transition-form-control-1-reordered-data-behavior: normal;
+  --pgn-transition-form-input-2-is-key-order-mismatched: false;
+  --pgn-transition-form-input-2-reordered-data-timing-function: ease-in-out;
+  --pgn-transition-form-input-2-reordered-data-property: box-shadow;
+  --pgn-transition-form-input-2-reordered-data-duration: 0.15s;
+  --pgn-transition-form-input-2-reordered-data-delay: 0s;
+  --pgn-transition-form-input-2-reordered-data-behavior: normal;
+  --pgn-transition-form-input-1-is-key-order-mismatched: false;
+  --pgn-transition-form-input-1-reordered-data-timing-function: ease-in-out;
+  --pgn-transition-form-input-1-reordered-data-property: border-color;
+  --pgn-transition-form-input-1-reordered-data-duration: 0.15s;
+  --pgn-transition-form-input-1-reordered-data-delay: 0s;
+  --pgn-transition-form-input-1-reordered-data-behavior: normal;
+  --pgn-transition-carousel-control-is-key-order-mismatched: false;
+  --pgn-transition-carousel-indicator-is-key-order-mismatched: false;
   --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-carousel-base-is-key-order-mismatched: false;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;
@@ -147,10 +118,10 @@
   --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-monospace-is-key-order-mismatched: false; /* 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-font-family-sans-serif-is-key-order-mismatched: false; /* Sans-serif font family. */
+  --pgn-typography-font-family-base-is-key-order-mismatched: false; /* 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);
@@ -316,11 +287,9 @@
   --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-header-padding-base-is-key-order-mismatched: false;
   --pgn-spacing-modal-footer-padding-y: 1rem;
-  --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-footer-padding-base-is-key-order-mismatched: false;
   --pgn-spacing-modal-inner-padding-bottom: 0.7rem;
   --pgn-spacing-modal-inner-padding-base: 1.5rem;
   --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -334,10 +303,7 @@
   --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-position-is-key-order-mismatched: false;
   --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);
@@ -366,16 +332,14 @@
   --pgn-spacing-dropzone-padding: 1.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-header-is-key-order-mismatched: false;
   --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: 0rem;
   --pgn-spacing-dropdown-spacer: 0.125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell-y: 0.75rem;
-  --pgn-spacing-data-table-padding-cell-x: 0.5rem;
+  --pgn-spacing-data-table-padding-cell-is-key-order-mismatched: false;
   --pgn-spacing-data-table-padding-small: 0.5rem;
   --pgn-spacing-data-table-padding-y: 0.75rem;
   --pgn-spacing-data-table-padding-x: 0.75rem;
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index d93bcbd0bb..ea3c949ae4 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -5,207 +5,204 @@
 
 :root {
   --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-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-hover-is-key-order-mismatched: false;
   --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;
-  --pgn-color-action-default-danger-600: #871F28FF;
-  --pgn-color-action-default-danger-500: #9A232EFF;
-  --pgn-color-action-default-danger-400: #C73A46FF;
-  --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;
-  --pgn-color-action-default-warning-600: #B39800FF;
-  --pgn-color-action-default-warning-500: #CCAE00FF;
-  --pgn-color-action-default-warning-400: #FFDC0DFF;
-  --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;
-  --pgn-color-action-default-info-600: #004166FF;
-  --pgn-color-action-default-info-500: #004C77FF;
-  --pgn-color-action-default-info-400: #337599FF;
-  --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;
-  --pgn-color-action-default-success-600: #0D4A2FFF;
-  --pgn-color-action-default-success-500: #0F5737FF;
-  --pgn-color-action-default-success-400: #407F63FF;
-  --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;
-  --pgn-color-action-default-secondary-600: #252525FF;
-  --pgn-color-action-default-secondary-500: #2B2B2BFF;
-  --pgn-color-action-default-secondary-400: #5A5A5AFF;
-  --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-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='#000000FF' 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='#FFFFFFFF' 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='#FFFFFFFF' 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='#FFFFFFFF' 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: #FFEE88FF;
+  --pgn-color-action-default-accent-a: #00BBF9FF;
+  --pgn-color-action-default-dark-base: #273F2FFF;
+  --pgn-color-action-default-dark-900: #273F2FFF;
+  --pgn-color-action-default-dark-800: #273F2FFF;
+  --pgn-color-action-default-dark-700: #273F2FFF;
+  --pgn-color-action-default-dark-600: #273F2FFF;
+  --pgn-color-action-default-dark-500: #273F2FFF;
+  --pgn-color-action-default-dark-400: #273F2FFF;
+  --pgn-color-action-default-dark-300: #273F2FFF;
+  --pgn-color-action-default-dark-200: #273F2FFF;
+  --pgn-color-action-default-dark-100: #273F2FFF;
+  --pgn-color-action-default-light-base: #E1DDDBFF;
+  --pgn-color-action-default-light-900: #E1DDDBFF;
+  --pgn-color-action-default-light-800: #E1DDDBFF;
+  --pgn-color-action-default-light-700: #E1DDDBFF;
+  --pgn-color-action-default-light-600: #E1DDDBFF;
+  --pgn-color-action-default-light-500: #E1DDDBFF;
+  --pgn-color-action-default-light-400: #E1DDDBFF;
+  --pgn-color-action-default-light-300: #E1DDDBFF;
+  --pgn-color-action-default-light-200: #E1DDDBFF;
+  --pgn-color-action-default-light-100: #E1DDDBFF;
+  --pgn-color-action-default-danger-base: #C32D3AFF;
+  --pgn-color-action-default-danger-900: #C32D3AFF;
+  --pgn-color-action-default-danger-800: #C32D3AFF;
+  --pgn-color-action-default-danger-700: #C32D3AFF;
+  --pgn-color-action-default-danger-600: #C32D3AFF;
+  --pgn-color-action-default-danger-500: #C32D3AFF;
+  --pgn-color-action-default-danger-400: #C32D3AFF;
+  --pgn-color-action-default-danger-300: #C32D3AFF;
+  --pgn-color-action-default-danger-200: #C32D3AFF;
+  --pgn-color-action-default-danger-100: #C32D3AFF;
+  --pgn-color-action-default-warning-base: #FFD900FF;
+  --pgn-color-action-default-warning-900: #FFD900FF;
+  --pgn-color-action-default-warning-800: #FFD900FF;
+  --pgn-color-action-default-warning-700: #FFD900FF;
+  --pgn-color-action-default-warning-600: #FFD900FF;
+  --pgn-color-action-default-warning-500: #FFD900FF;
+  --pgn-color-action-default-warning-400: #FFD900FF;
+  --pgn-color-action-default-warning-300: #FFD900FF;
+  --pgn-color-action-default-warning-200: #FFD900FF;
+  --pgn-color-action-default-warning-100: #FFD900FF;
+  --pgn-color-action-default-info-base: #006DAAFF;
+  --pgn-color-action-default-info-900: #006DAAFF;
+  --pgn-color-action-default-info-800: #006DAAFF;
+  --pgn-color-action-default-info-700: #006DAAFF;
+  --pgn-color-action-default-info-600: #006DAAFF;
+  --pgn-color-action-default-info-500: #006DAAFF;
+  --pgn-color-action-default-info-400: #006DAAFF;
+  --pgn-color-action-default-info-300: #006DAAFF;
+  --pgn-color-action-default-info-200: #006DAAFF;
+  --pgn-color-action-default-info-100: #006DAAFF;
+  --pgn-color-action-default-success-base: #178253FF;
+  --pgn-color-action-default-success-900: #178253FF;
+  --pgn-color-action-default-success-800: #178253FF;
+  --pgn-color-action-default-success-700: #178253FF;
+  --pgn-color-action-default-success-600: #178253FF;
+  --pgn-color-action-default-success-500: #178253FF;
+  --pgn-color-action-default-success-400: #178253FF;
+  --pgn-color-action-default-success-300: #178253FF;
+  --pgn-color-action-default-success-200: #178253FF;
+  --pgn-color-action-default-success-100: #178253FF;
+  --pgn-color-action-default-brand-base: #9D0054FF;
+  --pgn-color-action-default-brand-900: #9D0054FF;
+  --pgn-color-action-default-brand-800: #9D0054FF;
+  --pgn-color-action-default-brand-700: #9D0054FF;
+  --pgn-color-action-default-brand-600: #9D0054FF;
+  --pgn-color-action-default-brand-500: #9D0054FF;
+  --pgn-color-action-default-brand-400: #9D0054FF;
+  --pgn-color-action-default-brand-300: #9D0054FF;
+  --pgn-color-action-default-brand-200: #9D0054FF;
+  --pgn-color-action-default-brand-100: #9D0054FF;
+  --pgn-color-action-default-secondary-base: #454545FF;
+  --pgn-color-action-default-secondary-900: #454545FF;
+  --pgn-color-action-default-secondary-800: #454545FF;
+  --pgn-color-action-default-secondary-700: #454545FF;
+  --pgn-color-action-default-secondary-600: #454545FF;
+  --pgn-color-action-default-secondary-500: #454545FF;
+  --pgn-color-action-default-secondary-400: #454545FF;
+  --pgn-color-action-default-secondary-300: #454545FF;
+  --pgn-color-action-default-secondary-200: #454545FF;
+  --pgn-color-action-default-secondary-100: #454545FF;
+  --pgn-color-action-default-primary-base: #0A3055FF;
+  --pgn-color-action-default-primary-900: #0A3055FF;
+  --pgn-color-action-default-primary-800: #0A3055FF;
+  --pgn-color-action-default-primary-700: #0A3055FF;
+  --pgn-color-action-default-primary-600: #0A3055FF;
+  --pgn-color-action-default-primary-500: #0A3055FF;
+  --pgn-color-action-default-primary-400: #0A3055FF;
+  --pgn-color-action-default-primary-300: #0A3055FF;
+  --pgn-color-action-default-primary-200: #0A3055FF;
+  --pgn-color-action-default-primary-100: #0A3055FF;
+  --pgn-color-action-default-gray-base: #707070FF;
+  --pgn-color-action-default-gray-900: #212529FF;
+  --pgn-color-action-default-gray-800: #333333FF;
+  --pgn-color-action-default-gray-700: #454545FF;
+  --pgn-color-action-default-gray-600: #5C5C5CFF;
+  --pgn-color-action-default-gray-500: #707070FF;
+  --pgn-color-action-default-gray-400: #8F8F8FFF;
+  --pgn-color-action-default-gray-300: #ADADADFF;
+  --pgn-color-action-default-gray-200: #CCCCCCFF;
+  --pgn-color-action-default-gray-100: #EBEBEBFF;
   --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-900: #273F2FFF; /* Dark color of level 900. */
+  --pgn-color-dark-800: #273F2FFF; /* Dark color of level 800. */
+  --pgn-color-dark-700: #273F2FFF; /* Info color of level 700. */
+  --pgn-color-dark-600: #273F2FFF; /* 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-dark-400: #273F2FFF; /* Dark color of level 400. */
+  --pgn-color-dark-300: #273F2FFF; /* Dark color of level 300. */
+  --pgn-color-dark-200: #273F2FFF; /* Dark color of level 200. */
+  --pgn-color-dark-100: #273F2FFF; /* 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-900: #E1DDDBFF; /* Light color of level 900. */
+  --pgn-color-light-800: #E1DDDBFF; /* Light color of level 800. */
+  --pgn-color-light-700: #E1DDDBFF; /* Light color of level 700. */
+  --pgn-color-light-600: #E1DDDBFF; /* 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-light-400: #E1DDDBFF; /* Light color of level 400. */
+  --pgn-color-light-300: #E1DDDBFF; /* Light color of level 300. */
+  --pgn-color-light-200: #E1DDDBFF; /* Light color of level 200. */
+  --pgn-color-light-100: #E1DDDBFF; /* 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-900: #C32D3AFF; /* Danger color of level 900. */
+  --pgn-color-danger-800: #C32D3AFF; /* Danger color of level 800. */
+  --pgn-color-danger-700: #C32D3AFF; /* Danger color of level 700. */
+  --pgn-color-danger-600: #C32D3AFF; /* 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-danger-400: #C32D3AFF; /* Danger color of level 400. */
+  --pgn-color-danger-300: #C32D3AFF; /* Danger color of level 300. */
+  --pgn-color-danger-200: #C32D3AFF; /* Danger color of level 200. */
+  --pgn-color-danger-100: #C32D3AFF; /* 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-900: #FFD900FF; /* Warning color of level 900. */
+  --pgn-color-warning-800: #FFD900FF; /* Warning color of level 800. */
+  --pgn-color-warning-700: #FFD900FF; /* Warning color of level 700. */
+  --pgn-color-warning-600: #FFD900FF; /* 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-warning-400: #FFD900FF; /* Warning color of level 400. */
+  --pgn-color-warning-300: #FFD900FF; /* Warning color of level 300. */
+  --pgn-color-warning-200: #FFD900FF; /* Warning color of level 200. */
+  --pgn-color-warning-100: #FFD900FF; /* 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-900: #006DAAFF; /* Info color of level 900. */
+  --pgn-color-info-800: #006DAAFF; /* Info color of level 800. */
+  --pgn-color-info-700: #006DAAFF; /* Info color of level 700. */
+  --pgn-color-info-600: #006DAAFF; /* 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-info-400: #006DAAFF; /* Info color of level 400. */
+  --pgn-color-info-300: #006DAAFF; /* Info color of level 300. */
+  --pgn-color-info-200: #006DAAFF; /* Info color of level 200. */
+  --pgn-color-info-100: #006DAAFF; /* 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-900: #178253FF; /* Success color of level 900. */
+  --pgn-color-success-800: #178253FF; /* Success color of level 800. */
+  --pgn-color-success-700: #178253FF; /* Success color of level 700. */
+  --pgn-color-success-600: #178253FF; /* 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-success-400: #178253FF; /* Success color of level 400. */
+  --pgn-color-success-300: #178253FF; /* Success color of level 300. */
+  --pgn-color-success-200: #178253FF; /* Success color of level 200. */
+  --pgn-color-success-100: #178253FF; /* 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-900: #9D0054FF; /* Brand color of level 900. */
+  --pgn-color-brand-800: #9D0054FF; /* Brand color of level 800. */
+  --pgn-color-brand-700: #9D0054FF; /* Brand color of level 700. */
+  --pgn-color-brand-600: #9D0054FF; /* 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-brand-400: #9D0054FF; /* Brand color of level 400. */
+  --pgn-color-brand-300: #9D0054FF; /* Brand color of level 300. */
+  --pgn-color-brand-200: #9D0054FF; /* Brand color of level 200. */
+  --pgn-color-brand-100: #9D0054FF; /* 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-900: #454545FF; /* Secondary color of level 900. */
+  --pgn-color-secondary-800: #454545FF; /* Secondary color of level 800. */
+  --pgn-color-secondary-700: #454545FF; /* Secondary color of level 700. */
+  --pgn-color-secondary-600: #454545FF; /* 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-secondary-400: #454545FF; /* Secondary color of level 400. */
+  --pgn-color-secondary-300: #454545FF; /* Secondary color of level 300. */
+  --pgn-color-secondary-200: #454545FF; /* Secondary color of level 200. */
+  --pgn-color-secondary-100: #454545FF; /* 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-900: #0A3055FF; /* Primary color of level 900. */
+  --pgn-color-primary-800: #0A3055FF; /* Primary color of level 800. */
+  --pgn-color-primary-700: #0A3055FF; /* Primary color of level 700. */
+  --pgn-color-primary-600: #0A3055FF; /* 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-primary-400: #0A3055FF; /* Primary color of level 400. */
+  --pgn-color-primary-300: #0A3055FF; /* Primary color of level 300. */
+  --pgn-color-primary-200: #0A3055FF; /* Primary color of level 200. */
+  --pgn-color-primary-100: #0A3055FF; /* 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. */
@@ -238,29 +235,29 @@
   --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-border: #000000FF;
   --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-hover-decoration: #9D0054FF;
+  --pgn-color-link-brand-inline-hover-base: #9D0054FF;
+  --pgn-color-link-brand-inline-decoration: #9D0054FF;
   --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
-  --pgn-color-link-brand-hover: #51002BFF;
+  --pgn-color-link-brand-hover: #9D0054FF;
   --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-hover-decoration: #0A3055FF;
+  --pgn-color-link-muted-inline-hover-base: #0A3055FF;
+  --pgn-color-link-muted-inline-decoration: #0A3055FF;
   --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
-  --pgn-color-link-muted-hover: #020911FF;
+  --pgn-color-link-muted-hover: #0A3055FF;
   --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-hover-decoration: #006DAAFF;
+  --pgn-color-link-inline-hover-base: #006DAAFF;
+  --pgn-color-link-inline-decoration: #006DAAFF;
   --pgn-color-link-inline-base: var(--pgn-color-info-500);
-  --pgn-color-link-hover: #003C5EFF;
+  --pgn-color-link-hover: #006DAAFF;
   --pgn-color-link-base: var(--pgn-color-info-500);
-  --pgn-color-hr-border: #0000001A;
+  --pgn-color-hr-border: #000000FF;
   --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);
@@ -270,10 +267,10 @@
   --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-border: #000000FF;
   --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-border: #000000FF;
   --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);
@@ -298,8 +295,8 @@
   --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-sheet-skrim-component-box-shadow: #000000FF;
+  --pgn-color-sheet-skrim-bg: #ADADADFF;
   --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);
@@ -313,7 +310,7 @@
   --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-box-shadow: #000000FF;
   --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);
@@ -324,11 +321,11 @@
   --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-outer: #00000033;
   --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-border-bottom-dark: #FFFFFFFF;
+  --pgn-color-popover-header-bg-dark: #FFFFFFFF;
   --pgn-color-popover-header-bg: var(--pgn-color-white);
   --pgn-color-popover-header-text: var(--pgn-color-headings-base);
   --pgn-color-popover-border: #00000033;
@@ -362,20 +359,20 @@
   --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-light-toggler-border: #000000FF;
+  --pgn-color-navbar-light-disabled: #000000FF;
+  --pgn-color-navbar-light-active: #000000FF;
+  --pgn-color-navbar-light-hover: #000000FF;
+  --pgn-color-navbar-light-text: #000000FF;
   --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-toggler-border: #FFFFFFFF;
+  --pgn-color-navbar-dark-disabled: #FFFFFFFF;
   --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-navbar-dark-hover: #FFFFFFFF;
+  --pgn-color-navbar-dark-text: #FFFFFFFF;
+  --pgn-color-nav-light: #000000FF;
+  --pgn-color-nav-dark: #FFFFFFFF;
   --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);
@@ -418,7 +415,7 @@
   --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-border: #000000FF;
   --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);
@@ -651,13 +648,13 @@
   --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;
-  --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #17825340;
-  --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AE6;
-  --pgn-color-form-feedback-tooltip-bg-valid: #178253E6;
-  --pgn-color-form-feedback-tooltip-valid: #FFFFFFFF;
+  --pgn-color-form-feedback-checked-invalid: #C32D3AFF;
+  --pgn-color-form-feedback-checked-valid: #178253FF;
+  --pgn-color-form-feedback-tooltip-box-shadow-focus-invalid: #C32D3AFF;
+  --pgn-color-form-feedback-tooltip-box-shadow-focus-valid: #178253FF;
+  --pgn-color-form-feedback-tooltip-bg-invalid: #C32D3AFF;
+  --pgn-color-form-feedback-tooltip-bg-valid: #178253FF;
+  --pgn-color-form-feedback-tooltip-valid: #178253FF;
   --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);
@@ -669,7 +666,7 @@
   --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-active: #0A3055FF;
   --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);
@@ -685,7 +682,7 @@
   --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-floating-text: #FFFFFFFF;
   --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);
@@ -693,7 +690,7 @@
   --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-disabled: #0A3055FF;
   --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);
@@ -720,15 +717,15 @@
   --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-hover-base: #212529FF;
   --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-border: #000000FF;
   --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-is-loading: #FFFFFFFF;
   --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);
@@ -752,7 +749,7 @@
   --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-border-base: #000000FF;
   --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);
@@ -1100,44 +1097,44 @@
   --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-outline-warning: #FFD900FF;
+  --pgn-color-btn-active-text-inverse-warning: #FFD900FF;
+  --pgn-color-btn-active-text-outline-warning: #FFD900FF;
+  --pgn-color-btn-active-text-warning: #FFD900FF;
   --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-success: #178253FF;
+  --pgn-color-btn-active-text-inverse-success: #178253FF;
+  --pgn-color-btn-active-text-outline-success: #178253FF;
+  --pgn-color-btn-active-text-success: #178253FF;
   --pgn-color-btn-active-text-inverse-outline-secondary: #454545FF;
-  --pgn-color-btn-active-text-inverse-secondary: #2B2B2BFF;
+  --pgn-color-btn-active-text-inverse-secondary: #454545FF;
   --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-active-text-secondary: #454545FF;
+  --pgn-color-btn-active-text-inverse-outline-primary: #0A3055FF;
+  --pgn-color-btn-active-text-inverse-primary: #0A3055FF;
+  --pgn-color-btn-active-text-outline-primary: #0A3055FF;
+  --pgn-color-btn-active-text-primary: #0A3055FF;
+  --pgn-color-btn-active-text-inverse-outline-light: #E1DDDBFF;
+  --pgn-color-btn-active-text-inverse-light: #E1DDDBFF;
+  --pgn-color-btn-active-text-outline-light: #E1DDDBFF;
+  --pgn-color-btn-active-text-light: #E1DDDBFF;
+  --pgn-color-btn-active-text-inverse-outline-info: #006DAAFF;
+  --pgn-color-btn-active-text-inverse-info: #006DAAFF;
+  --pgn-color-btn-active-text-outline-info: #006DAAFF;
+  --pgn-color-btn-active-text-info: #006DAAFF;
+  --pgn-color-btn-active-text-inverse-outline-dark: #273F2FFF;
+  --pgn-color-btn-active-text-inverse-dark: #273F2FFF;
+  --pgn-color-btn-active-text-outline-dark: #273F2FFF;
+  --pgn-color-btn-active-text-dark: #273F2FFF;
+  --pgn-color-btn-active-text-inverse-outline-danger: #C32D3AFF;
+  --pgn-color-btn-active-text-inverse-danger: #C32D3AFF;
+  --pgn-color-btn-active-text-outline-danger: #C32D3AFF;
+  --pgn-color-btn-active-text-danger: #C32D3AFF;
+  --pgn-color-btn-active-text-inverse-outline-brand: #9D0054FF;
+  --pgn-color-btn-active-text-inverse-brand: #9D0054FF;
+  --pgn-color-btn-active-text-outline-brand: #9D0054FF;
+  --pgn-color-btn-active-text-brand: #9D0054FF;
   --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);
@@ -1177,81 +1174,81 @@
   --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-inverse-warning: #FFD900FF;
   --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-inverse-tertiary: #FFFFFFFF;
   --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-inverse-success: #178253FF;
   --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-inverse-secondary: #454545FF;
   --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-inverse-primary: #0A3055FF;
   --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-inverse-light: #E1DDDBFF;
   --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-inverse-info: #006DAAFF;
   --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-inverse-dark: #273F2FFF;
   --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-inverse-danger: #C32D3AFF;
   --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-inverse-brand: #9D0054FF;
   --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-inverse-warning: #FFD900FF;
   --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-warning: #FFD900FF;
   --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-inverse-success: #178253FF;
   --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-success: #178253FF;
   --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-inverse-secondary: #454545FF;
   --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-secondary: #454545FF;
   --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-inverse-primary: #0A3055FF;
   --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-primary: #0A3055FF;
   --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-inverse-light: #E1DDDBFF;
   --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-light: #E1DDDBFF;
   --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-inverse-info: #006DAAFF;
   --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-info: #006DAAFF;
   --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-inverse-dark: #273F2FFF;
   --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-dark: #273F2FFF;
   --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-inverse-danger: #C32D3AFF;
   --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-danger: #C32D3AFF;
   --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-inverse-brand: #9D0054FF;
   --pgn-color-btn-hover-text-outline-brand: var(--pgn-color-theme-hover-brand);
-  --pgn-color-btn-hover-text-brand: #FFFFFFFF;
+  --pgn-color-btn-hover-text-brand: #9D0054FF;
   --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);
@@ -1291,81 +1288,81 @@
   --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-inverse-warning: #FFD900FF;
   --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-inverse-success: #178253FF;
   --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-secondary: #454545FF;
   --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-primary: #0A3055FF;
   --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-inverse-light: #E1DDDBFF;
   --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-inverse-info: #006DAAFF;
   --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-inverse-dark: #273F2FFF;
   --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-inverse-danger: #C32D3AFF;
   --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-inverse-brand: #9D0054FF;
   --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-warning: #FFD900FF;
   --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-success: #178253FF;
   --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-secondary: #454545FF;
   --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-primary: #0A3055FF;
   --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-light: #E1DDDBFF;
   --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-info: #006DAAFF;
   --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-dark: #273F2FFF;
   --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-danger: #C32D3AFF;
   --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-btn-text-brand: #9D0054FF;
   --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);
@@ -1379,22 +1376,22 @@
   --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-box-shadow-dark: #273F2FFF;
+  --pgn-color-badge-focus-box-shadow-light: #E1DDDBFF;
+  --pgn-color-badge-focus-box-shadow-info: #006DAAFF;
+  --pgn-color-badge-focus-box-shadow-warning: #FFD900FF;
+  --pgn-color-badge-focus-box-shadow-danger: #C32D3AFF;
+  --pgn-color-badge-focus-box-shadow-success: #178253FF;
+  --pgn-color-badge-focus-box-shadow-secondary: #454545FF;
+  --pgn-color-badge-focus-box-shadow-primary: #0A3055FF;
+  --pgn-color-badge-focus-bg-dark: #273F2FFF;
+  --pgn-color-badge-focus-bg-light: #E1DDDBFF;
+  --pgn-color-badge-focus-bg-info: #006DAAFF;
+  --pgn-color-badge-focus-bg-warning: #FFD900FF;
+  --pgn-color-badge-focus-bg-danger: #C32D3AFF;
+  --pgn-color-badge-focus-bg-success: #178253FF;
+  --pgn-color-badge-focus-bg-secondary: #454545FF;
+  --pgn-color-badge-focus-bg-primary: #0A3055FF;
   --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);
@@ -1411,14 +1408,14 @@
   --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-badge-text-dark: #273F2FFF;
+  --pgn-color-badge-text-light: #E1DDDBFF;
+  --pgn-color-badge-text-info: #006DAAFF;
+  --pgn-color-badge-text-warning: #FFD900FF;
+  --pgn-color-badge-text-danger: #C32D3AFF;
+  --pgn-color-badge-text-success: #178253FF;
+  --pgn-color-badge-text-secondary: #454545FF;
+  --pgn-color-badge-text-primary: #0A3055FF;
   --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);
@@ -1511,553 +1508,465 @@
   --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-text-50-white: #FFFFFFFF; /* White text color with transparency of 50%. */
+  --pgn-color-text-50-black: #000000FF; /* 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-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-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-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='#C32D3AFF' 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='#178253FF' 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-is-key-order-mismatched: false;
+  --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="#454545FF"/></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='#FFFFFFFF'/%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='#0A3055FF'/%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='#C32D3AFF'/%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='#178253FF'/%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='#0A3055FF'/%3e%3c/svg%3e");
+  --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='#0A3055FF'/></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='#C32D3AFF'/></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='#178253FF'/></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='#0A3055FF'/></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-box-shadow-centered-5-2-is-key-order-mismatched: false; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-reordered-data-blur: 3rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-reordered-data-offset-y: 0; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-reordered-data-offset-x: 0; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-is-key-order-mismatched: false; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-reordered-data-blur: 2.5rem; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-reordered-data-offset-y: 0; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-reordered-data-offset-x: 0; /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 5. */
+  --pgn-elevation-box-shadow-centered-4-2-is-key-order-mismatched: false; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-reordered-data-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-reordered-data-offset-y: 0; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-reordered-data-offset-x: 0; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-is-key-order-mismatched: false; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-reordered-data-blur: 1.25rem; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-reordered-data-offset-y: 0; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-reordered-data-offset-x: 0; /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 4. */
+  --pgn-elevation-box-shadow-centered-3-2-is-key-order-mismatched: false; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-reordered-data-blur: 1rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-reordered-data-offset-y: 0; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-reordered-data-offset-x: 0; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-is-key-order-mismatched: false; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-reordered-data-blur: 0.625rem; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-reordered-data-offset-y: 0; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-reordered-data-offset-x: 0; /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 3. */
+  --pgn-elevation-box-shadow-centered-2-2-is-key-order-mismatched: false; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-reordered-data-blur: 0.5rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-reordered-data-offset-y: 0; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-reordered-data-offset-x: 0; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-is-key-order-mismatched: false; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-reordered-data-blur: 0.25rem; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-reordered-data-offset-y: 0; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-reordered-data-offset-x: 0; /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 2. */
+  --pgn-elevation-box-shadow-centered-1-2-is-key-order-mismatched: false; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-reordered-data-blur: 0.25rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-reordered-data-offset-y: 0; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-reordered-data-offset-x: 0; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-is-key-order-mismatched: false; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-reordered-data-blur: 0.125rem; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-reordered-data-offset-y: 0; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-reordered-data-offset-x: 0; /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-centered-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Centered box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-5-2-is-key-order-mismatched: false; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-reordered-data-blur: 3rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-reordered-data-offset-y: 0; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-reordered-data-offset-x: 0.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-is-key-order-mismatched: false; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-reordered-data-blur: 2.5rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-reordered-data-offset-y: 0; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-reordered-data-offset-x: 1.25rem; /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 5. */
+  --pgn-elevation-box-shadow-right-4-2-is-key-order-mismatched: false; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-reordered-data-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-reordered-data-offset-y: 0; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-reordered-data-offset-x: 0.5rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-is-key-order-mismatched: false; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-reordered-data-blur: 1.25rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-reordered-data-offset-y: 0; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-reordered-data-offset-x: 0.625rem; /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 4. */
+  --pgn-elevation-box-shadow-right-3-2-is-key-order-mismatched: false; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-reordered-data-blur: 0.625rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-reordered-data-offset-y: 0; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-reordered-data-offset-x: 0.25rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-is-key-order-mismatched: false; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-reordered-data-blur: 1rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-reordered-data-offset-y: 0; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-reordered-data-offset-x: 0.5rem; /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 3. */
+  --pgn-elevation-box-shadow-right-2-2-is-key-order-mismatched: false; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-reordered-data-blur: 0.5rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-reordered-data-offset-y: 0; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-reordered-data-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-is-key-order-mismatched: false; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-reordered-data-blur: 0.25rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-reordered-data-offset-y: 0; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-reordered-data-offset-x: 0.125rem; /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 2. */
+  --pgn-elevation-box-shadow-right-1-2-is-key-order-mismatched: false; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-reordered-data-blur: 0.25rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-reordered-data-offset-y: 0; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-reordered-data-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-is-key-order-mismatched: false; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-reordered-data-blur: 0.125rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-reordered-data-offset-y: 0; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-reordered-data-offset-x: 0.0625rem; /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-right-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Right box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-5-2-is-key-order-mismatched: false; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-reordered-data-blur: 3rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-reordered-data-offset-y: -0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-reordered-data-offset-x: 0; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-is-key-order-mismatched: false; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-reordered-data-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-reordered-data-offset-y: -1.25rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-reordered-data-offset-x: 0; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-up-4-2-is-key-order-mismatched: false; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-reordered-data-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-reordered-data-offset-y: -0.5rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-reordered-data-offset-x: 0; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-is-key-order-mismatched: false; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-reordered-data-blur: 1.25rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-reordered-data-offset-y: -0.625rem; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-reordered-data-offset-x: 0; /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 4. */
+  --pgn-elevation-box-shadow-up-3-2-is-key-order-mismatched: false; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-reordered-data-blur: 0.625rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-reordered-data-offset-y: -0.25rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-reordered-data-offset-x: 0; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-is-key-order-mismatched: false; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-reordered-data-blur: 1rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-reordered-data-offset-y: -0.5rem; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-reordered-data-offset-x: 0; /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 3. */
+  --pgn-elevation-box-shadow-up-2-2-is-key-order-mismatched: false; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-reordered-data-blur: 0.5rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-reordered-data-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-reordered-data-offset-x: 0; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-is-key-order-mismatched: false; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-reordered-data-blur: 0.25rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-reordered-data-offset-y: -0.125rem; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-reordered-data-offset-x: 0; /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 2. */
+  --pgn-elevation-box-shadow-up-1-2-is-key-order-mismatched: false; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-reordered-data-blur: 0.25rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-reordered-data-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-reordered-data-offset-x: 0; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-is-key-order-mismatched: false; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-reordered-data-blur: 0.125rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-reordered-data-offset-y: -0.0625rem; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-reordered-data-offset-x: 0; /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-up-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Top box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-5-2-is-key-order-mismatched: false; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-reordered-data-blur: 3rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-reordered-data-offset-y: 0; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-reordered-data-offset-x: -0.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-is-key-order-mismatched: false; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-reordered-data-blur: 2.5rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-reordered-data-offset-y: 0; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-reordered-data-offset-x: -1.25rem; /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 5. */
+  --pgn-elevation-box-shadow-left-4-2-is-key-order-mismatched: false; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-reordered-data-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-reordered-data-offset-y: 0; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-reordered-data-offset-x: -0.5rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-is-key-order-mismatched: false; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-reordered-data-blur: 1.25rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-reordered-data-offset-y: 0; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-reordered-data-offset-x: -0.625rem; /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 4. */
+  --pgn-elevation-box-shadow-left-3-2-is-key-order-mismatched: false; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-reordered-data-blur: 0.625rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-reordered-data-offset-y: 0; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-reordered-data-offset-x: -0.25rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-is-key-order-mismatched: false; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-reordered-data-blur: 1rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-reordered-data-offset-y: 0; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-reordered-data-offset-x: -0.5rem; /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 3. */
+  --pgn-elevation-box-shadow-left-2-2-is-key-order-mismatched: false; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-reordered-data-blur: 0.5rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-reordered-data-offset-y: 0; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-reordered-data-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-is-key-order-mismatched: false; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-reordered-data-blur: 0.25rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-reordered-data-offset-y: 0; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-reordered-data-offset-x: -0.125rem; /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 2. */
+  --pgn-elevation-box-shadow-left-1-2-is-key-order-mismatched: false; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-reordered-data-blur: 0.25rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-reordered-data-offset-y: 0; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-reordered-data-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-is-key-order-mismatched: false; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-reordered-data-blur: 0.125rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-reordered-data-offset-y: 0; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-reordered-data-offset-x: -0.0625rem; /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-left-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-5-2-is-key-order-mismatched: false; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-reordered-data-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-reordered-data-offset-y: 0.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-reordered-data-offset-x: 0; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-is-key-order-mismatched: false; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-reordered-data-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-reordered-data-offset-y: 1.25px; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-reordered-data-offset-x: 0; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-4-2-is-key-order-mismatched: false; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-reordered-data-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-reordered-data-offset-y: 0.5rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-reordered-data-offset-x: 0; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-is-key-order-mismatched: false; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-reordered-data-blur: 1.25rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-reordered-data-offset-y: 0.625rem; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-reordered-data-offset-x: 0; /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 4. */
+  --pgn-elevation-box-shadow-down-3-2-is-key-order-mismatched: false; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-reordered-data-blur: 0.625rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-reordered-data-offset-y: 0.25rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-reordered-data-offset-x: 0; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-is-key-order-mismatched: false; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-reordered-data-blur: 1rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-reordered-data-offset-y: 0.5rem; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-reordered-data-offset-x: 0; /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 3. */
+  --pgn-elevation-box-shadow-down-2-2-is-key-order-mismatched: false; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-reordered-data-blur: 0.5rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-reordered-data-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-reordered-data-offset-x: 0; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-is-key-order-mismatched: false; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-reordered-data-blur: 0.25rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-reordered-data-offset-y: 0.125rem; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-reordered-data-offset-x: 0; /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 2. */
+  --pgn-elevation-box-shadow-down-1-2-is-key-order-mismatched: false; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-reordered-data-blur: 0.25rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-reordered-data-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-reordered-data-offset-x: 0; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-is-key-order-mismatched: false; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-reordered-data-blur: 0.125rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-reordered-data-offset-y: 0.0625rem; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-reordered-data-offset-x: 0; /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-down-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 1. */
+  --pgn-elevation-box-shadow-lg-is-key-order-mismatched: false; /* Large box shadow. */
+  --pgn-elevation-box-shadow-sm-is-key-order-mismatched: false; /* Small box shadow. */
+  --pgn-elevation-box-shadow-base-is-key-order-mismatched: false; /* Default box shadow. */
+  --pgn-elevation-box-shadow-level-5-2-is-key-order-mismatched: false; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-reordered-data-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-reordered-data-offset-y: 0.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-reordered-data-offset-x: 0; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-is-key-order-mismatched: false; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-reordered-data-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-reordered-data-offset-y: 1.25px; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-reordered-data-offset-x: 0; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-4-2-is-key-order-mismatched: false; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-reordered-data-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-reordered-data-offset-y: 0.5rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-reordered-data-offset-x: 0; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-is-key-order-mismatched: false; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-reordered-data-blur: 1.25rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-reordered-data-offset-y: 0.625rem; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-reordered-data-offset-x: 0; /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-4-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 4. */
+  --pgn-elevation-box-shadow-level-3-2-is-key-order-mismatched: false; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-reordered-data-blur: 1rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-reordered-data-offset-y: 0; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-reordered-data-offset-x: 0; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-is-key-order-mismatched: false; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-reordered-data-blur: 0.625rem; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-reordered-data-offset-y: 0; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-reordered-data-offset-x: 0; /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-3-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 3. */
+  --pgn-elevation-box-shadow-level-2-2-is-key-order-mismatched: false; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-reordered-data-blur: 0.5rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-reordered-data-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-reordered-data-offset-x: 0; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-is-key-order-mismatched: false; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-reordered-data-blur: 0.25rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-reordered-data-offset-y: 0.125rem; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-reordered-data-offset-x: 0; /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-2-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 2. */
+  --pgn-elevation-box-shadow-level-1-2-is-key-order-mismatched: false; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-reordered-data-blur: 0.25rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-reordered-data-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-reordered-data-offset-x: 0; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-2-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-is-key-order-mismatched: false; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-reordered-data-blur: 0.125rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-reordered-data-offset-y: 0.0625rem; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-reordered-data-offset-x: 0; /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1-1-reordered-data-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
+  --pgn-elevation-input-btn-focus-box-shadow-is-key-order-mismatched: false;
+  --pgn-elevation-toast-box-shadow-2-is-key-order-mismatched: false;
+  --pgn-elevation-toast-box-shadow-2-reordered-data-blur: 3rem;
+  --pgn-elevation-toast-box-shadow-2-reordered-data-offset-y: 0.5rem;
+  --pgn-elevation-toast-box-shadow-2-reordered-data-offset-x: 0;
+  --pgn-elevation-toast-box-shadow-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-toast-box-shadow-1-is-key-order-mismatched: false;
+  --pgn-elevation-toast-box-shadow-1-reordered-data-blur: 2.5rem;
+  --pgn-elevation-toast-box-shadow-1-reordered-data-offset-y: 1.25rem;
+  --pgn-elevation-toast-box-shadow-1-reordered-data-offset-x: 0;
+  --pgn-elevation-toast-box-shadow-1-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-2-is-key-order-mismatched: false;
+  --pgn-elevation-sticky-shadow-bottom-2-reordered-data-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-bottom-2-reordered-data-offset-y: 0.25rem;
+  --pgn-elevation-sticky-shadow-bottom-2-reordered-data-offset-x: 0;
+  --pgn-elevation-sticky-shadow-bottom-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-bottom-1-is-key-order-mismatched: false;
+  --pgn-elevation-sticky-shadow-bottom-1-reordered-data-blur: 1rem;
+  --pgn-elevation-sticky-shadow-bottom-1-reordered-data-offset-y: 0.5rem;
+  --pgn-elevation-sticky-shadow-bottom-1-reordered-data-offset-x: 0;
+  --pgn-elevation-sticky-shadow-bottom-1-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-2-is-key-order-mismatched: false;
+  --pgn-elevation-sticky-shadow-top-2-reordered-data-blur: 0.625rem;
+  --pgn-elevation-sticky-shadow-top-2-reordered-data-offset-y: -0.25rem;
+  --pgn-elevation-sticky-shadow-top-2-reordered-data-offset-x: 0;
+  --pgn-elevation-sticky-shadow-top-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-sticky-shadow-top-1-is-key-order-mismatched: false;
+  --pgn-elevation-sticky-shadow-top-1-reordered-data-blur: 1rem;
+  --pgn-elevation-sticky-shadow-top-1-reordered-data-offset-y: -0.5rem;
+  --pgn-elevation-sticky-shadow-top-1-reordered-data-offset-x: 0;
+  --pgn-elevation-sticky-shadow-top-1-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-scrollable-body-box-shadow: #000000FF;
   --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-pagination-focus-box-shadow-is-key-order-mismatched: false;
+  --pgn-elevation-menu-box-shadow-is-key-order-mismatched: false;
   --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-black-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-black-base-is-key-order-mismatched: false;
   --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-dark-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-dark-base-is-key-order-mismatched: false;
   --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-light-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-light-base-is-key-order-mismatched: false;
   --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-danger-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-danger-base-is-key-order-mismatched: false;
   --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-warning-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-warning-base-is-key-order-mismatched: false;
   --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-success-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-success-base-is-key-order-mismatched: false;
   --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-brand-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-brand-base-is-key-order-mismatched: false;
   --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-secondary-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-secondary-base-is-key-order-mismatched: false;
   --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-icon-button-box-shadow-primary-inverse-is-key-order-mismatched: false;
+  --pgn-elevation-icon-button-box-shadow-primary-base-is-key-order-mismatched: false;
+  --pgn-elevation-form-control-select-border-focus-is-key-order-mismatched: false;
   --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-focus-is-key-order-mismatched: false;
   --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-focus-is-key-order-mismatched: false;
+  --pgn-elevation-form-control-range-thumb-focus-reordered-data-blur: 0.25rem;
+  --pgn-elevation-form-control-range-thumb-focus-reordered-data-offset-y: 0.1rem;
+  --pgn-elevation-form-control-range-thumb-focus-reordered-data-offset-x: 0;
+  --pgn-elevation-form-control-range-thumb-focus-reordered-data-spread: 0;
+  --pgn-elevation-form-control-range-thumb-focus-reordered-data-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-focus-is-key-order-mismatched: false;
   --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-focus-is-key-order-mismatched: false;
   --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-dropzone-error-is-key-order-mismatched: false;
+  --pgn-elevation-dropzone-active-is-key-order-mismatched: false;
+  --pgn-elevation-dropzone-focus-is-key-order-mismatched: false;
+  --pgn-elevation-dropzone-hover-is-key-order-mismatched: false;
+  --pgn-elevation-data-table-box-shadow-is-key-order-mismatched: false;
   --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-close-button-text-shadow-is-key-order-mismatched: false;
   --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-annotation-box-shadow-2-is-key-order-mismatched: false;
+  --pgn-elevation-annotation-box-shadow-2-reordered-data-blur: 8px;
+  --pgn-elevation-annotation-box-shadow-2-reordered-data-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-2-reordered-data-offset-x: 0;
+  --pgn-elevation-annotation-box-shadow-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-annotation-box-shadow-1-is-key-order-mismatched: false;
+  --pgn-elevation-annotation-box-shadow-1-reordered-data-blur: 4px;
+  --pgn-elevation-annotation-box-shadow-1-reordered-data-offset-y: 2px;
+  --pgn-elevation-annotation-box-shadow-1-reordered-data-offset-x: 0;
+  --pgn-elevation-annotation-box-shadow-1-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-2-is-key-order-mismatched: false;
+  --pgn-elevation-tooltip-box-shadow-2-reordered-data-blur: 8px;
+  --pgn-elevation-tooltip-box-shadow-2-reordered-data-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-2-reordered-data-offset-x: 0;
+  --pgn-elevation-tooltip-box-shadow-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-tooltip-box-shadow-1-is-key-order-mismatched: false;
+  --pgn-elevation-tooltip-box-shadow-1-reordered-data-blur: 4px;
+  --pgn-elevation-tooltip-box-shadow-1-reordered-data-offset-y: 2px;
+  --pgn-elevation-tooltip-box-shadow-1-reordered-data-offset-x: 0;
+  --pgn-elevation-tooltip-box-shadow-1-reordered-data-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-modal-content-box-shadow-sm-up-2-is-key-order-mismatched: false;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-reordered-data-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-reordered-data-offset-y: 8px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-reordered-data-offset-x: 0;
+  --pgn-elevation-modal-content-box-shadow-sm-up-2-reordered-data-color: rgba(0, 0, 0, 0.15);
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-is-key-order-mismatched: false;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-reordered-data-blur: 20px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-reordered-data-offset-y: 10px;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-reordered-data-offset-x: 0;
+  --pgn-elevation-modal-content-box-shadow-sm-up-1-reordered-data-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/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
index 62763473d1..b6c5322469 100644
--- a/tokens/src/core/alias/size.json
+++ b/tokens/src/core/alias/size.json
@@ -2,15 +2,35 @@
   "size": {
     "$type": "dimension",
     "border": {
-      "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
+      "width": {
+        "$value": "1px",
+        "$description": "Default border width.",
+        "source": "$border-width"
+      },
       "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." }
+        "base": {
+          "$value": ".375rem",
+          "$description": "Default border radius.",
+          "source": "$border-radius"
+        },
+        "lg": {
+          "$value": ".425rem",
+          "$description": "Large border radius.",
+          "source": "$border-radius-lg"
+        },
+        "sm": {
+          "$value": ".25rem",
+          "$description": "Small border radius.",
+          "source": "$border-radius-sm"
+        }
       }
     },
     "rounded": {
-      "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
+      "pill": {
+        "$value": "50rem",
+        "$description": "Pill border radius.",
+        "source": "$rounded-pill"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
index 4dd026a3b6..fd6b670b2d 100644
--- a/tokens/src/core/components/ActionRow.json
+++ b/tokens/src/core/components/ActionRow.json
@@ -3,9 +3,15 @@
     "$type": "dimension",
     "action-row": {
       "gap": {
-        "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
-        "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
+        "x": {
+          "$value": ".5rem",
+          "source": "$action-row-gap-x"
+        },
+        "y": {
+          "$value": ".5rem",
+          "source": "$action-row-gap-y"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
index aafa21a782..346c126d51 100644
--- a/tokens/src/core/components/Alert.json
+++ b/tokens/src/core/components/Alert.json
@@ -3,30 +3,63 @@
     "$type": "dimension",
     "alert": {
       "padding": {
-        "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
-        "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
+        "y": {
+          "$value": "1.5rem",
+          "source": "$alert-padding-y"
+        },
+        "x": {
+          "$value": "1.5rem",
+          "source": "$alert-padding-x"
+        }
       },
-      "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" }
+      "margin-bottom": {
+        "$value": "1rem",
+        "source": "$alert-margin-bottom"
+      },
+      "actions-gap": {
+        "$value": "{spacing.spacer.3}",
+        "source": "$alert-actions-gap"
+      },
+      "icon-space": {
+        "$value": ".8rem",
+        "source": "$alert-icon-space"
+      }
     }
   },
   "typography": {
     "alert": {
       "font": {
-        "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
-        "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
+        "weight-link": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.normal}",
+          "source": "$alert-link-font-weight"
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": ".875rem",
+          "source": "$alert-font-size"
+        }
       },
-      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
+      "line-height": {
+        "$type": "number",
+        "$value": "1.5rem",
+        "source": "$alert-line-height"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "alert": {
       "border": {
-        "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
-        "width": { "source": "$alert-border-width", "$value": "0" }
+        "radius": {
+          "$value": "{size.border.radius.base}",
+          "source": "$alert-border-radius"
+        },
+        "width": {
+          "$value": "0",
+          "source": "$alert-border-width"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
index bd86bd7be2..92ee095fa7 100644
--- a/tokens/src/core/components/Annotation.json
+++ b/tokens/src/core/components/Annotation.json
@@ -2,26 +2,49 @@
   "spacing": {
     "$type": "dimension",
     "annotation": {
-      "padding": { "source": "$annotation-padding", "$value": ".5rem" },
+      "padding": {
+        "$value": ".5rem",
+        "source": "$annotation-padding"
+      },
       "arrow-side": {
-        "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
+        "margin": {
+          "$value": ".25rem",
+          "source": "$annotation-arrow-side-margin"
+        }
       }
     }
   },
   "typography": {
     "annotation": {
-      "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" }
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{typography.font.size.sm}",
+        "source": "$annotation-font-size"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{typography.line-height.sm}",
+        "source": "$annotation-line-height"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "annotation": {
       "arrow-border": {
-        "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
+        "width": {
+          "$value": ".5rem",
+          "source": "$annotation-arrow-border-width"
+        }
       },
-      "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
-      "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
+      "max-width": {
+        "$value": "18.75rem",
+        "source": "$annotation-max-width"
+      },
+      "border-radius": {
+        "$value": ".25rem",
+        "source": "$annotation-border-radius"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json
index 58bd3176ed..ee7895e147 100644
--- a/tokens/src/core/components/Avatar.json
+++ b/tokens/src/core/components/Avatar.json
@@ -1,17 +1,53 @@
 {
   "size": {
     "avatar": {
-      "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" },
+      "base": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "source": "$avatar-size"
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "source": "$avatar-size-xs"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "2.25rem",
+        "source": "$avatar-size-sm"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "4rem",
+        "source": "$avatar-size-lg"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "6rem",
+        "source": "$avatar-size-xl"
+      },
+      "xxl": {
+        "$type": "dimension",
+        "$value": "11.5rem",
+        "source": "$avatar-size-xxl"
+      },
+      "huge": {
+        "$type": "dimension",
+        "$value": "18.75rem",
+        "source": "$avatar-size-huge"
+      },
       "border": {
-        "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
-        "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
+        "base": {
+          "$type": "dimension",
+          "$value": "1px",
+          "source": "$avatar-border"
+        },
+        "radius": {
+          "$type": "percentage",
+          "$value": "100%",
+          "source": "$avatar-border-radius"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
index c5635bf79c..6807affc6c 100644
--- a/tokens/src/core/components/AvatarButton.json
+++ b/tokens/src/core/components/AvatarButton.json
@@ -3,10 +3,19 @@
     "$type": "dimension",
     "avatar-button": {
       "padding-left": {
-        "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" }
+        "base": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left"
+        },
+        "sm": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left-sm"
+        },
+        "lg": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left-lg"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
index 61cbc94e7a..648c2f4cd6 100644
--- a/tokens/src/core/components/Badge.json
+++ b/tokens/src/core/components/Badge.json
@@ -4,18 +4,35 @@
     "badge": {
       "padding": {
         "x": {
-          "base": { "source": "$badge-padding-x", "$value": ".5rem" },
-          "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
+          "base": {
+            "$value": ".5rem",
+            "source": "$badge-padding-x"
+          },
+          "pill": {
+            "$value": ".6em",
+            "source": "$badge-pill-padding-x"
+          }
         },
-        "y": { "source": "$badge-padding-y", "$value": ".125rem" }
+        "y": {
+          "$value": ".125rem",
+          "source": "$badge-padding-y"
+        }
       }
     }
   },
   "typography": {
     "badge": {
       "font": {
-        "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" },
-        "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
+        "size": {
+          "$type": "percentage",
+          "$value": "75%",
+          "source": "$badge-font-size"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.bold}",
+          "source": "$badge-font-weight"
+        }
       }
     }
   },
@@ -23,14 +40,26 @@
     "$type": "dimension",
     "badge": {
       "border-radius": {
-        "base": { "source": "$badge-border-radius", "$value": ".25rem" },
-        "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
+        "base": {
+          "$value": ".25rem",
+          "source": "$badge-border-radius"
+        },
+        "pill": {
+          "$value": "10rem",
+          "source": "$badge-pill-border-radius"
+        }
       },
-      "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
+      "focus-width": {
+        "$value": "{size.input.btn.focus-width}",
+        "source": "$badge-focus-width"
+      }
     }
   },
   "transition": {
     "$type": "transition",
-    "badge": { "source": "$badge-transition", "$value": "none" }
+    "badge": {
+      "$value": "none",
+      "source": "$badge-transition"
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
index c3d34ad7c2..493b2a1ea3 100644
--- a/tokens/src/core/components/Breadcrumb.json
+++ b/tokens/src/core/components/Breadcrumb.json
@@ -3,7 +3,10 @@
     "$type": "dimension",
     "breadcrumb": {
       "margin": {
-        "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
+        "left": {
+          "$value": ".5rem",
+          "source": "$breadcrumb-margin-left"
+        }
       }
     }
   },
@@ -12,14 +15,26 @@
     "breadcrumb": {
       "border": {
         "radius": {
-          "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
+          "focus": {
+            "$value": ".125rem",
+            "source": "$breadcrumb-focus-border-radius"
+          }
         },
         "axis": {
-          "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
-          "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
+          "x-focus": {
+            "$value": ".25rem",
+            "source": "$breadcrumb-border-focus-axis-x"
+          },
+          "y-focus": {
+            "$value": ".5rem",
+            "source": "$breadcrumb-border-focus-axis-y"
+          }
         },
-        "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
+        "width-focus": {
+          "$value": ".0625rem",
+          "source": "$breadcrumb-border-focus-width"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index 587265277c..236f41f40d 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -3,9 +3,15 @@
     "$type": "dimension",
     "bubble": {
       "expandable-padding": {
-        "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
-        "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" }
+        "y": {
+          "$value": "0",
+          "source": "$bubble-expandable-padding-y"
+        },
+        "x": {
+          "$value": ".25rem",
+          "source": "$bubble-expandable-padding-x"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 93a9a7366f..4a6ff9f68a 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -4,28 +4,52 @@
     "btn": {
       "padding": {
         "y": {
-          "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}" }
+          "base": {
+            "$value": "{spacing.input.btn.padding.y}",
+            "source": "$btn-padding-y"
+          },
+          "lg": {
+            "$value": "{spacing.input.btn.padding.lg.y}",
+            "source": "$btn-padding-y-lg"
+          },
+          "sm": {
+            "$value": "{spacing.input.btn.padding.sm.y}",
+            "source": "$btn-padding-y-sm"
+          }
         },
         "x": {
-          "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}" }
+          "base": {
+            "$value": "{spacing.input.btn.padding.x}",
+            "source": "$btn-padding-x"
+          },
+          "lg": {
+            "$value": "{spacing.input.btn.padding.lg.x}",
+            "source": "$btn-padding-x-lg"
+          },
+          "sm": {
+            "$value": "{spacing.input.btn.padding.sm.x}",
+            "source": "$btn-padding-x-sm"
+          }
         }
       },
       "block": {
-        "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" }
+        "spacing-y": {
+          "$value": ".5rem",
+          "source": "$btn-block-spacing-y"
+        }
       },
       "focus": {
-        "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" },
+        "gap": {
+          "$value": "{size.btn.focus.width}",
+          "source": "$btn-focus-gap"
+        },
         "border-gap": {
-          "source": "$btn-focus-border-gap",
-          "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})"
+          "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+          "source": "$btn-focus-border-gap"
         },
         "distance-to-border": {
-          "source": "$btn-focus-distance-to-border",
-          "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})"
+          "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+          "source": "$btn-focus-distance-to-border"
         }
       }
     }
@@ -33,20 +57,46 @@
   "typography": {
     "btn": {
       "font": {
-        "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{typography.input.btn.font.family}",
+          "source": "$btn-font-family"
+        },
         "size": {
           "$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}" }
+          "base": {
+            "$value": "{typography.input.btn.font.size.base}",
+            "source": "$btn-font-size"
+          },
+          "sm": {
+            "$value": "{typography.input.btn.font.size.sm}",
+            "source": "$btn-font-size-sm"
+          },
+          "lg": {
+            "$value": "{typography.input.btn.font.size.lg}",
+            "source": "$btn-font-size-lg"
+          }
         },
-        "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.normal}",
+          "source": "$btn-font-weight"
+        }
       },
       "line-height": {
         "$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}" }
+        "base": {
+          "$value": "{typography.input.btn.line-height.base}",
+          "source": "$btn-line-height"
+        },
+        "sm": {
+          "$value": "{typography.input.btn.line-height.sm}",
+          "source": "$btn-line-height-sm"
+        },
+        "lg": {
+          "$value": "{typography.input.btn.line-height.lg}",
+          "source": "$btn-line-height-lg"
+        }
       }
     }
   },
@@ -54,28 +104,52 @@
     "$type": "dimension",
     "btn": {
       "border": {
-        "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" },
+        "width": {
+          "$value": "{size.input.btn.border-width}",
+          "source": "$btn-border-width"
+        },
         "radius": {
-          "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}" }
+          "base": {
+            "$value": "{size.border.radius.base}",
+            "source": "$btn-border-radius"
+          },
+          "lg": {
+            "$value": "{size.border.radius.lg}",
+            "source": "$btn-border-radius-lg"
+          },
+          "sm": {
+            "$value": "{size.border.radius.sm}",
+            "source": "$btn-border-radius-sm"
+          }
         }
       },
       "focus": {
-        "width": { "source": "$btn-focus-width", "$value": "2px" },
+        "width": {
+          "$value": "2px",
+          "source": "$btn-focus-width"
+        },
         "border-radius": {
           "base": {
-            "source": "$btn-focus-border-radius",
-            "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})"
+            "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "source": "$btn-focus-border-radius"
           },
-          "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}" }
+          "lg": {
+            "$value": "{size.btn.focus.border-radius.base}",
+            "source": "$btn-focus-border-radius-lg"
+          },
+          "sm": {
+            "$value": "{size.btn.border.radius.base}",
+            "source": "$btn-focus-border-radius-sm"
+          }
         }
       }
     }
   },
   "transition": {
     "$type": "transition",
-    "btn": { "source": "$btn-transition", "$value": "none" }
+    "btn": {
+      "$value": "none",
+      "source": "$btn-transition"
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index 5bb50e01b1..0da780990a 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -3,39 +3,91 @@
     "$type": "dimension",
     "card": {
       "spacer": {
-        "x": { "source": "$card-spacer-x", "$value": "1.25rem" },
-        "y": { "source": "$card-spacer-y", "$value": ".75rem" }
+        "x": {
+          "$value": "1.25rem",
+          "source": "$card-spacer-x"
+        },
+        "y": {
+          "$value": ".75rem",
+          "source": "$card-spacer-y"
+        }
       },
       "margin": {
-        "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}" }
+        "group": {
+          "$value": "12px",
+          "source": "$card-group-margin"
+        },
+        "deck": {
+          "$value": "{spacing.card.margin.group}",
+          "source": "$card-deck-margin"
+        },
+        "deck-bottom": {
+          "$value": "{spacing.spacer.3}",
+          "source": "$card-deck-margin-bottom"
+        },
+        "grid": {
+          "$value": "{spacing.card.margin.group}",
+          "source": "$card-grid-margin"
+        },
+        "grid-bottom": {
+          "$value": "{spacing.spacer.3}",
+          "source": "$card-grid-margin-bottom"
+        }
       },
       "columns": {
-        "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" }
+        "margin": {
+          "$value": "{spacing.card.spacer.y}",
+          "source": "$card-columns-margin"
+        },
+        "count": {
+          "$type": "number",
+          "$value": "3",
+          "source": "$card-columns-count"
+        },
+        "gap": {
+          "$value": "1.25rem",
+          "source": "$card-columns-gap"
+        }
       },
       "footer": {
-        "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" }
+        "action-gap": {
+          "$value": ".5rem",
+          "source": "$card-footer-actions-gap"
+        }
       },
       "loading-skeleton": {
-        "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" }
+        "spacer": {
+          "$value": ".313rem",
+          "source": "$loading-skeleton-spacer"
+        }
       },
       "logo": {
         "left-offset": {
-          "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" },
-          "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" }
+          "base": {
+            "$value": "1.5rem",
+            "source": "$card-logo-left-offset"
+          },
+          "horizontal": {
+            "$value": ".4375rem",
+            "source": "$card-logo-left-offset-horizontal"
+          }
         },
         "bottom-offset": {
-          "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" },
-          "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" }
+          "base": {
+            "$value": "1rem",
+            "source": "$card-logo-bottom-offset"
+          },
+          "horizontal": {
+            "$value": ".4375rem",
+            "source": "$card-logo-bottom-offset-horizontal"
+          }
         }
       },
       "focus": {
-        "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" }
+        "border-offset": {
+          "$value": "5px",
+          "source": "$card-focus-border-offset"
+        }
       }
     }
   },
@@ -43,34 +95,70 @@
     "$type": "dimension",
     "card": {
       "border": {
-        "width": { "source": "$card-border-width", "$value": "{size.border.width}" },
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$card-border-width"
+        },
         "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})" }
+          "base": {
+            "$value": "{size.border.radius.base}",
+            "source": "$card-border-radius"
+          },
+          "logo": {
+            "$value": ".25rem",
+            "source": "$card-logo-border-radius"
+          },
+          "inner": {
+            "$value": "calc({size.card.border.radius.base} - {size.card.border.width})",
+            "source": "$card-inner-border-radius"
+          }
         }
       },
       "focus": {
         "border": {
-          "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})" }
+          "width": {
+            "$value": "2px",
+            "source": "$card-focus-border-width"
+          },
+          "radius": {
+            "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})",
+            "source": "$card-focus-border-radius"
+          }
         }
       },
       "image": {
         "horizontal": {
           "width": {
-            "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" },
-            "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" }
+            "max": {
+              "$value": "240px",
+              "source": "$card-image-horizontal-max-width"
+            },
+            "min": {
+              "$value": "{size.card.image.horizontal.width.max}",
+              "source": "$card-image-horizontal-min-width"
+            }
           }
         },
         "vertical": {
-          "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" }
+          "max-height": {
+            "$value": "140px",
+            "source": "$card-image-vertical-max-height"
+          }
         },
-        "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" }
+        "border-radius": {
+          "$value": "{size.card.border.radius.base}",
+          "source": "$card-image-border-radius"
+        }
       },
       "logo": {
-        "width": { "source": "$card-logo-width", "$value": "7.25rem" },
-        "height": { "source": "$card-logo-height", "$value": "4.125rem" }
+        "width": {
+          "$value": "7.25rem",
+          "source": "$card-logo-width"
+        },
+        "height": {
+          "$value": "4.125rem",
+          "source": "$card-logo-height"
+        }
       }
     }
   },
@@ -78,8 +166,11 @@
     "$type": "dimension",
     "footer": {
       "text": {
-        "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" }
+        "font-size": {
+          "$value": "{typography.font.size.xs}",
+          "source": "$card-footer-text-font-size"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index da74f2a87a..4e0df4fd4e 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -3,61 +3,80 @@
     "carousel": {
       "control": {
         "width": {
-          "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" },
-          "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" }
+          "base": {
+            "$type": "percentage",
+            "$value": "15%",
+            "source": "$carousel-control-width"
+          },
+          "icon": {
+            "$type": "dimension",
+            "$value": "20px",
+            "source": "$carousel-control-icon-width"
+          }
         }
       },
       "indicator": {
         "$type": "dimension",
-        "width": { "source": "$carousel-indicator-width", "$value": "30px" },
+        "width": {
+          "$value": "30px",
+          "source": "$carousel-indicator-width"
+        },
         "height": {
-          "base": { "source": "$carousel-indicator-height", "$value": "3px" },
-          "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" }
+          "base": {
+            "$value": "3px",
+            "source": "$carousel-indicator-height"
+          },
+          "area-hit": {
+            "$value": "10px",
+            "source": "$carousel-indicator-hit-area-height"
+          }
         }
       },
-      "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" }
+      "caption-width": {
+        "$type": "percentage",
+        "$value": "70%",
+        "source": "$carousel-caption-width"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "carousel": {
-      "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" }
+      "indicator-spacer": {
+        "$value": "3px",
+        "source": "$carousel-indicator-spacer"
+      }
     }
   },
   "transition": {
     "$type": "transition",
     "carousel": {
       "base": {
-        "source": "$carousel-transition",
         "$value": {
-          "property": "transform",
-          "duration": "{transition.carousel.duration}",
-          "timingFunction": "ease-in-out",
-          "delay": "0ms",
-          "behavior": "normal"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$carousel-transition"
+      },
+      "duration": {
+        "$type": "duration",
+        "$value": ".6s",
+        "source": "$carousel-transition-duration"
       },
-      "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"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$carousel-indicator-transition"
       },
       "control": {
-        "source": "$carousel-control-transition",
         "$value": {
-          "property": "opacity",
-          "duration": ".15s",
-          "timingFunction": "ease",
-          "delay": "0ms",
-          "behavior": "normal"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$carousel-control-transition"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json
index a6699c402e..a2e11d006e 100644
--- a/tokens/src/core/components/Chip.json
+++ b/tokens/src/core/components/Chip.json
@@ -3,31 +3,64 @@
     "$type": "dimension",
     "chip": {
       "margin": {
-        "base": { "source": "$chip-margin", "$value": ".125rem" },
-        "icon": { "source": "$chip-icon-margin", "$value": ".25rem" }
+        "base": {
+          "$value": ".125rem",
+          "source": "$chip-margin"
+        },
+        "icon": {
+          "$value": ".25rem",
+          "source": "$chip-icon-margin"
+        }
       },
       "padding": {
-        "y": { "source": "$chip-padding-y", "$value": "1px" },
-        "x": { "source": "$chip-padding-x", "$value": ".5rem" }
+        "y": {
+          "$value": "1px",
+          "source": "$chip-padding-y"
+        },
+        "x": {
+          "$value": ".5rem",
+          "source": "$chip-padding-x"
+        }
       },
       "outline": {
         "selected-distance": {
-          "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" },
-          "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" }
+          "light": {
+            "$value": "3px",
+            "source": "$chip-light-selected-outline-distance"
+          },
+          "dark": {
+            "$value": "3px",
+            "source": "$chip-dark-selected-outline-distance"
+          }
         },
         "focus-distance": {
-          "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" },
-          "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" }
+          "light": {
+            "$value": ".313rem",
+            "source": "$chip-light-focus-outline-distance"
+          },
+          "dark": {
+            "$value": ".313rem",
+            "source": "$chip-dark-focus-outline-distance"
+          }
         },
-        "width": { "source": "$chip-outline-width", "$value": "3px" }
+        "width": {
+          "$value": "3px",
+          "source": "$chip-outline-width"
+        }
       }
     }
   },
   "size": {
     "$type": "dimension",
     "chip": {
-      "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" },
-      "icon": { "source": "$chip-icon-size", "$value": "1.5rem" }
+      "border-radius": {
+        "$value": ".375rem",
+        "source": "$chip-border-radius"
+      },
+      "icon": {
+        "$value": "1.5rem",
+        "source": "$chip-icon-size"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json
index ccb1edafd4..95191df984 100644
--- a/tokens/src/core/components/ChipCarousel.json
+++ b/tokens/src/core/components/ChipCarousel.json
@@ -2,13 +2,22 @@
   "spacing": {
     "$type": "dimension",
     "chip-carousel": {
-      "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" },
+      "controls-top-offset": {
+        "$value": ".375rem",
+        "source": "$chip-carousel-controls-top-offset"
+      },
       "container": {
         "padding": {
-          "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" },
-          "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" }
+          "x": {
+            "$value": ".625rem",
+            "source": "$chip-carousel-container-padding-x"
+          },
+          "y": {
+            "$value": ".313rem",
+            "source": "$chip-carousel-container-padding-y"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json
index 6308930b30..04a637104e 100644
--- a/tokens/src/core/components/CloseButton.json
+++ b/tokens/src/core/components/CloseButton.json
@@ -2,9 +2,17 @@
   "typography": {
     "close-button": {
       "font": {
-        "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" }
+        "size": {
+          "$type": "dimension",
+          "$value": "calc({typography.font.size.base} * 1.5)",
+          "source": "$close-font-size"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.bold}",
+          "source": "$close-font-weight"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json
index 4e03d1613c..3211128b2f 100644
--- a/tokens/src/core/components/Code.json
+++ b/tokens/src/core/components/Code.json
@@ -1,12 +1,23 @@
 {
   "typography": {
     "code": {
-      "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
+      "font-size": {
+        "$type": "percentage",
+        "$value": "{typography.font.size.sm}",
+        "source": "$code-font-size"
+      },
       "kbd": {
-        "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
+        "font-size": {
+          "$type": "dimension",
+          "$value": "{typography.code.font-size}",
+          "source": "$kbd-font-size"
+        },
         "nested": {
           "$type": "fontWeight",
-          "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" }
+          "font-weight": {
+            "$value": "{typography.font.weight.bold}",
+            "source": "$nested-kbd-font-weight"
+          }
         }
       }
     }
@@ -16,8 +27,14 @@
     "code": {
       "kbd": {
         "padding": {
-          "y": { "source": "$kbd-padding-y", "$value": ".2rem" },
-          "x": { "source": "$kbd-padding-x", "$value": ".4rem" }
+          "y": {
+            "$value": ".2rem",
+            "source": "$kbd-padding-y"
+          },
+          "x": {
+            "$value": ".4rem",
+            "source": "$kbd-padding-x"
+          }
         }
       }
     }
@@ -27,9 +44,12 @@
     "code": {
       "pre": {
         "scrollable": {
-          "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" }
+          "max-height": {
+            "$value": "340px",
+            "source": "$pre-scrollable-max-height"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json
index 91cc84d3f9..182d74cec3 100644
--- a/tokens/src/core/components/Collapsible.json
+++ b/tokens/src/core/components/Collapsible.json
@@ -5,22 +5,49 @@
       "card": {
         "spacer": {
           "y": {
-            "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" },
-            "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" }
+            "base": {
+              "$value": ".5rem",
+              "source": "$collapsible-card-spacer-y"
+            },
+            "lg": {
+              "$value": "{spacing.card.spacer.y}",
+              "source": "$collapsible-card-spacer-y-lg"
+            }
           },
           "x": {
-            "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" },
-            "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" }
+            "base": {
+              "$value": ".5rem",
+              "source": "$collapsible-card-spacer-x"
+            },
+            "lg": {
+              "$value": "{spacing.card.spacer.x}",
+              "source": "$collapsible-card-spacer-x-lg"
+            }
+          },
+          "left-body": {
+            "$value": ".75rem",
+            "source": "$collapsible-card-body-spacer-left"
+          },
+          "icon": {
+            "$value": "2.5rem",
+            "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": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" },
-            "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" },
-            "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" }
+            "y": {
+              "$value": ".5rem",
+              "source": "$collapsible-basic-spacer-y"
+            },
+            "x": {
+              "$value": ".5rem",
+              "source": "$collapsible-basic-spacer-x"
+            },
+            "icon": {
+              "$value": ".625rem",
+              "source": "$collapsible-basic-spacer-icon"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json
index 35ed3a43a8..3285c7abb8 100644
--- a/tokens/src/core/components/ColorPicker.json
+++ b/tokens/src/core/components/ColorPicker.json
@@ -2,8 +2,14 @@
   "size": {
     "$type": "dimension",
     "color-picker": {
-      "sm": { "source": "$picker-size-sm", "$value": "2rem" },
-      "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" }
+      "sm": {
+        "$value": "2rem",
+        "source": "$picker-size-sm"
+      },
+      "md": {
+        "$value": "calc(1.3333em + 1.125rem + 2px)",
+        "source": "$picker-size-md"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json
index fc72b78a5e..65b3128331 100644
--- a/tokens/src/core/components/Container.json
+++ b/tokens/src/core/components/Container.json
@@ -3,12 +3,27 @@
     "$type": "dimension",
     "container": {
       "max-width": {
-        "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" }
+        "xs": {
+          "$value": "464px",
+          "source": "$max-width-xs"
+        },
+        "sm": {
+          "$value": "708px",
+          "source": "$max-width-sm"
+        },
+        "md": {
+          "$value": "952px",
+          "source": "$max-width-md"
+        },
+        "lg": {
+          "$value": "1192px",
+          "source": "$max-width-lg"
+        },
+        "xl": {
+          "$value": "1440px",
+          "source": "$max-width-xl"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index 75bf84d8e2..63902920d0 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -2,15 +2,27 @@
   "size": {
     "$type": "dimension",
     "data-table": {
-      "border": { "source": "$data-table-border", "$value": "2px" },
+      "border": {
+        "$value": "2px",
+        "source": "$data-table-border"
+      },
       "dropdown": {
         "pagination": {
-          "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" },
-          "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" }
+          "max-height": {
+            "$value": "60vh",
+            "source": "$data-table-pagination-dropdown-max-height"
+          },
+          "min-width": {
+            "$value": "6rem",
+            "source": "$data-table-pagination-dropdown-min-width"
+          }
         }
       },
       "layout": {
-        "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" }
+        "sidebar-width": {
+          "$value": "12rem",
+          "source": "$data-table-layout-sidebar-width"
+        }
       }
     }
   },
@@ -18,18 +30,31 @@
     "data-table": {
       "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" },
+        "x": {
+          "$value": ".75rem",
+          "source": "$data-table-padding-x"
+        },
+        "y": {
+          "$value": ".75rem",
+          "source": "$data-table-padding-y"
+        },
+        "small": {
+          "$value": ".5rem",
+          "source": "$data-table-padding-small"
+        },
         "cell": {
-          "source": "$data-table-cell-padding",
           "$value": {
-            "x": ".5rem",
-            "y": ".75rem"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$data-table-cell-padding"
         }
       },
-      "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
+      "footer-position": {
+        "$type": "position",
+        "$value": "center",
+        "source": "$data-table-footer-position"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
index a709995611..e14b270d87 100644
--- a/tokens/src/core/components/Dropdown.json
+++ b/tokens/src/core/components/Dropdown.json
@@ -1,24 +1,39 @@
 {
   "typography": {
     "dropdown": {
-      "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{typography.font.size.base}",
+        "source": "$dropdown-font-size"
+      },
       "item": {
         "$type": "textDecoration",
-        "text-decoration": { "$value": "none" }
+        "text-decoration": {
+          "$value": "none"
+        }
       }
     }
   },
   "size": {
     "$type": "dimension",
     "dropdown": {
-      "min-width": { "source": "$dropdown-min-width", "$value": "18rem" },
+      "min-width": {
+        "$value": "18rem",
+        "source": "$dropdown-min-width"
+      },
       "border": {
-        "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" },
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$dropdown-border-width"
+        },
         "radius": {
-          "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" },
+          "base": {
+            "$value": "{size.border.radius.base}",
+            "source": "$dropdown-border-radius"
+          },
           "inner": {
-            "source": "$dropdown-inner-border-radius",
-            "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})"
+            "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
+            "source": "$dropdown-inner-border-radius"
           }
         }
       }
@@ -27,36 +42,60 @@
   "spacing": {
     "$type": "dimension",
     "dropdown": {
-      "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" },
+      "spacer": {
+        "$value": ".125rem",
+        "source": "$dropdown-spacer"
+      },
       "padding": {
         "x": {
-          "base": { "source": "$dropdown-padding-x", "$value": "0" },
-          "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" }
+          "base": {
+            "$value": "0",
+            "source": "$dropdown-padding-x"
+          },
+          "item": {
+            "$value": "1rem",
+            "source": "$dropdown-item-padding-x"
+          }
         },
         "y": {
-          "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
-          "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
+          "base": {
+            "$value": ".5rem",
+            "source": "$dropdown-padding-y"
+          },
+          "item": {
+            "$value": ".25rem",
+            "source": "$dropdown-item-padding-y"
+          }
         },
         "header": {
-          "source": "$dropdown-header-padding",
           "$value": {
-            "x": "{spacing.dropdown.padding.x.item}",
-            "y": ".5rem"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$dropdown-header-padding"
         }
       },
       "divider": {
-        "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
+        "margin-y": {
+          "$value": "calc({spacing.spacer.base} / 2)",
+          "source": "$dropdown-divider-margin-y"
+        }
       },
       "close-container": {
-        "top": { "source": "$modal-close-container-top", "$value": ".625rem" }
+        "top": {
+          "$value": ".625rem",
+          "source": "$modal-close-container-top"
+        }
       }
     }
   },
   "elevation": {
     "$type": "ratio",
     "dropdown": {
-      "zindex": { "source": "$zindex-dropdown", "$value": "1000" }
+      "zindex": {
+        "$value": "1000",
+        "source": "$zindex-dropdown"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json
index 9cfcb28071..0ca336e67b 100644
--- a/tokens/src/core/components/Dropzone.json
+++ b/tokens/src/core/components/Dropzone.json
@@ -3,17 +3,26 @@
     "$type": "dimension",
     "dropzone": {
       "restriction-msg": {
-        "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" }
+        "font-size": {
+          "$value": "{typography.font.size.xs}",
+          "source": "$dropzone-restriction-msg-font-size"
+        }
       }
     }
   },
   "spacing": {
     "$type": "dimension",
     "dropzone": {
-      "padding": { "source": "$dropzone-padding", "$value": "1.5rem" },
+      "padding": {
+        "$value": "1.5rem",
+        "source": "$dropzone-padding"
+      },
       "border": {
-        "base": { "source": "$dropzone-border-default", "$value": "1px" }
+        "base": {
+          "$value": "1px",
+          "source": "$dropzone-border-default"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json
index aa14828016..fb6b4265ab 100644
--- a/tokens/src/core/components/Form/other.json
+++ b/tokens/src/core/components/Form/other.json
@@ -2,14 +2,26 @@
   "other": {
     "form": {
       "control": {
-        "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" },
-        "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" },
+        "cursor": {
+          "$type": "cursorStyle",
+          "$value": "auto",
+          "source": "$custom-control-cursor"
+        },
+        "range-track-cursor": {
+          "$type": "cursorStyle",
+          "$value": "pointer",
+          "source": "$custom-range-track-cursor"
+        },
         "custom-file": {
           "$type": "text",
-          "lang": { "$value": "en" },
-          "content": { "$value": "Browse" }
+          "lang": {
+            "$value": "en"
+          },
+          "content": {
+            "$value": "Browse"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
index dcf0e043e5..d4cbf4a32b 100644
--- a/tokens/src/core/components/Form/size.json
+++ b/tokens/src/core/components/Form/size.json
@@ -5,67 +5,102 @@
         "$type": "dimension",
         "height": {
           "base": {
-            "source": "$input-height",
-            "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})"
+            "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
+            "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})"
+            "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
+            "source": "$input-height-sm"
           },
           "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})"
+            "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
+            "source": "$input-height-lg"
           },
           "inner": {
             "base": {
-              "source": "$input-height-inner",
-              "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)"
+              "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+              "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})"
+              "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
+              "source": "$input-height-inner-half"
             },
             "quarter": {
-              "source": "$input-height-inner-quarter",
-              "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))"
+              "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
+              "source": "$input-height-inner-quarter"
             }
           },
-          "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" }
+          "border": {
+            "$value": "calc({size.form.input.width.border} * 2)",
+            "source": "$input-height-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}" }
+          "hover": {
+            "$value": "0.063rem",
+            "source": "$input-hover-width"
+          },
+          "focus": {
+            "$value": "0.063rem",
+            "source": "$input-focus-width"
+          },
+          "border": {
+            "$value": "{size.input.btn.border-width}",
+            "source": "$input-border-width"
+          }
         },
         "radius": {
           "border": {
-            "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}" }
+            "base": {
+              "$value": "{size.border.radius.base}",
+              "source": "$input-border-radius"
+            },
+            "lg": {
+              "$value": "{size.border.radius.lg}",
+              "source": "$input-border-radius-lg"
+            },
+            "sm": {
+              "$value": "{size.border.radius.sm}",
+              "source": "$input-border-radius-sm"
+            }
           }
         }
       },
       "control": {
         "indicator": {
-          "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" },
-          "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" },
+          "base": {
+            "$type": "dimension",
+            "$value": "1.25rem",
+            "source": "$custom-control-indicator-size"
+          },
+          "bg": {
+            "$type": "percentage",
+            "$value": "100%",
+            "source": "$custom-control-indicator-bg-size"
+          },
           "border": {
             "$type": "dimension",
-            "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" }
+            "width": {
+              "$value": "0.125rem",
+              "source": "$custom-control-indicator-border-width"
+            }
           }
         },
         "switch": {
           "$type": "dimension",
-          "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" },
+          "width": {
+            "$value": "calc({size.form.control.indicator.base} * 1.75)",
+            "source": "$custom-switch-width"
+          },
           "indicator": {
             "base": {
-              "source": "$custom-switch-indicator-size",
-              "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)"
+              "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
+              "source": "$custom-switch-indicator-size"
             },
             "border": {
               "radius": {
-                "source": "$custom-switch-indicator-border-radius",
-                "$value": "calc({size.form.control.indicator.base} / 2)"
+                "$value": "calc({size.form.control.indicator.base} / 2)",
+                "source": "$custom-switch-indicator-border-radius"
               }
             }
           }
@@ -73,110 +108,199 @@
         "select": {
           "$type": "dimension",
           "height": {
-            "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}" }
+            "base": {
+              "$value": "{size.form.input.height.base}",
+              "source": "$custom-select-height"
+            },
+            "lg": {
+              "$value": "{size.form.input.height.lg}",
+              "source": "$custom-select-height-lg"
+            },
+            "sm": {
+              "$value": "{size.form.input.height.sm}",
+              "source": "$custom-select-height-sm"
+            }
           },
           "feedback": {
             "icon": {
-              "source": "$custom-select-feedback-icon-size",
-              "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}"
+              "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
+              "source": "$custom-select-feedback-icon-size"
             }
           },
           "border": {
             "width": {
-              "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" }
+              "base": {
+                "$value": "{size.form.input.width.border}",
+                "source": "$custom-select-border-width"
+              }
             },
-            "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" }
+            "radius": {
+              "$value": "{size.border.radius.base}",
+              "source": "$custom-select-border-radius"
+            }
           }
         },
         "range": {
           "track": {
-            "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" },
-            "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" },
+            "width": {
+              "$type": "percentage",
+              "$value": "100%",
+              "source": "$custom-range-track-width"
+            },
+            "height": {
+              "$type": "dimension",
+              "$value": ".5rem",
+              "source": "$custom-range-track-height"
+            },
             "border": {
               "$type": "dimension",
-              "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" }
+              "radius": {
+                "$value": "1rem",
+                "source": "$custom-range-track-border-radius"
+              }
             }
           },
           "thumb": {
             "$type": "dimension",
-            "width": { "source": "$custom-range-thumb-width", "$value": "1rem" },
-            "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" },
+            "width": {
+              "$value": "1rem",
+              "source": "$custom-range-thumb-width"
+            },
+            "height": {
+              "$value": "{size.form.control.range.thumb.width}",
+              "source": "$custom-range-thumb-height"
+            },
             "border": {
-              "base": { "source": "$custom-range-thumb-border", "$value": "0" },
-              "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" }
+              "base": {
+                "$value": "0",
+                "source": "$custom-range-thumb-border"
+              },
+              "radius": {
+                "$value": "1rem",
+                "source": "$custom-range-thumb-border-radius"
+              }
             },
             "focus": {
-              "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" }
+              "width": {
+                "$value": "{size.form.input.width.focus}",
+                "source": "$custom-range-thumb-focus-box-shadow-width"
+              }
             }
           }
         },
         "file": {
           "$type": "dimension",
-          "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" },
+          "width": {
+            "$value": "{size.form.input.width.border}",
+            "source": "$custom-file-border-width"
+          },
           "height": {
-            "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" },
-            "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" }
+            "base": {
+              "$value": "{size.form.input.height.base}",
+              "source": "$custom-file-height"
+            },
+            "inner": {
+              "$value": "{size.form.input.height.inner.base}",
+              "source": "$custom-file-height-inner"
+            }
           },
           "border": {
-            "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" }
+            "radius": {
+              "$value": "{size.form.input.radius.border.base}",
+              "source": "$custom-file-border-radius"
+            }
           }
         },
         "icon": {
           "$type": "dimension",
-          "width": { "source": "$form-control-icon-width", "$value": "2rem" }
+          "width": {
+            "$value": "2rem",
+            "source": "$form-control-icon-width"
+          }
         },
         "border": {
           "checkbox": {
             "$type": "dimension",
             "indicator": {
-              "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" }
+              "radius": {
+                "$value": "0",
+                "source": "$custom-checkbox-indicator-border-radius"
+              }
             }
           },
           "radio": {
             "$type": "percentage",
             "indicator": {
-              "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" }
+              "radius": {
+                "$value": "50%",
+                "source": "$custom-radio-indicator-border-radius"
+              }
             }
           }
         }
       },
       "grid": {
         "$type": "dimension",
-        "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" }
+        "gutter-width": {
+          "$value": "0.625rem",
+          "source": "$form-grid-gutter-width"
+        }
       },
       "autosuggest": {
         "$type": "dimension",
         "icon": {
-          "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" },
-          "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" }
+          "width": {
+            "$value": "2.4rem",
+            "source": "$form-autosuggest-icon-width"
+          },
+          "height": {
+            "$value": "{size.form.autosuggest.icon.width}",
+            "source": "$form-autosuggest-icon-height"
+          }
         },
         "spinner": {
-          "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" },
-          "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" }
+          "width": {
+            "$value": "1.25rem",
+            "source": "$form-autosuggest-spinner-width"
+          },
+          "height": {
+            "$value": "{size.form.autosuggest.spinner.width}",
+            "source": "$form-autosuggest-spinner-height"
+          }
         },
         "border": {
-          "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" }
+          "width": {
+            "$value": ".125rem",
+            "source": "$form-autosuggest-border-width"
+          }
         }
       },
       "border": {
         "$type": "dimension",
         "radius": {
           "check": {
-            "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" }
+            "focus": {
+              "$value": ".0625rem",
+              "source": "$form-check-focus-border-radius"
+            }
           },
-          "width": { "source": "$form-check-border-width", "$value": ".125rem" }
+          "width": {
+            "$value": ".125rem",
+            "source": "$form-check-border-width"
+          }
         }
       },
       "feedback": {
         "$type": "dimension",
         "tooltip": {
           "border": {
-            "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" }
+            "radius": {
+              "$value": "{size.border.radius.base}",
+              "source": "$form-feedback-tooltip-border-radius"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json
index 065a110f54..6790dd04cf 100644
--- a/tokens/src/core/components/Form/spacing.json
+++ b/tokens/src/core/components/Form/spacing.json
@@ -5,107 +5,192 @@
       "input": {
         "padding": {
           "y": {
-            "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}" }
+            "base": {
+              "$value": "{spacing.input.btn.padding.y}",
+              "source": "$input-padding-y"
+            },
+            "sm": {
+              "$value": "{spacing.input.btn.padding.sm.y}",
+              "source": "$input-padding-y-sm"
+            },
+            "lg": {
+              "$value": "{spacing.input.btn.padding.lg.y}",
+              "source": "$input-padding-y-lg"
+            }
           },
           "x": {
-            "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}" }
+            "base": {
+              "$value": "{spacing.input.btn.padding.x}",
+              "source": "$input-padding-x"
+            },
+            "sm": {
+              "$value": "{spacing.input.btn.padding.sm.x}",
+              "source": "$input-padding-x-sm"
+            },
+            "lg": {
+              "$value": "{spacing.input.btn.padding.lg.x}",
+              "source": "$input-padding-x-lg"
+            }
           }
         },
         "check": {
-          "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" },
+          "gutter": {
+            "$value": "1.25rem",
+            "source": "$form-check-input-gutter"
+          },
           "margin": {
             "x": {
-              "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" },
-              "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" }
+              "base": {
+                "$value": ".25rem",
+                "source": "$form-check-input-margin-x"
+              },
+              "inline": {
+                "$value": ".3125rem",
+                "source": "$form-check-inline-input-margin-x"
+              }
             },
-            "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" }
+            "y": {
+              "$value": ".3rem",
+              "source": "$form-check-input-margin-y"
+            }
           }
         }
       },
       "text": {
         "margin": {
-          "top": { "source": "$form-text-margin-top", "$value": ".25rem" }
+          "top": {
+            "$value": ".25rem",
+            "source": "$form-text-margin-top"
+          }
         }
       },
       "check": {
         "inline": {
           "margin": {
-            "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" }
+            "x": {
+              "$value": ".75rem",
+              "source": "$form-check-inline-margin-x"
+            }
           }
         },
         "position": {
-          "axis": { "source": "$form-check-position-axis", "$value": ".375rem" }
+          "axis": {
+            "$value": ".375rem",
+            "source": "$form-check-position-axis"
+          }
         }
       },
       "group": {
         "margin": {
-          "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" }
+          "bottom": {
+            "$value": "1rem",
+            "source": "$form-group-margin-bottom"
+          }
         }
       },
       "control": {
-        "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" },
+        "gutter": {
+          "$value": ".5rem",
+          "source": "$custom-control-gutter"
+        },
         "spacer": {
-          "x": { "source": "$custom-control-spacer-x", "$value": "1rem" }
+          "x": {
+            "$value": "1rem",
+            "source": "$custom-control-spacer-x"
+          }
         },
         "select": {
           "padding": {
             "y": {
-              "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}" }
+              "base": {
+                "$value": "{spacing.form.input.padding.y.base}",
+                "source": "$custom-select-padding-y"
+              },
+              "sm": {
+                "$value": "{spacing.form.input.padding.y.sm}",
+                "source": "$custom-select-padding-y-sm"
+              },
+              "lg": {
+                "$value": "{spacing.form.input.padding.y.lg}",
+                "source": "$custom-select-padding-y-lg"
+              }
             },
             "x": {
-              "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}" }
+              "base": {
+                "$value": "{spacing.form.input.padding.x.base}",
+                "source": "$custom-select-padding-x"
+              },
+              "sm": {
+                "$value": "{spacing.form.input.padding.x.sm}",
+                "source": "$custom-select-padding-x-sm"
+              },
+              "lg": {
+                "$value": "{spacing.form.input.padding.x.lg}",
+                "source": "$custom-select-padding-x-lg"
+              }
             }
           },
           "indicator": {
-            "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" }
+            "padding": {
+              "$value": "1rem",
+              "source": "$custom-select-indicator-padding"
+            }
           },
           "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})"
+                  "$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})",
+                  "source": "$custom-select-feedback-icon-padding-right"
                 }
               },
               "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"
-                }
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                },
+                "source": "$custom-select-feedback-icon-position"
               }
             },
             "margin": {
-              "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" }
+              "top": {
+                "$value": "{spacing.form.text.margin.top}",
+                "source": "$form-feedback-margin-top"
+              }
             },
             "tooltip": {
               "padding": {
-                "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" },
-                "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" }
+                "y": {
+                  "$value": ".25rem",
+                  "source": "$form-feedback-tooltip-padding-y"
+                },
+                "x": {
+                  "$value": ".5rem",
+                  "source": "$form-feedback-tooltip-padding-x"
+                }
               }
             }
           },
           "icon": {
-            "padding": { "source": "$select-icon-padding", "$value": ".5625rem" }
+            "padding": {
+              "$value": ".5625rem",
+              "source": "$select-icon-padding"
+            }
           }
         },
         "file": {
           "padding": {
-            "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}" }
+            "y": {
+              "$value": "{spacing.form.input.padding.y.base}",
+              "source": "$custom-file-padding-y"
+            },
+            "x": {
+              "$value": "{spacing.form.input.padding.x.base}",
+              "source": "$custom-file-padding-x"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json
index 14b7c2afc5..113041598a 100644
--- a/tokens/src/core/components/Form/transition.json
+++ b/tokens/src/core/components/Form/transition.json
@@ -3,50 +3,70 @@
     "$type": "transition",
     "form": {
       "input": {
-        "source": "$input-transition",
         "$value": [
           {
-            "property": "border-color",
-            "duration": ".15s",
-            "timing-function": "ease-in-out",
-            "delay": "0s",
-            "behavior": "normal"
+            "reorderedData": {
+              "behavior": "normal",
+              "delay": "0s",
+              "duration": ".15s",
+              "property": "border-color",
+              "timing-function": "ease-in-out"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "property": "box-shadow",
-            "duration": ".15s",
-            "timing-function": "ease-in-out",
-            "delay": "0s",
-            "behavior": "normal"
+            "reorderedData": {
+              "behavior": "normal",
+              "delay": "0s",
+              "duration": ".15s",
+              "property": "box-shadow",
+              "timing-function": "ease-in-out"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
-        ]
+        ],
+        "source": "$input-transition"
       },
       "control": {
-        "source": "$custom-forms-transition",
         "$value": [
           {
-            "property": "background-color",
-            "duration": ".15s",
-            "timing-function": "ease-in-out",
-            "delay": "0s",
-            "behavior": "normal"
+            "reorderedData": {
+              "behavior": "normal",
+              "delay": "0s",
+              "duration": ".15s",
+              "property": "background-color",
+              "timing-function": "ease-in-out"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "property": "border-color",
-            "duration": ".15s",
-            "timing-function": "ease-in-out",
-            "delay": "0s",
-            "behavior": "normal"
+            "reorderedData": {
+              "behavior": "normal",
+              "delay": "0s",
+              "duration": ".15s",
+              "property": "border-color",
+              "timing-function": "ease-in-out"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "property": "box-shadow",
-            "duration": ".15s",
-            "timing-function": "ease-in-out",
-            "delay": "0s",
-            "behavior": "normal"
+            "reorderedData": {
+              "behavior": "normal",
+              "delay": "0s",
+              "duration": ".15s",
+              "property": "box-shadow",
+              "timing-function": "ease-in-out"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
-        ]
+        ],
+        "source": "$custom-forms-transition"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json
index dd4973969b..76e95eec58 100644
--- a/tokens/src/core/components/Form/typography.json
+++ b/tokens/src/core/components/Form/typography.json
@@ -3,56 +3,125 @@
     "form": {
       "input": {
         "font": {
-          "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
+          "family": {
+            "$type": "fontFamily",
+            "$value": "{typography.input.btn.font.family}",
+            "source": "$input-font-family"
+          },
           "size": {
             "$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}" }
+            "base": {
+              "$value": "{typography.input.btn.font.size.base}",
+              "source": "$input-font-size"
+            },
+            "sm": {
+              "$value": "{typography.input.btn.font.size.sm}",
+              "source": "$input-font-size-sm"
+            },
+            "lg": {
+              "$value": "{typography.input.btn.font.size.lg}",
+              "source": "$input-font-size-lg"
+            }
           },
-          "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
+          "weight": {
+            "$type": "fontWeight",
+            "$value": "{typography.font.weight.base}",
+            "source": "$input-font-weight"
+          }
         },
         "line-height": {
           "$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}" }
+          "base": {
+            "$value": "{typography.input.btn.line-height.base}",
+            "source": "$input-line-height"
+          },
+          "sm": {
+            "$value": "{typography.input.btn.line-height.sm}",
+            "source": "$input-line-height-sm"
+          },
+          "lg": {
+            "$value": "{typography.input.btn.line-height.lg}",
+            "source": "$input-line-height-lg"
+          }
         }
       },
       "control": {
         "select": {
           "font": {
-            "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
+            "family": {
+              "$type": "fontFamily",
+              "$value": "{typography.form.input.font.family}",
+              "source": "$custom-select-font-family"
+            },
             "size": {
               "$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}" }
+              "base": {
+                "$value": "{typography.form.input.font.size.base}",
+                "source": "$custom-select-font-size"
+              },
+              "sm": {
+                "$value": "{typography.form.input.font.size.sm}",
+                "source": "$custom-select-font-size-sm"
+              },
+              "lg": {
+                "$value": "{typography.form.input.font.size.lg}",
+                "source": "$custom-select-font-size-lg"
+              }
             },
-            "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
+            "weight": {
+              "$type": "fontWeight",
+              "$value": "{typography.form.input.font.weight}",
+              "source": "$custom-select-font-weight"
+            }
           },
-          "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }
+          "line-height": {
+            "$type": "number",
+            "$value": "{typography.form.input.line-height.base}",
+            "source": "$custom-select-line-height"
+          }
         },
         "file": {
-          "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" },
+          "line-height": {
+            "$type": "number",
+            "$value": "{typography.form.input.line-height.base}",
+            "source": "$custom-file-line-height"
+          },
           "font": {
-            "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" }
+            "family": {
+              "$type": "fontFamily",
+              "$value": "{typography.form.input.font.family}",
+              "source": "$custom-file-font-family"
+            },
+            "weight": {
+              "$type": "fontWeight",
+              "$value": "{typography.form.input.font.weight}",
+              "source": "$custom-file-font-weight"
+            }
           }
         }
       },
       "feedback": {
         "$type": "dimension",
         "font": {
-          "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" }
+          "size": {
+            "$value": "{typography.font.size.sm}",
+            "source": "$form-feedback-font-size"
+          }
         },
         "tooltip": {
           "font": {
-            "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
+            "size": {
+              "$value": "{typography.font.size.sm}",
+              "source": "$form-feedback-tooltip-font-size"
+            }
           },
-          "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" }
+          "line-height": {
+            "$type": "number",
+            "$value": "{typography.line-height.base}",
+            "source": "$form-feedback-tooltip-line-height"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json
index 775992bfe5..eb8128dcb9 100644
--- a/tokens/src/core/components/Icon.json
+++ b/tokens/src/core/components/Icon.json
@@ -2,11 +2,26 @@
   "size": {
     "$type": "dimension",
     "icon": {
-      "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" }
+      "inline": {
+        "$value": ".8em",
+        "source": "$icon-inline"
+      },
+      "xs": {
+        "$value": "1rem",
+        "source": "$icon-xs"
+      },
+      "sm": {
+        "$value": "1.25rem",
+        "source": "$icon-sm"
+      },
+      "md": {
+        "$value": "1.5rem",
+        "source": "$icon-md"
+      },
+      "lg": {
+        "$value": "1.75rem",
+        "source": "$icon-lg"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json
index 57c3b225be..8740bbdece 100644
--- a/tokens/src/core/components/IconButton.json
+++ b/tokens/src/core/components/IconButton.json
@@ -3,10 +3,19 @@
     "$type": "dimension",
     "icon-button": {
       "diameter": {
-        "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)" }
+        "md": {
+          "$value": "2.75rem",
+          "source": "$btn-icon-diameter-md"
+        },
+        "sm": {
+          "$value": "2.25rem",
+          "source": "$btn-icon-diameter-sm"
+        },
+        "inline": {
+          "$value": "calc({typography.line-height.base} * 1em + .1em)",
+          "source": "$btn-icon-diameter-inline"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
index 0e62fd3bc8..bef85a6b0e 100644
--- a/tokens/src/core/components/Image.json
+++ b/tokens/src/core/components/Image.json
@@ -3,7 +3,10 @@
     "$type": "percentage",
     "image": {
       "figure-caption": {
-        "font-size": { "source": "$figure-caption-font-size", "$value": "90%" }
+        "font-size": {
+          "$value": "90%",
+          "source": "$figure-caption-font-size"
+        }
       }
     }
   },
@@ -12,8 +15,14 @@
     "image": {
       "thumbnail": {
         "border": {
-          "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" },
-          "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" }
+          "width": {
+            "$value": "{size.border.width}",
+            "source": "$thumbnail-border-width"
+          },
+          "radius": {
+            "$value": "{size.border.radius.base}",
+            "source": "$thumbnail-border-radius"
+          }
         }
       }
     }
@@ -22,8 +31,11 @@
     "$type": "dimension",
     "image": {
       "thumbnail": {
-        "padding": { "source": "$thumbnail-padding", "$value": ".25rem" }
+        "padding": {
+          "$value": ".25rem",
+          "source": "$thumbnail-padding"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json
index a9ed30dc57..fed4e4ac73 100644
--- a/tokens/src/core/components/Menu.json
+++ b/tokens/src/core/components/Menu.json
@@ -4,13 +4,25 @@
     "menu": {
       "item": {
         "padding": {
-          "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" },
-          "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" }
+          "x": {
+            "$value": "{spacing.btn.padding.x.base}",
+            "source": "$menu-item-padding-x"
+          },
+          "y": {
+            "$value": "{spacing.btn.padding.y.base}",
+            "source": "$menu-item-padding-y"
+          }
         },
         "icon": {
           "margin": {
-            "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" },
-            "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" }
+            "left": {
+              "$value": ".25em",
+              "source": "$menu-item-icon-margin-left"
+            },
+            "right": {
+              "$value": "{spacing.menu.item.icon.margin.left}",
+              "source": "$menu-item-icon-margin-right"
+            }
           }
         }
       }
@@ -21,8 +33,16 @@
       "select": {
         "btn-link": {
           "text-decoration": {
-            "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" }
+            "line": {
+              "$type": "textDecoration",
+              "$value": "underline",
+              "source": "$menu-select-btn-link-text-decoration-line"
+            },
+            "thickness": {
+              "$type": "dimension",
+              "$value": ".125rem",
+              "source": "$menu-select-btn-link-text-decoration-thickness"
+            }
           }
         }
       }
@@ -32,19 +52,37 @@
     "$type": "dimension",
     "menu": {
       "base": {
-        "border-radius": { "source": "$menu-border-radius", "$value": ".25em" },
-        "max-height": { "source": "$menu-max-height", "$value": "16.813rem" }
+        "border-radius": {
+          "$value": ".25em",
+          "source": "$menu-border-radius"
+        },
+        "max-height": {
+          "$value": "16.813rem",
+          "source": "$menu-max-height"
+        }
       },
       "item": {
-        "height": { "source": "$menu-item-height", "$value": "3rem" },
+        "height": {
+          "$value": "3rem",
+          "source": "$menu-item-height"
+        },
         "width": {
-          "base": { "source": "$menu-item-width", "$value": "19rem" },
-          "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" }
+          "base": {
+            "$value": "19rem",
+            "source": "$menu-item-width"
+          },
+          "xs": {
+            "$value": "13.438rem",
+            "source": "$menu-item-width-xs"
+          }
         },
         "border": {
-          "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" }
+          "width": {
+            "$value": "{size.btn.border.width}",
+            "source": "$menu-item-border-width"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json
index 542cc4f3f0..7618f15e30 100644
--- a/tokens/src/core/components/Modal.json
+++ b/tokens/src/core/components/Modal.json
@@ -2,20 +2,44 @@
   "elevation": {
     "$type": "ratio",
     "modal": {
-      "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" },
-      "zindex": { "source": "$zindex-modal", "$value": "1050" }
+      "backdrop-zindex": {
+        "$value": "1040",
+        "source": "$zindex-modal-backdrop"
+      },
+      "zindex": {
+        "$value": "1050",
+        "source": "$zindex-modal"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "modal": {
-      "xl": { "source": "$modal-xl", "$value": "1140px" },
-      "lg": { "source": "$modal-lg", "$value": "800px" },
-      "md": { "source": "$modal-md", "$value": "500px" },
-      "sm": { "source": "$modal-sm", "$value": "400px" },
+      "xl": {
+        "$value": "1140px",
+        "source": "$modal-xl"
+      },
+      "lg": {
+        "$value": "800px",
+        "source": "$modal-lg"
+      },
+      "md": {
+        "$value": "500px",
+        "source": "$modal-md"
+      },
+      "sm": {
+        "$value": "400px",
+        "source": "$modal-sm"
+      },
       "content-border": {
-        "width": { "source": "$modal-content-border-width", "$value": "0px" },
-        "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" }
+        "width": {
+          "$value": "0px",
+          "source": "$modal-content-border-width"
+        },
+        "radius": {
+          "$value": "{size.border.radius.lg}",
+          "source": "$modal-content-border-radius"
+        }
       }
     }
   },
@@ -23,30 +47,45 @@
     "$type": "dimension",
     "modal": {
       "inner-padding": {
-        "base": { "source": "$modal-inner-padding", "$value": "1.5rem" },
-        "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
+        "base": {
+          "$value": "1.5rem",
+          "source": "$modal-inner-padding"
+        },
+        "bottom": {
+          "$value": ".7rem",
+          "source": "$modal-inner-padding-bottom"
+        }
       },
       "footer-padding": {
         "base": {
-          "source": "$modal-footer-padding",
           "$value": {
-            "x": "1.5rem",
-            "y": "{spacing.modal.footer-padding.y}"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$modal-footer-padding"
         },
-        "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
+        "y": {
+          "$value": "1rem",
+          "source": "$modal-footer-padding-y"
+        }
       },
       "header-padding": {
         "base": {
-          "source": "$modal-header-padding",
           "$value": {
-            "x": "1.5rem",
-            "y": "{spacing.modal.header-padding.y}"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$modal-header-padding"
         },
-        "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
+        "y": {
+          "$value": "1rem",
+          "source": "$modal-header-padding-y"
+        }
       },
-      "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
+      "dialog-margin": {
+        "$value": "1.5rem",
+        "source": "$modal-dialog-margin"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
index 6daea697dc..cd8925ffcf 100644
--- a/tokens/src/core/components/Nav.json
+++ b/tokens/src/core/components/Nav.json
@@ -2,8 +2,15 @@
   "typography": {
     "nav": {
       "link": {
-        "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" },
-        "text-decoration": { "$value": "none", "$type": "textDecoration" }
+        "font-weight": {
+          "$type": "fontWeight",
+          "$value": "500",
+          "source": "$nav-link-font-weight"
+        },
+        "text-decoration": {
+          "$type": "textDecoration",
+          "$value": "none"
+        }
       }
     }
   },
@@ -11,26 +18,47 @@
     "$type": "dimension",
     "nav": {
       "pills": {
-        "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" },
+        "border-radius": {
+          "$value": "{size.border.radius.base}",
+          "source": "$nav-pills-border-radius"
+        },
         "link": {
-          "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" }
+          "border-width": {
+            "$value": "1px",
+            "source": "$nav-pills-link-border-width"
+          }
         },
         "inverse-link": {
-          "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" }
+          "border-width": {
+            "$value": "{size.nav.pills.link.border-width}",
+            "source": "$nav-inverse-pills-link-border-width"
+          }
         }
       },
       "tabs": {
         "link": {
           "border-bottom": {
-            "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" }
+            "width": {
+              "$value": ".188rem",
+              "source": "$nav-tabs-link-border-bottom-width"
+            }
           }
         },
         "inverse-link": {
-          "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" }
+          "active-border-bottom-width": {
+            "$value": "{size.nav.tabs.link.border-bottom.width}",
+            "source": "$nav-inverse-tabs-link-active-border-bottom-width"
+          }
         },
         "border": {
-          "width": { "source": "$nav-tabs-border-width", "$value": "2px" },
-          "radius": { "source": "$nav-tabs-border-radius", "$value": "0" }
+          "width": {
+            "$value": "2px",
+            "source": "$nav-tabs-border-width"
+          },
+          "radius": {
+            "$value": "0",
+            "source": "$nav-tabs-border-radius"
+          }
         }
       }
     }
@@ -40,11 +68,20 @@
     "nav": {
       "link": {
         "padding": {
-          "y": { "source": "$nav-link-padding-y", "$value": ".5rem" },
-          "x": { "source": "$nav-link-padding-x", "$value": "1rem" }
+          "y": {
+            "$value": ".5rem",
+            "source": "$nav-link-padding-y"
+          },
+          "x": {
+            "$value": "1rem",
+            "source": "$nav-link-padding-x"
+          }
         },
-        "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" }
+        "distance-to-border": {
+          "$value": "4px",
+          "source": "$nav-tabs-link-distance-to-border"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json
index 2ea5f56ca0..07ee28403e 100644
--- a/tokens/src/core/components/Navbar.json
+++ b/tokens/src/core/components/Navbar.json
@@ -3,21 +3,39 @@
     "$type": "dimension",
     "navbar": {
       "padding": {
-        "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" },
+        "y": {
+          "$value": "calc({spacing.spacer.base} / 2)",
+          "source": "$navbar-padding-y"
+        },
         "x": {
-          "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" },
-          "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" }
+          "base": {
+            "$value": "{spacing.spacer.base}",
+            "source": "$navbar-padding-x"
+          },
+          "nav-link": {
+            "$value": ".5rem",
+            "source": "$navbar-nav-link-padding-x"
+          }
         }
       },
       "brand": {
         "padding": {
-          "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" }
+          "y": {
+            "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
+            "source": "$navbar-brand-padding-y"
+          }
         }
       },
       "toggler": {
         "padding": {
-          "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" },
-          "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" }
+          "y": {
+            "$value": ".25rem",
+            "source": "$navbar-toggler-padding-y"
+          },
+          "x": {
+            "$value": ".75rem",
+            "source": "$navbar-toggler-padding-x"
+          }
         }
       }
     }
@@ -26,13 +44,22 @@
     "$type": "dimension",
     "navbar": {
       "brand": {
-        "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" }
+        "font-size": {
+          "$value": "{typography.font.size.lg}",
+          "source": "$navbar-brand-font-size"
+        }
       },
       "nav-link": {
-        "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" }
+        "height": {
+          "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
+          "source": "$nav-link-height"
+        }
       },
       "toggler": {
-        "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" }
+        "font-size": {
+          "$value": "{typography.font.size.lg}",
+          "source": "$navbar-toggler-font-size"
+        }
       }
     }
   },
@@ -41,15 +68,24 @@
     "navbar": {
       "nav": {
         "scroll": {
-          "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" }
+          "max-height": {
+            "$value": "75vh",
+            "source": "$navbar-nav-scroll-max-height"
+          }
         }
       },
       "brand": {
-        "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" }
+        "height": {
+          "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
+          "source": "$navbar-brand-height"
+        }
       },
       "toggler": {
-        "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" }
+        "border-radius": {
+          "$value": "{size.btn.border.radius.base}",
+          "source": "$navbar-toggler-border-radius"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json
index dc1460a37f..0c59642717 100644
--- a/tokens/src/core/components/Pagination.json
+++ b/tokens/src/core/components/Pagination.json
@@ -3,9 +3,16 @@
     "pagination": {
       "font-size": {
         "$type": "dimension",
-        "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
+        "sm": {
+          "$value": ".875rem",
+          "source": "$pagination-font-size-sm"
+        }
       },
-      "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" }
+      "line-height": {
+        "$type": "number",
+        "$value": "1.5rem",
+        "source": "$pagination-line-height"
+      }
     }
   },
   "spacing": {
@@ -13,14 +20,32 @@
     "pagination": {
       "padding": {
         "y": {
-          "base": { "source": "$pagination-padding-y", "$value": ".625rem" },
-          "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" },
-          "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" }
+          "base": {
+            "$value": ".625rem",
+            "source": "$pagination-padding-y"
+          },
+          "sm": {
+            "$value": ".8rem",
+            "source": "$pagination-padding-y-sm"
+          },
+          "lg": {
+            "$value": ".75rem",
+            "source": "$pagination-padding-y-lg"
+          }
         },
         "x": {
-          "base": { "source": "$pagination-padding-x", "$value": "1rem" },
-          "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" },
-          "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" }
+          "base": {
+            "$value": "1rem",
+            "source": "$pagination-padding-x"
+          },
+          "sm": {
+            "$value": ".6rem",
+            "source": "$pagination-padding-x-sm"
+          },
+          "lg": {
+            "$value": "1.5rem",
+            "source": "$pagination-padding-x-lg"
+          }
         }
       }
     }
@@ -29,37 +54,73 @@
     "$type": "dimension",
     "pagination": {
       "icon": {
-        "width": { "source": "$pagination-icon-width", "$value": "2.25rem" },
-        "height": { "source": "$pagination-icon-height", "$value": "2.25rem" }
+        "width": {
+          "$value": "2.25rem",
+          "source": "$pagination-icon-width"
+        },
+        "height": {
+          "$value": "2.25rem",
+          "source": "$pagination-icon-height"
+        }
       },
       "secondary": {
         "height": {
-          "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" },
-          "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" }
+          "base": {
+            "$value": "2.75rem",
+            "source": "$pagination-secondary-height"
+          },
+          "sm": {
+            "$value": "2.25rem",
+            "source": "$pagination-secondary-height-sm"
+          }
         }
       },
       "border": {
-        "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" },
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$pagination-border-width"
+        },
         "radius": {
-          "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" },
-          "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" }
+          "sm": {
+            "$value": "{size.border.radius.sm}",
+            "source": "$pagination-border-radius-sm"
+          },
+          "lg": {
+            "$value": "{size.border.radius.lg}",
+            "source": "$pagination-border-radius-lg"
+          }
         }
       },
       "reduced": {
         "dropdown": {
-          "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" },
-          "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" }
+          "max-height": {
+            "$value": "60vh",
+            "source": "$pagination-reduced-dropdown-max-height"
+          },
+          "min-width": {
+            "$value": "6rem",
+            "source": "$pagination-reduced-dropdown-min-width"
+          }
         }
       },
       "toggle": {
         "border": {
-          "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" },
-          "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" }
+          "base": {
+            "$value": ".3125rem",
+            "source": "$pagination-toggle-border"
+          },
+          "sm": {
+            "$value": ".25rem",
+            "source": "$pagination-toggle-border-sm"
+          }
         }
       },
       "focus": {
-        "outline": { "source": "$pagination-focus-outline", "$value": "0" }
+        "outline": {
+          "$value": "0",
+          "source": "$pagination-focus-outline"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index de243f5e09..59137510a8 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -2,31 +2,58 @@
   "typography": {
     "$type": "dimension",
     "popover": {
-      "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" }
+      "font-size": {
+        "$value": "{typography.font.size.sm}",
+        "source": "$popover-font-size"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "popover": {
-      "max-width": { "source": "$popover-max-width", "$value": "480px" },
+      "max-width": {
+        "$value": "480px",
+        "source": "$popover-max-width"
+      },
       "border": {
-        "width": { "source": "$popover-border-width", "$value": "{size.border.width}" },
-        "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" }
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$popover-border-width"
+        },
+        "radius": {
+          "$value": "{size.border.radius.sm}",
+          "source": "$popover-border-radius"
+        }
       },
       "icon": {
-        "height": { "source": "$popover-icon-height", "$value": "1rem" },
-        "width": { "source": "$popover-icon-width", "$value": "1rem" }
+        "height": {
+          "$value": "1rem",
+          "source": "$popover-icon-height"
+        },
+        "width": {
+          "$value": "1rem",
+          "source": "$popover-icon-width"
+        }
       },
       "arrow": {
-        "width": { "source": "$popover-arrow-width", "$value": "1rem" },
-        "height": { "source": "$popover-arrow-height", "$value": ".5rem" }
+        "width": {
+          "$value": "1rem",
+          "source": "$popover-arrow-width"
+        },
+        "height": {
+          "$value": ".5rem",
+          "source": "$popover-arrow-height"
+        }
       }
     }
   },
   "elevation": {
     "$type": "ratio",
     "popover": {
-      "zindex": { "source": "$zindex-popover", "$value": "1060" }
+      "zindex": {
+        "$value": "1060",
+        "source": "$zindex-popover"
+      }
     }
   },
   "spacing": {
@@ -34,19 +61,34 @@
     "popover": {
       "header": {
         "padding": {
-          "y": { "source": "$popover-header-padding-y", "$value": ".5rem" },
-          "x": { "source": "$popover-header-padding-x", "$value": "1rem" }
+          "y": {
+            "$value": ".5rem",
+            "source": "$popover-header-padding-y"
+          },
+          "x": {
+            "$value": "1rem",
+            "source": "$popover-header-padding-x"
+          }
         }
       },
       "body": {
         "padding": {
-          "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" },
-          "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" }
+          "y": {
+            "$value": "{spacing.popover.header.padding.y}",
+            "source": "$popover-body-padding-y"
+          },
+          "x": {
+            "$value": "{spacing.popover.header.padding.x}",
+            "source": "$popover-body-padding-x"
+          }
         }
       },
       "icon": {
-        "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" }
+        "margin-right": {
+          "$value": ".5rem",
+          "source": "$popover-icon-margin-right"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json
index 7fa18169f0..9af587745d 100644
--- a/tokens/src/core/components/ProductTour.json
+++ b/tokens/src/core/components/ProductTour.json
@@ -4,13 +4,28 @@
     "product-tour": {
       "checkpoint": {
         "width": {
-          "border": { "source": "$checkpoint-border-width", "$value": "8px" },
-          "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" },
-          "max": { "source": "$checkpoint-max-width", "$value": "480px" }
+          "border": {
+            "$value": "8px",
+            "source": "$checkpoint-border-width"
+          },
+          "arrow": {
+            "$value": "15px",
+            "source": "$checkpoint-arrow-width"
+          },
+          "max": {
+            "$value": "480px",
+            "source": "$checkpoint-max-width"
+          }
         },
         "arrow": {
-          "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}" }
+          "top": {
+            "$value": "{size.product-tour.checkpoint.width.arrow}",
+            "source": "$checkpoint-arrow-border-top"
+          },
+          "transparent": {
+            "$value": "{size.product-tour.checkpoint.width.arrow}",
+            "source": "$checkpoint-arrow-border-transparent"
+          }
         }
       }
     }
@@ -19,8 +34,11 @@
     "$type": "ratio",
     "product-tour": {
       "checkpoint": {
-        "zindex": { "source": "$checkpoint-z-index", "$value": "1060" }
+        "zindex": {
+          "$value": "1060",
+          "source": "$checkpoint-z-index"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json
index 09a2edd5db..5b9843ec69 100644
--- a/tokens/src/core/components/ProgressBar.json
+++ b/tokens/src/core/components/ProgressBar.json
@@ -2,28 +2,49 @@
   "typography": {
     "$type": "dimension",
     "progress-bar": {
-      "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" }
+      "font-size": {
+        "$value": "calc({typography.font.size.base} * .75)",
+        "source": "$progress-font-size"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "progress-bar": {
       "height": {
-        "base": { "source": "$progress-height", "$value": "1rem" },
-        "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" }
+        "base": {
+          "$value": "1rem",
+          "source": "$progress-height"
+        },
+        "annotated": {
+          "$value": ".3125rem",
+          "source": "$annotated-progress-height"
+        }
       },
       "border": {
-        "width": { "source": "$progress-bar-border-width", "$value": "1px" },
-        "radius": { "source": "$progress-border-radius", "$value": "0" }
+        "width": {
+          "$value": "1px",
+          "source": "$progress-bar-border-width"
+        },
+        "radius": {
+          "$value": "0",
+          "source": "$progress-border-radius"
+        }
       },
-      "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" }
+      "threshold-circle": {
+        "$value": ".5625rem",
+        "source": "$progress-threshold-circle"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "progress-bar": {
       "hint": {
-        "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" }
+        "annotation-gap": {
+          "$value": ".5rem",
+          "source": "$progress-hint-annotation-gap"
+        }
       }
     }
   },
@@ -31,24 +52,19 @@
     "$type": "transition",
     "progress-bar": {
       "animation-timing": {
-        "source": "$progress-bar-animation-timing",
         "$value": {
-          "duration": "1s",
-          "timing-function": "linear",
-          "delay": "0s",
-          "iteration-count": "infinite"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$progress-bar-animation-timing"
       },
       "transition": {
-        "source": "$progress-bar-transition",
         "$value": {
-          "property": "width",
-          "duration": ".6s",
-          "timing-function": "ease",
-          "delay": "0s",
-          "behavior": "normal"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$progress-bar-transition"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json
index 795c27de0f..1a815c3978 100644
--- a/tokens/src/core/components/SearchField.json
+++ b/tokens/src/core/components/SearchField.json
@@ -4,18 +4,33 @@
     "search-field": {
       "border": {
         "width": {
-          "base": { "source": "$search-border-width", "$value": ".0625rem" },
-          "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" }
+          "base": {
+            "$value": ".0625rem",
+            "source": "$search-border-width"
+          },
+          "focus": {
+            "$value": ".3125rem",
+            "source": "$search-border-focus-width"
+          }
         },
-        "radius": { "source": "$search-border-radius", "$value": "0" }
+        "radius": {
+          "$value": "0",
+          "source": "$search-border-radius"
+        }
       },
-      "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }
+      "search-input-height": {
+        "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+        "source": "$input-height-search"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "search-field": {
-      "margin-button": { "source": "$search-button-margin", "$value": ".5rem" }
+      "margin-button": {
+        "$value": ".5rem",
+        "source": "$search-button-margin"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json
index b3b89e747b..6b2cd990cf 100644
--- a/tokens/src/core/components/SelectableBox.json
+++ b/tokens/src/core/components/SelectableBox.json
@@ -2,9 +2,18 @@
   "spacing": {
     "$type": "dimension",
     "selectable-box": {
-      "padding": { "source": "$selectable-box-padding", "$value": "1rem" },
-      "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" },
-      "box-space": { "source": "$selectable-box-space", "$value": ".75rem" }
+      "padding": {
+        "$value": "1rem",
+        "source": "$selectable-box-padding"
+      },
+      "border-radius": {
+        "$value": ".25rem",
+        "source": "$selectable-box-border-radius"
+      },
+      "box-space": {
+        "$value": ".75rem",
+        "source": "$selectable-box-space"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index 103e8f7f2c..0207e87bac 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -3,9 +3,15 @@
     "$type": "ratio",
     "sheet": {
       "zindex": {
-        "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" },
-        "main": { "source": "$zindex-sheet", "$value": "1032" }
+        "backdrop": {
+          "$value": "1031",
+          "source": "$zindex-sheet-backdrop"
+        },
+        "main": {
+          "$value": "1032",
+          "source": "$zindex-sheet"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json
index 4a086b811d..40fb188405 100644
--- a/tokens/src/core/components/Spinner.json
+++ b/tokens/src/core/components/Spinner.json
@@ -3,19 +3,40 @@
     "$type": "dimension",
     "spinner": {
       "base": {
-        "width": { "source": "$spinner-width", "$value": "2rem" },
-        "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" },
-        "border-width": { "source": "$spinner-border-width", "$value": ".25em" }
+        "width": {
+          "$value": "2rem",
+          "source": "$spinner-width"
+        },
+        "height": {
+          "$value": "{size.spinner.base.width}",
+          "source": "$spinner-height"
+        },
+        "border-width": {
+          "$value": ".25em",
+          "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" }
+        "width": {
+          "$value": "1rem",
+          "source": "$spinner-width-sm"
+        },
+        "height": {
+          "$value": "{size.spinner.sm.width}",
+          "source": "$spinner-height-sm"
+        },
+        "border-width": {
+          "$value": ".2em",
+          "source": "$spinner-border-width-sm"
+        }
       }
     }
   },
   "spacing": {
     "$type": "dimension",
-    "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" }
+    "vertical-align": {
+      "$value": ".125em",
+      "source": "$spinner-vertical-align"
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json
index 1a51bc842c..61c1e55117 100644
--- a/tokens/src/core/components/Stack.json
+++ b/tokens/src/core/components/Stack.json
@@ -2,7 +2,10 @@
   "size": {
     "$type": "dimension",
     "stack": {
-      "gap": { "source": "$stack-gap", "$value": "0" }
+      "gap": {
+        "$value": "0",
+        "source": "$stack-gap"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json
index f292871793..55ce33fad8 100644
--- a/tokens/src/core/components/Stepper.json
+++ b/tokens/src/core/components/Stepper.json
@@ -4,17 +4,35 @@
     "stepper": {
       "header": {
         "padding": {
-          "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" },
-          "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" }
+          "y": {
+            "$value": ".75rem",
+            "source": "$stepper-header-padding-y"
+          },
+          "x": {
+            "$value": "{spacing.spacer.base}",
+            "source": "$stepper-header-padding-x"
+          }
         },
         "step": {
-          "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" },
+          "padding": {
+            "$value": ".25rem",
+            "source": "$stepper-header-step-padding"
+          },
           "list": {
             "padding": {
-              "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" },
-              "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" }
+              "y": {
+                "$value": ".25rem",
+                "source": "$stepper-header-step-list-padding-y"
+              },
+              "x": {
+                "$value": "0",
+                "source": "$stepper-header-step-list-padding-x"
+              }
             },
-            "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" }
+            "margin": {
+              "$value": "0",
+              "source": "$stepper-header-step-list-margin"
+            }
           }
         }
       }
@@ -24,17 +42,30 @@
     "$type": "dimension",
     "stepper": {
       "header": {
-        "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" }
+        "height-min": {
+          "$value": "5.13rem",
+          "source": "$stepper-header-min-height"
+        }
       },
       "step": {
-        "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" },
-        "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" }
+        "width-min": {
+          "$value": "0",
+          "source": "$stepper-header-step-min-width"
+        },
+        "bubble-error-shadow-width": {
+          "$value": "3px",
+          "source": "$stepper-header-step-error-bubble-shadow-width"
+        }
       }
     }
   },
   "typography": {
     "spacer": {
-      "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" }
+      "line-height": {
+        "$type": "number",
+        "$value": "1px",
+        "source": "$stepper-header-line-height"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json
index e85f22aca8..8cc73c5d9c 100644
--- a/tokens/src/core/components/Sticky.json
+++ b/tokens/src/core/components/Sticky.json
@@ -2,7 +2,10 @@
   "spacing": {
     "$type": "dimension",
     "sticky": {
-      "offset": { "source": "$sticky-offset", "$value": "0" }
+      "offset": {
+        "$value": "0",
+        "source": "$sticky-offset"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json
index 6bc272e388..8769edd6d2 100644
--- a/tokens/src/core/components/Tab.json
+++ b/tokens/src/core/components/Tab.json
@@ -3,18 +3,39 @@
     "$type": "dimension",
     "tab": {
       "more-link-dropdown-toggle": {
-        "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}" }
+        "padding-x": {
+          "$value": ".7rem",
+          "source": "$tab-more-link-dropdown-toggle-padding-x"
+        },
+        "padding-y": {
+          "$value": "{spacing.spacer.base}",
+          "source": "$tab-more-link-dropdown-toggle-padding-y"
+        }
       },
       "inverse-pills-link-dropdown-toggle": {
-        "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}" }
+        "padding-x": {
+          "$value": ".625rem",
+          "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x"
+        },
+        "padding-y": {
+          "$value": "{spacing.spacer.base}",
+          "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y"
+        }
       },
       "inverse-tabs-link-dropdown-toggle": {
-        "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" }
+        "padding-x": {
+          "$value": ".625rem",
+          "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x"
+        },
+        "padding-y": {
+          "$value": "{spacing.spacer.base}",
+          "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y"
+        },
+        "distance": {
+          "$value": "5px",
+          "source": "$tab-inverse-pills-link-dropdown-distance"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json
index 7670ff130a..1610680d7e 100644
--- a/tokens/src/core/components/Tabs.json
+++ b/tokens/src/core/components/Tabs.json
@@ -3,8 +3,14 @@
     "$type": "dimension",
     "tabs": {
       "notification": {
-        "height": { "source": "$tab-notification-height", "$value": "1rem" },
-        "width": { "source": "$tab-notification-width", "$value": "1rem" }
+        "height": {
+          "$value": "1rem",
+          "source": "$tab-notification-height"
+        },
+        "width": {
+          "$value": "1rem",
+          "source": "$tab-notification-width"
+        }
       }
     }
   },
@@ -12,8 +18,11 @@
     "$type": "dimension",
     "tabs": {
       "notification": {
-        "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" }
+        "font-size": {
+          "$value": "{typography.font.size.xs}",
+          "source": "$tab-notification-font-size"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json
index 5da5d6e1fe..ad4eb1fd49 100644
--- a/tokens/src/core/components/Toast.json
+++ b/tokens/src/core/components/Toast.json
@@ -2,16 +2,28 @@
   "typography": {
     "$type": "dimension",
     "toast": {
-      "font-size": { "source": "$toast-font-size", "$value": ".875rem" }
+      "font-size": {
+        "$value": ".875rem",
+        "source": "$toast-font-size"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "toast": {
-      "max-width": { "source": "$toast-max-width", "$value": "400px" },
+      "max-width": {
+        "$value": "400px",
+        "source": "$toast-max-width"
+      },
       "border": {
-        "width": { "source": "$toast-border-width", "$value": "1px" },
-        "radius": { "source": "$toast-border-radius", "$value": ".25rem" }
+        "width": {
+          "$value": "1px",
+          "source": "$toast-border-width"
+        },
+        "radius": {
+          "$value": ".25rem",
+          "source": "$toast-border-radius"
+        }
       }
     }
   },
@@ -19,15 +31,27 @@
     "$type": "dimension",
     "toast": {
       "padding": {
-        "x": { "source": "$toast-padding-x", "$value": ".75rem" },
-        "y": { "source": "$toast-padding-y", "$value": ".25rem" }
+        "x": {
+          "$value": ".75rem",
+          "source": "$toast-padding-x"
+        },
+        "y": {
+          "$value": ".25rem",
+          "source": "$toast-padding-y"
+        }
       },
       "container": {
         "gutter": {
-          "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" },
-          "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" }
+          "lg": {
+            "$value": "1.25rem",
+            "source": "$toast-container-gutter-lg"
+          },
+          "sm": {
+            "$value": ".625rem",
+            "source": "$toast-container-gutter-sm"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json
index 1df0b65bdc..6c8be3aeef 100644
--- a/tokens/src/core/components/Tooltip.json
+++ b/tokens/src/core/components/Tooltip.json
@@ -2,34 +2,61 @@
   "typography": {
     "$type": "dimension",
     "tooltip": {
-      "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" }
+      "font-size": {
+        "$value": "{typography.font.size.sm}",
+        "source": "$tooltip-font-size"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "tooltip": {
       "padding": {
-        "y": { "source": "$tooltip-padding-y", "$value": ".5rem" },
-        "x": { "source": "$tooltip-padding-x", "$value": ".5rem" }
+        "y": {
+          "$value": ".5rem",
+          "source": "$tooltip-padding-y"
+        },
+        "x": {
+          "$value": ".5rem",
+          "source": "$tooltip-padding-x"
+        }
       },
-      "margin": { "source": "$tooltip-margin", "$value": "0" }
+      "margin": {
+        "$value": "0",
+        "source": "$tooltip-margin"
+      }
     }
   },
   "elevation": {
     "$type": "ratio",
     "tooltip": {
-      "zindex": { "source": "$zindex-tooltip", "$value": "1070" }
+      "zindex": {
+        "$value": "1070",
+        "source": "$zindex-tooltip"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "tooltip": {
-      "max-width": { "source": "$tooltip-max-width", "$value": "200px" },
+      "max-width": {
+        "$value": "200px",
+        "source": "$tooltip-max-width"
+      },
       "arrow": {
-        "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" },
-        "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" }
+        "height": {
+          "$value": ".4rem",
+          "source": "$tooltip-arrow-height"
+        },
+        "width": {
+          "$value": ".8rem",
+          "source": "$tooltip-arrow-width"
+        }
       },
-      "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" }
+      "border-radius": {
+        "$value": "{size.border.radius.base}",
+        "source": "$tooltip-border-radius"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
index cb713a455c..4118b47af9 100644
--- a/tokens/src/core/components/general/caret.json
+++ b/tokens/src/core/components/general/caret.json
@@ -2,14 +2,23 @@
   "size": {
     "$type": "dimension",
     "caret": {
-      "width": { "source": "$caret-width", "$value": ".3em" }
+      "width": {
+        "$value": ".3em",
+        "source": "$caret-width"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "caret": {
-      "base": { "source": "$caret-spacing", "$value": ".255em" },
-      "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" }
+      "base": {
+        "$value": ".255em",
+        "source": "$caret-spacing"
+      },
+      "vertical-align": {
+        "$value": ".255em",
+        "source": "$caret-vertical-align"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
index c631e3d2d6..ec5213bc3a 100644
--- a/tokens/src/core/components/general/headings.json
+++ b/tokens/src/core/components/general/headings.json
@@ -2,16 +2,31 @@
   "typography": {
     "headings": {
       "font": {
-        "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" },
-        "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
+        "family": {
+          "$type": "fontFamily",
+          "$value": "inherit",
+          "source": "$headings-font-family"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.bold}",
+          "source": "$headings-font-weight"
+        }
       },
-      "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" }
+      "line-height": {
+        "$type": "number",
+        "$value": "1.25",
+        "source": "$headings-line-height"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "headings": {
-      "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" }
+      "margin-bottom": {
+        "$value": ".5rem",
+        "source": "$headings-margin-bottom"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json
index baeb366d2d..200c4e421b 100644
--- a/tokens/src/core/components/general/hr.json
+++ b/tokens/src/core/components/general/hr.json
@@ -3,9 +3,15 @@
     "$type": "dimension",
     "hr": {
       "border": {
-        "width": { "source": "$hr-border-width", "$value": "{size.border.width}" },
-        "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" }
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$hr-border-width"
+        },
+        "margin-y": {
+          "$value": "{spacing.spacer.base}",
+          "source": "$hr-margin-y"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
index 0bdc756950..6ac8138f6e 100644
--- a/tokens/src/core/components/general/input.json
+++ b/tokens/src/core/components/general/input.json
@@ -3,19 +3,41 @@
     "input": {
       "btn": {
         "font": {
-          "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" },
+          "family": {
+            "$type": "fontFamily",
+            "$value": "inherit",
+            "source": "$input-btn-font-family"
+          },
           "size": {
             "$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" }
+            "base": {
+              "$value": "1.125rem",
+              "source": "$input-btn-font-size"
+            },
+            "sm": {
+              "$value": ".875rem",
+              "source": "$input-btn-font-size-sm"
+            },
+            "lg": {
+              "$value": "1.325rem",
+              "source": "$input-btn-font-size-lg"
+            }
           }
         },
         "line-height": {
           "$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}" }
+          "base": {
+            "$value": "1.3333",
+            "source": "$input-btn-line-height"
+          },
+          "sm": {
+            "$value": "1.4286",
+            "source": "$input-btn-line-height-sm"
+          },
+          "lg": {
+            "$value": "{typography.line-height.lg}",
+            "source": "$input-btn-line-height-lg"
+          }
         }
       }
     }
@@ -25,15 +47,33 @@
     "input": {
       "btn": {
         "padding": {
-          "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" },
-          "x": { "source": "$input-btn-padding-x", "$value": "1rem" },
+          "y": {
+            "$value": ".5625rem",
+            "source": "$input-btn-padding-y"
+          },
+          "x": {
+            "$value": "1rem",
+            "source": "$input-btn-padding-x"
+          },
           "sm": {
-            "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" },
-            "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" }
+            "y": {
+              "$value": ".4375rem",
+              "source": "$input-btn-padding-y-sm"
+            },
+            "x": {
+              "$value": ".75rem",
+              "source": "$input-btn-padding-x-sm"
+            }
           },
           "lg": {
-            "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" },
-            "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" }
+            "y": {
+              "$value": ".6875rem",
+              "source": "$input-btn-padding-y-lg"
+            },
+            "x": {
+              "$value": "1.25rem",
+              "source": "$input-btn-padding-x-lg"
+            }
           }
         }
       }
@@ -43,9 +83,15 @@
     "$type": "dimension",
     "input": {
       "btn": {
-        "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" },
-        "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" }
+        "border-width": {
+          "$value": "{size.border.width}",
+          "source": "$input-btn-border-width"
+        },
+        "focus-width": {
+          "$value": "1px",
+          "source": "$input-btn-focus-width"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json
index 8b6e4d34bb..a936eaaf07 100644
--- a/tokens/src/core/components/general/link.json
+++ b/tokens/src/core/components/general/link.json
@@ -3,29 +3,65 @@
     "link": {
       "decoration": {
         "$type": "textDecoration",
-        "base": { "source": "$link-decoration", "$value": "none" },
-        "hover": { "source": "$link-hover-decoration", "$value": "underline" },
+        "base": {
+          "$value": "none",
+          "source": "$link-decoration"
+        },
+        "hover": {
+          "$value": "underline",
+          "source": "$link-hover-decoration"
+        },
         "inline": {
-          "base": { "source": "$inline-link-decoration", "$value": "underline" },
-          "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" }
+          "base": {
+            "$value": "underline",
+            "source": "$inline-link-decoration"
+          },
+          "hover": {
+            "$value": "underline",
+            "source": "$inline-link-hover-decoration"
+          }
         },
         "muted": {
-          "base": { "source": "$muted-link-decoration", "$value": "none" },
-          "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" },
+          "base": {
+            "$value": "none",
+            "source": "$muted-link-decoration"
+          },
+          "hover": {
+            "$value": "underline",
+            "source": "$muted-link-hover-decoration"
+          },
           "inline": {
-            "base": { "source": "$muted-inline-link-decoration", "$value": "underline" },
-            "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" }
+            "base": {
+              "$value": "underline",
+              "source": "$muted-inline-link-decoration"
+            },
+            "hover": {
+              "$value": "underline",
+              "source": "$muted-inline-link-hover-decoration"
+            }
           }
         },
         "brand": {
-          "base": { "source": "$brand-link-decoration", "$value": "none" },
-          "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" },
+          "base": {
+            "$value": "none",
+            "source": "$brand-link-decoration"
+          },
+          "hover": {
+            "$value": "underline",
+            "source": "$brand-link-hover-decoration"
+          },
           "inline": {
-            "base": { "source": "$brand-inline-link-decoration", "$value": "underline" },
-            "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" }
+            "base": {
+              "$value": "underline",
+              "source": "$brand-inline-link-decoration"
+            },
+            "hover": {
+              "$value": "underline",
+              "source": "$brand-inline-link-hover-decoration"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json
index 071f3b6a05..7eeb056a07 100644
--- a/tokens/src/core/components/general/list.json
+++ b/tokens/src/core/components/general/list.json
@@ -2,17 +2,29 @@
   "typography": {
     "$type": "fontWeight",
     "dt": {
-      "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" }
+      "font-weight": {
+        "$value": "{typography.font.weight.bold}",
+        "source": "$dt-font-weight"
+      }
     }
   },
   "spacing": {
     "$type": "dimension",
     "list": {
-      "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" },
+      "inline-padding": {
+        "$value": ".5rem",
+        "source": "$list-inline-padding"
+      },
       "group-item": {
         "padding": {
-          "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" },
-          "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" }
+          "y": {
+            "$value": ".75rem",
+            "source": "$list-group-item-padding-y"
+          },
+          "x": {
+            "$value": "1.25rem",
+            "source": "$list-group-item-padding-x"
+          }
         }
       }
     }
@@ -21,9 +33,15 @@
     "$type": "dimension",
     "list-group": {
       "border": {
-        "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" },
-        "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" }
+        "width": {
+          "$value": "{size.border.width}",
+          "source": "$list-group-border-width"
+        },
+        "radius": {
+          "$value": "{size.border.radius.base}",
+          "source": "$list-group-border-radius"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json
index 4a2f13eb2d..aa69e0a425 100644
--- a/tokens/src/core/components/general/text.json
+++ b/tokens/src/core/components/general/text.json
@@ -2,17 +2,29 @@
   "spacing": {
     "$type": "dimension",
     "paragraph": {
-      "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" }
+      "margin-bottom": {
+        "$value": "1rem",
+        "source": "$paragraph-margin-bottom"
+      }
     },
-    "mark-padding": { "source": "$mark-padding", "$value": ".2em" }
+    "mark-padding": {
+      "$value": ".2em",
+      "source": "$mark-padding"
+    }
   },
   "typography": {
     "$type": "dimension",
     "blockquote": {
       "small": {
-        "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" }
+        "font-size": {
+          "$value": "{typography.font.size.sm}",
+          "source": "$blockquote-small-font-size"
+        }
       },
-      "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
+      "font-size": {
+        "$value": "calc({typography.font.size.base} * 1.25)",
+        "source": "$blockquote-font-size"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json
index df668415a4..2b88b1e4f7 100644
--- a/tokens/src/core/global/elevation.json
+++ b/tokens/src/core/global/elevation.json
@@ -3,7 +3,11 @@
     "$type": "ratio",
     "zindex": {
       "0": {
-        "$value": 0,
+        "$value": {
+          "reorderedData": 0,
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
         "$description": "z-index of level 0."
       },
       "200": {
@@ -47,15 +51,15 @@
         "$description": "z-index of level 2000."
       },
       "sticky": {
-        "source": "$zindex-sticky",
         "$value": 1020,
-        "$description": "z-index for sticky element."
+        "$description": "z-index for sticky element.",
+        "source": "$zindex-sticky"
       },
       "fixed": {
-        "source": "$zindex-fixed",
         "$value": 1030,
-        "$description": "z-index of for fixed element."
+        "$description": "z-index of for fixed element.",
+        "source": "$zindex-fixed"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json
index 5ea9056694..0824e07568 100644
--- a/tokens/src/core/global/other.json
+++ b/tokens/src/core/global/other.json
@@ -2,7 +2,7 @@
   "yiq-contrasted-threshold": 128,
   "theme-interval": {
     "$type": "percentage",
-    "source": "$theme-color-interval",
-    "$value": "8%"
+    "$value": "8%",
+    "source": "$theme-color-interval"
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index fb48d6a6b3..6a2aaedac5 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -31,9 +31,9 @@
         "$description": "Space value of level 6"
       },
       "base": {
-        "source": "$spacer",
         "$value": "1rem",
-        "$description": "Basic space value"
+        "$description": "Basic space value",
+        "source": "$spacer"
       },
       "1.5": {
         "$value": "calc({spacing.spacer.base} * .375)",
@@ -58,33 +58,33 @@
     },
     "label": {
       "margin-bottom": {
-        "source": "$label-margin-bottom",
         "$value": ".5rem",
-        "$description": "Margin bottom for label."
+        "$description": "Margin bottom for label.",
+        "source": "$label-margin-bottom"
       }
     },
     "table": {
       "cell": {
         "padding": {
           "base": {
-            "source": "$table-cell-padding",
             "$value": ".75rem",
-            "$description": "Padding for tables."
+            "$description": "Padding for tables.",
+            "source": "$table-cell-padding"
           },
           "sm": {
-            "source": "$table-cell-padding-sm",
             "$value": ".3rem",
-            "$description": "Padding sm for tables."
+            "$description": "Padding sm for tables.",
+            "source": "$table-cell-padding-sm"
           }
         }
       }
     },
     "grid": {
       "gutter-width": {
-        "source": "$grid-gutter-width",
         "$value": "24px",
-        "$description": "Grid gutter width value."
+        "$description": "Grid gutter width value.",
+        "source": "$grid-gutter-width"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
index 657ee85e2f..e57c7b468a 100644
--- a/tokens/src/core/global/transition.json
+++ b/tokens/src/core/global/transition.json
@@ -2,50 +2,38 @@
   "transition": {
     "$type": "transition",
     "base": {
-      "source": "$transition-base",
       "$value": {
-        "property": "all",
-        "duration": ".2s",
-        "timing-function": "ease-in-out",
-        "delay": "0s",
-        "behavior": "normal"
+        "isKeyOrderMismatched": false,
+        "mismatches": {}
       },
-      "$description": "Generic transition for any property change"
+      "$description": "Generic transition for any property change",
+      "source": "$transition-base"
     },
     "fade": {
-      "source": "$transition-fade",
       "$value": {
-        "property": "opacity",
-        "duration": ".15s",
-        "timing-function": "linear",
-        "delay": "0s",
-        "behavior": "normal"
+        "isKeyOrderMismatched": false,
+        "mismatches": {}
       },
-      "$description": "Opacity transition that takes 150ms"
+      "$description": "Opacity transition that takes 150ms",
+      "source": "$transition-fade"
     },
     "collapse": {
       "height": {
-        "source": "$transition-collapse",
         "$value": {
-          "property": "height",
-          "duration": ".35s",
-          "timing-function": "ease",
-          "delay": "0s",
-          "behavior": "normal"
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
         },
-        "$description": "Collapse transition for height that takes 350ms"
+        "$description": "Collapse transition for height that takes 350ms",
+        "source": "$transition-collapse"
       },
       "width": {
-        "source": "$transition-collapse-width",
         "$value": {
-          "property": "width",
-          "duration": ".35s",
-          "timing-function": "ease",
-          "delay": "0s",
-          "behavior": "normal"
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
         },
-        "$description": "Collapse transition for width that takes 350ms"
+        "$description": "Collapse transition for width that takes 350ms",
+        "source": "$transition-collapse-width"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index 0dec9157f8..98436242f6 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -4,155 +4,160 @@
       "family": {
         "$type": "fontFamily",
         "base": {
-          "source": "$font-family-base",
           "$value": "{typography.font.family.sans.serif}",
-          "$description": "Basic font family."
+          "$description": "Basic font family.",
+          "source": "$font-family-base"
         },
         "sans": {
           "serif": {
-            "source": "$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"],
-            "$description": "Sans-serif font family."
+            "$value": {
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "$description": "Sans-serif font family.",
+            "source": "$font-family-sans-serif"
           }
         },
         "serif": {
-          "source": "$font-family-serif",
           "$value": "serif",
-          "$description": "Serif font family."
+          "$description": "Serif font family.",
+          "source": "$font-family-serif"
         },
         "monospace": {
-          "source": "$font-family-monospace",
-          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
-          "$description": "Monospace font family."
+          "$value": {
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "$description": "Monospace font family.",
+          "source": "$font-family-monospace"
         }
       },
       "size": {
         "$type": "dimension",
         "base": {
-          "source": "$font-size-base",
           "$value": "1.125rem",
-          "$description": "Base font size."
+          "$description": "Base font size.",
+          "source": "$font-size-base"
         },
         "lg": {
-          "source": "$lead-font-size",
           "$value": "calc({typography.font.size.base} * 1.25)",
-          "$description": "Lead text font size."
+          "$description": "Lead text font size.",
+          "source": "$lead-font-size"
         },
         "sm": {
-          "source": "$small-font-size",
           "$value": "87.5%",
-          "$description": "Small font size."
+          "$description": "Small font size.",
+          "source": "$small-font-size"
         },
         "xs": {
-          "source": "$x-small-font-size",
           "$value": "75%",
-          "$description": "X-small font size."
+          "$description": "X-small font size.",
+          "source": "$x-small-font-size"
         },
         "micro": {
-          "source": "$micro-font-size",
-          "$value": ".688rem",
           "$type": "dimension",
-          "$description": "Micro utils text font size."
+          "$value": ".688rem",
+          "$description": "Micro utils text font size.",
+          "source": "$micro-font-size"
         },
         "h1": {
           "base": {
-            "source": "$h1-font-size",
             "$value": "2.5rem",
-            "$description": "Base font size of heading level 1."
+            "$description": "Base font size of heading level 1.",
+            "source": "$h1-font-size"
           },
           "mobile": {
-            "source": "$h1-mobile-font-size",
             "$value": "2.25rem",
-            "$description": "Mobile font size of heading level 1."
+            "$description": "Mobile font size of heading level 1.",
+            "source": "$h1-mobile-font-size"
           }
         },
         "h2": {
           "base": {
-            "source": "$h2-font-size",
             "$value": "2rem",
-            "$description": "Font size of heading level 2."
+            "$description": "Font size of heading level 2.",
+            "source": "$h2-font-size"
           },
           "mobile": {
-            "source": "$h2-mobile-font-size",
             "$value": "{typography.font.size.h2.base}",
-            "$description": "Mobile font size of heading level 2."
+            "$description": "Mobile font size of heading level 2.",
+            "source": "$h2-mobile-font-size"
           }
         },
         "h3": {
           "base": {
-            "source": "$h3-font-size",
             "$value": "1.375rem",
-            "$description": "Font size of heading level 3."
+            "$description": "Font size of heading level 3.",
+            "source": "$h3-font-size"
           },
           "mobile": {
-            "source": "$h3-mobile-font-size",
             "$value": "{typography.font.size.h3.base}",
-            "$description": "Mobile font size of heading level 3."
+            "$description": "Mobile font size of heading level 3.",
+            "source": "$h3-mobile-font-size"
           }
         },
         "h4": {
           "base": {
-            "source": "$h4-font-size",
             "$value": "1.125rem",
-            "$description": "Font size of heading level 4."
+            "$description": "Font size of heading level 4.",
+            "source": "$h4-font-size"
           },
           "mobile": {
-            "source": "$h4-mobile-font-size",
             "$value": "{typography.font.size.h4.base}",
-            "$description": "Mobile font size of heading level 4."
+            "$description": "Mobile font size of heading level 4.",
+            "source": "$h4-mobile-font-size"
           }
         },
         "h5": {
           "base": {
-            "source": "$h5-font-size",
             "$value": ".875rem",
-            "$description": "Font size of heading level 5."
+            "$description": "Font size of heading level 5.",
+            "source": "$h5-font-size"
           },
           "mobile": {
-            "source": "$h5-mobile-font-size",
             "$value": "{typography.font.size.h5.base}",
-            "$description": "Mobile font size of heading level 5."
+            "$description": "Mobile font size of heading level 5.",
+            "source": "$h5-mobile-font-size"
           }
         },
         "h6": {
           "base": {
-            "source": "$h6-font-size",
             "$value": ".75rem",
-            "$description": "Font size of heading level 6."
+            "$description": "Font size of heading level 6.",
+            "source": "$h6-font-size"
           },
           "mobile": {
-            "source": "$h6-mobile-font-size",
             "$value": "{typography.font.size.h6.base}",
-            "$description": "Mobile font size of heading level 6."
+            "$description": "Mobile font size of heading level 6.",
+            "source": "$h6-mobile-font-size"
           }
         },
         "display": {
           "1": {
-            "source": "$display1-size",
             "$value": "3.75rem",
-            "$description": "Font size for heading of level 1."
+            "$description": "Font size for heading of level 1.",
+            "source": "$display1-size"
           },
           "2": {
-            "source": "$display2-size",
             "$value": "4.875rem",
-            "$description": "Font size for heading of level 2."
+            "$description": "Font size for heading of level 2.",
+            "source": "$display2-size"
           },
           "3": {
-            "source": "$display3-size",
             "$value": "5.625rem",
-            "$description": "Font size for heading of level 3."
+            "$description": "Font size for heading of level 3.",
+            "source": "$display3-size"
           },
           "4": {
-            "source": "$display4-size",
             "$value": "7.5rem",
-            "$description": "Font size for heading of level 4."
+            "$description": "Font size for heading of level 4.",
+            "source": "$display4-size"
           },
           "mobile": {
             "1": {
-              "source": "$display-mobile-size",
               "$value": "3.25rem",
-              "$description": "Mobile font size for heading of level 1."
+              "$description": "Mobile font size for heading of level 1.",
+              "source": "$display-mobile-size"
             },
             "2": {
               "$value": "{typography.font.size.display.mobile.1}",
@@ -172,72 +177,72 @@
       "weight": {
         "$type": "fontWeight",
         "lighter": {
-          "source": "$font-weight-lighter",
           "$value": "lighter",
-          "$description": "Lighter font weight."
+          "$description": "Lighter font weight.",
+          "source": "$font-weight-lighter"
         },
         "light": {
-          "source": "$font-weight-light",
           "$value": "300",
-          "$description": "Light font weight."
+          "$description": "Light font weight.",
+          "source": "$font-weight-light"
         },
         "normal": {
-          "source": "$font-weight-normal",
           "$value": "400",
-          "$description": "Normal font weight."
+          "$description": "Normal font weight.",
+          "source": "$font-weight-normal"
         },
         "semi": {
           "bold": {
-            "source": "$font-weight-semi-bold",
             "$value": "500",
-            "$description": "Semi-bold font weight."
+            "$description": "Semi-bold font weight.",
+            "source": "$font-weight-semi-bold"
           }
         },
         "bold": {
-          "source": "$font-weight-bold",
           "$value": "700",
-          "$description": "Bold font weight."
+          "$description": "Bold font weight.",
+          "source": "$font-weight-bold"
         },
         "bolder": {
-          "source": "$font-weight-bolder",
           "$value": "bolder",
-          "$description": "Bolder font weight."
+          "$description": "Bolder font weight.",
+          "source": "$font-weight-bolder"
         },
         "base": {
-          "source": "$font-weight-base",
           "$value": "{typography.font.weight.normal}",
-          "$description": "Basic font weight."
+          "$description": "Basic font weight.",
+          "source": "$font-weight-base"
         },
         "lead": {
-          "source": "$lead-font-weight",
           "$value": "inherit",
-          "$description": "Lead text font weight."
+          "$description": "Lead text font weight.",
+          "source": "$lead-font-weight"
         },
         "table-th": {
-          "source": "$table-th-font-weight",
           "$value": "bold",
-          "$description": "Table th font weight."
+          "$description": "Table th font weight.",
+          "source": "$table-th-font-weight"
         },
         "display": {
           "1": {
-            "source": "$display1-weight",
             "$value": "{typography.font.weight.bold}",
-            "$description": "Font weight of display level 1."
+            "$description": "Font weight of display level 1.",
+            "source": "$display1-weight"
           },
           "2": {
-            "source": "$display2-weight",
             "$value": "{typography.font.weight.bold}",
-            "$description": "Font weight of display level 2."
+            "$description": "Font weight of display level 2.",
+            "source": "$display2-weight"
           },
           "3": {
-            "source": "$display3-weight",
             "$value": "{typography.font.weight.bold}",
-            "$description": "Font weight of display level 3."
+            "$description": "Font weight of display level 3.",
+            "source": "$display3-weight"
           },
           "4": {
-            "source": "$display4-weight",
             "$value": "{typography.font.weight.bold}",
-            "$description": "Font weight of display level 4."
+            "$description": "Font weight of display level 4.",
+            "source": "$display4-weight"
           }
         }
       }
@@ -245,42 +250,42 @@
     "line-height": {
       "$type": "number",
       "base": {
-        "source": "$line-height-base",
         "$value": "1.5556",
-        "$description": "Basic line height."
+        "$description": "Basic line height.",
+        "source": "$line-height-base"
       },
       "lg": {
-        "source": "$line-height-lg",
         "$value": "1.5",
-        "$description": "Large line height."
+        "$description": "Large line height.",
+        "source": "$line-height-lg"
       },
       "sm": {
-        "source": "$line-height-sm",
         "$value": "1.5",
-        "$description": "Small line height."
+        "$description": "Small line height.",
+        "source": "$line-height-sm"
       },
       "micro": {
-        "source": "$micro-line-height",
         "$value": ".938rem",
-        "$description": "Micro utils line height."
+        "$description": "Micro utils line height.",
+        "source": "$micro-line-height"
       },
       "display": {
         "base": {
-          "source": "$display-line-height",
           "$value": "1",
-          "$description": "Standard display line height."
+          "$description": "Standard display line height.",
+          "source": "$display-line-height"
         },
         "mobile": {
-          "source": "$display-mobile-line-height",
           "$value": "3.5rem",
-          "$description": "Mobile display line height."
+          "$description": "Mobile display line height.",
+          "source": "$display-mobile-line-height"
         }
       }
     },
     "print-page-size": {
-      "source": "$print-page-size",
+      "$type": "dimension",
       "$value": "a3",
-      "$type": "dimension"
+      "source": "$print-page-size"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index e945ebcfe6..a13ae601b6 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -2,33 +2,54 @@
   "color": {
     "$type": "color",
     "bg": {
-      "base": { "$value": "{color.white}", "$description": "Basic background color." },
+      "base": {
+        "$value": "{color.white}",
+        "$description": "Basic background color."
+      },
       "active": {
-        "source": "$component-active-bg",
         "$value": "{color.primary.500}",
-        "$description": "Active background color."
+        "$description": "Active background color.",
+        "source": "$component-active-bg"
       }
     },
     "text": {
       "50": {
         "black": {
-          "source": "$text-black-50",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
           "$value": "{color.black}",
-          "$description": "Black text color with transparency of 50%."
+          "$description": "Black text color with transparency of 50%.",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$text-black-50"
         },
         "white": {
-          "source": "$text-white-50",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
           "$value": "{color.white}",
-          "$description": "White text color with transparency of 50%."
+          "$description": "White text color with transparency of 50%.",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$text-white-50"
         }
       }
     },
     "active": {
-      "source": "$component-active-color",
       "$value": "{color.white}",
-      "$description": "Color for active element."
+      "$description": "Color for active element.",
+      "source": "$component-active-color"
     },
     "disabled": {
       "$value": "{color.gray.500}",
@@ -42,20 +63,20 @@
     },
     "table": {
       "caption": {
-        "source": "$table-caption-color",
         "$value": "{color.text-muted}",
-        "$description": "Table caption color."
+        "$description": "Table caption color.",
+        "source": "$table-caption-color"
       },
       "border": {
-        "source": "$table-border-color",
         "$value": "{color.border}",
-        "$description": "Table border color."
+        "$description": "Table border color.",
+        "source": "$table-border-color"
       }
     },
     "border": {
-      "source": "$border-color",
       "$value": "{color.gray.200}",
-      "$description": "Border color."
+      "$description": "Border color.",
+      "source": "$border-color"
     },
     "theme": {
       "bg": {
@@ -312,4 +333,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json
index ffb40b3c53..9628fea99e 100644
--- a/tokens/src/themes/light/components/Alert.json
+++ b/tokens/src/themes/light/components/Alert.json
@@ -2,26 +2,68 @@
   "color": {
     "$type": "color",
     "alert": {
-      "title": { "source": "$alert-title-color", "$value": "{color.black}" },
-      "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
+      "title": {
+        "$value": "{color.black}",
+        "source": "$alert-title-color"
+      },
+      "content": {
+        "$value": "{color.gray.700}",
+        "source": "$alert-content-color"
+      },
       "icon": {
-        "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}" }
+        "success": {
+          "$value": "{color.theme.default.success}",
+          "source": "$alert-success-icon-color"
+        },
+        "info": {
+          "$value": "{color.theme.default.info}",
+          "source": "$alert-info-icon-color"
+        },
+        "danger": {
+          "$value": "{color.theme.default.danger}",
+          "source": "$alert-danger-icon-color"
+        },
+        "warning": {
+          "$value": "{color.theme.default.warning}",
+          "source": "$alert-warning-icon-color"
+        }
       },
       "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}" }
+        "success": {
+          "$value": "{color.theme.bg.success}",
+          "source": "$alert-success-bg"
+        },
+        "info": {
+          "$value": "{color.theme.bg.info}",
+          "source": "$alert-info-bg"
+        },
+        "danger": {
+          "$value": "{color.theme.bg.danger}",
+          "source": "$alert-danger-bg"
+        },
+        "warning": {
+          "$value": "{color.theme.bg.warning}",
+          "source": "$alert-warning-bg"
+        }
       },
       "border": {
-        "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}" }
+        "success": {
+          "$value": "{color.theme.border.success}",
+          "source": "$alert-success-border-color"
+        },
+        "info": {
+          "$value": "{color.theme.border.info}",
+          "source": "$alert-info-border-color"
+        },
+        "danger": {
+          "$value": "{color.theme.border.danger}",
+          "source": "$alert-danger-border-color"
+        },
+        "warning": {
+          "$value": "{color.theme.border.warning}",
+          "source": "$alert-warning-border-color"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index 2bad75960e..012beec4c8 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -3,21 +3,29 @@
     "$type": "shadow",
     "annotation": {
       "box-shadow": {
-        "source": "$annotation-box-shadow",
         "$value": [
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": "2px",
-            "blur": "4px"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "2px",
+              "blur": "4px"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": "2px",
-            "blur": "8px"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "2px",
+              "blur": "8px"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
-        ]
+        ],
+        "source": "$annotation-box-shadow"
       }
     }
   },
@@ -25,19 +33,49 @@
     "$type": "color",
     "annotation": {
       "text": {
-        "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}" }
+        "success": {
+          "$value": "{color.white}",
+          "source": "$annotation-success-color"
+        },
+        "warning": {
+          "$value": "{color.black}",
+          "source": "$annotation-warning-color"
+        },
+        "error": {
+          "$value": "{color.white}",
+          "source": "$annotation-error-color"
+        },
+        "light": {
+          "$value": "{color.primary.500}",
+          "source": "$annotation-light-color"
+        },
+        "dark": {
+          "$value": "{color.white}",
+          "source": "$annotation-dark-color"
+        }
       },
       "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}" }
+        "success": {
+          "$value": "{color.success.base}",
+          "source": "$annotation-success-bg"
+        },
+        "warning": {
+          "$value": "{color.accent.b}",
+          "source": "$annotation-warning-bg"
+        },
+        "error": {
+          "$value": "{color.danger.base}",
+          "source": "$annotation-error-bg"
+        },
+        "light": {
+          "$value": "{color.white}",
+          "source": "$annotation-light-bg"
+        },
+        "dark": {
+          "$value": "{color.dark.base}",
+          "source": "$annotation-dark-bg"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json
index 0eca2c6651..0179c60eba 100644
--- a/tokens/src/themes/light/components/Badge.json
+++ b/tokens/src/themes/light/components/Badge.json
@@ -3,119 +3,407 @@
     "$type": "color",
     "badge": {
       "text": {
-        "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}" }
+        "primary": {
+          "$value": "{color.primary.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-primary-color"
+        },
+        "secondary": {
+          "$value": "{color.secondary.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-secondary-color"
+        },
+        "success": {
+          "$value": "{color.success.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-success-color"
+        },
+        "danger": {
+          "$value": "{color.danger.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-danger-color"
+        },
+        "warning": {
+          "$value": "{color.warning.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-warning-color"
+        },
+        "info": {
+          "$value": "{color.info.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-info-color"
+        },
+        "light": {
+          "$value": "{color.light.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-light-color"
+        },
+        "dark": {
+          "$value": "{color.dark.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$badge-dark-color"
+        }
       },
       "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}" }
+        "primary": {
+          "$value": "{color.primary.base}",
+          "source": "$badge-primary-bg"
+        },
+        "secondary": {
+          "$value": "{color.secondary.base}",
+          "source": "$badge-secondary-bg"
+        },
+        "success": {
+          "$value": "{color.success.base}",
+          "source": "$badge-success-bg"
+        },
+        "warning": {
+          "$value": "{color.warning.base}",
+          "source": "$badge-warning-bg"
+        },
+        "danger": {
+          "$value": "{color.danger.base}",
+          "source": "$badge-danger-bg"
+        },
+        "info": {
+          "$value": "{color.info.base}",
+          "source": "$badge-info-bg"
+        },
+        "light": {
+          "$value": "{color.light.base}",
+          "source": "$badge-light-bg"
+        },
+        "dark": {
+          "$value": "{color.dark.base}",
+          "source": "$badge-dark-bg"
+        }
       },
       "focus": {
-        "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}" },
+        "primary": {
+          "$value": "{color.badge.text.primary}",
+          "source": "$badge-primary-focus-color"
+        },
+        "secondary": {
+          "$value": "{color.badge.text.secondary}",
+          "source": "$badge-secondary-focus-color"
+        },
+        "success": {
+          "$value": "{color.badge.text.success}",
+          "source": "$badge-success-focus-color"
+        },
+        "warning": {
+          "$value": "{color.badge.text.warning}",
+          "source": "$badge-warning-focus-color"
+        },
+        "danger": {
+          "$value": "{color.badge.text.danger}",
+          "source": "$badge-danger-focus-color"
+        },
+        "info": {
+          "$value": "{color.badge.text.info}",
+          "source": "$badge-info-focus-color"
+        },
+        "light": {
+          "$value": "{color.badge.text.light}",
+          "source": "$badge-light-focus-color"
+        },
+        "dark": {
+          "$value": "{color.badge.text.dark}",
+          "source": "$badge-dark-focus-color"
+        },
         "bg": {
           "primary": {
-            "source": "$badge-primary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.primary}"
+            "$value": "{color.badge.bg.primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-primary-focus-bg"
           },
           "secondary": {
-            "source": "$badge-secondary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.secondary}"
+            "$value": "{color.badge.bg.secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-secondary-focus-bg"
           },
           "success": {
-            "source": "$badge-success-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.success}"
+            "$value": "{color.badge.bg.success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-success-focus-bg"
           },
           "danger": {
-            "source": "$badge-danger-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.danger}"
+            "$value": "{color.badge.bg.danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-danger-focus-bg"
           },
           "warning": {
-            "source": "$badge-warning-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.warning}"
+            "$value": "{color.badge.bg.warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-warning-focus-bg"
           },
           "info": {
-            "source": "$badge-info-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.info}"
+            "$value": "{color.badge.bg.info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-info-focus-bg"
           },
           "light": {
-            "source": "$badge-light-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.light}"
+            "$value": "{color.badge.bg.light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-light-focus-bg"
           },
           "dark": {
-            "source": "$badge-dark-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.badge.bg.dark}"
+            "$value": "{color.badge.bg.dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-dark-focus-bg"
           }
         },
         "box-shadow": {
           "primary": {
-            "source": "$badge-primary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.primary}"
+            "$value": "{color.badge.bg.primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-primary-focus-box-shadow-color"
           },
           "secondary": {
-            "source": "$badge-secondary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.secondary}"
+            "$value": "{color.badge.bg.secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-secondary-focus-box-shadow-color"
           },
           "success": {
-            "source": "$badge-success-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.success}"
+            "$value": "{color.badge.bg.success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-success-focus-box-shadow-color"
           },
           "danger": {
-            "source": "$badge-danger-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.danger}"
+            "$value": "{color.badge.bg.danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-danger-focus-box-shadow-color"
           },
           "warning": {
-            "source": "$badge-warning-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.warning}"
+            "$value": "{color.badge.bg.warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-warning-focus-box-shadow-color"
           },
           "info": {
-            "source": "$badge-info-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.info}"
+            "$value": "{color.badge.bg.info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-info-focus-box-shadow-color"
           },
           "light": {
-            "source": "$badge-light-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.light}"
+            "$value": "{color.badge.bg.light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-light-focus-box-shadow-color"
           },
           "dark": {
-            "source": "$badge-dark-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }],
-            "$value": "{color.badge.bg.dark}"
+            "$value": "{color.badge.bg.dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.05
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$badge-dark-focus-box-shadow-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json
index e745bc3616..fd66bf3ea9 100644
--- a/tokens/src/themes/light/components/Breadcrumb.json
+++ b/tokens/src/themes/light/components/Breadcrumb.json
@@ -2,13 +2,28 @@
   "color": {
     "$type": "color",
     "breadcrumb": {
-      "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" },
-      "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" },
+      "base": {
+        "$value": "{color.primary.500}",
+        "source": "$breadcrumb-color"
+      },
+      "active": {
+        "$value": "{color.gray.500}",
+        "source": "$breadcrumb-active-color"
+      },
       "inverse": {
-        "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}" }
+        "base": {
+          "$value": "{color.white}",
+          "source": "$breadcrumb-inverse-color"
+        },
+        "active": {
+          "$value": "{color.light.500}",
+          "source": "$breadcrumb-inverse-active"
+        },
+        "spacer": {
+          "$value": "{color.light.700}",
+          "source": "$breadcrumb-inverse-spacer"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json
index eabea9b6cd..62a1306d2a 100644
--- a/tokens/src/themes/light/components/Bubble.json
+++ b/tokens/src/themes/light/components/Bubble.json
@@ -3,17 +3,41 @@
     "$type": "color",
     "bubble": {
       "text": {
-        "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}" }
+        "success": {
+          "$value": "{color.white}",
+          "source": "$bubble-success-color"
+        },
+        "warning": {
+          "$value": "{color.white}",
+          "source": "$bubble-warning-color"
+        },
+        "error": {
+          "$value": "{color.white}",
+          "source": "$bubble-error-color"
+        },
+        "primary": {
+          "$value": "{color.white}",
+          "source": "$bubble-primary-color"
+        }
       },
       "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}" }
+        "success": {
+          "$value": "{color.success.base}",
+          "source": "$bubble-success-bg"
+        },
+        "warning": {
+          "$value": "{color.warning.base}",
+          "source": "$bubble-warning-bg"
+        },
+        "error": {
+          "$value": "{color.danger.base}",
+          "source": "$bubble-error-bg"
+        },
+        "primary": {
+          "$value": "{color.primary.base}",
+          "source": "$bubble-primary-bg"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 23b6357841..43120bd54b 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "brand": {
-          "source": "$btn-brand-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.brand}"
+          "$value": "{color.btn.bg.brand}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-brand-color"
         },
         "outline-brand": {
-          "source": "$btn-brand-outline-color",
-          "$value": "{color.brand.base}"
+          "$value": "{color.brand.base}",
+          "source": "$btn-brand-outline-color"
         },
         "inverse-brand": {
-          "source": "$btn-brand-inverse-color",
-          "$value": "{color.brand.base}"
+          "$value": "{color.brand.base}",
+          "source": "$btn-brand-inverse-color"
         },
         "inverse-outline-brand": {
-          "source": "$btn-brand-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-brand-inverse-outline-color"
         }
       },
       "bg": {
         "brand": {
-          "source": "$btn-brand-bg",
-          "$value": "{color.brand.base}"
+          "$value": "{color.brand.base}",
+          "source": "$btn-brand-bg"
         },
         "outline-brand": {
-          "source": "$btn-brand-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-brand-outline-bg"
         },
         "inverse-brand": {
-          "source": "$btn-brand-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-brand}"
+          "$value": "{color.btn.text.inverse-brand}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-brand-inverse-bg"
         },
         "inverse-outline-brand": {
-          "source": "$btn-brand-inverse-outline-bg",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-brand-inverse-outline-bg"
         }
       },
       "border": {
         "brand": {
-          "source": "$btn-brand-border-color",
-          "$value": "{color.btn.bg.brand}"
+          "$value": "{color.btn.bg.brand}",
+          "source": "$btn-brand-border-color"
         },
         "outline-brand": {
-          "source": "$btn-brand-outline-border-color",
-          "$value": "{color.brand.base}"
+          "$value": "{color.brand.base}",
+          "source": "$btn-brand-outline-border-color"
         },
         "inverse-outline-brand": {
-          "source": "$btn-brand-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-brand-inverse-outline-border-color"
         },
         "inverse-brand": {
-          "source": "$btn-brand-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-brand-inverse-border-color"
         }
       },
       "hover": {
         "text": {
           "brand": {
-            "source": "$btn-brand-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.brand}"
+            "$value": "{color.btn.hover.bg.brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-hover-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-hover-color",
-            "$value": "{color.theme.hover.brand}"
+            "$value": "{color.theme.hover.brand}",
+            "source": "$btn-brand-outline-hover-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-brand}"
+            "$value": "{color.btn.text.inverse-brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-inverse-hover-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.brand}"
+            "$value": "{color.theme.hover.brand}",
+            "source": "$btn-brand-inverse-outline-hover-color"
           }
         },
         "bg": {
           "brand": {
-            "source": "$btn-brand-hover-bg",
-            "$value": "{color.theme.hover.brand}"
+            "$value": "{color.theme.hover.brand}",
+            "source": "$btn-brand-hover-bg"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-hover-bg",
-            "$value": "{color.brand.100}"
+            "$value": "{color.brand.100}",
+            "source": "$btn-brand-outline-hover-bg"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-brand}"
+            "$value": "{color.btn.bg.inverse-brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-inverse-hover-bg"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-hover-bg",
-            "$value": "{color.brand.100}"
+            "$value": "{color.brand.100}",
+            "source": "$btn-brand-inverse-outline-hover-bg"
           }
         },
         "border": {
           "brand": {
-            "source": "$btn-brand-hover-border-color",
-            "$value": "{color.theme.hover.brand}"
+            "$value": "{color.theme.hover.brand}",
+            "source": "$btn-brand-hover-border-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-hover-border-color",
-            "$value": "{color.brand.900}"
+            "$value": "{color.brand.900}",
+            "source": "$btn-brand-outline-hover-border-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-brand-inverse-outline-hover-border-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-brand-inverse-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "brand": {
-            "source": "$btn-brand-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.brand}"
+            "$value": "{color.btn.active.bg.brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-active-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-brand}"
+            "$value": "{color.btn.active.bg.outline-brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-outline-active-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-brand}"
+            "$value": "{color.btn.text.inverse-brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-inverse-active-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-brand}"
+            "$value": "{color.btn.active.bg.inverse-outline-brand}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-brand-inverse-outline-active-color"
           }
         },
         "bg": {
           "brand": {
-            "source": "$btn-brand-active-bg",
-            "$value": "{color.theme.active.brand}"
+            "$value": "{color.theme.active.brand}",
+            "source": "$btn-brand-active-bg"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-active-bg",
-            "$value": "{color.theme.bg.brand}"
+            "$value": "{color.theme.bg.brand}",
+            "source": "$btn-brand-outline-active-bg"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.brand}"
+            "$value": "{color.theme.bg.brand}",
+            "source": "$btn-brand-inverse-outline-active-bg"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-brand-inverse-active-bg"
           }
         },
         "border": {
           "brand": {
-            "source": "$btn-brand-active-border-color",
-            "$value": "{color.theme.active.brand}"
+            "$value": "{color.theme.active.brand}",
+            "source": "$btn-brand-active-border-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-active-border-color",
-            "$value": "{color.theme.active.brand}"
+            "$value": "{color.theme.active.brand}",
+            "source": "$btn-brand-outline-active-border-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-brand-inverse-active-border-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-brand-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "brand": {
-            "source": "$btn-brand-focus-color",
-            "$value": "{color.btn.text.brand}"
+            "$value": "{color.btn.text.brand}",
+            "source": "$btn-brand-focus-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-brand}"
+            "$value": "{color.btn.text.inverse-brand}",
+            "source": "$btn-brand-inverse-focus-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-focus-color",
-            "$value": "{color.btn.text.outline-brand}"
+            "$value": "{color.btn.text.outline-brand}",
+            "source": "$btn-brand-outline-focus-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-brand}"
+            "$value": "{color.btn.text.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-focus-color"
           }
         },
         "border": {
           "brand": {
-            "source": "$btn-brand-focus-border-color",
-            "$value": "{color.btn.border.brand}"
+            "$value": "{color.btn.border.brand}",
+            "source": "$btn-brand-focus-border-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-brand}"
+            "$value": "{color.btn.border.outline-brand}",
+            "source": "$btn-brand-outline-focus-border-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-brand-inverse-focus-border-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-brand}"
+            "$value": "{color.btn.border.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "brand": {
-            "source": "$btn-brand-focus-bg",
-            "$value": "{color.btn.bg.brand}"
+            "$value": "{color.btn.bg.brand}",
+            "source": "$btn-brand-focus-bg"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-brand}"
+            "$value": "{color.btn.bg.inverse-brand}",
+            "source": "$btn-brand-inverse-focus-bg"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-brand-outline-focus-bg"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-brand-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "brand": {
-            "source": "$btn-brand-focus-outline-color",
-            "$value": "{color.theme.focus.brand}"
+            "$value": "{color.theme.focus.brand}",
+            "source": "$btn-brand-focus-outline-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-focus-outline-color",
-            "$value": "{color.theme.focus.brand}"
+            "$value": "{color.theme.focus.brand}",
+            "source": "$btn-brand-outline-focus-outline-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-brand}"
+            "$value": "{color.btn.focus.border.inverse-brand}",
+            "source": "$btn-brand-inverse-focus-outline-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-outline-brand}"
+            "$value": "{color.btn.focus.border.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-focus-outline-color"
           }
         }
       },
       "disabled": {
         "text": {
           "brand": {
-            "source": "$btn-brand-disabled-color",
-            "$value": "{color.btn.text.brand}"
+            "$value": "{color.btn.text.brand}",
+            "source": "$btn-brand-disabled-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-disabled-color",
-            "$value": "{color.brand.500}"
+            "$value": "{color.brand.500}",
+            "source": "$btn-brand-inverse-disabled-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-disabled-color",
-            "$value": "{color.btn.hover.text.outline-brand}"
+            "$value": "{color.btn.hover.text.outline-brand}",
+            "source": "$btn-brand-outline-disabled-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-brand}"
+            "$value": "{color.btn.text.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "brand": {
-            "source": "$btn-brand-disabled-bg",
-            "$value": "{color.btn.bg.brand}"
+            "$value": "{color.btn.bg.brand}",
+            "source": "$btn-brand-disabled-bg"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-brand-outline-disabled-bg"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-disabled-bg",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-brand-inverse-disabled-bg"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-disabled-bg",
-            "$value": "{color.btn.bg.inverse-outline-brand}"
+            "$value": "{color.btn.bg.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "brand": {
-            "source": "$btn-brand-disabled-border-color",
-            "$value": "{color.btn.border.brand}"
+            "$value": "{color.btn.border.brand}",
+            "source": "$btn-brand-disabled-border-color"
           },
           "outline-brand": {
-            "source": "$btn-brand-outline-disabled-border-color",
-            "$value": "{color.btn.border.outline-brand}"
+            "$value": "{color.btn.border.outline-brand}",
+            "source": "$btn-brand-outline-disabled-border-color"
           },
           "inverse-brand": {
-            "source": "$btn-brand-inverse-disabled-border-color",
-            "$value": "{color.btn.disabled.bg.inverse-brand}"
+            "$value": "{color.btn.disabled.bg.inverse-brand}",
+            "source": "$btn-brand-inverse-disabled-border-color"
           },
           "inverse-outline-brand": {
-            "source": "$btn-brand-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.text.inverse-outline-brand}"
+            "$value": "{color.btn.text.inverse-outline-brand}",
+            "source": "$btn-brand-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
index 8b29b583ef..a06db9ecde 100644
--- a/tokens/src/themes/light/components/Button/core.json
+++ b/tokens/src/themes/light/components/Button/core.json
@@ -2,22 +2,34 @@
   "color": {
     "$type": "color",
     "btn": {
-      "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" }
+      "disabled-link": {
+        "$value": "{color.disabled}",
+        "source": "$btn-link-disabled-color"
+      }
     }
   },
   "elevation": {
     "$type": "shadow",
     "btn": {
       "box-shadow": {
-        "base": { "source": "$btn-box-shadow", "$value": "none" },
-        "active": { "source": "$btn-active-box-shadow", "$value": "none" }
+        "base": {
+          "$value": "none",
+          "source": "$btn-box-shadow"
+        },
+        "active": {
+          "$value": "none",
+          "source": "$btn-active-box-shadow"
+        }
       }
     }
   },
   "other": {
     "$type": "ratio",
     "btn": {
-      "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" }
+      "disabled-opacity": {
+        "$value": ".65",
+        "source": "$btn-disabled-opacity"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index 92ec188b21..b5480f80fa 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -4,303 +4,384 @@
     "btn": {
       "text": {
         "danger": {
-          "source": "$btn-danger-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.danger}"
+          "$value": "{color.btn.bg.danger}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-danger-color"
+        },
+        "outline-danger": {
+          "$value": "{color.danger.base}",
+          "source": "$btn-danger-outline-color"
         },
-        "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" },
         "inverse-danger": {
-          "source": "$btn-danger-inverse-color",
-          "$value": "{color.danger.base}"
+          "$value": "{color.danger.base}",
+          "source": "$btn-danger-inverse-color"
         },
         "inverse-outline-danger": {
-          "source": "$btn-danger-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-danger-inverse-outline-color"
         }
       },
       "bg": {
-        "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" },
+        "danger": {
+          "$value": "{color.danger.base}",
+          "source": "$btn-danger-bg"
+        },
         "outline-danger": {
-          "source": "$btn-danger-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-danger-outline-bg"
         },
         "inverse-danger": {
-          "source": "$btn-danger-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-danger}"
+          "$value": "{color.btn.text.inverse-danger}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-danger-inverse-bg"
         },
         "inverse-outline-danger": {
-          "source": "$btn-danger-inverse-outline-bg",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-danger-inverse-outline-bg"
         }
       },
       "border": {
         "danger": {
-          "source": "$btn-danger-border-color",
-          "$value": "{color.btn.bg.danger}"
+          "$value": "{color.btn.bg.danger}",
+          "source": "$btn-danger-border-color"
         },
         "outline-danger": {
-          "source": "$btn-danger-outline-border-color",
-          "$value": "{color.danger.base}"
+          "$value": "{color.danger.base}",
+          "source": "$btn-danger-outline-border-color"
         },
         "inverse-danger": {
-          "source": "$btn-danger-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-danger-inverse-border-color"
         },
         "inverse-outline-danger": {
-          "source": "$btn-danger-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-danger-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "danger": {
-            "source": "$btn-danger-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.danger}"
+            "$value": "{color.btn.hover.bg.danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-hover-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-hover-color",
-            "$value": "{color.theme.hover.danger}"
+            "$value": "{color.theme.hover.danger}",
+            "source": "$btn-danger-outline-hover-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-danger}"
+            "$value": "{color.btn.text.inverse-danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-inverse-hover-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.danger}"
+            "$value": "{color.theme.hover.danger}",
+            "source": "$btn-danger-inverse-outline-hover-color"
           }
         },
         "bg": {
           "danger": {
-            "source": "$btn-danger-hover-bg",
-            "$value": "{color.theme.hover.danger}"
+            "$value": "{color.theme.hover.danger}",
+            "source": "$btn-danger-hover-bg"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-hover-bg",
-            "$value": "{color.danger.100}"
+            "$value": "{color.danger.100}",
+            "source": "$btn-danger-outline-hover-bg"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-danger}"
+            "$value": "{color.btn.bg.inverse-danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-inverse-hover-bg"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-hover-bg",
-            "$value": "{color.danger.100}"
+            "$value": "{color.danger.100}",
+            "source": "$btn-danger-inverse-outline-hover-bg"
           }
         },
         "border": {
           "danger": {
-            "source": "$btn-danger-hover-border-color",
-            "$value": "{color.theme.hover.danger}"
+            "$value": "{color.theme.hover.danger}",
+            "source": "$btn-danger-hover-border-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-hover-border-color",
-            "$value": "{color.danger.900}"
+            "$value": "{color.danger.900}",
+            "source": "$btn-danger-outline-hover-border-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-hover-border-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "danger": {
-            "source": "$btn-danger-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.danger}"
+            "$value": "{color.btn.active.bg.danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-active-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-danger}"
+            "$value": "{color.btn.active.bg.outline-danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-outline-active-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-danger}"
+            "$value": "{color.btn.text.inverse-danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-inverse-active-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-danger}"
+            "$value": "{color.btn.active.bg.inverse-outline-danger}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-danger-inverse-outline-active-color"
           }
         },
         "bg": {
           "danger": {
-            "source": "$btn-danger-active-bg",
-            "$value": "{color.theme.active.danger}"
+            "$value": "{color.theme.active.danger}",
+            "source": "$btn-danger-active-bg"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-active-bg",
-            "$value": "{color.theme.bg.danger}"
+            "$value": "{color.theme.bg.danger}",
+            "source": "$btn-danger-outline-active-bg"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-danger-inverse-active-bg"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.danger}"
+            "$value": "{color.theme.bg.danger}",
+            "source": "$btn-danger-inverse-outline-active-bg"
           }
         },
         "border": {
           "danger": {
-            "source": "$btn-danger-active-border-color",
-            "$value": "{color.theme.active.danger}"
+            "$value": "{color.theme.active.danger}",
+            "source": "$btn-danger-active-border-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-active-border-color",
-            "$value": "{color.theme.active.danger}"
+            "$value": "{color.theme.active.danger}",
+            "source": "$btn-danger-outline-active-border-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-active-border-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "danger": {
-            "source": "$btn-danger-focus-color",
-            "$value": "{color.btn.text.danger}"
+            "$value": "{color.btn.text.danger}",
+            "source": "$btn-danger-focus-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-danger}"
+            "$value": "{color.btn.text.inverse-danger}",
+            "source": "$btn-danger-inverse-focus-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-focus-color",
-            "$value": "{color.btn.text.outline-danger}"
+            "$value": "{color.btn.text.outline-danger}",
+            "source": "$btn-danger-outline-focus-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-danger}"
+            "$value": "{color.btn.text.inverse-outline-danger}",
+            "source": "$btn-danger-inverse-outline-focus-color"
           }
         },
         "border": {
           "danger": {
-            "source": "$btn-danger-focus-border-color",
-            "$value": "{color.btn.focus.bg.danger}"
+            "$value": "{color.btn.focus.bg.danger}",
+            "source": "$btn-danger-focus-border-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-danger}"
+            "$value": "{color.btn.border.outline-danger}",
+            "source": "$btn-danger-outline-focus-border-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-danger-inverse-focus-border-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-danger-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "danger": {
-            "source": "$btn-danger-focus-bg",
-            "$value": "{color.btn.bg.danger}"
+            "$value": "{color.btn.bg.danger}",
+            "source": "$btn-danger-focus-bg"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-danger-outline-focus-bg"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-danger}"
+            "$value": "{color.btn.bg.inverse-danger}",
+            "source": "$btn-danger-inverse-focus-bg"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-danger-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "danger": {
-            "source": "$btn-danger-focus-outline-color",
-            "$value": "{color.theme.focus.danger}"
+            "$value": "{color.theme.focus.danger}",
+            "source": "$btn-danger-focus-outline-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-focus-outline-color",
-            "$value": "{color.theme.focus.danger}"
+            "$value": "{color.theme.focus.danger}",
+            "source": "$btn-danger-outline-focus-outline-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-danger}"
+            "$value": "{color.btn.focus.border.inverse-danger}",
+            "source": "$btn-danger-inverse-focus-outline-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-danger}"
+            "$value": "{color.btn.focus.border.inverse-danger}",
+            "source": "$btn-danger-inverse-outline-focus-outline-color"
           }
         }
       },
       "disabled": {
         "text": {
           "danger": {
-            "source": "$btn-danger-disabled-color",
-            "$value": "{color.btn.text.danger}"
+            "$value": "{color.btn.text.danger}",
+            "source": "$btn-danger-disabled-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-disabled-color",
-            "$value": "{color.btn.hover.text.outline-danger}"
+            "$value": "{color.btn.hover.text.outline-danger}",
+            "source": "$btn-danger-outline-disabled-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-disabled-color",
-            "$value": "{color.danger.base}"
+            "$value": "{color.danger.base}",
+            "source": "$btn-danger-inverse-disabled-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-danger}"
+            "$value": "{color.btn.text.inverse-outline-danger}",
+            "source": "$btn-danger-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "danger": {
-            "source": "$btn-danger-disabled-bg",
-            "$value": "{color.btn.bg.danger}"
+            "$value": "{color.btn.bg.danger}",
+            "source": "$btn-danger-disabled-bg"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-danger-outline-disabled-bg"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-disabled-bg",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-disabled-bg"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-danger-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "danger": {
-            "source": "$btn-danger-disabled-border-color",
-            "$value": "{color.btn.border.danger}"
+            "$value": "{color.btn.border.danger}",
+            "source": "$btn-danger-disabled-border-color"
           },
           "outline-danger": {
-            "source": "$btn-danger-outline-disabled-border-color",
-            "$value": "{color.btn.border.outline-danger}"
+            "$value": "{color.btn.border.outline-danger}",
+            "source": "$btn-danger-outline-disabled-border-color"
           },
           "inverse-danger": {
-            "source": "$btn-danger-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-danger-inverse-disabled-border-color"
           },
           "inverse-outline-danger": {
-            "source": "$btn-danger-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.border.inverse-outline-danger}"
+            "$value": "{color.btn.border.inverse-outline-danger}",
+            "source": "$btn-danger-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index 1256ed603c..eb20da63d0 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "dark": {
-          "source": "$btn-dark-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.dark}"
+          "$value": "{color.btn.bg.dark}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-dark-color"
         },
         "outline-dark": {
-          "source": "$btn-dark-outline-color",
-          "$value": "{color.dark.base}"
+          "$value": "{color.dark.base}",
+          "source": "$btn-dark-outline-color"
         },
         "inverse-dark": {
-          "source": "$btn-dark-inverse-color",
-          "$value": "{color.dark.base}"
+          "$value": "{color.dark.base}",
+          "source": "$btn-dark-inverse-color"
         },
         "inverse-outline-dark": {
-          "source": "$btn-dark-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-dark-inverse-outline-color"
         }
       },
       "bg": {
         "dark": {
-          "source": "$btn-dark-bg",
-          "$value": "{color.dark.base}"
+          "$value": "{color.dark.base}",
+          "source": "$btn-dark-bg"
         },
         "outline-dark": {
-          "source": "$btn-dark-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-dark-outline-bg"
         },
         "inverse-dark": {
-          "source": "$btn-dark-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-dark}"
+          "$value": "{color.btn.text.inverse-dark}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-dark-inverse-bg"
         },
         "inverse-outline-dark": {
-          "source": "$btn-dark-inverse-outline-bg",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-dark-inverse-outline-bg"
         }
       },
       "border": {
         "dark": {
-          "source": "$btn-dark-border-color",
-          "$value": "{color.btn.bg.dark}"
+          "$value": "{color.btn.bg.dark}",
+          "source": "$btn-dark-border-color"
         },
         "outline-dark": {
-          "source": "$btn-dark-outline-border-color",
-          "$value": "{color.dark.base}"
+          "$value": "{color.dark.base}",
+          "source": "$btn-dark-outline-border-color"
         },
         "inverse-dark": {
-          "source": "$btn-dark-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-dark-inverse-border-color"
         },
         "inverse-outline-dark": {
-          "source": "$btn-dark-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-dark-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "dark": {
-            "source": "$btn-dark-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.dark}"
+            "$value": "{color.btn.hover.bg.dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-hover-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-hover-color",
-            "$value": "{color.theme.hover.dark}"
+            "$value": "{color.theme.hover.dark}",
+            "source": "$btn-dark-outline-hover-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-dark}"
+            "$value": "{color.btn.text.inverse-dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-inverse-hover-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.dark}"
+            "$value": "{color.theme.hover.dark}",
+            "source": "$btn-dark-inverse-outline-hover-color"
           }
         },
         "bg": {
           "dark": {
-            "source": "$btn-dark-hover-bg",
-            "$value": "{color.theme.hover.dark}"
+            "$value": "{color.theme.hover.dark}",
+            "source": "$btn-dark-hover-bg"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-hover-bg",
-            "$value": "{color.dark.100}"
+            "$value": "{color.dark.100}",
+            "source": "$btn-dark-outline-hover-bg"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-dark}"
+            "$value": "{color.btn.bg.inverse-dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-inverse-hover-bg"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-hover-bg",
-            "$value": "{color.dark.100}"
+            "$value": "{color.dark.100}",
+            "source": "$btn-dark-inverse-outline-hover-bg"
           }
         },
         "border": {
           "dark": {
-            "source": "$btn-dark-hover-border-color",
-            "$value": "{color.theme.hover.dark}"
+            "$value": "{color.theme.hover.dark}",
+            "source": "$btn-dark-hover-border-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-hover-border-color",
-            "$value": "{color.dark.900}"
+            "$value": "{color.dark.900}",
+            "source": "$btn-dark-outline-hover-border-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-dark-inverse-hover-border-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-dark-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "dark": {
-            "source": "$btn-dark-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.dark}"
+            "$value": "{color.btn.active.bg.dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-active-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-dark}"
+            "$value": "{color.btn.active.bg.outline-dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-outline-active-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-dark}"
+            "$value": "{color.btn.text.inverse-dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-inverse-active-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-dark}"
+            "$value": "{color.btn.active.bg.inverse-outline-dark}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-dark-inverse-outline-active-color"
           }
         },
         "bg": {
           "dark": {
-            "source": "$btn-dark-active-bg",
-            "$value": "{color.theme.active.dark}"
+            "$value": "{color.theme.active.dark}",
+            "source": "$btn-dark-active-bg"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-active-bg",
-            "$value": "{color.theme.bg.dark}"
+            "$value": "{color.theme.bg.dark}",
+            "source": "$btn-dark-outline-active-bg"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-dark-inverse-active-bg"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.dark}"
+            "$value": "{color.theme.bg.dark}",
+            "source": "$btn-dark-inverse-outline-active-bg"
           }
         },
         "border": {
           "dark": {
-            "source": "$btn-dark-active-border-color",
-            "$value": "{color.theme.active.dark}"
+            "$value": "{color.theme.active.dark}",
+            "source": "$btn-dark-active-border-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-active-border-color",
-            "$value": "{color.theme.active.dark}"
+            "$value": "{color.theme.active.dark}",
+            "source": "$btn-dark-outline-active-border-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-dark-inverse-active-border-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-dark-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "dark": {
-            "source": "$btn-dark-focus-color",
-            "$value": "{color.btn.text.dark}"
+            "$value": "{color.btn.text.dark}",
+            "source": "$btn-dark-focus-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-dark}"
+            "$value": "{color.btn.text.inverse-dark}",
+            "source": "$btn-dark-inverse-focus-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-focus-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-outline-focus-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-dark}"
+            "$value": "{color.btn.text.inverse-outline-dark}",
+            "source": "$btn-dark-inverse-outline-focus-color"
           }
         },
         "border": {
           "dark": {
-            "source": "$btn-dark-focus-border-color",
-            "$value": "{color.btn.focus.bg.dark}"
+            "$value": "{color.btn.focus.bg.dark}",
+            "source": "$btn-dark-focus-border-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-dark}"
+            "$value": "{color.btn.border.outline-dark}",
+            "source": "$btn-dark-outline-focus-border-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-dark-inverse-focus-border-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-dark-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "dark": {
-            "source": "$btn-dark-focus-bg",
-            "$value": "{color.btn.bg.dark}"
+            "$value": "{color.btn.bg.dark}",
+            "source": "$btn-dark-focus-bg"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-outline-focus-bg"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-dark}"
+            "$value": "{color.btn.bg.inverse-dark}",
+            "source": "$btn-dark-inverse-focus-bg"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "dark": {
-            "source": "$btn-dark-focus-outline-color",
-            "$value": "{color.theme.focus.dark}"
+            "$value": "{color.theme.focus.dark}",
+            "source": "$btn-dark-focus-outline-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-focus-outline-color",
-            "$value": "{color.theme.focus.dark}"
+            "$value": "{color.theme.focus.dark}",
+            "source": "$btn-dark-outline-focus-outline-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-dark}"
+            "$value": "{color.btn.focus.border.inverse-dark}",
+            "source": "$btn-dark-inverse-focus-outline-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-focus-border-color",
-            "$value": "{color.btn.focus.border.inverse-outline-dark}"
+            "$value": "{color.btn.focus.border.inverse-outline-dark}",
+            "source": "$btn-dark-inverse-outline-focus-border-color"
           }
         }
       },
       "disabled": {
         "text": {
           "dark": {
-            "source": "$btn-dark-disabled-color",
-            "$value": "{color.btn.text.dark}"
+            "$value": "{color.btn.text.dark}",
+            "source": "$btn-dark-disabled-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-disabled-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-outline-disabled-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-disabled-color",
-            "$value": "{color.btn.text.inverse-dark}"
+            "$value": "{color.btn.text.inverse-dark}",
+            "source": "$btn-dark-inverse-disabled-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-dark}"
+            "$value": "{color.btn.text.inverse-outline-dark}",
+            "source": "$btn-dark-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "dark": {
-            "source": "$btn-dark-disabled-bg",
-            "$value": "{color.btn.bg.dark}"
+            "$value": "{color.btn.bg.dark}",
+            "source": "$btn-dark-disabled-bg"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-outline-disabled-bg"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-inverse-disabled-bg"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-dark-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "dark": {
-            "source": "$btn-dark-disabled-border-color",
-            "$value": "{color.btn.border.dark}"
+            "$value": "{color.btn.border.dark}",
+            "source": "$btn-dark-disabled-border-color"
           },
           "outline-dark": {
-            "source": "$btn-dark-outline-disabled-border-color",
-            "$value": "{color.btn.hover.text.outline-dark}"
+            "$value": "{color.btn.hover.text.outline-dark}",
+            "source": "$btn-dark-outline-disabled-border-color"
           },
           "inverse-dark": {
-            "source": "$btn-dark-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-dark-inverse-disabled-border-color"
           },
           "inverse-outline-dark": {
-            "source": "$btn-dark-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.focus.border.inverse-outline-dark}"
+            "$value": "{color.btn.focus.border.inverse-outline-dark}",
+            "source": "$btn-dark-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 91d38cfe14..c12984f3dd 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "info": {
-          "source": "$btn-info-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.info}"
+          "$value": "{color.btn.bg.info}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-info-color"
         },
         "outline-info": {
-          "source": "$btn-info-outline-color",
-          "$value": "{color.info.base}"
+          "$value": "{color.info.base}",
+          "source": "$btn-info-outline-color"
         },
         "inverse-info": {
-          "source": "$btn-info-inverse-color",
-          "$value": "{color.info.base}"
+          "$value": "{color.info.base}",
+          "source": "$btn-info-inverse-color"
         },
         "inverse-outline-info": {
-          "source": "$btn-info-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-info-inverse-outline-color"
         }
       },
       "bg": {
         "info": {
-          "source": "$btn-info-bg",
-          "$value": "{color.info.base}"
+          "$value": "{color.info.base}",
+          "source": "$btn-info-bg"
         },
         "outline-info": {
-          "source": "$btn-info-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-info-outline-bg"
         },
         "inverse-info": {
-          "source": "$btn-info-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-info}"
+          "$value": "{color.btn.text.inverse-info}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-info-inverse-bg"
         },
         "inverse-outline-info": {
-          "source": "$btn-info-inverse-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-info-inverse-outline-bg"
         }
       },
       "border": {
         "info": {
-          "source": "$btn-info-border-color",
-          "$value": "{color.btn.bg.info}"
+          "$value": "{color.btn.bg.info}",
+          "source": "$btn-info-border-color"
         },
         "outline-info": {
-          "source": "$btn-info-outline-border-color",
-          "$value": "{color.info.base}"
+          "$value": "{color.info.base}",
+          "source": "$btn-info-outline-border-color"
         },
         "inverse-info": {
-          "source": "$btn-info-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-info-inverse-border-color"
         },
         "inverse-outline-info": {
-          "source": "$btn-info-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-info-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "info": {
-            "source": "$btn-info-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.info}"
+            "$value": "{color.btn.hover.bg.info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-hover-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-hover-color",
-            "$value": "{color.theme.hover.info}"
+            "$value": "{color.theme.hover.info}",
+            "source": "$btn-info-outline-hover-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-info}"
+            "$value": "{color.btn.text.inverse-info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-inverse-hover-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.info}"
+            "$value": "{color.theme.hover.info}",
+            "source": "$btn-info-inverse-outline-hover-color"
           }
         },
         "bg": {
           "info": {
-            "source": "$btn-info-hover-bg",
-            "$value": "{color.theme.hover.info}"
+            "$value": "{color.theme.hover.info}",
+            "source": "$btn-info-hover-bg"
           },
           "outline-info": {
-            "source": "$btn-info-outline-hover-bg",
-            "$value": "{color.info.100}"
+            "$value": "{color.info.100}",
+            "source": "$btn-info-outline-hover-bg"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-info}"
+            "$value": "{color.btn.bg.inverse-info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-inverse-hover-bg"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-hover-bg",
-            "$value": "{color.info.100}"
+            "$value": "{color.info.100}",
+            "source": "$btn-info-inverse-outline-hover-bg"
           }
         },
         "border": {
           "info": {
-            "source": "$btn-info-hover-border-color",
-            "$value": "{color.theme.hover.info}"
+            "$value": "{color.theme.hover.info}",
+            "source": "$btn-info-hover-border-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-hover-border-color",
-            "$value": "{color.info.900}"
+            "$value": "{color.info.900}",
+            "source": "$btn-info-outline-hover-border-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-info-inverse-hover-border-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-info-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "info": {
-            "source": "$btn-info-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.info}"
+            "$value": "{color.btn.active.bg.info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-active-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-info}"
+            "$value": "{color.btn.active.bg.outline-info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-outline-active-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-info}"
+            "$value": "{color.btn.text.inverse-info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-inverse-active-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-info}"
+            "$value": "{color.btn.active.bg.inverse-outline-info}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-info-inverse-outline-active-color"
           }
         },
         "bg": {
           "info": {
-            "source": "$btn-info-active-bg",
-            "$value": "{color.theme.active.info}"
+            "$value": "{color.theme.active.info}",
+            "source": "$btn-info-active-bg"
           },
           "outline-info": {
-            "source": "$btn-info-outline-active-bg",
-            "$value": "{color.theme.bg.info}"
+            "$value": "{color.theme.bg.info}",
+            "source": "$btn-info-outline-active-bg"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-info-inverse-active-bg"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.info}"
+            "$value": "{color.theme.bg.info}",
+            "source": "$btn-info-inverse-outline-active-bg"
           }
         },
         "border": {
           "info": {
-            "source": "$btn-info-active-border-color",
-            "$value": "{color.theme.active.info}"
+            "$value": "{color.theme.active.info}",
+            "source": "$btn-info-active-border-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-active-border-color",
-            "$value": "{color.theme.active.info}"
+            "$value": "{color.theme.active.info}",
+            "source": "$btn-info-outline-active-border-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-info-inverse-active-border-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-info-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "info": {
-            "source": "$btn-info-focus-color",
-            "$value": "{color.btn.text.info}"
+            "$value": "{color.btn.text.info}",
+            "source": "$btn-info-focus-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-focus-color",
-            "$value": "{color.btn.text.outline-info}"
+            "$value": "{color.btn.text.outline-info}",
+            "source": "$btn-info-outline-focus-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-info}"
+            "$value": "{color.btn.text.inverse-info}",
+            "source": "$btn-info-inverse-focus-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-info}"
+            "$value": "{color.btn.text.inverse-outline-info}",
+            "source": "$btn-info-inverse-outline-focus-color"
           }
         },
         "border": {
           "info": {
-            "source": "$btn-info-focus-border-color",
-            "$value": "{color.btn.border.info}"
+            "$value": "{color.btn.border.info}",
+            "source": "$btn-info-focus-border-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-info}"
+            "$value": "{color.btn.border.outline-info}",
+            "source": "$btn-info-outline-focus-border-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-info-inverse-focus-border-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-info}"
+            "$value": "{color.btn.border.inverse-outline-info}",
+            "source": "$btn-info-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "info": {
-            "source": "$btn-info-focus-bg",
-            "$value": "{color.btn.bg.info}"
+            "$value": "{color.btn.bg.info}",
+            "source": "$btn-info-focus-bg"
           },
           "outline-info": {
-            "source": "$btn-info-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-info-outline-focus-bg"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-info}"
+            "$value": "{color.btn.bg.inverse-info}",
+            "source": "$btn-info-inverse-focus-bg"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-info-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "info": {
-            "source": "$btn-info-focus-outline-color",
-            "$value": "{color.theme.focus.info}"
+            "$value": "{color.theme.focus.info}",
+            "source": "$btn-info-focus-outline-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-focus-outline-color",
-            "$value": "{color.theme.focus.info}"
+            "$value": "{color.theme.focus.info}",
+            "source": "$btn-info-outline-focus-outline-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-info}"
+            "$value": "{color.btn.focus.border.inverse-info}",
+            "source": "$btn-info-inverse-focus-outline-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-outline-info}"
+            "$value": "{color.btn.focus.border.inverse-outline-info}",
+            "source": "$btn-info-inverse-outline-focus-outline-color"
           }
         }
       },
       "disabled": {
         "text": {
           "info": {
-            "source": "$btn-info-disabled-color",
-            "$value": "{color.btn.text.info}"
+            "$value": "{color.btn.text.info}",
+            "source": "$btn-info-disabled-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-disabled-color",
-            "$value": "{color.btn.text.outline-info}"
+            "$value": "{color.btn.text.outline-info}",
+            "source": "$btn-info-outline-disabled-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-disabled-color",
-            "$value": "{color.info.base}"
+            "$value": "{color.info.base}",
+            "source": "$btn-info-inverse-disabled-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-info}"
+            "$value": "{color.btn.text.inverse-outline-info}",
+            "source": "$btn-info-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "info": {
-            "source": "$btn-info-disabled-bg",
-            "$value": "{color.btn.bg.info}"
+            "$value": "{color.btn.bg.info}",
+            "source": "$btn-info-disabled-bg"
           },
           "outline-info": {
-            "source": "$btn-info-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-info-outline-disabled-bg"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-info-inverse-disabled-bg"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-info-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "info": {
-            "source": "$btn-info-disabled-border-color",
-            "$value": "{color.btn.bg.info}"
+            "$value": "{color.btn.bg.info}",
+            "source": "$btn-info-disabled-border-color"
           },
           "outline-info": {
-            "source": "$btn-info-outline-disabled-border-color",
-            "$value": "{color.btn.border.outline-info}"
+            "$value": "{color.btn.border.outline-info}",
+            "source": "$btn-info-outline-disabled-border-color"
           },
           "inverse-info": {
-            "source": "$btn-info-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-info-inverse-disabled-border-color"
           },
           "inverse-outline-info": {
-            "source": "$btn-info-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.border.inverse-outline-info}"
+            "$value": "{color.btn.border.inverse-outline-info}",
+            "source": "$btn-info-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index f7e76f50d8..2916d6e4be 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "light": {
-          "source": "$btn-light-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.light}"
+          "$value": "{color.btn.bg.light}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-light-color"
         },
         "outline-light": {
-          "source": "$btn-light-outline-color",
-          "$value": "{color.light.base}"
+          "$value": "{color.light.base}",
+          "source": "$btn-light-outline-color"
         },
         "inverse-light": {
-          "source": "$btn-light-inverse-color",
-          "$value": "{color.light.base}"
+          "$value": "{color.light.base}",
+          "source": "$btn-light-inverse-color"
         },
         "inverse-outline-light": {
-          "source": "$btn-light-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-light-inverse-outline-color"
         }
       },
       "bg": {
         "light": {
-          "source": "$btn-light-bg",
-          "$value": "{color.light.base}"
+          "$value": "{color.light.base}",
+          "source": "$btn-light-bg"
         },
         "inverse-light": {
-          "source": "$btn-light-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-light}"
+          "$value": "{color.btn.text.inverse-light}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-light-inverse-bg"
         },
         "outline-light": {
-          "source": "$btn-light-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-light-outline-bg"
         },
         "inverse-outline-light": {
-          "source": "$btn-light-inverse-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-light-inverse-outline-bg"
         }
       },
       "border": {
         "light": {
-          "source": "$btn-light-border-color",
-          "$value": "{color.btn.bg.light}"
+          "$value": "{color.btn.bg.light}",
+          "source": "$btn-light-border-color"
         },
         "outline-light": {
-          "source": "$btn-light-outline-border-color",
-          "$value": "{color.light.base}"
+          "$value": "{color.light.base}",
+          "source": "$btn-light-outline-border-color"
         },
         "inverse-light": {
-          "source": "$btn-light-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-light-inverse-border-color"
         },
         "inverse-outline-light": {
-          "source": "$btn-light-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-light-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "light": {
-            "source": "$btn-light-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.light}"
+            "$value": "{color.btn.hover.bg.light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-hover-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-hover-color",
-            "$value": "{color.theme.hover.light}"
+            "$value": "{color.theme.hover.light}",
+            "source": "$btn-light-outline-hover-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-light}"
+            "$value": "{color.btn.text.inverse-light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-inverse-hover-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.light}"
+            "$value": "{color.theme.hover.light}",
+            "source": "$btn-light-inverse-outline-hover-color"
           }
         },
         "bg": {
           "light": {
-            "source": "$btn-light-hover-bg",
-            "$value": "{color.theme.hover.light}"
+            "$value": "{color.theme.hover.light}",
+            "source": "$btn-light-hover-bg"
           },
           "outline-light": {
-            "source": "$btn-light-outline-hover-bg",
-            "$value": "{color.light.100}"
+            "$value": "{color.light.100}",
+            "source": "$btn-light-outline-hover-bg"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-light}"
+            "$value": "{color.btn.bg.inverse-light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-inverse-hover-bg"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-hover-bg",
-            "$value": "{color.light.100}"
+            "$value": "{color.light.100}",
+            "source": "$btn-light-inverse-outline-hover-bg"
           }
         },
         "border": {
           "light": {
-            "source": "$btn-light-hover-border-color",
-            "$value": "{color.theme.hover.light}"
+            "$value": "{color.theme.hover.light}",
+            "source": "$btn-light-hover-border-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-hover-border-color",
-            "$value": "{color.light.900}"
+            "$value": "{color.light.900}",
+            "source": "$btn-light-outline-hover-border-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-light-inverse-hover-border-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-light-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "light": {
-            "source": "$btn-light-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.light}"
+            "$value": "{color.btn.active.bg.light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-active-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-light}"
+            "$value": "{color.btn.active.bg.outline-light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-outline-active-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-light}"
+            "$value": "{color.btn.text.inverse-light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-inverse-active-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-light}"
+            "$value": "{color.btn.active.bg.inverse-outline-light}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-light-inverse-outline-active-color"
           }
         },
         "bg": {
           "light": {
-            "source": "$btn-light-active-bg",
-            "$value": "{color.theme.active.light}"
+            "$value": "{color.theme.active.light}",
+            "source": "$btn-light-active-bg"
           },
           "outline-light": {
-            "source": "$btn-light-outline-active-bg",
-            "$value": "{color.theme.bg.light}"
+            "$value": "{color.theme.bg.light}",
+            "source": "$btn-light-outline-active-bg"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-light-inverse-active-bg"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.light}"
+            "$value": "{color.theme.bg.light}",
+            "source": "$btn-light-inverse-outline-active-bg"
           }
         },
         "border": {
           "light": {
-            "source": "$btn-light-active-border-color",
-            "$value": "{color.theme.active.light}"
+            "$value": "{color.theme.active.light}",
+            "source": "$btn-light-active-border-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-active-border-color",
-            "$value": "{color.theme.active.light}"
+            "$value": "{color.theme.active.light}",
+            "source": "$btn-light-outline-active-border-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-active-border-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-light-inverse-active-border-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-light-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "light": {
-            "source": "$btn-light-focus-color",
-            "$value": "{color.btn.text.light}"
+            "$value": "{color.btn.text.light}",
+            "source": "$btn-light-focus-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-focus-color",
-            "$value": "{color.btn.text.outline-light}"
+            "$value": "{color.btn.text.outline-light}",
+            "source": "$btn-light-outline-focus-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-light}"
+            "$value": "{color.btn.text.inverse-light}",
+            "source": "$btn-light-inverse-focus-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-light}"
+            "$value": "{color.btn.text.inverse-outline-light}",
+            "source": "$btn-light-inverse-outline-focus-color"
           }
         },
         "border": {
           "light": {
-            "source": "$btn-light-focus-border-color",
-            "$value": "{color.btn.border.light}"
+            "$value": "{color.btn.border.light}",
+            "source": "$btn-light-focus-border-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-light}"
+            "$value": "{color.btn.border.outline-light}",
+            "source": "$btn-light-outline-focus-border-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-focus-border-color",
-            "$value": "{color.btn.border.inverse-light}"
+            "$value": "{color.btn.border.inverse-light}",
+            "source": "$btn-light-inverse-focus-border-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-light}"
+            "$value": "{color.btn.border.inverse-outline-light}",
+            "source": "$btn-light-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "light": {
-            "source": "$btn-light-focus-bg",
-            "$value": "{color.btn.bg.light}"
+            "$value": "{color.btn.bg.light}",
+            "source": "$btn-light-focus-bg"
           },
           "outline-light": {
-            "source": "$btn-light-outline-focus-bg",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-light-outline-focus-bg"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-light}"
+            "$value": "{color.btn.bg.inverse-light}",
+            "source": "$btn-light-inverse-focus-bg"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-light-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "light": {
-            "source": "$btn-light-focus-outline-color",
-            "$value": "{color.primary.300}"
+            "$value": "{color.primary.300}",
+            "source": "$btn-light-focus-outline-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-focus-outline-color",
-            "$value": "{color.theme.focus.light}"
+            "$value": "{color.theme.focus.light}",
+            "source": "$btn-light-outline-focus-outline-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-focus-outline-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-light-inverse-focus-outline-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-outline-light}"
+            "$value": "{color.btn.focus.border.inverse-outline-light}",
+            "source": "$btn-light-inverse-outline-focus-outline-color"
           }
         }
       },
       "disabled": {
         "text": {
           "light": {
-            "source": "$btn-light-disabled-color",
-            "$value": "{color.btn.text.light}"
+            "$value": "{color.btn.text.light}",
+            "source": "$btn-light-disabled-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-disabled-color",
-            "$value": "{color.btn.hover.text.outline-light}"
+            "$value": "{color.btn.hover.text.outline-light}",
+            "source": "$btn-light-outline-disabled-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-disabled-color",
-            "$value": "{color.btn.text.inverse-light}"
+            "$value": "{color.btn.text.inverse-light}",
+            "source": "$btn-light-inverse-disabled-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-light}"
+            "$value": "{color.btn.text.inverse-outline-light}",
+            "source": "$btn-light-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "light": {
-            "source": "$btn-light-disabled-bg",
-            "$value": "{color.btn.bg.light}"
+            "$value": "{color.btn.bg.light}",
+            "source": "$btn-light-disabled-bg"
           },
           "outline-light": {
-            "source": "$btn-light-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-light-outline-disabled-bg"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-light-inverse-disabled-bg"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-light-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "light": {
-            "source": "$btn-light-disabled-border-color",
-            "$value": "{color.btn.border.light}"
+            "$value": "{color.btn.border.light}",
+            "source": "$btn-light-disabled-border-color"
           },
           "outline-light": {
-            "source": "$btn-light-outline-disabled-border-color",
-            "$value": "{color.btn.hover.text.outline-light}"
+            "$value": "{color.btn.hover.text.outline-light}",
+            "source": "$btn-light-outline-disabled-border-color"
           },
           "inverse-light": {
-            "source": "$btn-light-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-light-inverse-disabled-border-color"
           },
           "inverse-outline-light": {
-            "source": "$btn-light-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.border.inverse-outline-light}"
+            "$value": "{color.btn.border.inverse-outline-light}",
+            "source": "$btn-light-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index 1344fbb04b..56aa69f44d 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "primary": {
-          "source": "$btn-primary-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.primary}"
+          "$value": "{color.btn.bg.primary}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-primary-color"
         },
         "outline-primary": {
-          "source": "$btn-primary-outline-color",
-          "$value": "{color.primary.base}"
+          "$value": "{color.primary.base}",
+          "source": "$btn-primary-outline-color"
         },
         "inverse-primary": {
-          "source": "$btn-primary-inverse-color",
-          "$value": "{color.primary.base}"
+          "$value": "{color.primary.base}",
+          "source": "$btn-primary-inverse-color"
         },
         "inverse-outline-primary": {
-          "source": "$btn-primary-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-primary-inverse-outline-color"
         }
       },
       "bg": {
         "primary": {
-          "source": "$btn-primary-bg",
-          "$value": "{color.primary.base}"
+          "$value": "{color.primary.base}",
+          "source": "$btn-primary-bg"
         },
         "outline-primary": {
-          "source": "$btn-primary-outline-bg",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-primary-outline-bg"
         },
         "inverse-outline-primary": {
-          "source": "$btn-primary-inverse-outline-bg",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-primary-inverse-outline-bg"
         },
         "inverse-primary": {
-          "source": "$btn-primary-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-primary}"
+          "$value": "{color.btn.text.inverse-primary}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-primary-inverse-bg"
         }
       },
       "border": {
         "primary": {
-          "source": "$btn-primary-border-color",
-          "$value": "{color.btn.bg.primary}"
+          "$value": "{color.btn.bg.primary}",
+          "source": "$btn-primary-border-color"
         },
         "outline-primary": {
-          "source": "$btn-primary-outline-border-color",
-          "$value": "{color.primary.base}"
+          "$value": "{color.primary.base}",
+          "source": "$btn-primary-outline-border-color"
         },
         "inverse-outline-primary": {
-          "source": "$btn-primary-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-primary-inverse-outline-border-color"
         },
         "inverse-primary": {
-          "source": "$btn-primary-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-primary-inverse-border-color"
         }
       },
       "hover": {
         "text": {
           "primary": {
-            "source": "$btn-primary-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.primary}"
+            "$value": "{color.btn.hover.bg.primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-hover-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-hover-color",
-            "$value": "{color.theme.hover.primary}"
+            "$value": "{color.theme.hover.primary}",
+            "source": "$btn-primary-outline-hover-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-primary}"
+            "$value": "{color.btn.text.inverse-primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-inverse-hover-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.primary}"
+            "$value": "{color.theme.hover.primary}",
+            "source": "$btn-primary-inverse-outline-hover-color"
           }
         },
         "bg": {
           "primary": {
-            "source": "$btn-primary-hover-bg",
-            "$value": "{color.theme.hover.primary}"
+            "$value": "{color.theme.hover.primary}",
+            "source": "$btn-primary-hover-bg"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-hover-bg",
-            "$value": "{color.primary.100}"
+            "$value": "{color.primary.100}",
+            "source": "$btn-primary-outline-hover-bg"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-primary}"
+            "$value": "{color.btn.bg.inverse-primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-inverse-hover-bg"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-hover-bg",
-            "$value": "{color.primary.100}"
+            "$value": "{color.primary.100}",
+            "source": "$btn-primary-inverse-outline-hover-bg"
           }
         },
         "border": {
           "primary": {
-            "source": "$btn-primary-hover-border-color",
-            "$value": "{color.theme.hover.primary}"
+            "$value": "{color.theme.hover.primary}",
+            "source": "$btn-primary-hover-border-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-hover-border-color",
-            "$value": "{color.primary.900}"
+            "$value": "{color.primary.900}",
+            "source": "$btn-primary-outline-hover-border-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-primary-inverse-outline-hover-border-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-primary-inverse-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "primary": {
-            "source": "$btn-primary-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.primary}"
+            "$value": "{color.btn.active.bg.primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-active-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-primary}"
+            "$value": "{color.btn.active.bg.outline-primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-outline-active-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-primary}"
+            "$value": "{color.btn.text.inverse-primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-inverse-active-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-primary}"
+            "$value": "{color.btn.active.bg.inverse-outline-primary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-primary-inverse-outline-active-color"
           }
         },
         "bg": {
           "primary": {
-            "source": "$btn-primary-active-bg",
-            "$value": "{color.theme.active.primary}"
+            "$value": "{color.theme.active.primary}",
+            "source": "$btn-primary-active-bg"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-active-bg",
-            "$value": "{color.theme.bg.primary}"
+            "$value": "{color.theme.bg.primary}",
+            "source": "$btn-primary-outline-active-bg"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.primary}"
+            "$value": "{color.theme.bg.primary}",
+            "source": "$btn-primary-inverse-outline-active-bg"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-primary-inverse-active-bg"
           }
         },
         "border": {
           "primary": {
-            "source": "$btn-primary-active-border-color",
-            "$value": "{color.theme.active.primary}"
+            "$value": "{color.theme.active.primary}",
+            "source": "$btn-primary-active-border-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-active-border-color",
-            "$value": "{color.theme.active.primary}"
+            "$value": "{color.theme.active.primary}",
+            "source": "$btn-primary-outline-active-border-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-primary-inverse-outline-active-border-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-primary-inverse-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "primary": {
-            "source": "$btn-primary-focus-color",
-            "$value": "{color.btn.text.primary}"
+            "$value": "{color.btn.text.primary}",
+            "source": "$btn-primary-focus-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-focus-color",
-            "$value": "{color.btn.text.outline-primary}"
+            "$value": "{color.btn.text.outline-primary}",
+            "source": "$btn-primary-outline-focus-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-primary}"
+            "$value": "{color.btn.text.inverse-primary}",
+            "source": "$btn-primary-inverse-focus-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-primary}"
+            "$value": "{color.btn.text.inverse-outline-primary}",
+            "source": "$btn-primary-inverse-outline-focus-color"
           }
         },
         "border": {
           "primary": {
-            "source": "$btn-primary-focus-border-color",
-            "$value": "{color.btn.border.primary}"
+            "$value": "{color.btn.border.primary}",
+            "source": "$btn-primary-focus-border-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-primary}"
+            "$value": "{color.btn.border.outline-primary}",
+            "source": "$btn-primary-outline-focus-border-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-primary-inverse-focus-border-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-primary}"
+            "$value": "{color.btn.border.inverse-outline-primary}",
+            "source": "$btn-primary-inverse-outline-focus-border-color"
           }
         },
         "outline": {
           "primary": {
-            "source": "$btn-primary-focus-focus-outline-color",
-            "$value": "{color.theme.focus.primary}"
+            "$value": "{color.theme.focus.primary}",
+            "source": "$btn-primary-focus-focus-outline-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-focus-outline-color",
-            "$value": "{color.theme.focus.primary}"
+            "$value": "{color.theme.focus.primary}",
+            "source": "$btn-primary-outline-focus-outline-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-primary}"
+            "$value": "{color.btn.focus.border.inverse-primary}",
+            "source": "$btn-primary-inverse-focus-outline-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.border.inverse-outline-primary}"
+            "$value": "{color.btn.border.inverse-outline-primary}",
+            "source": "$btn-primary-inverse-outline-focus-outline-color"
           }
         },
         "bg": {
           "primary": {
-            "source": "$btn-primary-focus-bg",
-            "$value": "{color.btn.bg.primary}"
+            "$value": "{color.btn.bg.primary}",
+            "source": "$btn-primary-focus-bg"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-primary-outline-focus-bg"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-primary}"
+            "$value": "{color.btn.bg.inverse-primary}",
+            "source": "$btn-primary-inverse-focus-bg"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-primary-inverse-outline-focus-bg"
           }
         }
       },
       "disabled": {
         "text": {
           "primary": {
-            "source": "$btn-primary-disabled-color",
-            "$value": "{color.btn.text.primary}"
+            "$value": "{color.btn.text.primary}",
+            "source": "$btn-primary-disabled-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-disabled-color",
-            "$value": "{color.primary.500}"
+            "$value": "{color.primary.500}",
+            "source": "$btn-primary-inverse-disabled-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-disabled-color",
-            "$value": "{color.btn.hover.text.outline-primary}"
+            "$value": "{color.btn.hover.text.outline-primary}",
+            "source": "$btn-primary-outline-disabled-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-primary}"
+            "$value": "{color.btn.text.inverse-outline-primary}",
+            "source": "$btn-primary-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "primary": {
-            "source": "$btn-primary-disabled-bg",
-            "$value": "{color.btn.bg.primary}"
+            "$value": "{color.btn.bg.primary}",
+            "source": "$btn-primary-disabled-bg"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-disabled-bg",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-primary-inverse-disabled-bg"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-primary-outline-disabled-bg"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-primary-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "primary": {
-            "source": "$btn-primary-disabled-border-color",
-            "$value": "{color.btn.border.primary}"
+            "$value": "{color.btn.border.primary}",
+            "source": "$btn-primary-disabled-border-color"
           },
           "inverse-primary": {
-            "source": "$btn-primary-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-primary-inverse-disabled-border-color"
           },
           "outline-primary": {
-            "source": "$btn-primary-outline-disabled-border-color",
-            "$value": "{color.btn.hover.text.outline-primary}"
+            "$value": "{color.btn.hover.text.outline-primary}",
+            "source": "$btn-primary-outline-disabled-border-color"
           },
           "inverse-outline-primary": {
-            "source": "$btn-primary-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.text.inverse-outline-primary}"
+            "$value": "{color.btn.text.inverse-outline-primary}",
+            "source": "$btn-primary-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index c8057ffa9b..4e26eee69e 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "secondary": {
-          "source": "$btn-secondary-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.secondary}"
+          "$value": "{color.btn.bg.secondary}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-secondary-color"
         },
         "outline-secondary": {
-          "source": "$btn-secondary-outline-color",
-          "$value": "{color.secondary.base}"
+          "$value": "{color.secondary.base}",
+          "source": "$btn-secondary-outline-color"
         },
         "inverse-secondary": {
-          "source": "$btn-secondary-inverse-color",
-          "$value": "{color.secondary.base}"
+          "$value": "{color.secondary.base}",
+          "source": "$btn-secondary-inverse-color"
         },
         "inverse-outline-secondary": {
-          "source": "$btn-secondary-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-secondary-inverse-outline-color"
         }
       },
       "bg": {
         "secondary": {
-          "source": "$btn-secondary-bg",
-          "$value": "{color.secondary.base}"
+          "$value": "{color.secondary.base}",
+          "source": "$btn-secondary-bg"
         },
         "outline-secondary": {
-          "source": "$btn-secondary-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-secondary-outline-bg"
         },
         "inverse-outline-secondary": {
-          "source": "$btn-secondary-inverse-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-secondary-inverse-outline-bg"
         },
         "inverse-secondary": {
-          "source": "$btn-secondary-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-secondary}"
+          "$value": "{color.btn.text.inverse-secondary}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-secondary-inverse-bg"
         }
       },
       "border": {
         "secondary": {
-          "source": "$btn-secondary-border-color",
-          "$value": "{color.btn.bg.secondary}"
+          "$value": "{color.btn.bg.secondary}",
+          "source": "$btn-secondary-border-color"
         },
         "outline-secondary": {
-          "source": "$btn-secondary-outline-border-color",
-          "$value": "{color.secondary.base}"
+          "$value": "{color.secondary.base}",
+          "source": "$btn-secondary-outline-border-color"
         },
         "inverse-outline-secondary": {
-          "source": "$btn-secondary-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-secondary-inverse-outline-border-color"
         },
         "inverse-secondary": {
-          "source": "$btn-secondary-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-secondary-inverse-border-color"
         }
       },
       "hover": {
         "text": {
           "secondary": {
-            "source": "$btn-secondary-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.secondary}"
+            "$value": "{color.btn.hover.bg.secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-hover-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-hover-color",
-            "$value": "{color.theme.hover.secondary}"
+            "$value": "{color.theme.hover.secondary}",
+            "source": "$btn-secondary-outline-hover-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-secondary}"
+            "$value": "{color.btn.text.inverse-secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-inverse-hover-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.secondary}"
+            "$value": "{color.theme.hover.secondary}",
+            "source": "$btn-secondary-inverse-outline-hover-color"
           }
         },
         "bg": {
           "secondary": {
-            "source": "$btn-secondary-hover-bg",
-            "$value": "{color.theme.hover.secondary}"
+            "$value": "{color.theme.hover.secondary}",
+            "source": "$btn-secondary-hover-bg"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-hover-bg",
-            "$value": "{color.secondary.100}"
+            "$value": "{color.secondary.100}",
+            "source": "$btn-secondary-outline-hover-bg"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-secondary}"
+            "$value": "{color.btn.bg.inverse-secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-inverse-hover-bg"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-hover-bg",
-            "$value": "{color.secondary.100}"
+            "$value": "{color.secondary.100}",
+            "source": "$btn-secondary-inverse-outline-hover-bg"
           }
         },
         "border": {
           "secondary": {
-            "source": "$btn-secondary-hover-border-color",
-            "$value": "{color.theme.hover.secondary}"
+            "$value": "{color.theme.hover.secondary}",
+            "source": "$btn-secondary-hover-border-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-hover-border-color",
-            "$value": "{color.secondary.900}"
+            "$value": "{color.secondary.900}",
+            "source": "$btn-secondary-outline-hover-border-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-secondary-inverse-outline-hover-border-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-secondary-inverse-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "secondary": {
-            "source": "$btn-secondary-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.secondary}"
+            "$value": "{color.btn.active.bg.secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-active-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-secondary}"
+            "$value": "{color.btn.active.bg.outline-secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-outline-active-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-secondary}"
+            "$value": "{color.btn.text.inverse-secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-inverse-active-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-secondary}"
+            "$value": "{color.btn.active.bg.inverse-outline-secondary}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-secondary-inverse-outline-active-color"
           }
         },
         "bg": {
           "secondary": {
-            "source": "$btn-secondary-active-bg",
-            "$value": "{color.theme.active.secondary}"
+            "$value": "{color.theme.active.secondary}",
+            "source": "$btn-secondary-active-bg"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-active-bg",
-            "$value": "{color.theme.bg.secondary}"
+            "$value": "{color.theme.bg.secondary}",
+            "source": "$btn-secondary-outline-active-bg"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.secondary}"
+            "$value": "{color.theme.bg.secondary}",
+            "source": "$btn-secondary-inverse-outline-active-bg"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-secondary-inverse-active-bg"
           }
         },
         "border": {
           "secondary": {
-            "source": "$btn-secondary-active-border-color",
-            "$value": "{color.theme.active.secondary}"
+            "$value": "{color.theme.active.secondary}",
+            "source": "$btn-secondary-active-border-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-active-border-color",
-            "$value": "{color.theme.active.secondary}"
+            "$value": "{color.theme.active.secondary}",
+            "source": "$btn-secondary-outline-active-border-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-secondary-inverse-outline-active-border-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-secondary-inverse-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "secondary": {
-            "source": "$btn-secondary-focus-color",
-            "$value": "{color.btn.text.secondary}"
+            "$value": "{color.btn.text.secondary}",
+            "source": "$btn-secondary-focus-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-focus-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-inverse-focus-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-focus-color",
-            "$value": "{color.btn.text.outline-secondary}"
+            "$value": "{color.btn.text.outline-secondary}",
+            "source": "$btn-secondary-outline-focus-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-secondary}"
+            "$value": "{color.btn.text.inverse-outline-secondary}",
+            "source": "$btn-secondary-inverse-outline-focus-color"
           }
         },
         "border": {
           "secondary": {
-            "source": "$btn-secondary-focus-border-color",
-            "$value": "{color.btn.bg.secondary}"
+            "$value": "{color.btn.bg.secondary}",
+            "source": "$btn-secondary-focus-border-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-secondary}"
+            "$value": "{color.btn.border.outline-secondary}",
+            "source": "$btn-secondary-outline-focus-border-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-secondary-inverse-focus-border-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-secondary-inverse-outline-focus-border-color"
           }
         },
         "outline": {
           "secondary": {
-            "source": "$btn-secondary-focus-outline-color",
-            "$value": "{color.theme.focus.secondary}"
+            "$value": "{color.theme.focus.secondary}",
+            "source": "$btn-secondary-focus-outline-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-focus-outline-color",
-            "$value": "{color.theme.focus.secondary}"
+            "$value": "{color.theme.focus.secondary}",
+            "source": "$btn-secondary-outline-focus-outline-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-focus-outline-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-secondary-inverse-focus-outline-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.border.inverse-outline-secondary}"
+            "$value": "{color.btn.border.inverse-outline-secondary}",
+            "source": "$btn-secondary-inverse-outline-focus-outline-color"
           }
         },
         "bg": {
           "secondary": {
-            "source": "$btn-secondary-focus-bg",
-            "$value": "{color.btn.bg.secondary}"
+            "$value": "{color.btn.bg.secondary}",
+            "source": "$btn-secondary-focus-bg"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-focus-bg",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-secondary-outline-focus-bg"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-secondary}"
+            "$value": "{color.btn.bg.inverse-secondary}",
+            "source": "$btn-secondary-inverse-focus-bg"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-inverse-outline-focus-bg"
           }
         }
       },
       "disabled": {
         "text": {
           "secondary": {
-            "source": "$btn-secondary-disabled-color",
-            "$value": "{color.btn.text.secondary}"
+            "$value": "{color.btn.text.secondary}",
+            "source": "$btn-secondary-disabled-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-disabled-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-outline-disabled-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-disabled-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-inverse-disabled-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-secondary}"
+            "$value": "{color.btn.text.inverse-outline-secondary}",
+            "source": "$btn-secondary-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "secondary": {
-            "source": "$btn-secondary-disabled-bg",
-            "$value": "{color.btn.bg.secondary}"
+            "$value": "{color.btn.bg.secondary}",
+            "source": "$btn-secondary-disabled-bg"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-outline-disabled-bg"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-inverse-disabled-bg"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "secondary": {
-            "source": "$btn-secondary-disabled-border-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-secondary-disabled-border-color"
           },
           "outline-secondary": {
-            "source": "$btn-secondary-outline-disabled-border-color",
-            "$value": "{color.secondary.base}"
+            "$value": "{color.secondary.base}",
+            "source": "$btn-secondary-outline-disabled-border-color"
           },
           "inverse-secondary": {
-            "source": "$btn-secondary-inverse-disabled-border-color",
-            "$value": "{color.btn.border.inverse-secondary}"
+            "$value": "{color.btn.border.inverse-secondary}",
+            "source": "$btn-secondary-inverse-disabled-border-color"
           },
           "inverse-outline-secondary": {
-            "source": "$btn-secondary-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.border.inverse-outline-secondary}"
+            "$value": "{color.btn.border.inverse-outline-secondary}",
+            "source": "$btn-secondary-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index e27a0aaca9..8399a828b4 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "success": {
-          "source": "$btn-success-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.success}"
+          "$value": "{color.btn.bg.success}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-success-color"
         },
         "outline-success": {
-          "source": "$btn-success-outline-color",
-          "$value": "{color.success.base}"
+          "$value": "{color.success.base}",
+          "source": "$btn-success-outline-color"
         },
         "inverse-success": {
-          "source": "$btn-success-inverse-color",
-          "$value": "{color.success.base}"
+          "$value": "{color.success.base}",
+          "source": "$btn-success-inverse-color"
         },
         "inverse-outline-success": {
-          "source": "$btn-success-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-success-inverse-outline-color"
         }
       },
       "bg": {
         "success": {
-          "source": "$btn-success-bg",
-          "$value": "{color.success.base}"
+          "$value": "{color.success.base}",
+          "source": "$btn-success-bg"
         },
         "outline-success": {
-          "source": "$btn-success-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-success-outline-bg"
         },
         "inverse-success": {
-          "source": "$btn-success-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-success}"
+          "$value": "{color.btn.text.inverse-success}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-success-inverse-bg"
         },
         "inverse-outline-success": {
-          "source": "$btn-success-inverse-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-success-inverse-outline-bg"
         }
       },
       "border": {
         "success": {
-          "source": "$btn-success-border-color",
-          "$value": "{color.btn.bg.success}"
+          "$value": "{color.btn.bg.success}",
+          "source": "$btn-success-border-color"
         },
         "outline-success": {
-          "source": "$btn-success-outline-border-color",
-          "$value": "{color.success.base}"
+          "$value": "{color.success.base}",
+          "source": "$btn-success-outline-border-color"
         },
         "inverse-success": {
-          "source": "$btn-success-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-success-inverse-border-color"
         },
         "inverse-outline-success": {
-          "source": "$btn-success-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-success-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "success": {
-            "source": "$btn-success-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.success}"
+            "$value": "{color.btn.hover.bg.success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-hover-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-hover-color",
-            "$value": "{color.theme.hover.success}"
+            "$value": "{color.theme.hover.success}",
+            "source": "$btn-success-outline-hover-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-success}"
+            "$value": "{color.btn.text.inverse-success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-inverse-hover-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.success}"
+            "$value": "{color.theme.hover.success}",
+            "source": "$btn-success-inverse-outline-hover-color"
           }
         },
         "bg": {
           "success": {
-            "source": "$btn-success-hover-bg",
-            "$value": "{color.theme.hover.success}"
+            "$value": "{color.theme.hover.success}",
+            "source": "$btn-success-hover-bg"
           },
           "outline-success": {
-            "source": "$btn-success-outline-hover-bg",
-            "$value": "{color.success.100}"
+            "$value": "{color.success.100}",
+            "source": "$btn-success-outline-hover-bg"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-success}"
+            "$value": "{color.btn.bg.inverse-success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-inverse-hover-bg"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-hover-bg",
-            "$value": "{color.success.100}"
+            "$value": "{color.success.100}",
+            "source": "$btn-success-inverse-outline-hover-bg"
           }
         },
         "border": {
           "success": {
-            "source": "$btn-success-hover-border-color",
-            "$value": "{color.theme.hover.success}"
+            "$value": "{color.theme.hover.success}",
+            "source": "$btn-success-hover-border-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-hover-border-color",
-            "$value": "{color.success.900}"
+            "$value": "{color.success.900}",
+            "source": "$btn-success-outline-hover-border-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-success-inverse-hover-border-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-success-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "success": {
-            "source": "$btn-success-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.success}"
+            "$value": "{color.btn.active.bg.success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-active-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-success}"
+            "$value": "{color.btn.active.bg.outline-success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-outline-active-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-success}"
+            "$value": "{color.btn.text.inverse-success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-inverse-active-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-success}"
+            "$value": "{color.btn.active.bg.inverse-outline-success}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-success-inverse-outline-active-color"
           }
         },
         "bg": {
           "success": {
-            "source": "$btn-success-active-bg",
-            "$value": "{color.theme.active.success}"
+            "$value": "{color.theme.active.success}",
+            "source": "$btn-success-active-bg"
           },
           "outline-success": {
-            "source": "$btn-success-outline-active-bg",
-            "$value": "{color.theme.bg.success}"
+            "$value": "{color.theme.bg.success}",
+            "source": "$btn-success-outline-active-bg"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-success-inverse-active-bg"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.success}"
+            "$value": "{color.theme.bg.success}",
+            "source": "$btn-success-inverse-outline-active-bg"
           }
         },
         "border": {
           "success": {
-            "source": "$btn-success-active-border-color",
-            "$value": "{color.theme.active.success}"
+            "$value": "{color.theme.active.success}",
+            "source": "$btn-success-active-border-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-active-border-color",
-            "$value": "{color.theme.active.success}"
+            "$value": "{color.theme.active.success}",
+            "source": "$btn-success-outline-active-border-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-active-border-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-inverse-active-border-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-success-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "success": {
-            "source": "$btn-success-focus-color",
-            "$value": "{color.btn.text.success}"
+            "$value": "{color.btn.text.success}",
+            "source": "$btn-success-focus-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-focus-color",
-            "$value": "{color.btn.text.outline-success}"
+            "$value": "{color.btn.text.outline-success}",
+            "source": "$btn-success-outline-focus-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-success}"
+            "$value": "{color.btn.text.inverse-success}",
+            "source": "$btn-success-inverse-focus-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-success}"
+            "$value": "{color.btn.text.inverse-outline-success}",
+            "source": "$btn-success-inverse-outline-focus-color"
           }
         },
         "border": {
           "success": {
-            "source": "$btn-success-focus-border-color",
-            "$value": "{color.btn.border.success}"
+            "$value": "{color.btn.border.success}",
+            "source": "$btn-success-focus-border-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-success}"
+            "$value": "{color.btn.border.outline-success}",
+            "source": "$btn-success-outline-focus-border-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-focus-border-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-success-inverse-focus-border-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-success}"
+            "$value": "{color.btn.border.inverse-outline-success}",
+            "source": "$btn-success-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "success": {
-            "source": "$btn-success-focus-bg",
-            "$value": "{color.btn.bg.success}"
+            "$value": "{color.btn.bg.success}",
+            "source": "$btn-success-focus-bg"
           },
           "outline-success": {
-            "source": "$btn-success-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-outline-focus-bg"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-success}"
+            "$value": "{color.btn.bg.inverse-success}",
+            "source": "$btn-success-inverse-focus-bg"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "success": {
-            "source": "$btn-success-focus-outline-color",
-            "$value": "{color.theme.focus.success}"
+            "$value": "{color.theme.focus.success}",
+            "source": "$btn-success-focus-outline-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-focus-outline-color",
-            "$value": "{color.theme.focus.success}"
+            "$value": "{color.theme.focus.success}",
+            "source": "$btn-success-outline-focus-outline-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-success}"
+            "$value": "{color.btn.focus.border.inverse-success}",
+            "source": "$btn-success-inverse-focus-outline-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-focus-outline-color",
-            "$value": "{color.btn.focus.border.inverse-outline-success}"
+            "$value": "{color.btn.focus.border.inverse-outline-success}",
+            "source": "$btn-success-inverse-outline-focus-outline-color"
           }
         }
       },
       "disabled": {
         "text": {
           "success": {
-            "source": "$btn-success-disabled-color",
-            "$value": "{color.btn.text.success}"
+            "$value": "{color.btn.text.success}",
+            "source": "$btn-success-disabled-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-disabled-color",
-            "$value": "{color.btn.text.outline-success}"
+            "$value": "{color.btn.text.outline-success}",
+            "source": "$btn-success-outline-disabled-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-disabled-color",
-            "$value": "{color.success.base}"
+            "$value": "{color.success.base}",
+            "source": "$btn-success-inverse-disabled-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-success}"
+            "$value": "{color.btn.text.inverse-outline-success}",
+            "source": "$btn-success-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "success": {
-            "source": "$btn-success-disabled-bg",
-            "$value": "{color.btn.bg.success}"
+            "$value": "{color.btn.bg.success}",
+            "source": "$btn-success-disabled-bg"
           },
           "outline-success": {
-            "source": "$btn-success-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-outline-disabled-bg"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-inverse-disabled-bg"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "success": {
-            "source": "$btn-success-disabled-border-color",
-            "$value": "{color.btn.border.success}"
+            "$value": "{color.btn.border.success}",
+            "source": "$btn-success-disabled-border-color"
           },
           "outline-success": {
-            "source": "$btn-success-outline-disabled-border-color",
-            "$value": "{color.btn.border.outline-success}"
+            "$value": "{color.btn.border.outline-success}",
+            "source": "$btn-success-outline-disabled-border-color"
           },
           "inverse-success": {
-            "source": "$btn-success-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-success-inverse-disabled-border-color"
           },
           "inverse-outline-success": {
-            "source": "$btn-success-inverse-outline-disabled-border-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-success-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json
index bfb8c43e22..645c3ef68c 100644
--- a/tokens/src/themes/light/components/Button/tertiary.json
+++ b/tokens/src/themes/light/components/Button/tertiary.json
@@ -3,81 +3,183 @@
     "$type": "color",
     "btn": {
       "text": {
-        "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
-        "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
+        "tertiary": {
+          "$value": "{color.gray.700}",
+          "source": "$btn-tertiary-color"
+        },
+        "inverse-tertiary": {
+          "$value": "{color.white}",
+          "source": "$btn-inverse-tertiary-color"
+        }
       },
       "bg": {
-        "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
-        "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
+        "tertiary": {
+          "$value": "transparent",
+          "source": "$btn-tertiary-bg"
+        },
+        "inverse-tertiary": {
+          "$value": "transparent",
+          "source": "$btn-inverse-tertiary-bg"
+        }
       },
       "border": {
-        "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
-        "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
+        "tertiary": {
+          "$value": "transparent",
+          "source": "$btn-tertiary-border-color"
+        },
+        "inverse-tertiary": {
+          "$value": "transparent",
+          "source": "$btn-inverse-tertiary-border-color"
+        }
       },
       "hover": {
         "text": {
-          "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
+          "tertiary": {
+            "$value": "{color.gray.700}",
+            "source": "$btn-tertiary-hover-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.white}",
+            "source": "$btn-inverse-tertiary-hover-color"
+          }
         },
         "bg": {
-          "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" },
+          "tertiary": {
+            "$value": "{color.light.500}",
+            "source": "$btn-tertiary-hover-bg"
+          },
           "inverse-tertiary": {
-            "source": "$btn-inverse-tertiary-hover-bg",
-            "modify": [{ "type": "alpha", "amount": 0.1 }],
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-inverse-tertiary-hover-bg"
           }
         },
         "border": {
-          "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
+          "tertiary": {
+            "$value": "transparent",
+            "source": "$btn-tertiary-hover-border-color"
+          },
+          "inverse-tertiary": {
+            "$value": "transparent",
+            "source": "$btn-inverse-tertiary-hover-border-color"
+          }
         }
       },
       "active": {
         "text": {
-          "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
+          "tertiary": {
+            "$value": "{color.gray.700}",
+            "source": "$btn-tertiary-active-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.white}",
+            "source": "$btn-inverse-tertiary-active-color"
+          }
         },
         "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}" }
+          "tertiary": {
+            "$value": "{color.light.500}",
+            "source": "$btn-tertiary-active-bg"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.btn.hover.bg.inverse-tertiary}",
+            "source": "$btn-inverse-tertiary-active-bg"
+          }
         },
         "border": {
-          "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
+          "tertiary": {
+            "$value": "transparent",
+            "source": "$btn-tertiary-active-border-color"
+          },
+          "inverse-tertiary": {
+            "$value": "transparent",
+            "source": "$btn-inverse-tertiary-active-border-color"
+          }
         }
       },
       "focus": {
         "text": {
-          "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}" }
+          "tertiary": {
+            "$value": "{color.btn.text.tertiary}",
+            "source": "$btn-tertiary-focus-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.btn.text.inverse-tertiary}",
+            "source": "$btn-inverse-tertiary-focus-color"
+          }
         },
         "border": {
-          "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" }
+          "tertiary": {
+            "$value": "{color.btn.border.tertiary}",
+            "source": "$btn-tertiary-focus-border-color"
+          },
+          "inverse-tertiary": {
+            "$value": "transparent",
+            "source": "$btn-inverse-tertiary-focus-border-color"
+          }
         },
         "bg": {
-          "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
+          "tertiary": {
+            "$value": "inherit",
+            "source": "$btn-tertiary-focus-bg"
+          },
+          "inverse-tertiary": {
+            "$value": "inherit",
+            "source": "$btn-inverse-tertiary-focus-bg"
+          }
         },
         "outline": {
-          "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" }
+          "tertiary": {
+            "$value": "{color.theme.focus.primary}",
+            "source": "$btn-tertiary-focus-outline-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.white}",
+            "source": "$btn-inverse-tertiary-focus-outline-color"
+          }
         }
       },
       "disabled": {
         "text": {
-          "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}" }
+          "tertiary": {
+            "$value": "{color.btn.text.tertiary}",
+            "source": "$btn-tertiary-disabled-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.btn.text.inverse-tertiary}",
+            "source": "$btn-inverse-tertiary-disabled-color"
+          }
         },
         "bg": {
-          "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
-          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
+          "tertiary": {
+            "$value": "inherit",
+            "source": "$btn-tertiary-disabled-bg"
+          },
+          "inverse-tertiary": {
+            "$value": "inherit",
+            "source": "$btn-inverse-tertiary-disabled-bg"
+          }
         },
         "border": {
-          "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}" }
+          "tertiary": {
+            "$value": "{color.btn.border.tertiary}",
+            "source": "$btn-tertiary-disabled-border-color"
+          },
+          "inverse-tertiary": {
+            "$value": "{color.btn.border.inverse-tertiary}",
+            "source": "$btn-inverse-tertiary-disabled-border-color"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index eeb6ff1806..2cfa77df24 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -4,309 +4,384 @@
     "btn": {
       "text": {
         "warning": {
-          "source": "$btn-warning-color",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.bg.warning}"
+          "$value": "{color.btn.bg.warning}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-warning-color"
         },
         "outline-warning": {
-          "source": "$btn-warning-outline-color",
-          "$value": "{color.warning.base}"
+          "$value": "{color.warning.base}",
+          "source": "$btn-warning-outline-color"
         },
         "inverse-warning": {
-          "source": "$btn-warning-inverse-color",
-          "$value": "{color.warning.base}"
+          "$value": "{color.warning.base}",
+          "source": "$btn-warning-inverse-color"
         },
         "inverse-outline-warning": {
-          "source": "$btn-warning-inverse-outline-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-warning-inverse-outline-color"
         }
       },
       "bg": {
         "warning": {
-          "source": "$btn-warning-bg",
-          "$value": "{color.warning.base}"
+          "$value": "{color.warning.base}",
+          "source": "$btn-warning-bg"
         },
         "outline-warning": {
-          "source": "$btn-warning-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-warning-outline-bg"
         },
         "inverse-warning": {
-          "source": "$btn-warning-inverse-bg",
-          "modify": [{ "type": "color-yiq" }],
-          "$value": "{color.btn.text.inverse-warning}"
+          "$value": "{color.btn.text.inverse-warning}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "color-yiq"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$btn-warning-inverse-bg"
         },
         "inverse-outline-warning": {
-          "source": "$btn-warning-inverse-outline-bg",
-          "$value": "inherit"
+          "$value": "inherit",
+          "source": "$btn-warning-inverse-outline-bg"
         }
       },
       "border": {
         "warning": {
-          "source": "$btn-warning-border-color",
-          "$value": "{color.btn.bg.warning}"
+          "$value": "{color.btn.bg.warning}",
+          "source": "$btn-warning-border-color"
         },
         "outline-warning": {
-          "source": "$btn-warning-outline-border-color",
-          "$value": "{color.warning.base}"
+          "$value": "{color.warning.base}",
+          "source": "$btn-warning-outline-border-color"
         },
         "inverse-warning": {
-          "source": "$btn-warning-inverse-border-color",
-          "$value": "transparent"
+          "$value": "transparent",
+          "source": "$btn-warning-inverse-border-color"
         },
         "inverse-outline-warning": {
-          "source": "$btn-warning-inverse-outline-border-color",
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "source": "$btn-warning-inverse-outline-border-color"
         }
       },
       "hover": {
         "text": {
           "warning": {
-            "source": "$btn-warning-hover-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.hover.bg.warning}"
+            "$value": "{color.btn.hover.bg.warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-hover-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-hover-color",
-            "$value": "{color.theme.hover.warning}"
+            "$value": "{color.theme.hover.warning}",
+            "source": "$btn-warning-outline-hover-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.text.inverse-warning}"
+            "$value": "{color.btn.text.inverse-warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-inverse-hover-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-hover-color",
-            "$value": "{color.theme.hover.warning}"
+            "$value": "{color.theme.hover.warning}",
+            "source": "$btn-warning-inverse-outline-hover-color"
           }
         },
         "bg": {
           "warning": {
-            "source": "$btn-warning-hover-bg",
-            "$value": "{color.theme.hover.warning}"
+            "$value": "{color.theme.hover.warning}",
+            "source": "$btn-warning-hover-bg"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-hover-bg",
-            "$value": "{color.warning.100}"
+            "$value": "{color.warning.100}",
+            "source": "$btn-warning-outline-hover-bg"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }],
-            "$value": "{color.btn.bg.inverse-warning}"
+            "$value": "{color.btn.bg.inverse-warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.075
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-inverse-hover-bg"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-hover-bg",
-            "$value": "{color.warning.100}"
+            "$value": "{color.warning.100}",
+            "source": "$btn-warning-inverse-outline-hover-bg"
           }
         },
         "border": {
           "warning": {
-            "source": "$btn-warning-hover-border-color",
-            "$value": "{color.theme.hover.warning}"
+            "$value": "{color.theme.hover.warning}",
+            "source": "$btn-warning-hover-border-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-hover-border-color",
-            "$value": "{color.warning.900}"
+            "$value": "{color.warning.900}",
+            "source": "$btn-warning-outline-hover-border-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-warning-inverse-hover-border-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-hover-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-warning-inverse-outline-hover-border-color"
           }
         }
       },
       "active": {
         "text": {
           "warning": {
-            "source": "$btn-warning-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.warning}"
+            "$value": "{color.btn.active.bg.warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-active-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.outline-warning}"
+            "$value": "{color.btn.active.bg.outline-warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-outline-active-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }],
-            "$value": "{color.btn.text.inverse-warning}"
+            "$value": "{color.btn.text.inverse-warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-inverse-active-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.btn.active.bg.inverse-outline-warning}"
+            "$value": "{color.btn.active.bg.inverse-outline-warning}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$btn-warning-inverse-outline-active-color"
           }
         },
         "bg": {
           "warning": {
-            "source": "$btn-warning-active-bg",
-            "$value": "{color.theme.active.warning}"
+            "$value": "{color.theme.active.warning}",
+            "source": "$btn-warning-active-bg"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-active-bg",
-            "$value": "{color.theme.bg.warning}"
+            "$value": "{color.theme.bg.warning}",
+            "source": "$btn-warning-outline-active-bg"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-active-bg",
-            "$value": "{color.gray.100}"
+            "$value": "{color.gray.100}",
+            "source": "$btn-warning-inverse-active-bg"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-active-bg",
-            "$value": "{color.theme.bg.warning}"
+            "$value": "{color.theme.bg.warning}",
+            "source": "$btn-warning-inverse-outline-active-bg"
           }
         },
         "border": {
           "warning": {
-            "source": "$btn-warning-active-border-color",
-            "$value": "{color.theme.active.warning}"
+            "$value": "{color.theme.active.warning}",
+            "source": "$btn-warning-active-border-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-active-border-color",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-inverse-active-border-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-active-border-color",
-            "$value": "{color.theme.active.warning}"
+            "$value": "{color.theme.active.warning}",
+            "source": "$btn-warning-outline-active-border-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-active-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-warning-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
         "text": {
           "warning": {
-            "source": "$btn-warning-focus-color",
-            "$value": "{color.btn.text.warning}"
+            "$value": "{color.btn.text.warning}",
+            "source": "$btn-warning-focus-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-focus-color",
-            "$value": "{color.btn.text.outline-warning}"
+            "$value": "{color.btn.text.outline-warning}",
+            "source": "$btn-warning-outline-focus-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-focus-color",
-            "$value": "{color.btn.text.inverse-warning}"
+            "$value": "{color.btn.text.inverse-warning}",
+            "source": "$btn-warning-inverse-focus-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-focus-color",
-            "$value": "{color.btn.text.inverse-outline-warning}"
+            "$value": "{color.btn.text.inverse-outline-warning}",
+            "source": "$btn-warning-inverse-outline-focus-color"
           }
         },
         "border": {
           "warning": {
-            "source": "$btn-warning-focus-border-color",
-            "$value": "{color.btn.border.warning}"
+            "$value": "{color.btn.border.warning}",
+            "source": "$btn-warning-focus-border-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-focus-border-color",
-            "$value": "{color.btn.border.outline-warning}"
+            "$value": "{color.btn.border.outline-warning}",
+            "source": "$btn-warning-outline-focus-border-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-focus-border-color",
-            "$value": "{color.btn.border.inverse-warning}"
+            "$value": "{color.btn.border.inverse-warning}",
+            "source": "$btn-warning-inverse-focus-border-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-focus-border-color",
-            "$value": "{color.btn.border.inverse-outline-warning}"
+            "$value": "{color.btn.border.inverse-outline-warning}",
+            "source": "$btn-warning-inverse-outline-focus-border-color"
           }
         },
         "bg": {
           "warning": {
-            "source": "$btn-warning-focus-bg",
-            "$value": "{color.btn.bg.warning}"
+            "$value": "{color.btn.bg.warning}",
+            "source": "$btn-warning-focus-bg"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-outline-focus-bg"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-focus-bg",
-            "$value": "{color.btn.bg.inverse-warning}"
+            "$value": "{color.btn.bg.inverse-warning}",
+            "source": "$btn-warning-inverse-focus-bg"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-inverse-outline-focus-bg"
           }
         },
         "outline": {
           "warning": {
-            "source": "$btn-warning-focus-outline-color",
-            "$value": "{color.theme.focus.warning}"
+            "$value": "{color.theme.focus.warning}",
+            "source": "$btn-warning-focus-outline-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-focus-outline-color",
-            "$value": "{color.theme.focus.warning}"
+            "$value": "{color.theme.focus.warning}",
+            "source": "$btn-warning-outline-focus-outline-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-focus-outline-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$btn-warning-inverse-focus-outline-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-focus-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-inverse-outline-focus-bg"
           }
         }
       },
       "disabled": {
         "text": {
           "warning": {
-            "source": "$btn-warning-disabled-color",
-            "$value": "{color.btn.text.warning}"
+            "$value": "{color.btn.text.warning}",
+            "source": "$btn-warning-disabled-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-disabled-color",
-            "$value": "{color.btn.text.outline-warning}"
+            "$value": "{color.btn.text.outline-warning}",
+            "source": "$btn-warning-outline-disabled-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-disabled-color",
-            "$value": "{color.warning.base}"
+            "$value": "{color.warning.base}",
+            "source": "$btn-warning-inverse-disabled-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-disabled-color",
-            "$value": "{color.btn.text.inverse-outline-warning}"
+            "$value": "{color.btn.text.inverse-outline-warning}",
+            "source": "$btn-warning-inverse-outline-disabled-color"
           }
         },
         "bg": {
           "warning": {
-            "source": "$btn-warning-disabled-bg",
-            "$value": "{color.btn.bg.warning}"
+            "$value": "{color.btn.bg.warning}",
+            "source": "$btn-warning-disabled-bg"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-outline-disabled-bg"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-inverse-disabled-bg"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-disabled-bg",
-            "$value": "inherit"
+            "$value": "inherit",
+            "source": "$btn-warning-inverse-outline-disabled-bg"
           }
         },
         "border": {
           "warning": {
-            "source": "$btn-warning-disabled-border-color",
-            "$value": "{color.btn.border.warning}"
+            "$value": "{color.btn.border.warning}",
+            "source": "$btn-warning-disabled-border-color"
           },
           "outline-warning": {
-            "source": "$btn-warning-outline-disabled-border-color",
-            "$value": "{color.btn.border.outline-warning}"
+            "$value": "{color.btn.border.outline-warning}",
+            "source": "$btn-warning-outline-disabled-border-color"
           },
           "inverse-warning": {
-            "source": "$btn-warning-inverse-disabled-border-color",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$btn-warning-inverse-disabled-border-color"
           },
           "inverse-outline-warning": {
-            "source": "$btn-warning-inverse-outline-disabled-border-color",
-            "$value": "{color.btn.border.inverse-outline-warning}"
+            "$value": "{color.btn.border.inverse-outline-warning}",
+            "source": "$btn-warning-inverse-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json
index faf3412fee..b69c8d1327 100644
--- a/tokens/src/themes/light/components/Card.json
+++ b/tokens/src/themes/light/components/Card.json
@@ -2,24 +2,54 @@
   "color": {
     "$type": "color",
     "card": {
-      "base": { "source": "$card-color", "$value": "inherit" },
+      "base": {
+        "$value": "inherit",
+        "source": "$card-color"
+      },
       "bg": {
-        "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}" }
+        "base": {
+          "$value": "{color.bg.base}",
+          "source": "$card-bg"
+        },
+        "dark": {
+          "$value": "{color.primary.500}",
+          "source": "$card-bg-dark"
+        },
+        "muted": {
+          "$value": "{color.light.200}",
+          "source": "$card-bg-muted"
+        }
       },
       "border": {
         "base": {
-          "source": "$card-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.125 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.125
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$card-border-color"
         },
         "focus": {
-          "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
-          "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
+          "base": {
+            "$value": "{color.primary.500}",
+            "source": "$card-border-focus-color"
+          },
+          "dark": {
+            "$value": "{color.theme.focus.primary}",
+            "source": "$card-border-focus-color-dark"
+          }
         }
       },
-      "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" }
+      "divider-bg": {
+        "$value": "{color.light.400}",
+        "source": "$card-divider-bg"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json
index fd4e5a58f4..ba31e82544 100644
--- a/tokens/src/themes/light/components/Carousel.json
+++ b/tokens/src/themes/light/components/Carousel.json
@@ -3,12 +3,21 @@
     "$type": "color",
     "carousel": {
       "control": {
-        "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
+        "base": {
+          "$value": "{color.white}",
+          "source": "$carousel-control-color"
+        }
       },
       "indicator": {
-        "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
+        "active-bg": {
+          "$value": "{color.white}",
+          "source": "$carousel-indicator-active-bg"
+        }
       },
-      "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
+      "caption": {
+        "$value": "{color.white}",
+        "source": "$carousel-caption-color"
+      }
     }
   },
   "content": {
@@ -17,16 +26,44 @@
       "control": {
         "bg": {
           "prev-icon": {
-            "source": "$carousel-control-prev-icon-bg",
-            "outputReferences": false,
-            "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\")"
+            "$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\")",
+            "outputReferences": {
+              "reorderedData": false,
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "str-replace",
+                  "toReplace": "#",
+                  "replaceWith": "%23"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$carousel-control-prev-icon-bg"
           },
           "next-icon": {
-            "source": "$carousel-control-next-icon-bg",
-            "outputReferences": false,
-            "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\")"
+            "$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\")",
+            "outputReferences": {
+              "reorderedData": false,
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "str-replace",
+                  "toReplace": "#",
+                  "replaceWith": "%23"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$carousel-control-next-icon-bg"
           }
         }
       }
@@ -37,10 +74,16 @@
     "carousel": {
       "control": {
         "opacity": {
-          "base": { "source": "$carousel-control-opacity", "$value": ".5" },
-          "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
+          "base": {
+            "$value": ".5",
+            "source": "$carousel-control-opacity"
+          },
+          "hover": {
+            "$value": ".9",
+            "source": "$carousel-control-hover-opacity"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json
index 291598a431..3442eaadcf 100644
--- a/tokens/src/themes/light/components/Chip.json
+++ b/tokens/src/themes/light/components/Chip.json
@@ -3,36 +3,72 @@
     "$type": "color",
     "chip": {
       "text": {
-        "light": { "source": "$chip-light-color", "$value": "{color.black}" },
-        "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
+        "light": {
+          "$value": "{color.black}",
+          "source": "$chip-light-color"
+        },
+        "dark": {
+          "$value": "{color.white}",
+          "source": "$chip-dark-color"
+        }
       },
       "bg": {
-        "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
-        "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
+        "light": {
+          "$value": "{color.white}",
+          "source": "$chip-light-bg-color"
+        },
+        "dark": {
+          "$value": "{color.primary.300}",
+          "source": "$chip-dark-bg"
+        }
       },
       "border": {
-        "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
+        "base": {
+          "$value": "{color.light.800}",
+          "source": "$chip-border-color"
+        },
         "focus": {
           "selected": {
-            "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}" }
+            "dark": {
+              "$value": "{color.chip.outline.dark}",
+              "source": "$chip-dark-selected-focus-border-color"
+            },
+            "light": {
+              "$value": "{color.dark.500}",
+              "source": "$chip-light-selected-focus-border-color"
+            }
           }
         }
       },
       "label": {
-        "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
-        "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
+        "base": {
+          "$value": "{color.primary.700}",
+          "source": "$chip-label-color"
+        },
+        "dark": {
+          "$value": "{color.chip.outline.dark}",
+          "source": "$chip-dark-label-color"
+        }
       },
       "outline": {
-        "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
-        "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
+        "dark": {
+          "$value": "{color.white}",
+          "source": "$chip-dark-outline-color"
+        },
+        "light": {
+          "$value": "{color.chip.label.base}",
+          "source": "$chip-light-outline-color"
+        }
       }
     }
   },
   "other": {
     "$type": "ratio",
     "chip": {
-      "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
+      "opacity-disabled": {
+        "$value": ".3",
+        "source": "$chip-disable-opacity"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index dcba0a2d29..65836cf12d 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -1,20 +1,21 @@
 {
   "color": {
     "$type": "color",
-    "close-button": { "source": "$close-color", "$value": "{color.black}" }
+    "close-button": {
+      "$value": "{color.black}",
+      "source": "$close-color"
+    }
   },
   "elevation": {
     "$type": "shadow",
     "close-button": {
       "text-shadow": {
-        "source": "$close-text-shadow",
         "$value": {
-          "color": "{color.white}",
-          "offsetX": "0",
-          "offsetY": "1px",
-          "blur": "0"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$close-text-shadow"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json
index 07785b9754..8d3b65998a 100644
--- a/tokens/src/themes/light/components/Code.json
+++ b/tokens/src/themes/light/components/Code.json
@@ -2,20 +2,35 @@
   "color": {
     "$type": "color",
     "code": {
-      "base": { "source": "$code-color", "$value": "#E83E8C" },
+      "base": {
+        "$value": "#E83E8C",
+        "source": "$code-color"
+      },
       "kbd": {
-        "base": { "source": "$kbd-color", "$value": "{color.white}" },
-        "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
+        "base": {
+          "$value": "{color.white}",
+          "source": "$kbd-color"
+        },
+        "bg": {
+          "$value": "{color.gray.700}",
+          "source": "$kbd-bg"
+        }
       },
-      "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
+      "pre": {
+        "$value": "{color.gray.900}",
+        "source": "$pre-color"
+      }
     }
   },
   "elevation": {
     "$type": "shadow",
     "code": {
       "kbd": {
-        "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
+        "box-shadow": {
+          "$value": "none",
+          "source": "$kbd-box-shadow"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json
index fae700aa26..1921c62e31 100644
--- a/tokens/src/themes/light/components/DataTable.json
+++ b/tokens/src/themes/light/components/DataTable.json
@@ -3,20 +3,38 @@
     "$type": "color",
     "data-table": {
       "bg": {
-        "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
+        "base": {
+          "$value": "{color.bg.base}",
+          "source": "$data-table-background-color"
+        },
         "is-loading": {
-          "source": "$data-table-is-loading-bg",
-          "modify": [{ "type": "alpha", "amount": 0.7 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.7
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$data-table-is-loading-bg"
         }
       },
-      "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
+      "border": {
+        "$value": "{color.light.300}",
+        "source": "$data-table-border-color"
+      }
     }
   },
   "elevation": {
     "$type": "shadow",
     "data-table": {
-      "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
+      "box-shadow": {
+        "$value": "{elevation.box-shadow.sm}",
+        "source": "$data-table-box-shadow"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json
index ba760ef4c0..0c065ea3d3 100644
--- a/tokens/src/themes/light/components/Dropdown.json
+++ b/tokens/src/themes/light/components/Dropdown.json
@@ -2,37 +2,85 @@
   "color": {
     "$type": "color",
     "dropdown": {
-      "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}" },
+      "text": {
+        "$value": "{color.body.base}",
+        "source": "$dropdown-color"
+      },
+      "header": {
+        "$value": "{color.gray.500}",
+        "source": "$dropdown-header-color"
+      },
+      "bg": {
+        "$value": "{color.bg.base}",
+        "source": "$dropdown-bg"
+      },
       "border": {
-        "source": "$dropdown-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.15 }],
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.15
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$dropdown-border-color"
+      },
+      "divider-bg": {
+        "$value": "{color.gray.100}",
+        "source": "$dropdown-divider-bg"
       },
-      "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" },
       "link": {
-        "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
+        "base": {
+          "$value": "{color.gray.900}",
+          "source": "$dropdown-link-color"
+        },
         "hover": {
           "base": {
-            "source": "$dropdown-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.5 }],
-            "$value": "{color.gray.900}"
+            "$value": "{color.gray.900}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.5
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$dropdown-link-hover-color"
           },
-          "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" }
+          "bg": {
+            "$value": "{color.light.300}",
+            "source": "$dropdown-link-hover-bg"
+          }
         },
         "active": {
-          "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
-          "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
+          "base": {
+            "$value": "{color.active}",
+            "source": "$dropdown-link-active-color"
+          },
+          "bg": {
+            "$value": "{color.bg.active}",
+            "source": "$dropdown-link-active-bg"
+          }
         },
-        "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
+        "disabled": {
+          "$value": "{color.disabled}",
+          "source": "$dropdown-link-disabled-color"
+        }
       }
     }
   },
   "elevation": {
     "$type": "shadow",
     "dropdown": {
-      "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
+      "box-shadow": {
+        "$value": "none",
+        "source": "$dropdown-box-shadow"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index 4641968f7c..288e55806e 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -2,10 +2,19 @@
   "color": {
     "$type": "color",
     "dropzone": {
-      "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" },
-      "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" },
+      "error-wrapper": {
+        "$value": "{color.danger.500}",
+        "source": "$dropzone-error-wrapper-color"
+      },
+      "restriction-msg": {
+        "$value": "{color.gray.500}",
+        "source": "$dropzone-restriction-msg-color"
+      },
       "border": {
-        "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
+        "base": {
+          "$value": "{color.gray.500}",
+          "source": "$dropzone-border-color-default"
+        }
       }
     }
   },
@@ -13,49 +22,33 @@
     "$type": "shadow",
     "dropzone": {
       "hover": {
-        "source": "$dropzone-box-shadow-hover",
         "$value": {
-          "color": "{color.info.300}",
-          "spread": "2px",
-          "offsetX": "0",
-          "offsetY": "0",
-          "blur": "0",
-          "inset": "inset"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$dropzone-box-shadow-hover"
       },
       "focus": {
-        "source": "$dropzone-box-shadow-focus",
         "$value": {
-          "color": "{color.info.300}",
-          "spread": "2px",
-          "offsetX": "0",
-          "offsetY": "0",
-          "blur": "0",
-          "inset": "inset"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$dropzone-box-shadow-focus"
       },
       "active": {
-        "source": "$dropzone-box-shadow-active",
         "$value": {
-          "color": "{color.primary.500}",
-          "spread": "2px",
-          "offsetX": "0",
-          "offsetY": "0",
-          "blur": "0",
-          "inset": "inset"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$dropzone-box-shadow-active"
       },
       "error": {
-        "source": "$dropzone-box-shadow-error",
         "$value": {
-          "color": "{color.danger.300}",
-          "spread": "2px",
-          "offsetX": "0",
-          "offsetY": "0",
-          "blur": "0",
-          "inset": "inset"
-        }
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
+        },
+        "source": "$dropzone-box-shadow-error"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json
index 261f97bddd..b2d670f3b7 100644
--- a/tokens/src/themes/light/components/Form/color.json
+++ b/tokens/src/themes/light/components/Form/color.json
@@ -3,67 +3,163 @@
     "form": {
       "input": {
         "$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}" },
+        "base": {
+          "$value": "{color.gray.700}",
+          "source": "$input-color"
+        },
+        "placeholder": {
+          "$value": "{color.gray.500}",
+          "source": "$input-placeholder-color"
+        },
+        "plaintext": {
+          "$value": "{color.body.base}",
+          "source": "$input-plaintext-color"
+        },
+        "border": {
+          "$value": "{color.gray.500}",
+          "source": "$input-border-color"
+        },
         "bg": {
-          "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
-          "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
+          "base": {
+            "$value": "{color.bg.base}",
+            "source": "$input-bg"
+          },
+          "disabled": {
+            "$value": "{color.gray.100}",
+            "source": "$input-disabled-bg"
+          }
         },
         "group": {
           "addon": {
-            "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}" }
+            "base": {
+              "$value": "{color.form.input.base}",
+              "source": "$input-group-addon-color"
+            },
+            "border": {
+              "$value": "{color.form.input.border}",
+              "source": "$input-group-addon-border-color"
+            },
+            "bg": {
+              "$value": "{color.gray.100}",
+              "source": "$input-group-addon-bg"
+            }
           }
         },
         "focus": {
-          "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}" }
+          "base": {
+            "$value": "{color.form.input.base}",
+            "source": "$input-focus-color"
+          },
+          "border": {
+            "$value": "{color.input.focus}",
+            "source": "$input-focus-border-color"
+          },
+          "bg": {
+            "$value": "{color.form.input.bg.base}",
+            "source": "$input-focus-bg"
+          }
         }
       },
       "control": {
         "indicator": {
           "$type": "color",
-          "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
+          "border": {
+            "$value": "{color.gray.700}",
+            "source": "$custom-control-indicator-border-color"
+          },
           "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}" }
+            "base": {
+              "$value": "{color.form.input.bg.base}",
+              "source": "$custom-control-indicator-bg"
+            },
+            "disabled": {
+              "$value": "{color.form.input.bg.disabled}",
+              "source": "$custom-control-indicator-disabled-bg"
+            }
           },
           "checked": {
-            "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}" },
+            "base": {
+              "$value": "{color.bg.active}",
+              "source": "$custom-control-indicator-checked-color"
+            },
+            "valid": {
+              "$value": "{color.success.base}",
+              "source": "$custom-control-indicator-checked-valid-color"
+            },
+            "invalid": {
+              "$value": "{color.danger.base}",
+              "source": "$custom-control-indicator-checked-invalid-color"
+            },
             "bg": {
-              "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
+              "base": {
+                "$value": "{color.bg.active}",
+                "source": "$custom-control-indicator-checked-bg"
+              },
               "disabled": {
-                "source": "$custom-control-indicator-checked-disabled-bg",
-                "modify": [{ "type": "alpha", "amount": 0.5 }],
-                "$value": "{color.primary.base}"
+                "$value": "{color.primary.base}",
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "alpha",
+                      "amount": 0.5
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$custom-control-indicator-checked-disabled-bg"
               }
             },
             "border": {
-              "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}" }
+              "base": {
+                "$value": "{color.form.control.indicator.checked.base}",
+                "source": "$custom-control-indicator-checked-border-color"
+              },
+              "focus": {
+                "$value": "{color.form.input.focus.border}",
+                "source": "$custom-control-indicator-focus-border-color"
+              }
             }
           },
           "active": {
-            "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}" }
+            "base": {
+              "$value": "{color.active}",
+              "source": "$custom-control-indicator-active-color"
+            },
+            "bg": {
+              "$value": "{color.bg.active}",
+              "source": "$custom-control-indicator-active-bg"
+            },
+            "border": {
+              "$value": "{color.form.control.indicator.active.bg}",
+              "source": "$custom-control-indicator-active-border-color"
+            }
           }
         },
         "label": {
           "$type": "color",
-          "base": { "source": "$custom-control-label-color", "$value": "inherit" },
-          "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
+          "base": {
+            "$value": "inherit",
+            "source": "$custom-control-label-color"
+          },
+          "disabled": {
+            "$value": "{color.disabled}",
+            "source": "$custom-control-label-disabled-color"
+          },
           "floating": {
             "text": {
-              "source": "$form-control-floating-label-text-bg",
-              "modify": [{ "type": "alpha", "amount": 0.1 }],
-              "$value": "{color.form.input.bg.base}"
+              "$value": "{color.form.input.bg.base}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "alpha",
+                    "amount": 0.1
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$form-control-floating-label-text-bg"
             }
           }
         },
@@ -71,9 +167,18 @@
           "$type": "color",
           "indicator": {
             "indeterminate": {
-              "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}" }
+              "base": {
+                "$value": "{color.form.control.indicator.checked.base}",
+                "source": "$custom-checkbox-indicator-indeterminate-color"
+              },
+              "bg": {
+                "$value": "{color.bg.active}",
+                "source": "$custom-checkbox-indicator-indeterminate-bg"
+              },
+              "border": {
+                "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}",
+                "source": "$custom-checkbox-indicator-indeterminate-border-color"
+              }
             }
           }
         },
@@ -81,136 +186,261 @@
           "$type": "color",
           "indicator": {
             "checked": {
-              "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
+              "bg": {
+                "$value": "{color.success.base}",
+                "source": "$custom-switch-indicator-checked-bg"
+              }
             }
           }
         },
         "select": {
           "base": {
-            "source": "$custom-select-color",
+            "$type": "color",
             "$value": "{color.form.input.base}",
-            "$type": "color"
+            "source": "$custom-select-color"
           },
           "disabled": {
-            "source": "$custom-select-disabled-color",
+            "$type": "color",
             "$value": "{color.disabled}",
-            "$type": "color"
+            "source": "$custom-select-disabled-color"
           },
           "indicator": {
             "$type": "color",
-            "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
+            "base": {
+              "$value": "{color.theme.hover.gray}",
+              "source": "$custom-select-indicator-color"
+            }
           },
           "bg": {
             "base": {
-              "source": "$custom-select-bg",
+              "$type": "color",
               "$value": "{color.form.input.bg.base}",
-              "$type": "color"
+              "source": "$custom-select-bg"
             },
             "disabled": {
-              "source": "$custom-select-disabled-bg",
+              "$type": "color",
               "$value": "{color.gray.100}",
-              "$type": "color"
+              "source": "$custom-select-disabled-bg"
             },
             "size": {
-              "source": "$custom-select-bg-size",
+              "$type": "dimension",
               "$value": "{color.gray.100}",
-              "$type": "dimension"
+              "source": "$custom-select-bg-size"
             }
           },
           "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}" }
+            "base": {
+              "$value": "{color.form.input.border}",
+              "source": "$custom-select-border-color"
+            },
+            "focus": {
+              "$value": "{color.form.input.focus.border}",
+              "source": "$custom-select-focus-border-color"
+            }
           }
         },
         "range": {
           "$type": "color",
           "track": {
-            "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
+            "bg": {
+              "$value": "{color.gray.300}",
+              "source": "$custom-range-track-bg"
+            }
           },
           "thumb": {
             "bg": {
-              "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
-              "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
+              "base": {
+                "$value": "{color.bg.active}",
+                "source": "$custom-range-thumb-bg"
+              },
+              "disabled": {
+                "$value": "{color.disabled}",
+                "source": "$custom-range-thumb-disabled-bg"
+              },
               "active": {
-                "source": "$custom-range-thumb-active-bg",
-                "modify": [{ "type": "lighten", "amount": "0.35" }],
-                "$value": "{color.bg.active}"
+                "$value": "{color.bg.active}",
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "lighten",
+                      "amount": "0.35"
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$custom-range-thumb-active-bg"
               }
             }
           }
         },
         "file": {
           "$type": "color",
-          "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
+          "base": {
+            "$value": "{color.form.input.base}",
+            "source": "$custom-file-color"
+          },
           "bg": {
-            "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" },
-            "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
+            "base": {
+              "$value": "{color.form.input.bg.base}",
+              "source": "$custom-file-bg"
+            },
+            "disabled": {
+              "$value": "{color.form.input.bg.disabled}",
+              "source": "$custom-file-disabled-bg"
+            }
           },
           "button": {
-            "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}" }
+            "base": {
+              "$value": "{color.form.control.file.base}",
+              "source": "$custom-file-button-color"
+            },
+            "bg": {
+              "$value": "{color.form.input.group.addon.bg}",
+              "source": "$custom-file-button-bg"
+            }
           },
           "border": {
-            "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
-            "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
+            "base": {
+              "$value": "{color.form.input.border}",
+              "source": "$custom-file-border-color"
+            },
+            "focus": {
+              "$value": "{color.form.input.focus.border}",
+              "source": "$custom-file-focus-border-color"
+            }
           }
         }
       },
       "feedback": {
         "$type": "color",
-        "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" },
-        "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" },
+        "valid": {
+          "$value": "{color.success.base}",
+          "source": "$form-feedback-valid-color"
+        },
+        "invalid": {
+          "$value": "{color.danger.base}",
+          "source": "$form-feedback-invalid-color"
+        },
         "icon": {
-          "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" },
-          "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" }
+          "valid": {
+            "$value": "{color.form.feedback.valid}",
+            "source": "$form-feedback-icon-valid-color"
+          },
+          "invalid": {
+            "$value": "{color.form.feedback.invalid}",
+            "source": "$form-feedback-icon-invalid-color"
+          }
         },
         "tooltip": {
           "valid": {
-            "source": "$form-feedback-tooltip-valid-color",
-            "modify": [{ "type": "color-yiq" }],
-            "$value": "{color.form.feedback.valid}"
+            "$value": "{color.form.feedback.valid}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "color-yiq"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$form-feedback-tooltip-valid-color"
           },
           "bg": {
             "valid": {
-              "source": "$form-feedback-tooltip-valid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }],
-              "$value": "{color.form.feedback.valid}"
+              "$value": "{color.form.feedback.valid}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "alpha",
+                    "amount": 0.9
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$form-feedback-tooltip-valid-bg"
             },
             "invalid": {
-              "source": "$form-feedback-tooltip-invalid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }],
-              "$value": "{color.form.feedback.invalid}"
+              "$value": "{color.form.feedback.invalid}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "alpha",
+                    "amount": 0.9
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$form-feedback-tooltip-invalid-bg"
             }
           },
           "box-shadow": {
             "focus": {
               "valid": {
-                "source": "$form-feedback-focus-box-shadow-valid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }],
-                "$value": "{color.form.feedback.valid}"
+                "$value": "{color.form.feedback.valid}",
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "alpha",
+                      "amount": 0.25
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$form-feedback-focus-box-shadow-valid-color"
               },
               "invalid": {
-                "source": "$form-feedback-focus-box-shadow-invalid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }],
-                "$value": "{color.form.feedback.invalid}"
+                "$value": "{color.form.feedback.invalid}",
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "alpha",
+                      "amount": 0.25
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$form-feedback-focus-box-shadow-invalid-color"
               }
             }
           }
         },
         "checked": {
           "valid": {
-            "source": "$form-feedback-checked-valid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }],
-            "$value": "{color.form.feedback.valid}"
+            "$value": "{color.form.feedback.valid}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "lighten",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$form-feedback-checked-valid-color"
           },
           "invalid": {
-            "source": "$form-feedback-checked-invalid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }],
-            "$value": "{color.form.feedback.invalid}"
+            "$value": "{color.form.feedback.invalid}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "lighten",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$form-feedback-checked-invalid-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index 6554295dc1..9995040dda 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -3,70 +3,101 @@
     "$type": "shadow",
     "form": {
       "input": {
-        "base": { "source": "$input-box-shadow", "$value": "none" },
+        "base": {
+          "$value": "none",
+          "source": "$input-box-shadow"
+        },
         "focus": {
-          "source": "$input-focus-box-shadow",
           "$value": {
-            "color": "{color.primary.500}",
-            "spread": "1px",
-            "offsetX": "0",
-            "offsetY": "0",
-            "blur": "0"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$input-focus-box-shadow"
         }
       },
       "control": {
         "indicator": {
-          "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
+          "base": {
+            "$value": "{elevation.form.input.base}",
+            "source": "$custom-control-indicator-box-shadow"
+          },
           "checked": {
-            "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
+            "base": {
+              "$value": "none",
+              "source": "$custom-control-indicator-checked-box-shadow"
+            },
             "focus": {
-              "source": "$custom-control-indicator-focus-box-shadow",
               "$value": {
-                "color": "rgba(0, 0, 0, .1)",
-                "spread": "4px",
-                "offsetX": "0",
-                "offsetY": "0",
-                "blur": "0"
-              }
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              },
+              "source": "$custom-control-indicator-focus-box-shadow"
             }
           },
-          "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
+          "active": {
+            "$value": "none",
+            "source": "$custom-control-indicator-active-box-shadow"
+          }
         },
         "checkbox": {
           "indicator": {
-            "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
+            "indeterminate": {
+              "$value": "none",
+              "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
+            }
           }
         },
         "range": {
-          "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
+          "track": {
+            "$value": "none",
+            "source": "$custom-range-track-box-shadow"
+          },
           "thumb": {
-            "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
+            "base": {
+              "$value": "none",
+              "source": "$custom-range-thumb-box-shadow"
+            },
             "focus": {
-              "source": "$custom-range-thumb-focus-box-shadow",
               "$value": [
                 {
-                  "color": "{color.body.bg}",
-                  "spread": "0",
-                  "offsetX": "0",
-                  "offsetY": ".1rem",
-                  "blur": ".25rem"
+                  "reorderedData": {
+                    "color": "{color.body.bg}",
+                    "spread": "0",
+                    "offsetX": "0",
+                    "offsetY": ".1rem",
+                    "blur": ".25rem"
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
                 }
-              ]
+              ],
+              "source": "$custom-range-thumb-focus-box-shadow"
             }
           }
         },
         "file": {
-          "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" },
-          "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" }
+          "base": {
+            "$value": "{elevation.form.input.base}",
+            "source": "$custom-file-box-shadow"
+          },
+          "focus": {
+            "$value": "{elevation.form.input.focus}",
+            "source": "$custom-file-focus-box-shadow"
+          }
         },
         "select": {
           "border": {
-            "base": { "source": "$custom-select-box-shadow", "$value": "none" },
-            "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+            "base": {
+              "$value": "none",
+              "source": "$custom-select-box-shadow"
+            },
+            "focus": {
+              "$value": "{elevation.input.btn-focus.box-shadow}",
+              "source": "$custom-select-focus-box-shadow"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json
index 80140fe9c8..f11ee36551 100644
--- a/tokens/src/themes/light/components/Form/other.json
+++ b/tokens/src/themes/light/components/Form/other.json
@@ -4,8 +4,8 @@
       "$type": "ratio",
       "feedback": {
         "tooltip-opacity": {
-          "source": "$form-feedback-tooltip-opacity",
-          "$value": ".9"
+          "$value": ".9",
+          "source": "$form-feedback-tooltip-opacity"
         }
       }
     },
@@ -17,30 +17,86 @@
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "source": "$custom-checkbox-indicator-icon-checked",
-                  "outputReferences": false,
-                  "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>\")"
+                  "$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>\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-checkbox-indicator-icon-checked"
                 },
                 "valid": {
-                  "source": "$custom-checkbox-indicator-icon-valid-checked",
-                  "outputReferences": false,
-                  "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>\")"
+                  "$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>\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-checkbox-indicator-icon-valid-checked"
                 },
                 "invalid": {
-                  "source": "$custom-checkbox-indicator-icon-invalid-checked",
-                  "outputReferences": false,
-                  "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>\")"
+                  "$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>\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-checkbox-indicator-icon-invalid-checked"
                 }
               },
               "indeterminate": {
                 "icon": {
-                  "source": "$custom-checkbox-indicator-icon-indeterminate",
-                  "outputReferences": false,
-                  "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>\")"
+                  "$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>\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-checkbox-indicator-icon-indeterminate"
                 }
               }
             }
@@ -50,22 +106,64 @@
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "source": "$custom-radio-indicator-icon-checked",
-                  "outputReferences": false,
-                  "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\")"
+                  "$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\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-radio-indicator-icon-checked"
                 },
                 "valid": {
-                  "source": "$custom-radio-indicator-icon-valid-checked",
-                  "outputReferences": false,
-                  "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\")"
+                  "$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\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-radio-indicator-icon-valid-checked"
                 },
                 "invalid": {
-                  "source": "$custom-radio-indicator-icon-invalid-checked",
-                  "outputReferences": false,
-                  "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\")"
+                  "$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\")",
+                  "outputReferences": {
+                    "reorderedData": false,
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  },
+                  "modify": [
+                    {
+                      "reorderedData": {
+                        "type": "str-replace",
+                        "toReplace": "#",
+                        "replaceWith": "%23"
+                      },
+                      "isKeyOrderMismatched": false,
+                      "mismatches": {}
+                    }
+                  ],
+                  "source": "$custom-radio-indicator-icon-invalid-checked"
                 }
               }
             }
@@ -74,16 +172,44 @@
             "$type": "file",
             "indicator": {
               "icon-off": {
-                "source": "$custom-switch-indicator-icon-off",
-                "outputReferences": false,
-                "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\")"
+                "$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\")",
+                "outputReferences": {
+                  "reorderedData": false,
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                },
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "str-replace",
+                      "toReplace": "#",
+                      "replaceWith": "%23"
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$custom-switch-indicator-icon-off"
               },
               "icon-on": {
-                "source": "$custom-switch-indicator-icon-on",
-                "outputReferences": false,
-                "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\")"
+                "$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\")",
+                "outputReferences": {
+                  "reorderedData": false,
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                },
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "str-replace",
+                      "toReplace": "#",
+                      "replaceWith": "%23"
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$custom-switch-indicator-icon-on"
               }
             }
           },
@@ -91,23 +217,33 @@
             "indicator": {
               "$type": "file",
               "icon": {
-                "source": "$custom-select-indicator",
-                "outputReferences": false,
-                "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>')"
+                "$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>')",
+                "outputReferences": {
+                  "reorderedData": false,
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                },
+                "modify": [
+                  {
+                    "reorderedData": {
+                      "type": "str-replace",
+                      "toReplace": "#",
+                      "replaceWith": "%23"
+                    },
+                    "isKeyOrderMismatched": false,
+                    "mismatches": {}
+                  }
+                ],
+                "source": "$custom-select-indicator"
               }
             },
             "bg": {
-              "source": "$custom-select-background",
+              "$type": "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"
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               },
-              "$type": "background"
+              "source": "$custom-select-background"
             }
           }
         },
@@ -115,20 +251,48 @@
           "$type": "file",
           "icon": {
             "valid": {
-              "source": "$form-feedback-icon-valid",
-              "outputReferences": false,
-              "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\")"
+              "$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\")",
+              "outputReferences": {
+                "reorderedData": false,
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              },
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "str-replace",
+                    "toReplace": "#",
+                    "replaceWith": "%23"
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$form-feedback-icon-valid"
             },
             "invalid": {
-              "source": "$form-feedback-icon-invalid",
-              "outputReferences": false,
-              "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\")"
+              "$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\")",
+              "outputReferences": {
+                "reorderedData": false,
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              },
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "str-replace",
+                    "toReplace": "#",
+                    "replaceWith": "%23"
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$form-feedback-icon-invalid"
             }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index d2e1b47e0b..350b0ae19a 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -3,377 +3,812 @@
     "$type": "color",
     "icon-button": {
       "bg": {
-        "base": { "source": "$btn-icon-bg", "$value": "transparent" },
+        "base": {
+          "$value": "transparent",
+          "source": "$btn-icon-bg"
+        },
         "primary": {
-          "base": { "$value": "{color.icon-button.bg.base}" },
-          "hover": { "$value": "{color.icon-button.text.primary.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.primary.base}" },
-            "focus": { "$value": "{color.icon-button.text.primary.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.secondary.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.brand.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.brand.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.brand.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.success.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.success.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.success.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.warning.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.warning.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.warning.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.danger.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.danger.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.danger.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.light.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.light.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.light.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.dark.base}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.dark.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.dark.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.black}" },
-          "focus": { "$value": "{color.icon-button.bg.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.bg.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.bg.black.active.base}" },
-            "focus": { "$value": "{color.icon-button.bg.black.active.base}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.primary.base}" },
+          "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}" },
-            "hover": { "$value": "{color.icon-button.text.primary.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.primary.base}" },
-            "focus": { "$value": "{color.icon-button.text.primary.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.secondary.base}" },
+          "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}" },
-            "hover": { "$value": "{color.secondary.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.secondary.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.brand.base}" },
+          "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}" },
-            "hover": { "$value": "{color.brand.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.brand.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.success.base}" },
+          "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}" },
-            "hover": { "$value": "{color.success.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.success.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.warning.base}" },
+          "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}" },
-            "hover": { "$value": "{color.warning.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.warning.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.danger.base}" },
+          "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}" },
-            "hover": { "$value": "{color.danger.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.danger.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.light.base}" },
+          "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}" },
-            "hover": { "$value": "{color.light.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.light.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.dark.base}" },
+          "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}" },
-            "hover": { "$value": "{color.dark.base}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.dark.base}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "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}" },
-            "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }
+            "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}" },
-          "hover": { "$value": "{color.icon-button.accent}" },
-          "focus": { "$value": "{color.icon-button.text.black.base}" },
+          "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}" },
-            "hover": { "$value": "{color.black}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.black}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "active": {
-            "base": { "$value": "{color.icon-button.accent}" },
-            "hover": { "$value": "{color.icon-button.accent}" },
-            "focus": { "$value": "{color.icon-button.accent}" }
+            "base": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "hover": {
+              "$value": "{color.icon-button.accent}"
+            },
+            "focus": {
+              "$value": "{color.icon-button.accent}"
+            }
           },
           "inverse-active": {
-            "base": { "$value": "{color.black}" },
-            "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" },
-            "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" }
+            "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": {
-        "source": "$btn-icon-accent-color",
-        "$value": "{color.white}"
+        "$value": "{color.white}",
+        "source": "$btn-icon-accent-color"
       },
       "black": {
-        "source": "$btn-icon-black",
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "source": "$btn-icon-black"
       }
     }
   },
@@ -384,220 +819,184 @@
         "primary": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.primary.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "secondary": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.secondary.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "brand": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.brand.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "success": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.success.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "warning": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.warning.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "danger": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.danger.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "light": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.light.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "dark": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.dark.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         },
         "black": {
           "base": {
             "$value": {
-              "color": "{color.icon-button.text.black.base}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
           "inverse": {
             "$value": {
-              "color": "{color.icon-button.accent}",
-              "spread": "{size.btn.focus.width}",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "0",
-              "inset": "inset"
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           },
-          "active": { "$value": "none" },
-          "inverse-active": { "$value": "none" }
+          "active": {
+            "$value": "none"
+          },
+          "inverse-active": {
+            "$value": "none"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json
index 8c4df0f914..4a94a7eb52 100644
--- a/tokens/src/themes/light/components/Image.json
+++ b/tokens/src/themes/light/components/Image.json
@@ -2,10 +2,18 @@
   "color": {
     "$type": "color",
     "image": {
-      "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
+      "figure-caption": {
+        "$value": "{color.gray.500}",
+        "source": "$figure-caption-color"
+      },
       "thumbnail": {
-        "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
-        "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
+        "bg": {
+          "$value": "{color.body.bg}",
+          "source": "$thumbnail-bg"
+        },
+        "border": {
+          "$value": "{color.gray.200}",
+          "source": "$thumbnail-border-color"
         }
       }
     }
@@ -14,8 +22,11 @@
     "$type": "shadow",
     "image": {
       "thumbnail": {
-        "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
+        "box-shadow": {
+          "$value": "none",
+          "source": "$thumbnail-box-shadow"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json
index 74d45ae499..2b7f8691e8 100644
--- a/tokens/src/themes/light/components/Menu.json
+++ b/tokens/src/themes/light/components/Menu.json
@@ -2,31 +2,61 @@
   "elevation": {
     "$type": "shadow",
     "menu": {
-      "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
+      "box-shadow": {
+        "$value": "{elevation.box-shadow.base}",
+        "source": "$menu-box-shadow"
+      }
     }
   },
   "color": {
     "$type": "color",
     "menu": {
-      "bg": { "source": "$menu-bg", "$value": "{color.white}" },
+      "bg": {
+        "$value": "{color.white}",
+        "source": "$menu-bg"
+      },
       "item": {
-        "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}" },
+        "color": {
+          "$value": "{color.body.base}",
+          "source": "$menu-item-color"
+        },
+        "bg": {
+          "$value": "transparent",
+          "source": "$menu-item-bg"
+        },
+        "border": {
+          "$value": "{color.menu.item.bg}",
+          "source": "$menu-item-border-color"
+        },
         "hover": {
-          "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}" }
+          "color": {
+            "$value": "{color.btn.text.tertiary}",
+            "source": "$menu-item-hover-color"
+          },
+          "bg": {
+            "$value": "{color.btn.hover.bg.tertiary}",
+            "source": "$menu-item-hover-bg"
+          },
+          "border": {
+            "$value": "{color.menu.item.bg}",
+            "source": "$menu-item-hover-border-color"
+          }
         },
         "focus": {
-          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
+          "bg": {
+            "$value": "{color.btn.active.bg.tertiary}",
+            "source": "$menu-item-focus-bg"
+          }
         }
       },
       "select": {
         "btn-link": {
-          "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" }
+          "color": {
+            "$value": "{color.primary.500}",
+            "source": "$menu-select-btn-link-color"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index b11fd11149..578306bfc0 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -3,14 +3,29 @@
     "$type": "color",
     "modal": {
       "content": {
-        "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
+        "bg": {
+          "$value": "{color.bg.base}",
+          "source": "$modal-content-bg"
+        },
         "border": {
-          "source": "$modal-content-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.2 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.2
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$modal-content-border-color"
         }
       },
-      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
+      "backdrop-bg": {
+        "$value": "{color.black}",
+        "source": "$modal-backdrop-bg"
+      }
     }
   },
   "elevation": {
@@ -19,21 +34,29 @@
       "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"
+                "reorderedData": {
+                  "color": "rgba(0, 0, 0, .15)",
+                  "offsetX": "0",
+                  "offsetY": "10px",
+                  "blur": "20px"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               },
               {
-                "color": "rgba(0, 0, 0, .15)",
-                "offsetX": "0",
-                "offsetY": "8px",
-                "blur": "20px"
+                "reorderedData": {
+                  "color": "rgba(0, 0, 0, .15)",
+                  "offsetX": "0",
+                  "offsetY": "8px",
+                  "blur": "20px"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
-            ]
+            ],
+            "source": "$modal-content-box-shadow-sm-up"
           }
         }
       }
@@ -41,7 +64,10 @@
   },
   "other": {
     "modal": {
-      "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
+      "opacity": {
+        "$value": ".5",
+        "source": "$modal-backdrop-opacity"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json
index d9c0ac6f86..c3e8b1074e 100644
--- a/tokens/src/themes/light/components/Nav.json
+++ b/tokens/src/themes/light/components/Nav.json
@@ -4,19 +4,20 @@
     "nav": {
       "tabs-link": {
         "border": {
-          "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
+          "active": {
+            "$value": "{color.primary.500}",
+            "source": "$nav-tabs-link-active-border-color"
+          },
           "hover": {
-            "source": "$nav-tabs-link-hover-border-color",
             "$value": {
-              "top": "transparent",
-              "right": "transparent",
-              "bottom": "{color.nav.tabs.base.border.base}",
-              "left": "transparent"
-            }
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "source": "$nav-tabs-link-hover-border-color"
           },
           "focus": {
-            "source": "$nav-tabs-link-focus-border-color",
-            "$value": "{color.nav.tabs.base.link.active.text}"
+            "$value": "{color.nav.tabs.base.link.active.text}",
+            "source": "$nav-tabs-link-focus-border-color"
           }
         }
       }
@@ -27,72 +28,114 @@
     "nav": {
       "link": {
         "text": {
-          "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
-          "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
+          "base": {
+            "$value": "{color.gray.700}",
+            "source": "$nav-link-color"
+          },
+          "disabled": {
+            "$value": "{color.gray.300}",
+            "source": "$nav-link-disabled-color"
+          }
         },
-        "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
+        "border": {
+          "$value": "transparent",
+          "source": "$nav-tabs-link-border-color"
+        }
       },
       "tabs": {
         "base": {
           "text": {
-            "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
+            "disabled": {
+              "$value": "{color.nav.tabs.base.bg.hover}",
+              "source": "$nav-tabs-disabled-bg"
+            }
+          },
+          "bg": {
+            "hover": {
+              "$value": "transparent",
+              "source": "$nav-tabs-hover-bg"
+            }
           },
-          "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } },
           "border": {
-            "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" },
-            "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" }
+            "base": {
+              "$value": "{color.light.400}",
+              "source": "$nav-tabs-border-color"
+            },
+            "focus": {
+              "$value": "{color.nav.tabs.base.bg.hover}",
+              "source": "$nav-tabs-focus-border-color"
+            }
           },
           "link": {
-            "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } },
+            "hover": {
+              "bg": {
+                "$value": "{color.light.400}",
+                "source": "$nav-tabs-link-hover-bg"
+              }
+            },
             "active": {
-              "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" },
-              "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
+              "text": {
+                "$value": "{color.primary.500}",
+                "source": "$nav-tabs-link-active-color"
+              },
+              "bg": {
+                "$value": "transparent",
+                "source": "$nav-tabs-link-active-bg"
+              }
             },
             "disabled": {
-              "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
+              "border": {
+                "$value": "{color.nav.link.border}",
+                "source": "$nav-tabs-link-disabled-border-color"
+              }
             }
           }
         },
         "inverse": {
           "link": {
-            "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
+            "text": {
+              "base": {
+                "$value": "{color.white}",
+                "source": "$nav-inverse-tabs-link-color"
+              }
+            },
             "border": {
               "bottom": {
-                "source": "$nav-inverse-tabs-link-border-bottom-color",
-                "$value": "{color.dark.300}"
+                "$value": "{color.dark.300}",
+                "source": "$nav-inverse-tabs-link-border-bottom-color"
               },
               "active": {
-                "source": "$nav-inverse-tabs-link-active-border-color",
-                "$value": "{color.nav.tabs.inverse.link.text.base}"
+                "$value": "{color.nav.tabs.inverse.link.text.base}",
+                "source": "$nav-inverse-tabs-link-active-border-color"
               }
             },
             "bg": {
               "hover": {
-                "source": "$nav-inverse-tabs-link-hover-bg",
-                "$value": "{color.nav.tabs.inverse.link.border.bottom}"
+                "$value": "{color.nav.tabs.inverse.link.border.bottom}",
+                "source": "$nav-inverse-tabs-link-hover-bg"
               },
               "active": {
-                "source": "$nav-inverse-tabs-link-active-bg",
-                "$value": "{color.nav.tabs.inverse.link.bg.hover}"
+                "$value": "{color.nav.tabs.inverse.link.bg.hover}",
+                "source": "$nav-inverse-tabs-link-active-bg"
               },
               "focus": {
-                "source": "$nav-inverse-tabs-link-focus-bg",
-                "$value": "{color.nav.tabs.inverse.link.text.base}"
+                "$value": "{color.nav.tabs.inverse.link.text.base}",
+                "source": "$nav-inverse-tabs-link-focus-bg"
               },
               "active-hover": {
-                "source": "$nav-inverse-tabs-link-active-hover-bg",
-                "$value": "transparent"
+                "$value": "transparent",
+                "source": "$nav-inverse-tabs-link-active-hover-bg"
               }
             },
             "tab-content-color": {
-              "source": "$nav-inverse-tabs-tab-content-color",
-              "$value": "{color.nav.tabs.inverse.link.text.base}"
+              "$value": "{color.nav.tabs.inverse.link.text.base}",
+              "source": "$nav-inverse-tabs-tab-content-color"
             }
           },
           "dropdown": {
             "border": {
-              "source": "$nav-inverse-tabs-dropdown-border-color",
-              "$value": "{color.nav.tabs.inverse.link.bg.active-hover}"
+              "$value": "{color.nav.tabs.inverse.link.bg.active-hover}",
+              "source": "$nav-inverse-tabs-dropdown-border-color"
             }
           }
         }
@@ -101,54 +144,132 @@
         "base": {
           "link": {
             "active": {
-              "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}" }
+              "text": {
+                "$value": "{color.active}",
+                "source": "$nav-pills-link-active-color"
+              },
+              "bg": {
+                "$value": "{color.bg.active}",
+                "source": "$nav-pills-link-active-bg"
+              },
+              "border": {
+                "$value": "{color.white}",
+                "source": "$nav-pills-link-active-border-color"
+              }
             },
-            "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
+            "border": {
+              "$value": "{color.nav.tabs.base.border.base}",
+              "source": "$nav-pills-link-border-color"
+            }
           }
         },
         "inverse": {
           "link": {
             "text": {
-              "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}" }
+              "base": {
+                "$value": "{color.white}",
+                "source": "$nav-inverse-pills-link-color"
+              },
+              "focus": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-focus-color"
+              },
+              "active": {
+                "$value": "{color.primary.500}",
+                "source": "$nav-inverse-pills-link-active-color"
+              },
+              "hover": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-hover-color"
+              },
+              "active-focus": {
+                "$value": "{color.nav.pills.inverse.link.text.active}",
+                "source": "$nav-inverse-pills-link-active-focus-color"
+              },
+              "active-hover": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-active-hover-color"
+              }
             },
             "border": {
-              "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}" }
+              "base": {
+                "$value": "{color.dark.300}",
+                "source": "$nav-inverse-pills-link-border-color"
+              },
+              "active": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-active-border-color"
+              },
+              "active-hover": {
+                "$value": "{color.nav.pills.inverse.link.border.base}",
+                "source": "$nav-inverse-pills-link-active-hover-border-color"
+              },
+              "active-focus": {
+                "$value": "{color.primary.base}",
+                "source": "$nav-inverse-pills-link-active-focus-border-color"
+              },
+              "focus-hover": {
+                "$value": "{color.nav.pills.inverse.link.border.active-focus}",
+                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
+              }
             },
             "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}" }
+              "hover": {
+                "$value": "{color.nav.pills.inverse.link.border.base}",
+                "source": "$nav-inverse-pills-link-hover-bg"
+              },
+              "active": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-active-bg"
+              },
+              "active-hover": {
+                "$value": "{color.nav.pills.inverse.link.border.base}",
+                "source": "$nav-inverse-pills-link-active-hover-bg"
+              },
+              "active-focus-hover": {
+                "$value": "{color.nav.pills.inverse.link.text.base}",
+                "source": "$nav-inverse-pills-link-active-focus-hover-bg"
+              }
             }
           },
           "tab-content-color": {
-            "source": "$nav-inverse-pills-tab-content-color",
-            "$value": "{color.nav.pills.inverse.link.text.base}"
+            "$value": "{color.nav.pills.inverse.link.text.base}",
+            "source": "$nav-inverse-pills-tab-content-color"
           }
         }
       },
-      "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
+      "divider": {
+        "$value": "{color.gray.100}",
+        "source": "$nav-divider-color"
+      },
       "dark": {
-        "source": "$navbar-dark-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }],
-        "$value": "{color.white}"
+        "$value": "{color.white}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.5
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$navbar-dark-color"
       },
       "light": {
-        "source": "$navbar-light-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }],
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.5
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$navbar-light-color"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json
index 5b157599c3..9ebcd0d833 100644
--- a/tokens/src/themes/light/components/Navbar.json
+++ b/tokens/src/themes/light/components/Navbar.json
@@ -4,64 +4,160 @@
     "navbar": {
       "dark": {
         "text": {
-          "source": "$navbar-dark-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-dark-color"
         },
         "hover": {
-          "source": "$navbar-dark-hover-color",
-          "modify": [{ "type": "alpha", "amount": 0.75 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.75
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-dark-hover-color"
+        },
+        "active": {
+          "$value": "{color.active}",
+          "source": "$navbar-dark-active-color"
         },
-        "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
         "disabled": {
-          "source": "$navbar-dark-disabled-color",
-          "modify": [{ "type": "alpha", "amount": 0.25 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.25
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-dark-disabled-color"
         },
         "toggler": {
           "border": {
-            "source": "$navbar-dark-toggler-border-color",
-            "modify": [{ "type": "alpha", "amount": 0.1 }],
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$navbar-dark-toggler-border-color"
           }
         },
         "brand": {
-          "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" },
-          "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" }
+          "text": {
+            "$value": "{color.navbar.dark.active}",
+            "source": "$navbar-dark-brand-color"
+          },
+          "hover": {
+            "$value": "{color.navbar.dark.active}",
+            "source": "$navbar-dark-brand-hover-color"
+          }
         }
       },
       "light": {
         "text": {
-          "source": "$navbar-light-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-light-color"
         },
         "hover": {
-          "source": "$navbar-light-hover-color",
-          "modify": [{ "type": "alpha", "amount": 0.7 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.7
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-light-hover-color"
         },
         "active": {
-          "source": "$navbar-light-active-color",
-          "modify": [{ "type": "alpha", "amount": 0.9 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.9
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-light-active-color"
         },
         "disabled": {
-          "source": "$navbar-light-disabled-color",
-          "modify": [{ "type": "alpha", "amount": 0.3 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.3
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$navbar-light-disabled-color"
         },
         "toggler": {
           "border": {
-            "source": "$navbar-light-toggler-border-color",
-            "modify": [{ "type": "alpha", "amount": 0.1 }],
-            "$value": "{color.black}"
+            "$value": "{color.black}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$navbar-light-toggler-border-color"
           }
         },
         "brand": {
-          "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" },
-          "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" }
+          "text": {
+            "$value": "{color.navbar.light.active}",
+            "source": "$navbar-light-brand-color"
+          },
+          "hover": {
+            "$value": "{color.navbar.light.active}",
+            "source": "$navbar-light-brand-hover-color"
+          }
         }
       }
     }
@@ -72,21 +168,49 @@
       "toggler": {
         "dark": {
           "icon-bg": {
-            "source": "$navbar-dark-toggler-icon-bg",
-            "outputReferences": false,
-            "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\")"
+            "$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\")",
+            "outputReferences": {
+              "reorderedData": false,
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "str-replace",
+                  "toReplace": "#",
+                  "replaceWith": "%23"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$navbar-dark-toggler-icon-bg"
           }
         },
         "light": {
           "icon-bg": {
-            "source": "$navbar-light-toggler-icon-bg",
-            "outputReferences": false,
-            "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\")"
+            "$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\")",
+            "outputReferences": {
+              "reorderedData": false,
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            },
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "str-replace",
+                  "toReplace": "#",
+                  "replaceWith": "%23"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$navbar-light-toggler-icon-bg"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json
index d02b743145..4e8b5f4895 100644
--- a/tokens/src/themes/light/components/OverflowScroll.json
+++ b/tokens/src/themes/light/components/OverflowScroll.json
@@ -3,9 +3,9 @@
     "$type": "color",
     "overflow-scroll": {
       "opacity-mask-transparent": {
-        "source": "$overflow-scroll-opacity-mask-transparent",
-        "$value": "rgba(0, 0, 0, .4)"
+        "$value": "rgba(0, 0, 0, .4)",
+        "source": "$overflow-scroll-opacity-mask-transparent"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json
index d879de7302..ddc22afa81 100644
--- a/tokens/src/themes/light/components/Pagination.json
+++ b/tokens/src/themes/light/components/Pagination.json
@@ -3,30 +3,78 @@
     "$type": "color",
     "pagination": {
       "text": {
-        "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}" }
+        "base": {
+          "$value": "{color.link.base}",
+          "source": "$pagination-color"
+        },
+        "inverse": {
+          "$value": "{color.white}",
+          "source": "$pagination-color-inverse"
+        },
+        "hover": {
+          "$value": "{color.link.hover}",
+          "source": "$pagination-hover-color"
+        },
+        "active": {
+          "$value": "{color.active}",
+          "source": "$pagination-active-color"
+        },
+        "disabled": {
+          "$value": "{color.disabled}",
+          "source": "$pagination-disabled-color"
+        }
       },
       "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}" }
+        "base": {
+          "$value": "{color.bg.base}",
+          "source": "$pagination-bg"
+        },
+        "hover": {
+          "$value": "{color.gray.100}",
+          "source": "$pagination-hover-bg"
+        },
+        "active": {
+          "$value": "{color.bg.active}",
+          "source": "$pagination-active-bg"
+        },
+        "disabled": {
+          "$value": "{color.white}",
+          "source": "$pagination-disabled-bg"
+        }
       },
       "border": {
-        "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}" }
+        "base": {
+          "$value": "{color.gray.200}",
+          "source": "$pagination-border-color"
+        },
+        "hover": {
+          "$value": "{color.gray.200}",
+          "source": "$pagination-hover-border-color"
+        },
+        "active": {
+          "$value": "{color.pagination.bg.active}",
+          "source": "$pagination-active-border-color"
+        },
+        "disabled": {
+          "$value": "{color.gray.100}",
+          "source": "$pagination-disabled-border-color"
+        }
       },
       "focus": {
-        "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
-        "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
+        "base": {
+          "$value": "{color.primary.500}",
+          "source": "$pagination-focus-color"
+        },
+        "text": {
+          "$value": "{color.black}",
+          "source": "$pagination-focus-color-text"
+        }
       },
       "dropdown": {
-        "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
+        "text-inverse": {
+          "$value": "{color.white}",
+          "source": "$pagination-dropdown-color-inverse"
+        }
       }
     }
   },
@@ -34,8 +82,11 @@
     "$type": "shadow",
     "pagination": {
       "focus": {
-        "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
+        "box-shadow": {
+          "$value": "{elevation.input.btn-focus.box-shadow}",
+          "source": "$pagination-focus-box-shadow"
+        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json
index 0741490cfc..2dfefa0295 100644
--- a/tokens/src/themes/light/components/Popover.json
+++ b/tokens/src/themes/light/components/Popover.json
@@ -2,49 +2,115 @@
   "color": {
     "$type": "color",
     "popover": {
-      "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
-      "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" },
+      "bg": {
+        "$value": "{color.bg.base}",
+        "source": "$popover-bg"
+      },
+      "border": {
+        "$value": "rgba(0, 0, 0, .2)",
+        "source": "$popover-border-color"
+      },
       "header": {
-        "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
-        "bg": { "source": "$popover-header-bg", "$value": "{color.white}" },
+        "text": {
+          "$value": "{color.headings.base}",
+          "source": "$popover-header-color"
+        },
+        "bg": {
+          "$value": "{color.white}",
+          "source": "$popover-header-bg"
+        },
         "bg-dark": {
-          "source": "$popover-header-bg-dark",
-          "modify": [{ "type": "darken", "amount": 0.5 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "darken",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$popover-header-bg-dark"
         },
         "border-bottom-dark": {
-          "source": "$popover-header-border-bottom-darken",
-          "modify": [{ "type": "darken", "amount": 0.05 }],
-          "$value": "{color.white}"
+          "$value": "{color.white}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "darken",
+                "amount": 0.05
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$popover-header-border-bottom-darken"
         }
       },
-      "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
+      "body": {
+        "$value": "{color.body.base}",
+        "source": "$popover-body-color"
+      },
       "arrow": {
-        "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
+        "base": {
+          "$value": "{color.popover.bg}",
+          "source": "$popover-arrow-color"
+        },
         "outer": {
-          "source": "$popover-arrow-outer-color",
-          "modify": [{ "type": "alpha", "amount": 0.05 }],
-          "$value": "{color.popover.border}"
+          "$value": "{color.popover.border}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.05
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$popover-arrow-outer-color"
         }
       },
       "success": {
-        "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
-        "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
+        "bg": {
+          "$value": "{color.success.100}",
+          "source": "$popover-success-bg"
+        },
+        "icon": {
+          "$value": "{color.success.500}",
+          "source": "$popover-success-icon-color"
+        }
       },
       "warning": {
-        "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
-        "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
+        "bg": {
+          "$value": "{color.warning.100}",
+          "source": "$popover-warning-bg"
+        },
+        "icon": {
+          "$value": "{color.warning.500}",
+          "source": "$popover-warning-icon-color"
+        }
       },
       "danger": {
-        "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
-        "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
+        "bg": {
+          "$value": "{color.danger.100}",
+          "source": "$popover-danger-bg"
+        },
+        "icon": {
+          "$value": "{color.danger.500}",
+          "source": "$popover-danger-icon-color"
+        }
       }
     }
   },
   "elevation": {
     "$type": "shadow",
     "popover": {
-      "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
+      "box-shadow": {
+        "$value": "none",
+        "source": "$popover-box-shadow"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json
index 61b561110b..3816b2d170 100644
--- a/tokens/src/themes/light/components/ProductTour.json
+++ b/tokens/src/themes/light/components/ProductTour.json
@@ -3,22 +3,49 @@
     "$type": "color",
     "product-tour": {
       "checkpoint": {
-        "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}" },
+        "bg": {
+          "$value": "{color.light.300}",
+          "source": "$checkpoint-background-color"
+        },
+        "body": {
+          "$value": "{color.gray.700}",
+          "source": "$checkpoint-body-color"
+        },
+        "border": {
+          "$value": "{color.brand.base}",
+          "source": "$checkpoint-border-color"
+        },
+        "breadcrumb": {
+          "$value": "{color.primary.base}",
+          "source": "$checkpoint-breadcrumb-color"
+        },
         "box-shadow": {
-          "source": "$checkpoint-box-shadow-color",
-          "modify": [{ "type": "alpha", "amount": 0.3 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.3
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$checkpoint-box-shadow-color"
         },
         "arrow": {
           "border": {
-            "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" },
-            "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" }
+            "top": {
+              "$value": "{color.product-tour.checkpoint.bg}",
+              "source": "$checkpoint-arrow-border-top-color"
+            },
+            "transparent": {
+              "$value": "transparent",
+              "source": "$checkpoint-arrow-border-color-transparent"
+            }
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json
index 81e1f9c36c..a06c87e79d 100644
--- a/tokens/src/themes/light/components/ProgressBar.json
+++ b/tokens/src/themes/light/components/ProgressBar.json
@@ -2,21 +2,39 @@
   "color": {
     "$type": "color",
     "progress-bar": {
-      "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+      "base": {
+        "$value": "{color.white}",
+        "source": "$progress-bar-color"
+      },
       "bg": {
-        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
-        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+        "base": {
+          "$value": "{color.accent.a}",
+          "source": "$progress-bar-bg"
+        },
+        "annotated": {
+          "$value": "{color.dark.500}",
+          "source": "$annotated-progress-bar-bg"
+        }
       },
-      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+      "border": {
+        "$value": "{color.gray.500}",
+        "source": "$progress-bar-border-color"
+      }
     },
     "progress": {
-      "bg": { "source": "$progress-bg", "$value": "transparent" }
+      "bg": {
+        "$value": "transparent",
+        "source": "$progress-bg"
+      }
     }
   },
   "elevation": {
     "$type": "shadow",
     "progress-bar": {
-      "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
+      "box-shadow": {
+        "$value": "none",
+        "source": "$progress-box-shadow"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json
index 87da8f709c..3d01c51e8c 100644
--- a/tokens/src/themes/light/components/Scrollable.json
+++ b/tokens/src/themes/light/components/Scrollable.json
@@ -4,11 +4,20 @@
     "scrollable": {
       "body": {
         "box-shadow": {
-          "source": "$scrollable-body-box-shadow",
-          "modify": [{ "type": "alpha", "amount": 0.55 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.55
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$scrollable-body-box-shadow"
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json
index 8df063f176..b74cc7678e 100644
--- a/tokens/src/themes/light/components/SearchField.json
+++ b/tokens/src/themes/light/components/SearchField.json
@@ -3,23 +3,44 @@
     "$type": "color",
     "search-field": {
       "border": {
-        "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}" }
+        "base": {
+          "$value": "{color.gray.500}",
+          "source": "$search-border-color"
+        },
+        "interaction": {
+          "$value": "{color.black}",
+          "source": "$search-border-color-interaction"
+        },
+        "focus": {
+          "$value": "{color.black}",
+          "source": "$search-border-focus-color"
+        }
       },
       "button": {
         "bg": {
-          "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
-          "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
+          "primary": {
+            "$value": "{color.primary.500}",
+            "source": "$search-btn-primary-bg"
+          },
+          "brand": {
+            "$value": "{color.brand.500}",
+            "source": "$search-btn-brand-bg"
+          }
         }
       },
-      "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" }
+      "form-bg": {
+        "$value": "{color.white}",
+        "source": "$search-form-background-color"
+      }
     }
   },
   "other": {
     "$type": "ratio",
     "search-field": {
-      "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
+      "disabled-opacity": {
+        "$value": ".3",
+        "source": "$search-disabled-opacity"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json
index 9084a8eb52..f6129c5608 100644
--- a/tokens/src/themes/light/components/Sheet.json
+++ b/tokens/src/themes/light/components/Sheet.json
@@ -4,18 +4,36 @@
     "sheet": {
       "skrim": {
         "bg": {
-          "source": "$sheet-skrim-bg",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "$value": "{color.gray.300}"
+          "$value": "{color.gray.300}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$sheet-skrim-bg"
         },
         "component": {
           "box-shadow": {
-            "source": "$sheet-skrim-component-box-shadow",
-            "modify": [{ "type": "alpha", "amount": 0.15 }],
-            "$value": "{color.black}"
+            "$value": "{color.black}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.15
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$sheet-skrim-component-box-shadow"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json
index eeb118dec2..1af9cd3a75 100644
--- a/tokens/src/themes/light/components/Stepper.json
+++ b/tokens/src/themes/light/components/Stepper.json
@@ -4,26 +4,44 @@
     "stepper": {
       "header": {
         "bg": {
-          "base": { "source": "$stepper-header-bg", "$value": "transparent" },
-          "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
+          "base": {
+            "$value": "transparent",
+            "source": "$stepper-header-bg"
+          },
+          "line": {
+            "$value": "{color.light.base}",
+            "source": "$stepper-header-line-bg"
+          }
         },
         "step": {
-          "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" },
+          "base": {
+            "$value": "{color.primary.base}",
+            "source": "$stepper-header-step-color"
+          },
           "bg": {
-            "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
-            "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
+            "base": {
+              "$value": "{color.stepper.header.bg.base}",
+              "source": "$stepper-header-step-bg"
+            },
+            "active": {
+              "$value": "{color.gray.500}",
+              "source": "$stepper-header-active-step-bg"
+            }
+          },
+          "border": {
+            "$value": "none",
+            "source": "$stepper-header-step-border"
           },
-          "border": { "source": "$stepper-header-step-border", "$value": "none" },
           "bubble-error": {
-            "source": "$stepper-header-step-error-bubble-color",
-            "$value": "{color.danger.base}"
+            "$value": "{color.danger.base}",
+            "source": "$stepper-header-step-error-bubble-color"
           },
           "description-error": {
-            "source": "$stepper-header-step-error-description-color",
-            "$value": "{color.stepper.header.step.bubble-error}"
+            "$value": "{color.stepper.header.step.bubble-error}",
+            "source": "$stepper-header-step-error-description-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
index 6fe18059fe..4f9cfc633c 100644
--- a/tokens/src/themes/light/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -4,40 +4,56 @@
     "sticky": {
       "shadow": {
         "top": {
-          "source": "$sticky-shadow-top",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.5rem",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.5rem",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.25rem",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.25rem",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
-          ]
+          ],
+          "source": "$sticky-shadow-top"
         },
         "bottom": {
-          "source": "$sticky-shadow-bottom",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".25rem",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".25rem",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
-          ]
+          ],
+          "source": "$sticky-shadow-bottom"
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json
index 5e7c601ff2..be9f3b7b88 100644
--- a/tokens/src/themes/light/components/Tab.json
+++ b/tokens/src/themes/light/components/Tab.json
@@ -6,80 +6,80 @@
         "btn": {
           "text": {
             "focus": {
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-color",
-              "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+              "$value": "{color.tab.more-link-dropdown-toggle.text.focus}",
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-color"
             }
           },
           "border": {
             "focus": {
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color",
-              "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+              "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color"
             }
           }
         },
         "text": {
           "focus": {
-            "source": "$tab-more-link-dropdown-toggle-focus-color",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$tab-more-link-dropdown-toggle-focus-color"
           },
           "active": {
-            "source": "$tab-more-link-dropdown-toggle-active-color",
-            "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+            "$value": "{color.tab.more-link-dropdown-toggle.text.focus}",
+            "source": "$tab-more-link-dropdown-toggle-active-color"
           },
           "hover": {
-            "source": "$tab-more-link-dropdown-toggle-hover-color",
-            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+            "source": "$tab-more-link-dropdown-toggle-hover-color"
           }
         },
         "bg": {
           "focus": {
-            "source": "$tab-more-link-dropdown-toggle-focus-bg",
-            "$value": "{color.primary.500}"
+            "$value": "{color.primary.500}",
+            "source": "$tab-more-link-dropdown-toggle-focus-bg"
           }
         },
         "border": {
           "focus": {
-            "source": "$tab-more-link-dropdown-toggle-focus-border-color",
-            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+            "source": "$tab-more-link-dropdown-toggle-focus-border-color"
           }
         }
       },
       "inverse-pills-link-dropdown-toggle": {
         "text": {
           "focus": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color",
-            "$value": "{color.primary.500}"
+            "$value": "{color.primary.500}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color"
           },
           "active": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-color",
-            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}"
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-color"
           },
           "active-hover": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color",
-            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color"
           }
         },
         "bg": {
           "focus": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg",
-            "$value": "{color.white}"
+            "$value": "{color.white}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg"
           },
           "hover": {
-            "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg",
-            "$value": "transparent"
+            "$value": "transparent",
+            "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg"
           },
           "active-hover": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg",
-            "$value": "{color.primary.300}"
+            "$value": "{color.primary.300}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
           }
         },
         "border": {
           "focus": {
-            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color",
-            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index 57f9d6d4d6..964762b60c 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -2,20 +2,50 @@
   "color": {
     "$type": "color",
     "toast": {
-      "base": { "source": "$toast-color", "$value": "inherit" },
-      "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" },
+      "base": {
+        "$value": "inherit",
+        "source": "$toast-color"
+      },
+      "bg": {
+        "$value": "{color.gray.700}",
+        "source": "$toast-background-color"
+      },
       "border": {
-        "source": "$toast-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.1 }],
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.1
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$toast-border-color"
       },
       "header": {
-        "text": { "source": "$toast-header-color", "$value": "{color.white}" },
-        "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" },
+        "text": {
+          "$value": "{color.white}",
+          "source": "$toast-header-color"
+        },
+        "bg": {
+          "$value": "{color.gray.700}",
+          "source": "$toast-header-background-color"
+        },
         "border": {
-          "source": "$toast-header-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "$value": "{color.black}"
+          "$value": "{color.black}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.5
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$toast-header-border-color"
         }
       }
     }
@@ -24,22 +54,30 @@
     "$type": "shadow",
     "toast": {
       "box-shadow": {
-        "source": "$toast-box-shadow",
         "$value": [
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": "1.25rem",
-            "blur": "2.5rem"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25rem",
+              "blur": "2.5rem"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": ".5rem",
-            "blur": "3rem"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "3rem"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
-        ]
+        ],
+        "source": "$toast-box-shadow"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index 7336e557a3..1da8c5ea31 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -2,15 +2,33 @@
   "color": {
     "$type": "color",
     "tooltip": {
-      "text": { "source": "$tooltip-color", "$value": "{color.white}" },
-      "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
+      "text": {
+        "$value": "{color.white}",
+        "source": "$tooltip-color"
+      },
+      "light": {
+        "$value": "{color.black}",
+        "source": "$tooltip-color-light"
+      },
       "bg": {
-        "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
-        "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
+        "base": {
+          "$value": "{color.black}",
+          "source": "$tooltip-bg"
+        },
+        "light": {
+          "$value": "{color.white}",
+          "source": "$tooltip-bg-light"
+        }
       },
       "arrow": {
-        "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
-        "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
+        "base": {
+          "$value": "{color.tooltip.bg.base}",
+          "source": "$tooltip-arrow-color"
+        },
+        "light": {
+          "$value": "{color.white}",
+          "source": "$tooltip-arrow-color-light"
+        }
       }
     }
   },
@@ -18,28 +36,39 @@
     "$type": "shadow",
     "tooltip": {
       "box-shadow": {
-        "source": "$tooltip-box-shadow",
         "$value": [
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": "2px",
-            "blur": "4px"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "2px",
+              "blur": "4px"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           },
           {
-            "color": "rgba(0, 0, 0, .15)",
-            "offsetX": "0",
-            "offsetY": "2px",
-            "blur": "8px"
+            "reorderedData": {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "2px",
+              "blur": "8px"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
-        ]
+        ],
+        "source": "$tooltip-box-shadow"
       }
     }
   },
   "other": {
     "$type": "ratio",
     "tooltip": {
-      "opacity": { "source": "$tooltip-opacity", "$value": "1" }
+      "opacity": {
+        "$value": "1",
+        "source": "$tooltip-opacity"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json
index f894be2efe..32a429e5d1 100644
--- a/tokens/src/themes/light/components/general/body.json
+++ b/tokens/src/themes/light/components/general/body.json
@@ -2,8 +2,14 @@
   "color": {
     "$type": "color",
     "body": {
-      "base": { "source": "$body-color", "$value": "{color.gray.700}" },
-      "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
+      "base": {
+        "$value": "{color.gray.700}",
+        "source": "$body-color"
+      },
+      "bg": {
+        "$value": "{color.bg.base}",
+        "source": "$body-bg"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json
index 755ccf7fd9..c2d95eb474 100644
--- a/tokens/src/themes/light/components/general/headings.json
+++ b/tokens/src/themes/light/components/general/headings.json
@@ -2,7 +2,10 @@
   "color": {
     "$type": "color",
     "headings": {
-      "base": { "source": "$headings-color", "$value": "{color.black}" }
+      "base": {
+        "$value": "{color.black}",
+        "source": "$headings-color"
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json
index 2d5ad16dbf..0ee9cb10e2 100644
--- a/tokens/src/themes/light/components/general/hr.json
+++ b/tokens/src/themes/light/components/general/hr.json
@@ -3,10 +3,19 @@
     "$type": "color",
     "hr": {
       "border": {
-        "source": "$hr-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.1 }],
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.1
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$hr-border-color"
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index 424b099dbb..3479b62de5 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -2,7 +2,10 @@
   "color": {
     "$type": "color",
     "input": {
-      "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
+      "btn-focus": {
+        "$value": "{color.bg.active}",
+        "source": "$input-btn-focus-color"
+      }
     }
   },
   "elevation": {
@@ -10,16 +13,13 @@
     "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"
-          }
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          },
+          "source": "$input-btn-focus-box-shadow"
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
index 3669afa336..09fbaee4f9 100644
--- a/tokens/src/themes/light/components/general/link.json
+++ b/tokens/src/themes/light/components/general/link.json
@@ -2,84 +2,210 @@
   "color": {
     "$type": "color",
     "link": {
-      "base": { "source": "$link-color", "$value": "{color.info.500}" },
+      "base": {
+        "$value": "{color.info.500}",
+        "source": "$link-color"
+      },
       "hover": {
-        "source": "$link-hover-color",
-        "modify": [{ "type": "darken", "amount": 0.15 }],
-        "$value": "{color.link.base}"
+        "$value": "{color.link.base}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "darken",
+              "amount": 0.15
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$link-hover-color"
       },
       "inline": {
-        "base": { "source": "$inline-link-color", "$value": "{color.info.500}" },
+        "base": {
+          "$value": "{color.info.500}",
+          "source": "$inline-link-color"
+        },
         "decoration": {
-          "source": "$inline-link-decoration-color",
-          "modify": [{ "type": "alpha", "amount": 0.3 }],
-          "$value": "{color.link.inline.base}"
+          "$value": "{color.link.inline.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "alpha",
+                "amount": 0.3
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$inline-link-decoration-color"
         },
         "hover": {
           "base": {
-            "source": "$inline-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.15 }],
-            "$value": "{color.link.inline.base}"
+            "$value": "{color.link.inline.base}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": 0.15
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$inline-link-hover-color"
           },
           "decoration": {
-            "source": "$inline-link-hover-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 1 }],
-            "$value": "{color.link.inline.hover.base}"
+            "$value": "{color.link.inline.hover.base}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 1
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$inline-link-hover-decoration-color"
           }
         }
       },
       "muted": {
-        "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" },
+        "base": {
+          "$value": "{color.primary.500}",
+          "source": "$muted-link-color"
+        },
         "hover": {
-          "source": "$muted-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }],
-          "$value": "{color.link.muted.base}"
+          "$value": "{color.link.muted.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "darken",
+                "amount": 0.15
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$muted-link-hover-color"
         },
         "inline": {
-          "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" },
+          "base": {
+            "$value": "{color.primary.500}",
+            "source": "$muted-inline-link-color"
+          },
           "decoration": {
-            "source": "$muted-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }],
-            "$value": "{color.link.muted.inline.base}"
+            "$value": "{color.link.muted.inline.base}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.3
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$muted-inline-link-decoration-color"
           },
           "hover": {
             "base": {
-              "source": "$muted-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }],
-              "$value": "{color.link.muted.inline.base}"
+              "$value": "{color.link.muted.inline.base}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "darken",
+                    "amount": 0.15
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$muted-inline-link-hover-color"
             },
             "decoration": {
-              "source": "$muted-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }],
-              "$value": "{color.link.muted.inline.hover.base}"
+              "$value": "{color.link.muted.inline.hover.base}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "alpha",
+                    "amount": 1
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$muted-inline-link-hover-decoration-color"
             }
           }
         }
       },
       "brand": {
-        "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" },
+        "base": {
+          "$value": "{color.brand.500}",
+          "source": "$brand-link-color"
+        },
         "hover": {
-          "source": "$brand-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }],
-          "$value": "{color.link.brand.base}"
+          "$value": "{color.link.brand.base}",
+          "modify": [
+            {
+              "reorderedData": {
+                "type": "darken",
+                "amount": 0.15
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
+            }
+          ],
+          "source": "$brand-link-hover-color"
         },
         "inline": {
-          "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" },
+          "base": {
+            "$value": "{color.brand.500}",
+            "source": "$brand-inline-link-color"
+          },
           "decoration": {
-            "source": "$brand-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }],
-            "$value": "{color.link.brand.inline.base}"
+            "$value": "{color.link.brand.inline.base}",
+            "modify": [
+              {
+                "reorderedData": {
+                  "type": "alpha",
+                  "amount": 0.3
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
+              }
+            ],
+            "source": "$brand-inline-link-decoration-color"
           },
           "hover": {
             "base": {
-              "source": "$brand-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }],
-              "$value": "{color.link.brand.inline.base}"
+              "$value": "{color.link.brand.inline.base}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "darken",
+                    "amount": 0.15
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$brand-inline-link-hover-color"
             },
             "decoration": {
-              "source": "$brand-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }],
-              "$value": "{color.link.brand.inline.hover.base}"
+              "$value": "{color.link.brand.inline.hover.base}",
+              "modify": [
+                {
+                  "reorderedData": {
+                    "type": "alpha",
+                    "amount": 1
+                  },
+                  "isKeyOrderMismatched": false,
+                  "mismatches": {}
+                }
+              ],
+              "source": "$brand-inline-link-hover-decoration-color"
             }
           }
         }
@@ -91,10 +217,10 @@
     "link": {
       "emphasized-hover": {
         "darken-percentage": {
-          "source": "$emphasized-link-hover-darken-percentage",
-          "$value": "15%"
+          "$value": "15%",
+          "source": "$emphasized-link-hover-darken-percentage"
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json
index 85059c7369..e845161329 100644
--- a/tokens/src/themes/light/components/general/list.json
+++ b/tokens/src/themes/light/components/general/list.json
@@ -2,33 +2,78 @@
   "color": {
     "$type": "color",
     "list-group": {
-      "base": { "source": "$list-group-color", "$value": "inherit" },
+      "base": {
+        "$value": "inherit",
+        "source": "$list-group-color"
+      },
       "bg": {
-        "base": { "source": "$list-group-bg", "$value": "{color.white}" },
-        "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
+        "base": {
+          "$value": "{color.white}",
+          "source": "$list-group-bg"
+        },
+        "hover": {
+          "$value": "{color.gray.100}",
+          "source": "$list-group-hover-bg"
+        }
       },
       "border": {
-        "source": "$list-group-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.125 }],
-        "$value": "{color.black}"
+        "$value": "{color.black}",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "alpha",
+              "amount": 0.125
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
+        "source": "$list-group-border-color"
       },
       "active": {
-        "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}" }
+        "base": {
+          "$value": "{color.active}",
+          "source": "$list-group-active-color"
+        },
+        "border": {
+          "$value": "{color.list-group.active.bg}",
+          "source": "$list-group-active-border-color"
+        },
+        "bg": {
+          "$value": "{color.bg.active}",
+          "source": "$list-group-active-bg"
+        }
       },
       "disabled": {
-        "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
-        "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
+        "base": {
+          "$value": "{color.gray.600}",
+          "source": "$list-group-disabled-color"
+        },
+        "bg": {
+          "$value": "{color.list-group.bg.base}",
+          "source": "$list-group-disabled-bg"
+        }
       },
       "action": {
-        "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" },
-        "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" },
+        "base": {
+          "$value": "{color.gray.700}",
+          "source": "$list-group-action-color"
+        },
+        "hover": {
+          "$value": "{color.list-group.action.base}",
+          "source": "$list-group-action-hover-color"
+        },
         "active": {
-          "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
-          "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
+          "base": {
+            "$value": "{color.body.base}",
+            "source": "$list-group-action-active-color"
+          },
+          "bg": {
+            "$value": "{color.gray.200}",
+            "source": "$list-group-action-active-bg"
+          }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json
index af658a6d6b..d2ede82c4b 100644
--- a/tokens/src/themes/light/components/general/text.json
+++ b/tokens/src/themes/light/components/general/text.json
@@ -1,11 +1,23 @@
 {
   "color": {
     "$type": "color",
-    "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" },
-    "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
+    "text-muted": {
+      "$value": "{color.gray.500}",
+      "source": "$text-muted"
+    },
+    "mark-bg": {
+      "$value": "#FFF243",
+      "source": "$mark-bg"
+    },
     "blockquote": {
-      "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" }
+      "small": {
+        "$value": "{color.gray.500}",
+        "source": "$blockquote-small-color"
+      }
     },
-    "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
+    "yiq-light": {
+      "$value": "{color.white}",
+      "source": "$yiq-text-light"
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json
index 5cc2c0c9b2..9a18823481 100644
--- a/tokens/src/themes/light/global/color.json
+++ b/tokens/src/themes/light/global/color.json
@@ -2,2385 +2,3123 @@
   "color": {
     "$type": "color",
     "white": {
-      "source": "$white",
       "$value": "#FFFFFF",
-      "$description": "White color."
+      "$description": "White color.",
+      "source": "$white"
     },
     "black": {
-      "source": "$black",
       "$value": "#000000",
-      "$description": "Black color."
+      "$description": "Black color.",
+      "source": "$black"
     },
     "blue": {
-      "source": "$blue",
       "$value": "#23419F",
-      "$description": "Blue color."
+      "$description": "Blue color.",
+      "source": "$blue"
     },
     "red": {
-      "source": "$red",
       "$value": "#C32D3A",
-      "$description": "Red color."
+      "$description": "Red color.",
+      "source": "$red"
     },
     "green": {
-      "source": "$green",
       "$value": "#178253",
-      "$description": "Green color."
+      "$description": "Green color.",
+      "source": "$green"
     },
     "yellow": {
-      "source": "$yellow",
       "$value": "#FFD900",
-      "$description": "Yellow color."
+      "$description": "Yellow color.",
+      "source": "$yellow"
     },
     "teal": {
-      "source": "$teal",
       "$value": "#006DAA",
-      "$description": "Teal color."
+      "$description": "Teal color.",
+      "source": "$teal"
     },
     "accent": {
       "a": {
+        "$value": "#00BBF9",
+        "$description": "Accent-A color.",
         "source": "$accent-a",
         "actions": {
           "default": "{color.action.default.accent.a}"
-        },
-        "$value": "#00BBF9",
-        "$description": "Accent-A color."
+        }
       },
       "b": {
+        "$value": "#FFEE88",
+        "$description": "Accent-B color.",
         "source": "$accent-b",
         "actions": {
           "default": "{color.action.default.accent.b}"
-        },
-        "$value": "#FFEE88",
-        "$description": "Accent-B color."
+        }
       }
     },
     "gray": {
       "100": {
+        "$value": "#EBEBEB",
+        "$description": "Gray color of level 100.",
         "source": "$gray-100",
         "actions": {
           "default": "{color.action.default.gray.100}"
-        },
-        "$value": "#EBEBEB",
-        "$description": "Gray color of level 100."
+        }
       },
       "200": {
+        "$value": "#CCCCCC",
+        "$description": "Gray color of level 200.",
         "source": "$gray-200",
         "actions": {
           "default": "{color.action.default.gray.200}"
-        },
-        "$value": "#CCCCCC",
-        "$description": "Gray color of level 200."
+        }
       },
       "300": {
+        "$value": "#ADADAD",
+        "$description": "Gray color of level 300.",
         "source": "$gray-300",
         "actions": {
           "default": "{color.action.default.gray.300}"
-        },
-        "$value": "#ADADAD",
-        "$description": "Gray color of level 300."
+        }
       },
       "400": {
+        "$value": "#8F8F8F",
+        "$description": "Gray color of level 400.",
         "source": "$gray-400",
         "actions": {
           "default": "{color.action.default.gray.400}"
-        },
-        "$value": "#8F8F8F",
-        "$description": "Gray color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.gray.base}",
+        "$description": "Gray color of level 500.",
         "source": "$gray-500",
         "actions": {
           "default": "{color.action.default.gray.500}"
-        },
-        "$value": "{color.gray.base}",
-        "$description": "Gray color of level 500."
+        }
       },
       "600": {
+        "$value": "#5C5C5C",
+        "$description": "Gray color of level 600.",
         "source": "$gray-600",
         "actions": {
           "default": "{color.action.default.gray.600}"
-        },
-        "$value": "#5C5C5C",
-        "$description": "Gray color of level 600."
+        }
       },
       "700": {
+        "$value": "#454545",
+        "$description": "Gray color of level 700.",
         "source": "$gray-700",
         "actions": {
           "default": "{color.action.default.gray.700}"
-        },
-        "$value": "#454545",
-        "$description": "Gray color of level 700."
+        }
       },
       "800": {
+        "$value": "#333333",
+        "$description": "Gray color of level 800.",
         "source": "$gray-800",
         "actions": {
           "default": "{color.action.default.gray.800}"
-        },
-        "$value": "#333333",
-        "$description": "Gray color of level 800."
+        }
       },
       "900": {
+        "$value": "#212529",
+        "$description": "Gray color of level 900.",
         "source": "$gray-900",
         "actions": {
           "default": "{color.action.default.gray.900}"
-        },
-        "$value": "#212529",
-        "$description": "Gray color of level 900."
+        }
       },
       "base": {
+        "$value": "#707070",
+        "$description": "Basic gray color.",
         "source": "$gray",
         "actions": {
           "default": "{color.action.default.gray.base}"
-        },
-        "$value": "#707070",
-        "$description": "Basic gray color."
+        }
       }
     },
     "primary": {
       "100": {
-        "source": "$primary-100",
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$primary-100",
         "actions": {
           "default": "{color.action.default.primary.100}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 100."
+        }
       },
       "200": {
-        "source": "$primary-200",
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$primary-200",
         "actions": {
           "default": "{color.action.default.primary.200}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 200."
+        }
       },
       "300": {
-        "source": "$primary-300",
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$primary-300",
         "actions": {
           "default": "{color.action.default.primary.300}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 300."
+        }
       },
       "400": {
-        "source": "$primary-400",
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$primary-400",
         "actions": {
           "default": "{color.action.default.primary.400}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 500.",
         "source": "$primary-500",
         "actions": {
           "default": "{color.action.default.primary.500}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 500."
+        }
       },
       "600": {
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 600.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$primary-600",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }],
         "actions": {
           "default": "{color.action.default.primary.600}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 600."
+        }
       },
       "700": {
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 700.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$primary-700",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }],
         "actions": {
           "default": "{color.action.default.primary.700}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 700."
+        }
       },
       "800": {
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 800.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$primary-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
         "actions": {
           "default": "{color.action.default.primary.800}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 800."
+        }
       },
       "900": {
+        "$value": "{color.primary.base}",
+        "$description": "Primary color of level 900.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$primary-900",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }],
         "actions": {
           "default": "{color.action.default.primary.900}"
-        },
-        "$value": "{color.primary.base}",
-        "$description": "Primary color of level 900."
+        }
       },
       "base": {
+        "$value": "#0A3055",
+        "$description": "Basic primary color.",
         "source": "$primary",
         "actions": {
           "default": "{color.action.default.primary.base}"
-        },
-        "$value": "#0A3055",
-        "$description": "Basic primary color."
+        }
       }
     },
     "secondary": {
       "100": {
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 100.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$secondary-100",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }],
         "actions": {
           "default": "{color.action.default.secondary.100}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 100."
+        }
       },
       "200": {
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 200.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$secondary-200",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }],
         "actions": {
           "default": "{color.action.default.secondary.200}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 200."
+        }
       },
       "300": {
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 300.",
+        "modify": [
+          {
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
+          }
+        ],
         "source": "$secondary-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
         "actions": {
           "default": "{color.action.default.secondary.300}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 300."
+        }
       },
       "400": {
-        "source": "$secondary-400",
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$secondary-400",
         "actions": {
           "default": "{color.action.default.secondary.400}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 500.",
         "source": "$secondary-500",
         "actions": {
           "default": "{color.action.default.secondary.500}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 500."
+        }
       },
       "600": {
-        "source": "$secondary-600",
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$secondary-600",
         "actions": {
           "default": "{color.action.default.secondary.600}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 600."
+        }
       },
       "700": {
-        "source": "$secondary-700",
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$secondary-700",
         "actions": {
           "default": "{color.action.default.secondary.700}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 700."
+        }
       },
       "800": {
-        "source": "$secondary-800",
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$secondary-800",
         "actions": {
           "default": "{color.action.default.secondary.800}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 800."
+        }
       },
       "900": {
-        "source": "$secondary-900",
+        "$value": "{color.secondary.base}",
+        "$description": "Secondary color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$secondary-900",
         "actions": {
           "default": "{color.action.default.secondary.900}"
-        },
-        "$value": "{color.secondary.base}",
-        "$description": "Secondary color of level 900."
+        }
       },
       "base": {
+        "$value": "{color.gray.700}",
+        "$description": "Basic secondary color.",
         "source": "$secondary",
         "actions": {
           "default": "{color.action.default.secondary.base}"
-        },
-        "$value": "{color.gray.700}",
-        "$description": "Basic secondary color."
+        }
       }
     },
     "brand": {
       "100": {
-        "source": "$brand-100",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-100",
         "actions": {
           "default": "{color.action.default.brand.100}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 100."
+        }
       },
       "200": {
-        "source": "$brand-200",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-200",
         "actions": {
           "default": "{color.action.default.brand.200}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 200."
+        }
       },
       "300": {
-        "source": "$brand-300",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-300",
         "actions": {
           "default": "{color.action.default.brand.300}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 300."
+        }
       },
       "400": {
-        "source": "$brand-400",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-400",
         "actions": {
           "default": "{color.action.default.brand.400}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 500.",
         "source": "$brand-500",
         "actions": {
           "default": "{color.action.default.brand.500}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 500."
+        }
       },
       "600": {
-        "source": "$brand-600",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-600",
         "actions": {
           "default": "{color.action.default.brand.600}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 600."
+        }
       },
       "700": {
-        "source": "$brand-700",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-700",
         "actions": {
           "default": "{color.action.default.brand.700}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 700."
+        }
       },
       "800": {
-        "source": "$brand-800",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-800",
         "actions": {
           "default": "{color.action.default.brand.800}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 800."
+        }
       },
       "900": {
-        "source": "$brand-900",
+        "$value": "{color.brand.base}",
+        "$description": "Brand color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$brand-900",
         "actions": {
           "default": "{color.action.default.brand.900}"
-        },
-        "$value": "{color.brand.base}",
-        "$description": "Brand color of level 900."
+        }
       },
       "base": {
+        "$value": "#9D0054",
+        "$description": "Basic brand color.",
         "source": "$brand",
         "actions": {
           "default": "{color.action.default.brand.base}"
-        },
-        "$value": "#9D0054",
-        "$description": "Basic brand color."
+        }
       }
     },
     "success": {
       "100": {
-        "source": "$success-100",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-100",
         "actions": {
           "default": "{color.action.default.success.100}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 100."
+        }
       },
       "200": {
-        "source": "$success-200",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-200",
         "actions": {
           "default": "{color.action.default.success.200}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 200."
+        }
       },
       "300": {
-        "source": "$success-300",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-300",
         "actions": {
           "default": "{color.action.default.success.300}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 300."
+        }
       },
       "400": {
-        "source": "$success-400",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-400",
         "actions": {
           "default": "{color.action.default.success.400}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 500.",
         "source": "$success-500",
         "actions": {
           "default": "{color.action.default.success.500}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 500."
+        }
       },
       "600": {
-        "source": "$success-600",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-600",
         "actions": {
           "default": "{color.action.default.success.600}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 600."
+        }
       },
       "700": {
-        "source": "$success-700",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-700",
         "actions": {
           "default": "{color.action.default.success.700}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 700."
+        }
       },
       "800": {
-        "source": "$success-800",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-800",
         "actions": {
           "default": "{color.action.default.success.800}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 800."
+        }
       },
       "900": {
-        "source": "$success-900",
+        "$value": "{color.success.base}",
+        "$description": "Success color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$success-900",
         "actions": {
           "default": "{color.action.default.success.900}"
-        },
-        "$value": "{color.success.base}",
-        "$description": "Success color of level 900."
+        }
       },
       "base": {
+        "$value": "{color.green}",
+        "$description": "Basic success color.",
         "source": "$success",
         "actions": {
           "default": "{color.action.default.success.base}"
-        },
-        "$value": "{color.green}",
-        "$description": "Basic success color."
+        }
       }
     },
     "info": {
       "100": {
-        "source": "$info-100",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-100",
         "actions": {
           "default": "{color.action.default.info.100}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 100."
+        }
       },
       "200": {
-        "source": "$info-200",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-200",
         "actions": {
           "default": "{color.action.default.info.200}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 200."
+        }
       },
       "300": {
-        "source": "$info-300",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-300",
         "actions": {
           "default": "{color.action.default.info.300}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 300."
+        }
       },
       "400": {
-        "source": "$info-400",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-400",
         "actions": {
           "default": "{color.action.default.info.400}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 500.",
         "source": "$info-500",
         "actions": {
           "default": "{color.action.default.info.500}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 500."
+        }
       },
       "600": {
-        "source": "$info-600",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-600",
         "actions": {
           "default": "{color.action.default.info.600}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 600."
+        }
       },
       "700": {
-        "source": "$info-700",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-700",
         "actions": {
           "default": "{color.action.default.info.700}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 700."
+        }
       },
       "800": {
-        "source": "$info-800",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-800",
         "actions": {
           "default": "{color.action.default.info.800}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 800."
+        }
       },
       "900": {
-        "source": "$info-900",
+        "$value": "{color.info.base}",
+        "$description": "Info color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$info-900",
         "actions": {
           "default": "{color.action.default.info.900}"
-        },
-        "$value": "{color.info.base}",
-        "$description": "Info color of level 900."
+        }
       },
       "base": {
+        "$value": "{color.teal}",
+        "$description": "Basic info color.",
         "source": "$info",
         "actions": {
           "default": "{color.action.default.info.base}"
-        },
-        "$value": "{color.teal}",
-        "$description": "Basic info color."
+        }
       }
     },
     "warning": {
       "100": {
-        "source": "$warning-100",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-100",
         "actions": {
           "default": "{color.action.default.warning.100}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 100."
+        }
       },
       "200": {
-        "source": "$warning-200",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-200",
         "actions": {
           "default": "{color.action.default.warning.200}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 200."
+        }
       },
       "300": {
-        "source": "$warning-300",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-300",
         "actions": {
           "default": "{color.action.default.warning.300}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 300."
+        }
       },
       "400": {
-        "source": "$warning-400",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-400",
         "actions": {
           "default": "{color.action.default.warning.400}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 500.",
         "source": "$warning-500",
         "actions": {
           "default": "{color.action.default.warning.500}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 500."
+        }
       },
       "600": {
-        "source": "$warning-600",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-600",
         "actions": {
           "default": "{color.action.default.warning.600}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 600."
+        }
       },
       "700": {
-        "source": "$warning-700",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-700",
         "actions": {
           "default": "{color.action.default.warning.700}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 700."
+        }
       },
       "800": {
-        "source": "$warning-800",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-800",
         "actions": {
           "default": "{color.action.default.warning.800}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 800."
+        }
       },
       "900": {
-        "source": "$warning-900",
+        "$value": "{color.warning.base}",
+        "$description": "Warning color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$warning-900",
         "actions": {
           "default": "{color.action.default.warning.900}"
-        },
-        "$value": "{color.warning.base}",
-        "$description": "Warning color of level 900."
+        }
       },
       "base": {
+        "$value": "{color.yellow}",
+        "$description": "Basic warning color.",
         "source": "$warning",
         "actions": {
           "default": "{color.action.default.warning.base}"
-        },
-        "$value": "{color.yellow}",
-        "$description": "Basic warning color."
+        }
       }
     },
     "danger": {
       "100": {
-        "source": "$danger-100",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-100",
         "actions": {
           "default": "{color.action.default.danger.100}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 100."
+        }
       },
       "200": {
-        "source": "$danger-200",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-200",
         "actions": {
           "default": "{color.action.default.danger.200}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 200."
+        }
       },
       "300": {
-        "source": "$danger-300",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-300",
         "actions": {
           "default": "{color.action.default.danger.300}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 300."
+        }
       },
       "400": {
-        "source": "$danger-400",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-400",
         "actions": {
           "default": "{color.action.default.danger.400}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 500.",
         "source": "$danger-500",
         "actions": {
           "default": "{color.action.default.danger.500}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 500."
+        }
       },
       "600": {
-        "source": "$danger-600",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-600",
         "actions": {
           "default": "{color.action.default.danger.600}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 600."
+        }
       },
       "700": {
-        "source": "$danger-700",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-700",
         "actions": {
           "default": "{color.action.default.danger.700}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 700."
+        }
       },
       "800": {
-        "source": "$danger-800",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-800",
         "actions": {
           "default": "{color.action.default.danger.800}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 800."
+        }
       },
       "900": {
-        "source": "$danger-900",
+        "$value": "{color.danger.base}",
+        "$description": "Danger color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$danger-900",
         "actions": {
           "default": "{color.action.default.danger.900}"
-        },
-        "$value": "{color.danger.base}",
-        "$description": "Danger color of level 900."
+        }
       },
       "base": {
+        "$value": "{color.red}",
+        "$description": "Basic danger color.",
         "source": "$danger",
         "actions": {
           "default": "{color.action.default.danger.base}"
-        },
-        "$value": "{color.red}",
-        "$description": "Basic danger color."
+        }
       }
     },
     "light": {
       "100": {
-        "source": "$light-100",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-100",
         "actions": {
           "default": "{color.action.default.light.100}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 100."
+        }
       },
       "200": {
-        "source": "$light-200",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-200",
         "actions": {
           "default": "{color.action.default.light.200}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 200."
+        }
       },
       "300": {
-        "source": "$light-300",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-300",
         "actions": {
           "default": "{color.action.default.light.300}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 300."
+        }
       },
       "400": {
-        "source": "$light-400",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-400",
         "actions": {
           "default": "{color.action.default.light.400}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 500.",
         "source": "$light-500",
         "actions": {
           "default": "{color.action.default.light.500}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 500."
+        }
       },
       "600": {
-        "source": "$light-600",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-600",
         "actions": {
           "default": "{color.action.default.light.600}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 600."
+        }
       },
       "700": {
-        "source": "$light-700",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-700",
         "actions": {
           "default": "{color.action.default.light.700}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 700."
+        }
       },
       "800": {
-        "source": "$light-800",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-800",
         "actions": {
           "default": "{color.action.default.light.800}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 800."
+        }
       },
       "900": {
-        "source": "$light-900",
+        "$value": "{color.light.base}",
+        "$description": "Light color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$light-900",
         "actions": {
           "default": "{color.action.default.light.900}"
-        },
-        "$value": "{color.light.base}",
-        "$description": "Light color of level 900."
+        }
       },
       "base": {
+        "$value": "#E1DDDB",
+        "$description": "Basic light color.",
         "source": "$light",
         "actions": {
           "default": "{color.action.default.light.base}"
-        },
-        "$value": "#E1DDDB",
-        "$description": "Basic light color."
+        }
       }
     },
     "dark": {
       "100": {
-        "source": "$dark-100",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 100.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.94"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.94"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-100",
         "actions": {
           "default": "{color.action.default.dark.100}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 100."
+        }
       },
       "200": {
-        "source": "$dark-200",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 200.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.75"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.75"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-200",
         "actions": {
           "default": "{color.action.default.dark.200}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 200."
+        }
       },
       "300": {
-        "source": "$dark-300",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 300.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.50"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.50"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-300",
         "actions": {
           "default": "{color.action.default.dark.300}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 300."
+        }
       },
       "400": {
-        "source": "$dark-400",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 400.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "white",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "white",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-400",
         "actions": {
           "default": "{color.action.default.dark.400}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 400."
+        }
       },
       "500": {
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 500.",
         "source": "$dark-500",
         "actions": {
           "default": "{color.action.default.dark.500}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 500."
+        }
       },
       "600": {
-        "source": "$dark-600",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 600.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.10"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.10"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-600",
         "actions": {
           "default": "{color.action.default.dark.600}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 600."
+        }
       },
       "700": {
-        "source": "$dark-700",
+        "$value": "{color.dark.base}",
+        "$description": "Info color of level 700.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.20"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.20"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-700",
         "actions": {
           "default": "{color.action.default.dark.700}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Info color of level 700."
+        }
       },
       "800": {
-        "source": "$dark-800",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 800.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.25"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.25"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-800",
         "actions": {
           "default": "{color.action.default.dark.800}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 800."
+        }
       },
       "900": {
-        "source": "$dark-900",
+        "$value": "{color.dark.base}",
+        "$description": "Dark color of level 900.",
         "modify": [
           {
-            "type": "mix",
-            "otherColor": "black",
-            "amount": "0.30"
+            "reorderedData": {
+              "type": "mix",
+              "otherColor": "black",
+              "amount": "0.30"
+            },
+            "isKeyOrderMismatched": false,
+            "mismatches": {}
           }
         ],
+        "source": "$dark-900",
         "actions": {
           "default": "{color.action.default.dark.900}"
-        },
-        "$value": "{color.dark.base}",
-        "$description": "Dark color of level 900."
+        }
       },
       "base": {
+        "$value": "#273F2F",
+        "$description": "Basic dark color.",
         "source": "$dark",
         "actions": {
           "default": "{color.action.default.dark.base}"
-        },
-        "$value": "#273F2F",
-        "$description": "Basic dark color."
+        }
       }
     },
     "action": {
       "default": {
         "gray": {
           "100": {
-            "source": "$action-default-gray-100",
+            "$value": "{color.gray.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.100}"
+            "source": "$action-default-gray-100"
           },
           "200": {
-            "source": "$action-default-gray-200",
+            "$value": "{color.gray.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.200}"
+            "source": "$action-default-gray-200"
           },
           "300": {
-            "source": "$action-default-gray-300",
+            "$value": "{color.gray.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.300}"
+            "source": "$action-default-gray-300"
           },
           "400": {
-            "source": "$action-default-gray-400",
+            "$value": "{color.gray.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.400}"
+            "source": "$action-default-gray-400"
           },
           "500": {
-            "source": "$action-default-gray-500",
+            "$value": "{color.gray.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.500}"
+            "source": "$action-default-gray-500"
           },
           "600": {
-            "source": "$action-default-gray-600",
+            "$value": "{color.gray.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.600}"
+            "source": "$action-default-gray-600"
           },
           "700": {
-            "source": "$action-default-gray-700",
+            "$value": "{color.gray.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.700}"
+            "source": "$action-default-gray-700"
           },
           "800": {
-            "source": "$action-default-gray-800",
+            "$value": "{color.gray.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.800}"
+            "source": "$action-default-gray-800"
           },
           "900": {
-            "source": "$action-default-gray-900",
+            "$value": "{color.gray.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.900}"
+            "source": "$action-default-gray-900"
           },
           "base": {
-            "source": "$action-default-gray-base",
+            "$value": "{color.gray.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.gray.base}"
+            "source": "$action-default-gray-base"
           }
         },
         "primary": {
           "100": {
-            "source": "$action-default-primary-100",
+            "$value": "{color.primary.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.100}"
+            "source": "$action-default-primary-100"
           },
           "200": {
-            "source": "$action-default-primary-200",
+            "$value": "{color.primary.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.200}"
+            "source": "$action-default-primary-200"
           },
           "300": {
-            "source": "$action-default-primary-300",
+            "$value": "{color.primary.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.300}"
+            "source": "$action-default-primary-300"
           },
           "400": {
-            "source": "$action-default-primary-400",
+            "$value": "{color.primary.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.400}"
+            "source": "$action-default-primary-400"
           },
           "500": {
-            "source": "$action-default-primary-500",
+            "$value": "{color.primary.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.500}"
+            "source": "$action-default-primary-500"
           },
           "600": {
-            "source": "$action-default-primary-600",
+            "$value": "{color.primary.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.600}"
+            "source": "$action-default-primary-600"
           },
           "700": {
-            "source": "$action-default-primary-700",
+            "$value": "{color.primary.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.700}"
+            "source": "$action-default-primary-700"
           },
           "800": {
-            "source": "$action-default-primary-800",
+            "$value": "{color.primary.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.800}"
+            "source": "$action-default-primary-800"
           },
           "900": {
-            "source": "$action-default-primary-900",
+            "$value": "{color.primary.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.900}"
+            "source": "$action-default-primary-900"
           },
           "base": {
-            "source": "$action-default-primary-base",
+            "$value": "{color.primary.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.primary.base}"
+            "source": "$action-default-primary-base"
           }
         },
         "secondary": {
           "100": {
-            "source": "$action-default-secondary-100",
+            "$value": "{color.secondary.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.100}"
+            "source": "$action-default-secondary-100"
           },
           "200": {
-            "source": "$action-default-secondary-200",
+            "$value": "{color.secondary.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.200}"
+            "source": "$action-default-secondary-200"
           },
           "300": {
-            "source": "$action-default-secondary-300",
+            "$value": "{color.secondary.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.300}"
+            "source": "$action-default-secondary-300"
           },
           "400": {
-            "source": "$action-default-secondary-400",
+            "$value": "{color.secondary.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.400}"
+            "source": "$action-default-secondary-400"
           },
           "500": {
-            "source": "$action-default-secondary-500",
+            "$value": "{color.secondary.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.500}"
+            "source": "$action-default-secondary-500"
           },
           "600": {
-            "source": "$action-default-secondary-600",
+            "$value": "{color.secondary.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.600}"
+            "source": "$action-default-secondary-600"
           },
           "700": {
-            "source": "$action-default-secondary-700",
+            "$value": "{color.secondary.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.700}"
+            "source": "$action-default-secondary-700"
           },
           "800": {
-            "source": "$action-default-secondary-800",
+            "$value": "{color.secondary.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.800}"
+            "source": "$action-default-secondary-800"
           },
           "900": {
-            "source": "$action-default-secondary-900",
+            "$value": "{color.secondary.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.900}"
+            "source": "$action-default-secondary-900"
           },
           "base": {
-            "source": "$action-default-secondary-base",
+            "$value": "{color.secondary.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.secondary.base}"
+            "source": "$action-default-secondary-base"
           }
         },
         "brand": {
           "100": {
-            "source": "$action-default-brand-100",
+            "$value": "{color.brand.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.100}"
+            "source": "$action-default-brand-100"
           },
           "200": {
-            "source": "$action-default-brand-200",
+            "$value": "{color.brand.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.200}"
+            "source": "$action-default-brand-200"
           },
           "300": {
-            "source": "$action-default-brand-300",
+            "$value": "{color.brand.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.300}"
+            "source": "$action-default-brand-300"
           },
           "400": {
-            "source": "$action-default-brand-400",
+            "$value": "{color.brand.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.400}"
+            "source": "$action-default-brand-400"
           },
           "500": {
-            "source": "$action-default-brand-500",
+            "$value": "{color.brand.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.500}"
+            "source": "$action-default-brand-500"
           },
           "600": {
-            "source": "$action-default-brand-600",
+            "$value": "{color.brand.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.600}"
+            "source": "$action-default-brand-600"
           },
           "700": {
-            "source": "$action-default-brand-700",
+            "$value": "{color.brand.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.700}"
+            "source": "$action-default-brand-700"
           },
           "800": {
-            "source": "$action-default-brand-800",
+            "$value": "{color.brand.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.800}"
+            "source": "$action-default-brand-800"
           },
           "900": {
-            "source": "$action-default-brand-900",
+            "$value": "{color.brand.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.900}"
+            "source": "$action-default-brand-900"
           },
           "base": {
-            "source": "$action-default-brand-base",
+            "$value": "{color.brand.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.brand.base}"
+            "source": "$action-default-brand-base"
           }
         },
         "success": {
           "100": {
-            "source": "$action-default-success-100",
+            "$value": "{color.success.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.100}"
+            "source": "$action-default-success-100"
           },
           "200": {
-            "source": "$action-default-success-200",
+            "$value": "{color.success.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.200}"
+            "source": "$action-default-success-200"
           },
           "300": {
-            "source": "$action-default-success-300",
+            "$value": "{color.success.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.300}"
+            "source": "$action-default-success-300"
           },
           "400": {
-            "source": "$action-default-success-400",
+            "$value": "{color.success.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.400}"
+            "source": "$action-default-success-400"
           },
           "500": {
-            "source": "$action-default-success-500",
+            "$value": "{color.success.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.500}"
+            "source": "$action-default-success-500"
           },
           "600": {
-            "source": "$action-default-success-600",
+            "$value": "{color.success.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.600}"
+            "source": "$action-default-success-600"
           },
           "700": {
-            "source": "$action-default-success-700",
+            "$value": "{color.success.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.700}"
+            "source": "$action-default-success-700"
           },
           "800": {
-            "source": "$action-default-success-800",
+            "$value": "{color.success.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.800}"
+            "source": "$action-default-success-800"
           },
           "900": {
-            "source": "$action-default-success-900",
+            "$value": "{color.success.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.900}"
+            "source": "$action-default-success-900"
           },
           "base": {
-            "source": "$action-default-success-base",
+            "$value": "{color.success.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.success.base}"
+            "source": "$action-default-success-base"
           }
         },
         "info": {
           "100": {
-            "source": "$action-default-info-100",
+            "$value": "{color.info.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.100}"
+            "source": "$action-default-info-100"
           },
           "200": {
-            "source": "$action-default-info-200",
+            "$value": "{color.info.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.200}"
+            "source": "$action-default-info-200"
           },
           "300": {
-            "source": "$action-default-info-300",
+            "$value": "{color.info.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.300}"
+            "source": "$action-default-info-300"
           },
           "400": {
-            "source": "$action-default-info-400",
+            "$value": "{color.info.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.400}"
+            "source": "$action-default-info-400"
           },
           "500": {
-            "source": "$action-default-info-500",
+            "$value": "{color.info.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.500}"
+            "source": "$action-default-info-500"
           },
           "600": {
-            "source": "$action-default-info-600",
+            "$value": "{color.info.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.600}"
+            "source": "$action-default-info-600"
           },
           "700": {
-            "source": "$action-default-info-700",
+            "$value": "{color.info.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.700}"
+            "source": "$action-default-info-700"
           },
           "800": {
-            "source": "$action-default-info-800",
+            "$value": "{color.info.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.800}"
+            "source": "$action-default-info-800"
           },
           "900": {
-            "source": "$action-default-info-900",
+            "$value": "{color.info.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.900}"
+            "source": "$action-default-info-900"
           },
           "base": {
-            "source": "$action-default-info-base",
+            "$value": "{color.info.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.info.base}"
+            "source": "$action-default-info-base"
           }
         },
         "warning": {
           "100": {
-            "source": "$action-default-warning-100",
+            "$value": "{color.warning.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.100}"
+            "source": "$action-default-warning-100"
           },
           "200": {
-            "source": "$action-default-warning-200",
+            "$value": "{color.warning.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.200}"
+            "source": "$action-default-warning-200"
           },
           "300": {
-            "source": "$action-default-warning-300",
+            "$value": "{color.warning.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.300}"
+            "source": "$action-default-warning-300"
           },
           "400": {
-            "source": "$action-default-warning-400",
+            "$value": "{color.warning.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.400}"
+            "source": "$action-default-warning-400"
           },
           "500": {
-            "source": "$action-default-warning-500",
+            "$value": "{color.warning.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.500}"
+            "source": "$action-default-warning-500"
           },
           "600": {
-            "source": "$action-default-warning-600",
+            "$value": "{color.warning.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.600}"
+            "source": "$action-default-warning-600"
           },
           "700": {
-            "source": "$action-default-warning-700",
+            "$value": "{color.warning.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.700}"
+            "source": "$action-default-warning-700"
           },
           "800": {
-            "source": "$action-default-warning-800",
+            "$value": "{color.warning.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.800}"
+            "source": "$action-default-warning-800"
           },
           "900": {
-            "source": "$action-default-warning-900",
+            "$value": "{color.warning.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.900}"
+            "source": "$action-default-warning-900"
           },
           "base": {
-            "source": "$action-default-warning-base",
+            "$value": "{color.warning.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.warning.base}"
+            "source": "$action-default-warning-base"
           }
         },
         "danger": {
           "100": {
-            "source": "$action-default-danger-100",
+            "$value": "{color.danger.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.100}"
+            "source": "$action-default-danger-100"
           },
           "200": {
-            "source": "$action-default-danger-200",
+            "$value": "{color.danger.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.200}"
+            "source": "$action-default-danger-200"
           },
           "300": {
-            "source": "$action-default-danger-300",
+            "$value": "{color.danger.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.300}"
+            "source": "$action-default-danger-300"
           },
           "400": {
-            "source": "$action-default-danger-400",
+            "$value": "{color.danger.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.400}"
+            "source": "$action-default-danger-400"
           },
           "500": {
-            "source": "$action-default-danger-500",
+            "$value": "{color.danger.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.500}"
+            "source": "$action-default-danger-500"
           },
           "600": {
-            "source": "$action-default-danger-600",
+            "$value": "{color.danger.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.600}"
+            "source": "$action-default-danger-600"
           },
           "700": {
-            "source": "$action-default-danger-700",
+            "$value": "{color.danger.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.700}"
+            "source": "$action-default-danger-700"
           },
           "800": {
-            "source": "$action-default-danger-800",
+            "$value": "{color.danger.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.800}"
+            "source": "$action-default-danger-800"
           },
           "900": {
-            "source": "$action-default-danger-900",
+            "$value": "{color.danger.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.900}"
+            "source": "$action-default-danger-900"
           },
           "base": {
-            "source": "$action-default-danger-base",
+            "$value": "{color.danger.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.danger.base}"
+            "source": "$action-default-danger-base"
           }
         },
         "light": {
           "100": {
-            "source": "$action-default-light-100",
+            "$value": "{color.light.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.100}"
+            "source": "$action-default-light-100"
           },
           "200": {
-            "source": "$action-default-light-200",
+            "$value": "{color.light.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.200}"
+            "source": "$action-default-light-200"
           },
           "300": {
-            "source": "$action-default-light-300",
+            "$value": "{color.light.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.300}"
+            "source": "$action-default-light-300"
           },
           "400": {
-            "source": "$action-default-light-400",
+            "$value": "{color.light.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.400}"
+            "source": "$action-default-light-400"
           },
           "500": {
-            "source": "$action-default-light-500",
+            "$value": "{color.light.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.500}"
+            "source": "$action-default-light-500"
           },
           "600": {
-            "source": "$action-default-light-600",
+            "$value": "{color.light.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.600}"
+            "source": "$action-default-light-600"
           },
           "700": {
-            "source": "$action-default-light-700",
+            "$value": "{color.light.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.700}"
+            "source": "$action-default-light-700"
           },
           "800": {
-            "source": "$action-default-light-800",
+            "$value": "{color.light.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.800}"
+            "source": "$action-default-light-800"
           },
           "900": {
-            "source": "$action-default-light-900",
+            "$value": "{color.light.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.900}"
+            "source": "$action-default-light-900"
           },
           "base": {
-            "source": "$action-default-light-base",
+            "$value": "{color.light.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.light.base}"
+            "source": "$action-default-light-base"
           }
         },
         "dark": {
           "100": {
-            "source": "$action-default-dark-100",
+            "$value": "{color.dark.100}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.100}"
+            "source": "$action-default-dark-100"
           },
           "200": {
-            "source": "$action-default-dark-200",
+            "$value": "{color.dark.200}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.200}"
+            "source": "$action-default-dark-200"
           },
           "300": {
-            "source": "$action-default-dark-300",
+            "$value": "{color.dark.300}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.300}"
+            "source": "$action-default-dark-300"
           },
           "400": {
-            "source": "$action-default-dark-400",
+            "$value": "{color.dark.400}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.400}"
+            "source": "$action-default-dark-400"
           },
           "500": {
-            "source": "$action-default-dark-500",
+            "$value": "{color.dark.500}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.500}"
+            "source": "$action-default-dark-500"
           },
           "600": {
-            "source": "$action-default-dark-600",
+            "$value": "{color.dark.600}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.600}"
+            "source": "$action-default-dark-600"
           },
           "700": {
-            "source": "$action-default-dark-700",
+            "$value": "{color.dark.700}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.700}"
+            "source": "$action-default-dark-700"
           },
           "800": {
-            "source": "$action-default-dark-800",
+            "$value": "{color.dark.800}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.800}"
+            "source": "$action-default-dark-800"
           },
           "900": {
-            "source": "$action-default-dark-900",
+            "$value": "{color.dark.900}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.900}"
+            "source": "$action-default-dark-900"
           },
           "base": {
-            "source": "$action-default-dark-base",
+            "$value": "{color.dark.base}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.dark.base}"
+            "source": "$action-default-dark-base"
           }
         },
         "accent": {
           "a": {
-            "source": "$action-default-accent-a",
+            "$value": "{color.accent.a}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.accent.a}"
+            "source": "$action-default-accent-a"
           },
           "b": {
-            "source": "$action-default-accent-b",
+            "$value": "{color.accent.b}",
             "modify": [
               {
-                "type": "darken",
-                "amount": "0.1"
+                "reorderedData": {
+                  "type": "darken",
+                  "amount": "0.1"
+                },
+                "isKeyOrderMismatched": false,
+                "mismatches": {}
               }
             ],
-            "$value": "{color.accent.b}"
+            "source": "$action-default-accent-b"
           }
         }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index ba0697b0af..0e318aed1a 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -4,586 +4,820 @@
     "box-shadow": {
       "level": {
         "1": {
-          "source": "$level-1-box-shadow",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".0625rem",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".0625rem",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".0625rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".0625rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 1."
+          "$description": "Basic box shadow of level 1.",
+          "source": "$level-1-box-shadow"
         },
         "2": {
-          "source": "$level-2-box-shadow",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".125rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".125rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".125rem",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".125rem",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 2."
+          "$description": "Basic box shadow of level 2.",
+          "source": "$level-2-box-shadow"
         },
         "3": {
-          "source": "$level-3-box-shadow",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 3."
+          "$description": "Basic box shadow of level 3.",
+          "source": "$level-3-box-shadow"
         },
         "4": {
-          "source": "$level-4-box-shadow",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".625rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".625rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 4."
+          "$description": "Basic box shadow of level 4.",
+          "source": "$level-4-box-shadow"
         },
         "5": {
-          "source": "$level-5-box-shadow",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "1.25px",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "1.25px",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 5."
+          "$description": "Basic box shadow of level 5.",
+          "source": "$level-5-box-shadow"
         }
       },
       "base": {
-        "source": "$box-shadow",
         "$value": {
-          "color": "rgba(0, 0, 0, .3)",
-          "offsetX": "0",
-          "offsetY": ".125rem",
-          "blur": ".25rem"
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
         },
-        "$description": "Default box shadow."
+        "$description": "Default box shadow.",
+        "source": "$box-shadow"
       },
       "sm": {
-        "source": "$box-shadow-sm",
         "$value": {
-          "color": "rgba(0, 0, 0, .2)",
-          "offsetX": "0",
-          "offsetY": ".0625rem",
-          "blur": ".125rem"
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
         },
-        "$description": "Small box shadow."
+        "$description": "Small box shadow.",
+        "source": "$box-shadow-sm"
       },
       "lg": {
-        "source": "$box-shadow-lg",
         "$value": {
-          "color": "rgba(0, 0, 0, .3)",
-          "offsetX": "0",
-          "offsetY": ".25rem",
-          "blur": ".5rem"
+          "isKeyOrderMismatched": false,
+          "mismatches": {}
         },
-        "$description": "Large box shadow."
+        "$description": "Large box shadow.",
+        "source": "$box-shadow-lg"
       },
       "down": {
         "1": {
-          "source": "$box-shadow-down-1",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".0625rem",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".0625rem",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".0625rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".0625rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Bottom box shadow of level 1."
+          "$description": "Bottom box shadow of level 1.",
+          "source": "$box-shadow-down-1"
         },
         "2": {
-          "source": "$box-shadow-down-2",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".125rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".125rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".125rem",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".125rem",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Bottom box shadow of level 2."
+          "$description": "Bottom box shadow of level 2.",
+          "source": "$box-shadow-down-2"
         },
         "3": {
-          "source": "$box-shadow-down-3",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".25rem",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".25rem",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Bottom box shadow of level 3."
+          "$description": "Bottom box shadow of level 3.",
+          "source": "$box-shadow-down-3"
         },
         "4": {
-          "source": "$box-shadow-down-4",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".625rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".625rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Bottom box shadow of level 4."
+          "$description": "Bottom box shadow of level 4.",
+          "source": "$box-shadow-down-4"
         },
         "5": {
-          "source": "$box-shadow-down-5",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "1.25px",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "1.25px",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": ".5rem",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": ".5rem",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Bottom box shadow of level 5."
+          "$description": "Bottom box shadow of level 5.",
+          "source": "$box-shadow-down-5"
         }
       },
       "left": {
         "1": {
-          "source": "$box-shadow-left-1",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.0625rem",
-              "offsetY": "0",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.0625rem",
+                "offsetY": "0",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.0625rem",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.0625rem",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Left box shadow of level 1."
+          "$description": "Left box shadow of level 1.",
+          "source": "$box-shadow-left-1"
         },
         "2": {
-          "source": "$box-shadow-left-2",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.125rem",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.125rem",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.125rem",
-              "offsetY": "0",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.125rem",
+                "offsetY": "0",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Left box shadow of level 2."
+          "$description": "Left box shadow of level 2.",
+          "source": "$box-shadow-left-2"
         },
         "3": {
-          "source": "$box-shadow-left-3",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.5rem",
-              "offsetY": "0",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.5rem",
+                "offsetY": "0",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.25rem",
-              "offsetY": "0",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.25rem",
+                "offsetY": "0",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Left box shadow of level 3."
+          "$description": "Left box shadow of level 3.",
+          "source": "$box-shadow-left-3"
         },
         "4": {
-          "source": "$box-shadow-left-4",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.625rem",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.625rem",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.5rem",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.5rem",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Left box shadow of level 4."
+          "$description": "Left box shadow of level 4.",
+          "source": "$box-shadow-left-4"
         },
         "5": {
-          "source": "$box-shadow-left-5",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-1.25rem",
-              "offsetY": "0",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-1.25rem",
+                "offsetY": "0",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "-.5rem",
-              "offsetY": "0",
-              "blur": "3rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "-.5rem",
+                "offsetY": "0",
+                "blur": "3rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Left box shadow of level 5."
+          "$description": "Left box shadow of level 5.",
+          "source": "$box-shadow-left-5"
         }
       },
       "up": {
         "1": {
-          "source": "$box-shadow-up-1",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.0625rem",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.0625rem",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.0625rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.0625rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Top box shadow of level 1."
+          "$description": "Top box shadow of level 1.",
+          "source": "$box-shadow-up-1"
         },
         "2": {
-          "source": "$box-shadow-up-2",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.125rem",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.125rem",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.125rem",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.125rem",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Top box shadow of level 2."
+          "$description": "Top box shadow of level 2.",
+          "source": "$box-shadow-up-2"
         },
         "3": {
-          "source": "$box-shadow-up-3",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.5rem",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.5rem",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.25rem",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.25rem",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Top box shadow of level 3."
+          "$description": "Top box shadow of level 3.",
+          "source": "$box-shadow-up-3"
         },
         "4": {
-          "source": "$box-shadow-up-4",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.625rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.625rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.5rem",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.5rem",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Top box shadow of level 4."
+          "$description": "Top box shadow of level 4.",
+          "source": "$box-shadow-up-4"
         },
         "5": {
-          "source": "$box-shadow-up-5",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-1.25rem",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-1.25rem",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "-.5rem",
-              "blur": "3rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "-.5rem",
+                "blur": "3rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Basic box shadow of level 5."
+          "$description": "Basic box shadow of level 5.",
+          "source": "$box-shadow-up-5"
         }
       },
       "right": {
         "1": {
-          "source": "$box-shadow-right-1",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".0625rem",
-              "offsetY": "0",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".0625rem",
+                "offsetY": "0",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".0625rem",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".0625rem",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Right box shadow of level 1."
+          "$description": "Right box shadow of level 1.",
+          "source": "$box-shadow-right-1"
         },
         "2": {
-          "source": "$box-shadow-right-2",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".125rem",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".125rem",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".125rem",
-              "offsetY": "0",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".125rem",
+                "offsetY": "0",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Right box shadow of level 2."
+          "$description": "Right box shadow of level 2.",
+          "source": "$box-shadow-right-2"
         },
         "3": {
-          "source": "$box-shadow-right-3",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".5rem",
-              "offsetY": "0",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".5rem",
+                "offsetY": "0",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".25rem",
-              "offsetY": "0",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".25rem",
+                "offsetY": "0",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Right box shadow of level 3."
+          "$description": "Right box shadow of level 3.",
+          "source": "$box-shadow-right-3"
         },
         "4": {
-          "source": "$box-shadow-right-4",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".625rem",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".625rem",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".5rem",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".5rem",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Right box shadow of level 4."
+          "$description": "Right box shadow of level 4.",
+          "source": "$box-shadow-right-4"
         },
         "5": {
-          "source": "$box-shadow-right-5",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "1.25rem",
-              "offsetY": "0",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "1.25rem",
+                "offsetY": "0",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": ".5rem",
-              "offsetY": "0",
-              "blur": "3rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": ".5rem",
+                "offsetY": "0",
+                "blur": "3rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Right box shadow of level 5."
+          "$description": "Right box shadow of level 5.",
+          "source": "$box-shadow-right-5"
         }
       },
       "centered": {
         "1": {
-          "source": "$box-shadow-centered-1",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".125rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".125rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Centered box shadow of level 1."
+          "$description": "Centered box shadow of level 1.",
+          "source": "$box-shadow-centered-1"
         },
         "2": {
-          "source": "$box-shadow-centered-2",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Centered box shadow of level 2."
+          "$description": "Centered box shadow of level 2.",
+          "source": "$box-shadow-centered-2"
         },
         "3": {
-          "source": "$box-shadow-centered-3",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": ".625rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": ".625rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "1rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "1rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Centered box shadow of level 3."
+          "$description": "Centered box shadow of level 3.",
+          "source": "$box-shadow-centered-3"
         },
         "4": {
-          "source": "$box-shadow-centered-4",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "1.25rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "1.25rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Centered box shadow of level 4."
+          "$description": "Centered box shadow of level 4.",
+          "source": "$box-shadow-centered-4"
         },
         "5": {
-          "source": "$box-shadow-centered-5",
           "$value": [
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "2.5rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "2.5rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             },
             {
-              "color": "rgba(0, 0, 0, .15)",
-              "offsetX": "0",
-              "offsetY": "0",
-              "blur": "3rem"
+              "reorderedData": {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "3rem"
+              },
+              "isKeyOrderMismatched": false,
+              "mismatches": {}
             }
           ],
-          "$description": "Centered box shadow of level 5."
+          "$description": "Centered box shadow of level 5.",
+          "source": "$box-shadow-centered-5"
         }
       }
     }
   }
-}
+}
\ No newline at end of file