diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index 2fa26c22b4..3036f088cf 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -2,6 +2,7 @@ const path = require('path');
 const minimist = require('minimist');
 const {
   initializeStyleDictionary,
+  getTokensStudioTransforms,
   colorTransform,
 } = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
@@ -56,9 +57,14 @@ async function buildTokensCommand(commandArgs) {
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
+    preprocessors: ['pgn-annotate-token-extensions-with-references', 'tokens-studio'],
+    expand: {
+      typesMap: (await getTokensStudioTransforms()).expandTypesMap,
+    },
     platforms: {
       css: {
         prefix: 'pgn',
+        transformGroup: 'paragon-css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
         options: {
@@ -82,7 +88,6 @@ async function buildTokensCommand(commandArgs) {
             },
           },
         ],
-        transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
       },
     },
     log: {
diff --git a/package-lock.json b/package-lock.json
index 574036908f..5b8d17d40f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
       ],
       "dependencies": {
         "@popperjs/core": "^2.11.4",
+        "@tokens-studio/sd-transforms": "^1.2.4",
         "axios": "^0.27.2",
         "bootstrap": "^4.6.2",
         "chalk": "^4.1.2",
@@ -2427,6 +2428,14 @@
         "url": "https://github.com/sponsors/streamich"
       }
     },
+    "node_modules/@bundled-es-modules/postcss-calc-ast-parser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz",
+      "integrity": "sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==",
+      "dependencies": {
+        "postcss-calc-ast-parser": "^0.1.4"
+      }
+    },
     "node_modules/@chevrotain/cst-dts-gen": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
@@ -8305,6 +8314,30 @@
       "version": "0.3.0",
       "license": "MIT"
     },
+    "node_modules/@tokens-studio/sd-transforms": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/sd-transforms/-/sd-transforms-1.2.4.tgz",
+      "integrity": "sha512-Blf7Y5D7uieRBTcmyrFxZ/oEB7OYAa/Ns7DJU4/fyV69pvm7DC3K3zHxrFwHSRcoa7C/dFoF3p3AgohkdXzjfA==",
+      "dependencies": {
+        "@bundled-es-modules/deepmerge": "^4.3.1",
+        "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
+        "@tokens-studio/types": "^0.5.1",
+        "colorjs.io": "^0.4.3",
+        "expr-eval-fork": "^2.0.2",
+        "is-mergeable-object": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "style-dictionary": "^4.0.1"
+      }
+    },
+    "node_modules/@tokens-studio/types": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@tokens-studio/types/-/types-0.5.1.tgz",
+      "integrity": "sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "dev": true,
@@ -14320,6 +14353,11 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/colorjs.io": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz",
+      "integrity": "sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "license": "MIT",
@@ -17617,6 +17655,11 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/expr-eval-fork": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz",
+      "integrity": "sha512-NaAnObPVwHEYrODd7Jzp3zzT9pgTAlUUL4MZiZu9XAYPDpx89cPsfyEImFb2XY0vQNbrqg2CG7CLiI+Rs3seaQ=="
+    },
     "node_modules/express": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -22846,6 +22889,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-mergeable-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz",
+      "integrity": "sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA=="
+    },
     "node_modules/is-nan": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
@@ -32211,6 +32259,22 @@
         "postcss": "^8.2.2"
       }
     },
+    "node_modules/postcss-calc-ast-parser": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz",
+      "integrity": "sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw==",
+      "dependencies": {
+        "postcss-value-parser": "^3.3.1"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
+    "node_modules/postcss-calc-ast-parser/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
     "node_modules/postcss-colormin": {
       "version": "5.3.1",
       "license": "MIT",
diff --git a/package.json b/package.json
index b9f430726a..77ff05e6eb 100644
--- a/package.json
+++ b/package.json
@@ -51,12 +51,14 @@
     "playroom:build": "npm run playroom:build --workspace=www",
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
+    "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
     "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
     "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
+    "@tokens-studio/sd-transforms": "^1.2.4",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
     "chalk": "^4.1.2",
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
index 09745d53bf..b1785ba2ed 100644
--- a/styles/css/core/custom-media-breakpoints.css
+++ b/styles/css/core/custom-media-breakpoints.css
@@ -3,7 +3,7 @@
  * See <root>/tokens/README.md for more details.
  */
 
-@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px);
 @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
 @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
 @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index c5346db946..1f35a623c1 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -36,18 +36,18 @@
   --pgn-transition-base: all .2s ease-in-out; /* Generic transition for any property change */
   --pgn-transition-progress-bar-bar-transition: width .6s ease;
   --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
-  --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  --pgn-transition-form-control: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  --pgn-transition-form-input: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   --pgn-transition-carousel-control: opacity .15s ease;
   --pgn-transition-carousel-indicator: opacity .6s ease;
-  --pgn-transition-carousel-duration: .6s;
+  --pgn-transition-carousel-duration: 0.6s;
   --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;
   --pgn-typography-line-height-display-mobile: 3.5rem; /* Mobile display line height. */
   --pgn-typography-line-height-display-base: 1; /* Standard display line height. */
-  --pgn-typography-line-height-micro: .938rem; /* Micro utils line height. */
+  --pgn-typography-line-height-micro: 0.938rem; /* Micro utils line height. */
   --pgn-typography-line-height-sm: 1.5; /* Small line height. */
   --pgn-typography-line-height-lg: 1.5; /* Large line height. */
   --pgn-typography-line-height-base: 1.5556; /* Basic line height. */
@@ -55,7 +55,7 @@
   --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold); /* Font weight of display level 3. */
   --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold); /* Font weight of display level 2. */
   --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold); /* Font weight of display level 1. */
-  --pgn-typography-font-weight-table-th: bold; /* Table th font weight. */
+  --pgn-typography-font-weight-table-th: 700; /* Table th font weight. */
   --pgn-typography-font-weight-lead: inherit; /* Lead text font weight. */
   --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); /* Basic font weight. */
   --pgn-typography-font-weight-bolder: bolder; /* Bolder font weight. */
@@ -73,9 +73,9 @@
   --pgn-typography-font-size-display-2: 4.875rem; /* Font size for heading of level 2. */
   --pgn-typography-font-size-display-1: 3.75rem; /* Font size for heading of level 1. */
   --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base); /* Mobile font size of heading level 6. */
-  --pgn-typography-font-size-h6-base: .75rem; /* Font size of heading level 6. */
+  --pgn-typography-font-size-h6-base: 0.75rem; /* Font size of heading level 6. */
   --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base); /* Mobile font size of heading level 5. */
-  --pgn-typography-font-size-h5-base: .875rem; /* Font size of heading level 5. */
+  --pgn-typography-font-size-h5-base: 0.875rem; /* Font size of heading level 5. */
   --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base); /* Mobile font size of heading level 4. */
   --pgn-typography-font-size-h4-base: 1.125rem; /* Font size of heading level 4. */
   --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base); /* Mobile font size of heading level 3. */
@@ -84,9 +84,9 @@
   --pgn-typography-font-size-h2-base: 2rem; /* Font size of heading level 2. */
   --pgn-typography-font-size-h1-mobile: 2.25rem; /* Mobile font size of heading level 1. */
   --pgn-typography-font-size-h1-base: 2.5rem; /* Base font size of heading level 1. */
-  --pgn-typography-font-size-micro: .688rem; /* Micro utils text font size. */
-  --pgn-typography-font-size-xs: .75rem; /* X-small font size. */
-  --pgn-typography-font-size-sm: .875rem; /* Small font size. */
+  --pgn-typography-font-size-micro: 0.688rem; /* Micro utils text font size. */
+  --pgn-typography-font-size-xs: 0.75rem; /* X-small font size. */
+  --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */
   --pgn-typography-font-size-lg: 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. */
@@ -112,26 +112,26 @@
   --pgn-typography-input-btn-line-height-sm: 1.4286;
   --pgn-typography-input-btn-line-height-base: 1.3333;
   --pgn-typography-input-btn-font-size-lg: 1.325rem;
-  --pgn-typography-input-btn-font-size-sm: .875rem;
+  --pgn-typography-input-btn-font-size-sm: 0.875rem;
   --pgn-typography-input-btn-font-size-base: 1.125rem;
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
   --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-headings-font-family: inherit;
   --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-toast-font-size: .875rem;
+  --pgn-typography-toast-font-size: 0.875rem;
   --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
   --pgn-typography-spacer-line-height: 1px;
   --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
   --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-pagination-line-height: 1.5rem;
-  --pgn-typography-pagination-font-size-sm: .875rem;
+  --pgn-typography-pagination-font-size-sm: 0.875rem;
   --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
   --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
   --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
   --pgn-typography-nav-link-text-decoration: none;
   --pgn-typography-nav-link-font-weight: 500;
-  --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
+  --pgn-typography-menu-select-btn-link-text-decoration-thickness: 0.125rem;
   --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
   --pgn-typography-image-figure-caption-font-size: 90%;
   --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
@@ -176,12 +176,12 @@
   --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
   --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-alert-line-height: 1.5rem;
-  --pgn-typography-alert-font-size: .875rem;
+  --pgn-typography-alert-font-size: 0.875rem;
   --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
   --pgn-spacing-grid-gutter-width: 24px; /* Grid gutter width value. */
-  --pgn-spacing-table-cell-padding-sm: .3rem; /* Padding sm for tables. */
-  --pgn-spacing-table-cell-padding-base: .75rem; /* Padding for tables. */
-  --pgn-spacing-label-margin-bottom: .5rem; /* Margin bottom for label. */
+  --pgn-spacing-table-cell-padding-sm: 0.3rem; /* Padding sm for tables. */
+  --pgn-spacing-table-cell-padding-base: 0.75rem; /* Padding for tables. */
+  --pgn-spacing-label-margin-bottom: 0.5rem; /* Margin bottom for label. */
   --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4); /* Space value of level 5.5 */
   --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2); /* Space value of level 4.5 */
   --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25); /* Space value of level 3.5 */
@@ -194,85 +194,85 @@
   --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); /* Space value of level 3 */
   --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5); /* Space value of level 2 */
   --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25); /* Space value of level 1 */
-  --pgn-spacing-spacer-0: 0; /* Space value of level 0 */
-  --pgn-spacing-mark-padding: .2em;
+  --pgn-spacing-spacer-0: 0rem; /* Space value of level 0 */
+  --pgn-spacing-mark-padding: 0.2em;
   --pgn-spacing-paragraph-margin-bottom: 1rem;
   --pgn-spacing-list-group-item-padding-x: 1.25rem;
-  --pgn-spacing-list-group-item-padding-y: .75rem;
-  --pgn-spacing-list-inline-padding: .5rem;
+  --pgn-spacing-list-group-item-padding-y: 0.75rem;
+  --pgn-spacing-list-inline-padding: 0.5rem;
   --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
-  --pgn-spacing-input-btn-padding-lg-y: .6875rem;
-  --pgn-spacing-input-btn-padding-sm-x: .75rem;
-  --pgn-spacing-input-btn-padding-sm-y: .4375rem;
+  --pgn-spacing-input-btn-padding-lg-y: 0.6875rem;
+  --pgn-spacing-input-btn-padding-sm-x: 0.75rem;
+  --pgn-spacing-input-btn-padding-sm-y: 0.4375rem;
   --pgn-spacing-input-btn-padding-x: 1rem;
-  --pgn-spacing-input-btn-padding-y: .5625rem;
-  --pgn-spacing-headings-margin-bottom: .5rem;
-  --pgn-spacing-caret-vertical-align: .255em;
-  --pgn-spacing-caret-base: .255em;
-  --pgn-spacing-tooltip-margin: 0;
-  --pgn-spacing-tooltip-padding-x: .5rem;
-  --pgn-spacing-tooltip-padding-y: .5rem;
-  --pgn-spacing-toast-container-gutter-sm: .625rem;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-spacing-headings-margin-bottom: 0.5rem;
+  --pgn-spacing-caret-vertical-align: 0.255em;
+  --pgn-spacing-caret-base: 0.255em;
+  --pgn-spacing-tooltip-margin: 0rem;
+  --pgn-spacing-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-tooltip-padding-y: 0.5rem;
+  --pgn-spacing-toast-container-gutter-sm: 0.625rem;
   --pgn-spacing-toast-container-gutter-lg: 1.25rem;
-  --pgn-spacing-toast-padding-y: .25rem;
-  --pgn-spacing-toast-padding-x: .75rem;
+  --pgn-spacing-toast-padding-y: 0.25rem;
+  --pgn-spacing-toast-padding-x: 0.75rem;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: 0.625rem;
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
+  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: 0.625rem;
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
-  --pgn-spacing-sticky-offset: 0;
-  --pgn-spacing-stepper-header-step-list-margin: 0;
-  --pgn-spacing-stepper-header-step-list-padding-x: 0;
-  --pgn-spacing-stepper-header-step-list-padding-y: .25rem;
-  --pgn-spacing-stepper-header-step-padding: .25rem;
+  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: 0.7rem;
+  --pgn-spacing-sticky-offset: 0rem;
+  --pgn-spacing-stepper-header-step-list-margin: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-x: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-y: 0.25rem;
+  --pgn-spacing-stepper-header-step-padding: 0.25rem;
   --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-stepper-header-padding-y: .75rem;
-  --pgn-spacing-vertical-align: .125em;
-  --pgn-spacing-selectable-box-box-space: .75rem;
-  --pgn-spacing-selectable-box-border-radius: .25rem;
+  --pgn-spacing-stepper-header-padding-y: 0.75rem;
+  --pgn-spacing-vertical-align: 0.125em;
+  --pgn-spacing-selectable-box-box-space: 0.75rem;
+  --pgn-spacing-selectable-box-border-radius: 0.25rem;
   --pgn-spacing-selectable-box-padding: 1rem;
-  --pgn-spacing-search-field-margin-button: .5rem;
-  --pgn-spacing-progress-bar-hint-annotation-gap: .5rem;
-  --pgn-spacing-popover-icon-margin-right: .5rem;
+  --pgn-spacing-search-field-margin-button: 0.5rem;
+  --pgn-spacing-progress-bar-hint-annotation-gap: 0.5rem;
+  --pgn-spacing-popover-icon-margin-right: 0.5rem;
   --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
   --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-popover-header-padding-x: 1rem;
-  --pgn-spacing-popover-header-padding-y: .5rem;
+  --pgn-spacing-popover-header-padding-y: 0.5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
-  --pgn-spacing-pagination-padding-x-sm: .6rem;
+  --pgn-spacing-pagination-padding-x-sm: 0.6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
-  --pgn-spacing-pagination-padding-y-lg: .75rem;
-  --pgn-spacing-pagination-padding-y-sm: .8rem;
-  --pgn-spacing-pagination-padding-y-base: .625rem;
-  --pgn-spacing-navbar-toggler-padding-x: .75rem;
-  --pgn-spacing-navbar-toggler-padding-y: .25rem;
+  --pgn-spacing-pagination-padding-y-lg: 0.75rem;
+  --pgn-spacing-pagination-padding-y-sm: 0.8rem;
+  --pgn-spacing-pagination-padding-y-base: 0.625rem;
+  --pgn-spacing-navbar-toggler-padding-x: 0.75rem;
+  --pgn-spacing-navbar-toggler-padding-y: 0.25rem;
   --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
-  --pgn-spacing-navbar-padding-x-nav-link: .5rem;
+  --pgn-spacing-navbar-padding-x-nav-link: 0.5rem;
   --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
   --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
-  --pgn-spacing-nav-link-padding-y: .5rem;
+  --pgn-spacing-nav-link-padding-y: 0.5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
   --pgn-spacing-modal-header-padding-y: 1rem;
   --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
   --pgn-spacing-modal-footer-padding-y: 1rem;
   --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
-  --pgn-spacing-modal-inner-padding-bottom: .7rem;
+  --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);
-  --pgn-spacing-menu-item-icon-margin-left: .25em;
+  --pgn-spacing-menu-item-icon-margin-left: 0.25em;
   --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
   --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
-  --pgn-spacing-image-thumbnail-padding: .25rem;
+  --pgn-spacing-image-thumbnail-padding: 0.25rem;
   --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
   --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-form-control-select-icon-padding: .5625rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem;
+  --pgn-spacing-form-control-select-icon-padding: 0.5625rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem;
   --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
   --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
   --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
@@ -284,14 +284,14 @@
   --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
   --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
   --pgn-spacing-form-control-spacer-x: 1rem;
-  --pgn-spacing-form-control-gutter: .5rem;
+  --pgn-spacing-form-control-gutter: 0.5rem;
   --pgn-spacing-form-group-margin-bottom: 1rem;
-  --pgn-spacing-form-check-position-axis: .375rem;
-  --pgn-spacing-form-check-inline-margin-x: .75rem;
-  --pgn-spacing-form-text-margin-top: .25rem;
-  --pgn-spacing-form-input-check-margin-y: .3rem;
-  --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
-  --pgn-spacing-form-input-check-margin-x-base: .25rem;
+  --pgn-spacing-form-check-position-axis: 0.375rem;
+  --pgn-spacing-form-check-inline-margin-x: 0.75rem;
+  --pgn-spacing-form-text-margin-top: 0.25rem;
+  --pgn-spacing-form-input-check-margin-y: 0.3rem;
+  --pgn-spacing-form-input-check-margin-x-inline: 0.3125rem;
+  --pgn-spacing-form-input-check-margin-x-base: 0.25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
   --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
@@ -301,50 +301,50 @@
   --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
-  --pgn-spacing-dropdown-close-container-top: .625rem;
+  --pgn-spacing-dropdown-close-container-top: 0.625rem;
   --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
-  --pgn-spacing-dropdown-padding-y-item: .25rem;
-  --pgn-spacing-dropdown-padding-y-base: .5rem;
+  --pgn-spacing-dropdown-padding-y-item: 0.25rem;
+  --pgn-spacing-dropdown-padding-y-base: 0.5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
-  --pgn-spacing-dropdown-padding-x-base: 0;
-  --pgn-spacing-dropdown-spacer: .125rem;
+  --pgn-spacing-dropdown-padding-x-base: 0rem;
+  --pgn-spacing-dropdown-spacer: 0.125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
-  --pgn-spacing-data-table-padding-small: .5rem;
-  --pgn-spacing-data-table-padding-y: .75rem;
-  --pgn-spacing-data-table-padding-x: .75rem;
-  --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem;
-  --pgn-spacing-collapsible-card-spacer-basic-x: .5rem;
-  --pgn-spacing-collapsible-card-spacer-basic-y: .5rem;
+  --pgn-spacing-data-table-padding-cell: 0.5rem 0.75rem;
+  --pgn-spacing-data-table-padding-small: 0.5rem;
+  --pgn-spacing-data-table-padding-y: 0.75rem;
+  --pgn-spacing-data-table-padding-x: 0.75rem;
+  --pgn-spacing-collapsible-card-spacer-basic-icon: 0.625rem;
+  --pgn-spacing-collapsible-card-spacer-basic-x: 0.5rem;
+  --pgn-spacing-collapsible-card-spacer-basic-y: 0.5rem;
   --pgn-spacing-collapsible-card-spacer-icon: 2.5rem;
-  --pgn-spacing-collapsible-card-spacer-left-body: .75rem;
+  --pgn-spacing-collapsible-card-spacer-left-body: 0.75rem;
   --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
-  --pgn-spacing-collapsible-card-spacer-x-base: .5rem;
+  --pgn-spacing-collapsible-card-spacer-x-base: 0.5rem;
   --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
-  --pgn-spacing-collapsible-card-spacer-y-base: .5rem;
-  --pgn-spacing-code-kbd-padding-x: .4rem;
-  --pgn-spacing-code-kbd-padding-y: .2rem;
-  --pgn-spacing-chip-carousel-container-padding-y: .313rem;
-  --pgn-spacing-chip-carousel-container-padding-x: .625rem;
-  --pgn-spacing-chip-carousel-controls-top-offset: .375rem;
+  --pgn-spacing-collapsible-card-spacer-y-base: 0.5rem;
+  --pgn-spacing-code-kbd-padding-x: 0.4rem;
+  --pgn-spacing-code-kbd-padding-y: 0.2rem;
+  --pgn-spacing-chip-carousel-container-padding-y: 0.313rem;
+  --pgn-spacing-chip-carousel-container-padding-x: 0.625rem;
+  --pgn-spacing-chip-carousel-controls-top-offset: 0.375rem;
   --pgn-spacing-chip-outline-width: 3px;
-  --pgn-spacing-chip-outline-focus-distance-dark: .313rem;
-  --pgn-spacing-chip-outline-focus-distance-light: .313rem;
+  --pgn-spacing-chip-outline-focus-distance-dark: 0.313rem;
+  --pgn-spacing-chip-outline-focus-distance-light: 0.313rem;
   --pgn-spacing-chip-outline-selected-distance-dark: 3px;
   --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-x: .5rem;
+  --pgn-spacing-chip-padding-x: 0.5rem;
   --pgn-spacing-chip-padding-y: 1px;
-  --pgn-spacing-chip-margin-icon: .25rem;
-  --pgn-spacing-chip-margin-base: .125rem;
+  --pgn-spacing-chip-margin-icon: 0.25rem;
+  --pgn-spacing-chip-margin-base: 0.125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
   --pgn-spacing-card-focus-border-offset: 5px;
-  --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem;
+  --pgn-spacing-card-logo-bottom-offset-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-bottom-offset-base: 1rem;
-  --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
+  --pgn-spacing-card-logo-left-offset-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-left-offset-base: 1.5rem;
-  --pgn-spacing-card-loading-skeleton-spacer: .313rem;
-  --pgn-spacing-card-footer-action-gap: .5rem;
+  --pgn-spacing-card-loading-skeleton-spacer: 0.313rem;
+  --pgn-spacing-card-footer-action-gap: 0.5rem;
   --pgn-spacing-card-columns-gap: 1.25rem;
   --pgn-spacing-card-columns-count: 3;
   --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
@@ -353,92 +353,92 @@
   --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
   --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-group: 12px;
-  --pgn-spacing-card-spacer-y: .75rem;
+  --pgn-spacing-card-spacer-y: 0.75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
   --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
   --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
   --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
-  --pgn-spacing-btn-block-spacing-y: .5rem;
+  --pgn-spacing-btn-block-spacing-y: 0.5rem;
   --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
   --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
   --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
   --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
   --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
   --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-spacing-bubble-expandable-padding-x: .25rem;
-  --pgn-spacing-bubble-expandable-padding-y: 0;
-  --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-badge-padding-y: .125rem;
-  --pgn-spacing-badge-padding-x-pill: .6em;
-  --pgn-spacing-badge-padding-x-base: .5rem;
-  --pgn-spacing-avatar-button-padding-left-lg: .25em;
-  --pgn-spacing-avatar-button-padding-left-sm: .25em;
-  --pgn-spacing-avatar-button-padding-left-base: .25em;
-  --pgn-spacing-annotation-arrow-side-margin: .25rem;
-  --pgn-spacing-annotation-padding: .5rem;
-  --pgn-spacing-alert-icon-space: .8rem;
+  --pgn-spacing-bubble-expandable-padding-x: 0.25rem;
+  --pgn-spacing-bubble-expandable-padding-y: 0rem;
+  --pgn-spacing-breadcrumb-margin-left: 0.5rem;
+  --pgn-spacing-badge-padding-y: 0.125rem;
+  --pgn-spacing-badge-padding-x-pill: 0.6em;
+  --pgn-spacing-badge-padding-x-base: 0.5rem;
+  --pgn-spacing-avatar-button-padding-left-lg: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-sm: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-base: 0.25em;
+  --pgn-spacing-annotation-arrow-side-margin: 0.25rem;
+  --pgn-spacing-annotation-padding: 0.5rem;
+  --pgn-spacing-alert-icon-space: 0.8rem;
   --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
   --pgn-spacing-alert-margin-bottom: 1rem;
   --pgn-spacing-alert-padding-x: 1.5rem;
   --pgn-spacing-alert-padding-y: 1.5rem;
-  --pgn-spacing-action-row-gap-y: .5rem;
-  --pgn-spacing-action-row-gap-x: .5rem;
+  --pgn-spacing-action-row-gap-y: 0.5rem;
+  --pgn-spacing-action-row-gap-x: 0.5rem;
   --pgn-size-breakpoint-xxl: 1400px; /* Starting breakpoint for large desktops, more than 1400px. */
   --pgn-size-breakpoint-xl: 1200px; /* Starting breakpoint for large desktops. */
   --pgn-size-breakpoint-lg: 992px; /* Starting breakpoint for desktops. */
   --pgn-size-breakpoint-md: 768px; /* Starting breakpoint for tablets. */
   --pgn-size-breakpoint-sm: 576px; /* Starting breakpoint for landscape phones. */
-  --pgn-size-breakpoint-xs: 0; /* Starting breakpoint for portrait phones. */
+  --pgn-size-breakpoint-xs: 0px; /* Starting breakpoint for portrait phones. */
   --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-list-group-border-width: var(--pgn-size-border-width);
   --pgn-size-input-btn-focus-width: 1px;
   --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
   --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
   --pgn-size-hr-border-width: var(--pgn-size-border-width);
-  --pgn-size-caret-width: .3em;
+  --pgn-size-caret-width: 0.3em;
   --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-tooltip-arrow-width: .8rem;
-  --pgn-size-tooltip-arrow-height: .4rem;
+  --pgn-size-tooltip-arrow-width: 0.8rem;
+  --pgn-size-tooltip-arrow-height: 0.4rem;
   --pgn-size-tooltip-max-width: 200px;
-  --pgn-size-toast-border-radius: .25rem;
+  --pgn-size-toast-border-radius: 0.25rem;
   --pgn-size-toast-border-width: 1px;
   --pgn-size-toast-max-width: 400px;
   --pgn-size-tabs-notification-width: 1rem;
   --pgn-size-tabs-notification-height: 1rem;
   --pgn-size-stepper-step-bubble-error-shadow-width: 3px;
-  --pgn-size-stepper-step-width-min: 0;
+  --pgn-size-stepper-step-width-min: 0rem;
   --pgn-size-stepper-header-height-min: 5.13rem;
-  --pgn-size-stack-gap: 0;
-  --pgn-size-spinner-sm-border-width: .2em;
+  --pgn-size-stack-gap: 0rem;
+  --pgn-size-spinner-sm-border-width: 0.2em;
   --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
   --pgn-size-spinner-sm-width: 1rem;
-  --pgn-size-spinner-base-border-width: .25em;
+  --pgn-size-spinner-base-border-width: 0.25em;
   --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-spinner-base-width: 2rem;
   --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-search-field-border-radius: 0;
-  --pgn-size-search-field-border-width-focus: .3125rem;
-  --pgn-size-search-field-border-width-base: .0625rem;
-  --pgn-size-progress-bar-threshold-circle: .5625rem;
-  --pgn-size-progress-bar-border-radius: 0;
+  --pgn-size-search-field-border-radius: 0rem;
+  --pgn-size-search-field-border-width-focus: 0.3125rem;
+  --pgn-size-search-field-border-width-base: 0.0625rem;
+  --pgn-size-progress-bar-threshold-circle: 0.5625rem;
+  --pgn-size-progress-bar-border-radius: 0rem;
   --pgn-size-progress-bar-border-width: 1px;
-  --pgn-size-progress-bar-height-annotated: .3125rem;
+  --pgn-size-progress-bar-height-annotated: 0.3125rem;
   --pgn-size-progress-bar-height-base: 1rem;
   --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-width-max: 480px;
   --pgn-size-product-tour-checkpoint-width-arrow: 15px;
   --pgn-size-product-tour-checkpoint-width-border: 8px;
-  --pgn-size-popover-arrow-height: .5rem;
+  --pgn-size-popover-arrow-height: 0.5rem;
   --pgn-size-popover-arrow-width: 1rem;
   --pgn-size-popover-icon-width: 1rem;
   --pgn-size-popover-icon-height: 1rem;
   --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
   --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-popover-max-width: 480px;
-  --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-toggle-border-sm: .25rem;
-  --pgn-size-pagination-toggle-border-base: .3125rem;
+  --pgn-size-pagination-focus-outline: 0rem;
+  --pgn-size-pagination-toggle-border-sm: 0.25rem;
+  --pgn-size-pagination-toggle-border-base: 0.3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
   --pgn-size-pagination-reduced-dropdown-max-height: 60vh;
   --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
@@ -451,10 +451,10 @@
   --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
   --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
   --pgn-size-navbar-nav-scroll-max-height: 75vh;
-  --pgn-size-nav-tabs-border-radius: 0;
+  --pgn-size-nav-tabs-border-radius: 0rem;
   --pgn-size-nav-tabs-border-width: 2px;
   --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
-  --pgn-size-nav-tabs-link-border-bottom-width: .188rem;
+  --pgn-size-nav-tabs-link-border-bottom-width: 0.188rem;
   --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
   --pgn-size-nav-pills-link-border-width: 1px;
   --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
@@ -469,7 +469,7 @@
   --pgn-size-menu-item-width-base: 19rem;
   --pgn-size-menu-item-height: 3rem;
   --pgn-size-menu-base-max-height: 16.813rem;
-  --pgn-size-menu-base-border-radius: .25em;
+  --pgn-size-menu-base-border-radius: 0.25em;
   --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
   --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
@@ -479,18 +479,18 @@
   --pgn-size-icon-md: 1.5rem;
   --pgn-size-icon-sm: 1.25rem;
   --pgn-size-icon-xs: 1rem;
-  --pgn-size-icon-inline: .8em;
+  --pgn-size-icon-inline: 0.8em;
   --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-border-radius-width: .125rem;
-  --pgn-size-form-border-radius-check-focus: .0625rem;
-  --pgn-size-form-autosuggest-border-width: .125rem;
+  --pgn-size-form-border-radius-width: 0.125rem;
+  --pgn-size-form-border-radius-check-focus: 0.0625rem;
+  --pgn-size-form-autosuggest-border-width: 0.125rem;
   --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
   --pgn-size-form-autosuggest-spinner-width: 1.25rem;
   --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
   --pgn-size-form-autosuggest-icon-width: 2.4rem;
   --pgn-size-form-grid-gutter-width: 0.625rem;
   --pgn-size-form-control-border-radio-indicator-radius: 50%;
-  --pgn-size-form-control-border-checkbox-indicator-radius: 0;
+  --pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
   --pgn-size-form-control-icon-width: 2rem;
   --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
   --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
@@ -498,11 +498,11 @@
   --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
   --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-border-radius: 1rem;
-  --pgn-size-form-control-range-thumb-border-base: 0;
+  --pgn-size-form-control-range-thumb-border-base: 0rem;
   --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-range-thumb-width: 1rem;
   --pgn-size-form-control-range-track-border-radius: 1rem;
-  --pgn-size-form-control-range-track-height: .5rem;
+  --pgn-size-form-control-range-track-height: 0.5rem;
   --pgn-size-form-control-range-track-width: 100%;
   --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
@@ -546,7 +546,7 @@
   --pgn-size-color-picker-sm: 2rem;
   --pgn-size-code-pre-scrollable-max-height: 340px;
   --pgn-size-chip-icon: 1.5rem;
-  --pgn-size-chip-border-radius: .375rem;
+  --pgn-size-chip-border-radius: 0.375rem;
   --pgn-size-carousel-caption-width: 70%;
   --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
@@ -562,7 +562,7 @@
   --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
   --pgn-size-card-focus-border-width: 2px;
   --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
-  --pgn-size-card-border-radius-logo: .25rem;
+  --pgn-size-card-border-radius-logo: 0.25rem;
   --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
   --pgn-size-card-border-width: var(--pgn-size-border-width);
   --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
@@ -573,13 +573,13 @@
   --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
   --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
-  --pgn-size-breadcrumb-border-width-focus: .0625rem;
-  --pgn-size-breadcrumb-border-axis-y-focus: .5rem;
-  --pgn-size-breadcrumb-border-axis-x-focus: .25rem;
-  --pgn-size-breadcrumb-border-radius-focus: .125rem;
+  --pgn-size-breadcrumb-border-width-focus: 0.0625rem;
+  --pgn-size-breadcrumb-border-axis-y-focus: 0.5rem;
+  --pgn-size-breadcrumb-border-axis-x-focus: 0.25rem;
+  --pgn-size-breadcrumb-border-radius-focus: 0.125rem;
   --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
   --pgn-size-badge-border-radius-pill: 10rem;
-  --pgn-size-badge-border-radius-base: .25rem;
+  --pgn-size-badge-border-radius-base: 0.25rem;
   --pgn-size-avatar-border-radius: 100%;
   --pgn-size-avatar-border-base: 1px;
   --pgn-size-avatar-huge: 18.75rem;
@@ -589,14 +589,14 @@
   --pgn-size-avatar-sm: 2.25rem;
   --pgn-size-avatar-xs: 1.5rem;
   --pgn-size-avatar-base: 3rem;
-  --pgn-size-annotation-border-radius: .25rem;
+  --pgn-size-annotation-border-radius: 0.25rem;
   --pgn-size-annotation-max-width: 18.75rem;
-  --pgn-size-annotation-arrow-border-width: .5rem;
-  --pgn-size-alert-border-width: 0;
+  --pgn-size-annotation-arrow-border-width: 0.5rem;
+  --pgn-size-alert-border-width: 0rem;
   --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-rounded-pill: 50rem; /* Pill border radius. */
-  --pgn-size-border-radius-sm: .25rem; /* Small border radius. */
-  --pgn-size-border-radius-lg: .425rem; /* Large border radius. */
-  --pgn-size-border-radius-base: .375rem; /* Default border radius. */
+  --pgn-size-border-radius-sm: 0.25rem; /* Small border radius. */
+  --pgn-size-border-radius-lg: 0.425rem; /* Large border radius. */
+  --pgn-size-border-radius-base: 0.375rem; /* Default border radius. */
   --pgn-size-border-width: 1px; /* Default border width. */
 }
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 4efd43154e..c146b74630 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1640,4 +1640,9 @@
   --pgn-elevation-popover-box-shadow: none;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
   --pgn-elevation-dropdown-box-shadow: none;
+  --pgn-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-form-input-width-focus: 0.063rem;
+  --pgn-size-btn-focus-width: 2px;
 }
diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
index f3990403f2..5bb50e01b1 100644
--- a/tokens/src/core/components/Card.json
+++ b/tokens/src/core/components/Card.json
@@ -15,7 +15,7 @@
       },
       "columns": {
         "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" },
-        "count": { "source": "$card-columns-count", "$value": "3" },
+        "count": { "source": "$card-columns-count", "$value": "3", "$type": "number" },
         "gap": { "source": "$card-columns-gap", "$value": "1.25rem" }
       },
       "footer": {
diff --git a/tokens/src/core/global/breakpoints.json b/tokens/src/core/global/breakpoints.json
index 438b0f4491..ab0a976bc3 100644
--- a/tokens/src/core/global/breakpoints.json
+++ b/tokens/src/core/global/breakpoints.json
@@ -3,7 +3,7 @@
     "$type": "dimension",
     "breakpoint": {
       "xs": {
-        "$value": "0",
+        "$value": "0px",
         "$description": "Starting breakpoint for portrait phones."
       },
       "sm": {
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index fa56e7f977..0a435616e6 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -6,11 +6,12 @@ const chalk = require('chalk');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
 const cssUtilities = require('./css-utilities');
-const { composeBreakpointName } = require('./utils');
+const { composeBreakpointName, processAndUpdateTokens } = require('./utils');
 
 /* eslint-disable import/no-unresolved */
 const getStyleDictionary = async () => (await import('style-dictionary')).default;
 const getStyleDictionaryUtils = async () => import('style-dictionary/utils');
+const getTokensStudioTransforms = async () => import('@tokens-studio/sd-transforms');
 /* eslint-enable import/no-unresolved */
 
 /**
@@ -171,10 +172,45 @@ const createCustomCSSVariables = async ({ formatterArgs }) => {
  */
 const initializeStyleDictionary = async ({ themes }) => {
   const StyleDictionary = await getStyleDictionary();
-  const { getReferences } = await getStyleDictionaryUtils();
+  const sdUtils = await getStyleDictionaryUtils();
+  const {
+    register: registerTokensStudioTransforms,
+    getTransforms: tokensStudioTransforms,
+  } = await getTokensStudioTransforms();
+
+  StyleDictionary.registerPreprocessor({
+    name: 'pgn-annotate-token-extensions-with-references',
+    preprocessor: (dictionary) => {
+      // Define the extension properties to add to the tokens $extensions object
+      const extensionProperties = [
+        {
+          name: 'isReferencedBySourceToken',
+          filter: tkn => tkn.isSource,
+          referenceTokenFilter: tkn => !tkn.isSource,
+        },
+        {
+          name: 'isReferencedByThemeVariant',
+          filter: tkn => themes.some(theme => tkn.filePath.includes(theme)),
+          referenceTokenFilter: tkn => !themes.some(theme => tkn.filePath.includes(theme)),
+        },
+      ];
+
+      // Pass the dictionary to the recursive function to process and update tokens in place
+      const dictionaryCopy = { ...dictionary };
+      processAndUpdateTokens(dictionary, extensionProperties, sdUtils, dictionaryCopy);
+
+      // Return the updated dictionary
+      return dictionary;
+    },
+  });
+
+  /**
+   * Registers transforms from @tokens-studio/sd-transforms.
+   */
+  registerTokensStudioTransforms(StyleDictionary);
 
   /**
-   * Transformer that applies SASS color functions to tokens.
+   * Transforms tokens by applying SASS color functions to tokens.
    */
   StyleDictionary.registerTransform({
     name: 'color/sass-color-functions',
@@ -199,6 +235,22 @@ const initializeStyleDictionary = async ({ themes }) => {
     },
   });
 
+  /**
+   * Registers a custom transform group for Paragon CSS.
+   */
+  const customTransforms = [
+    'color/sass-color-functions',
+    'str-replace',
+  ];
+  StyleDictionary.registerTransformGroup({
+    name: 'paragon-css',
+    transforms: [
+      ...tokensStudioTransforms({ platform: 'css' }),
+      ...StyleDictionary.hooks.transformGroups.css,
+      ...customTransforms,
+    ],
+  });
+
   /**
    * The custom formatter to create CSS variables for core tokens.
    */
@@ -236,7 +288,7 @@ const initializeStyleDictionary = async ({ themes }) => {
         // eslint-disable-next-line no-restricted-syntax
         for (const token of tokens) {
           // Get action token by reference
-          const ref = getReferences(token.original.actions.default, dictionary.tokens)[0];
+          const ref = sdUtils.getReferences(token.original.actions.default, dictionary.tokens)[0];
           token.actions = { default: `var(--${ref.name})` };
           // eslint-disable-next-line no-restricted-syntax
           for (const funcName of utilityFunctionsToApply) {
@@ -302,9 +354,13 @@ const initializeStyleDictionary = async ({ themes }) => {
         StyleDictionary.registerFilter({
           name: `${name}.${themeVariant}`,
           filter: (token, opts) => {
-            const isThemeVariant = token.filePath.includes(themeVariant);
-            const baseFilter = typeof filter === 'function' ? filter(token, opts) : filter;
-            return baseFilter && isThemeVariant;
+            const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+            const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant;
+            const baseFilterResult = typeof filter === 'function' ? filter(token, opts) || isReferencedByThemeVariant : filter;
+            if (!baseFilterResult) {
+              return false;
+            }
+            return token.filePath.includes(themeVariant) || isReferencedByThemeVariant;
           },
         });
       });
@@ -317,7 +373,11 @@ const initializeStyleDictionary = async ({ themes }) => {
      */
     {
       name: 'isSource',
-      filter: token => token.isSource,
+      filter: (token) => {
+        const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+        const isReferencedBySourceToken = !!paragonExtensions?.isReferencedBySourceToken;
+        return token.isSource || isReferencedBySourceToken;
+      },
       opts: { hasThemeVariants: true },
     },
     /**
@@ -325,18 +385,16 @@ const initializeStyleDictionary = async ({ themes }) => {
      */
     ...themes.map((themeVariant) => ({
       name: `isThemeVariant.${themeVariant}`,
-      filter: token => token.filePath.includes(themeVariant),
+      filter: (token) => {
+        const isThemeVariantToken = token.filePath.includes(themeVariant);
+        const paragonExtensions = token.$extensions?.['org.openedx.paragon'];
+        const isReferencedByThemeVariant = !!paragonExtensions?.isReferencedByThemeVariant;
+        return isThemeVariantToken || isReferencedByThemeVariant;
+      },
     })),
   ];
   paragonFilters.forEach(({ name, filter, opts }) => registerStyleDictionaryFilter(name, filter, opts));
 
-  themes.forEach((themeVariant) => {
-    StyleDictionary.registerFilter({
-      name: `isThemeVariant.${themeVariant}`,
-      filter: token => token.filePath.includes(themeVariant),
-    });
-  });
-
   /**
    * Registers a custom TOML parser with Style Dictionary.
    */
@@ -362,6 +420,7 @@ const initializeStyleDictionary = async ({ themes }) => {
 
 module.exports = {
   initializeStyleDictionary,
+  getTokensStudioTransforms,
   createCustomCSSVariables,
   colorTransform,
   getStyleDictionaryUtils,
diff --git a/tokens/utils.js b/tokens/utils.js
index 5fb09c77ea..0751f638e5 100644
--- a/tokens/utils.js
+++ b/tokens/utils.js
@@ -2,6 +2,131 @@ const fs = require('fs');
 const readline = require('readline');
 const path = require('path');
 
+const visitedTokens = {};
+
+/**
+ * Finds a token by its path in the token tree.
+ * @param {string} path - The path to the token in the token tree.
+ * @returns {DesignToken} - The token object found at the specified path.
+ */
+function findTokenByPath(tokenPath, allTokens) {
+  const keys = tokenPath.split('.');
+  return keys.reduce((acc, key) => acc && acc[key], allTokens);
+}
+
+/**
+ * @typedef {object} ExtensionProperty
+ * @property {string} name - The name of the extension property.
+ * @property {(token: DesignToken) => boolean} filter - The filter function to determine
+ * if the token should be annotated.
+ * @property {(token: DesignToken) => boolean} referenceTokenFilter - The filter function to determine if
+ * the referenced token should be annotated.
+ */
+
+/**
+ * @typedef {object} AnnotateReferencedTokenExtensionsArgs
+ * @property {DesignToken} token - The token object to annotate.
+ * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with.
+ * @property {object} sdUtils - The Style Dictionary utility functions.
+ */
+
+/**
+ * Annotates referenced token $extensions with the specified properties.
+ * @param {AnnotateReferencedTokenExtensionsArgs} args - The arguments object.
+ */
+function annotateReferencedTokenExtensions({
+  token,
+  extensionProperties,
+  sdUtils,
+  dictionary,
+}) {
+  const stack = [token]; // Stack to process tokens iteratively
+
+  while (stack.length > 0) {
+    const currentToken = stack.pop();
+
+    // Get all references for the current token
+    const references = sdUtils.getReferences(currentToken, dictionary);
+    extensionProperties.forEach(({ name: propertyName, filter: propertyFilter, referenceTokenFilter }) => {
+      if (!propertyFilter(token)) {
+        // Skip processing if the token does not match the filter for the property
+        return;
+      }
+
+      // Iterate over each reference and mark the referenced token
+      references.forEach((foundReference) => {
+        const foundReferenceTokenPath = foundReference.ref.join('.');
+        if (visitedTokens[propertyName]?.has(foundReferenceTokenPath)) {
+          // Skip processing if the referenced token has already been marked
+          return;
+        }
+
+        if (!referenceTokenFilter?.(foundReference)) {
+          // Filter the reference tokens to only include the ones that match the filter
+          return;
+        }
+
+        // Directly access the referenced token from the returned reference object
+        const referencedToken = findTokenByPath(foundReferenceTokenPath, dictionary);
+        if (!referencedToken) {
+          return;
+        }
+
+        // Mark the referenced token
+        referencedToken.$extensions = {
+          ...referencedToken.$extensions,
+          'org.openedx.paragon': {
+            ...referencedToken.$extensions?.['org.openedx.paragon'],
+            [propertyName]: true,
+          },
+        };
+
+        visitedTokens[propertyName].add(foundReferenceTokenPath);
+
+        if (sdUtils.usesReferences(referencedToken)) {
+          // Push the referenced token to the stack to process its references
+          stack.push(referencedToken);
+        }
+      });
+    });
+  }
+}
+
+/**
+ * Processes and updates tokens in place by annotating referenced tokens with extension properties.
+ * @typedef {object} ProcessAndUpdateTokensArgs
+ * @property {object} tokens - The tokens object to process.
+ * @property {ExtensionProperty[]} extensionProperties - The properties to annotate the referenced token with.
+ * @property {object} sdUtils - The Style Dictionary utility functions.
+ */
+function processAndUpdateTokens(tokens, extensionProperties, sdUtils, dictionary) {
+  Object.keys(tokens).forEach(async (key) => {
+    const token = tokens[key];
+    if (typeof token !== 'object') {
+      // Skip non-object tokens
+      return;
+    }
+
+    // If this is a group (nested tokens), recurse into it
+    if (!Object.prototype.hasOwnProperty.call(token, '$value')) {
+      processAndUpdateTokens(token, extensionProperties, sdUtils, dictionary);
+    } else if (sdUtils.usesReferences(token)) {
+      // Initialize the visited tokens for each extension property
+      extensionProperties.forEach((property) => {
+        visitedTokens[property.name] = new Set();
+      });
+
+      // If the token uses reference(s), update the referenced token(s) $extensions metadata.
+      annotateReferencedTokenExtensions({
+        token,
+        extensionProperties,
+        sdUtils,
+        dictionary,
+      });
+    }
+  });
+}
+
 /**
  * Recursively retrieves files with a specific extension from a given directory.
  *
@@ -243,4 +368,5 @@ module.exports = {
   getSCSStoCSSMap,
   transformInPath,
   composeBreakpointName,
+  processAndUpdateTokens,
 };