diff --git a/.eslintignore b/.eslintignore
index a693875c8a9..0783b219a7e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,5 @@ dependent-usage-analyzer/
 build-scss.js
 component-generator/
 example/
+style-dictionary-build/
+build-tokens.js
diff --git a/.gitignore b/.gitignore
index 986dbca5699..4581cfa3b1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ jest*
 dist
 src/i18n/transifex_input.json
 src/i18n/temp
+style-dictionary-build
 
 # gatsby files
 www/.cache/
diff --git a/.releaserc b/.releaserc
index 2c101b5028f..50eab9763c8 100644
--- a/.releaserc
+++ b/.releaserc
@@ -1,5 +1,10 @@
 {
-  "branches": ["master", "next"],
+  "branches": [
+    "master",
+    "next",
+    { "name": "alpha", "prerelease": true },
+    { "name": "beta", "prerelease": true }
+  ],
   "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 5dafbb25a83..6abc5249647 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -31,6 +31,9 @@
       "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
     }],
     "alpha-value-notation": "number",
-    "color-function-notation": "legacy"
+    "color-function-notation": "legacy",
+    "value-keyword-case": ["lower", {
+      "ignoreProperties": ["/font-family/"]
+    }]
   }
 }
diff --git a/README.md b/README.md
index 9babdf325a4..3ba1851bbb4 100644
--- a/README.md
+++ b/README.md
@@ -467,3 +467,21 @@ The assigned maintainers for this component and other project details may be fou
 Please do not report security issues in public. Please email security@edx.org.
 
 We tend to prioritize security issues which impact the published `@edx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
+
+## Design Tokens
+
+Design tokens are all the values needed to build and maintain a design system — spacing, color, typography, object styles, etc. They can represent anything defined by the design: color as an RGB value, opacity as a number, spacing as a REM value. They are used instead of hard-coded values to provide flexibility and uniformity across the application.
+
+### Design Tokens in Paragon
+
+Folder `tokens` in the project root contains split by categories `json` files. They consist of `JSON` objects that store information about the variable name and its value. Scripts that also reside in the `tokens` folder provide following facilities: build tokens into `css`, `scss` variables, map `scss` to `css` variables and replace old `scss` to new `css` variables.
+
+### Usage
+
+```
+cd tokens
+npm install
+npm run build-tokens # creates "build" folder with scss and css variables based on json tokens
+npm run build-scss-to-css-map # creats scss-to-css-core.json and scss-to-css-components.json 
+npm run replace-variables -- --path ../src # this will replace all scss variables in the project with the new css variables based on the "scss-to-css-core.json" and "scss-to-css-components.json" files
+```
diff --git a/docs/decisions/0018-design-tokens-style-dictionary.rst b/docs/decisions/0018-design-tokens-style-dictionary.rst
new file mode 100644
index 00000000000..312302ee879
--- /dev/null
+++ b/docs/decisions/0018-design-tokens-style-dictionary.rst
@@ -0,0 +1,19 @@
+18. Design tokens with Style Dictionary
+---------------------------------------
+
+Status
+------
+
+Proposed
+
+Context
+-------
+
+Decision
+--------
+
+Consequences
+------------
+
+Resources
+---------
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
index 3fe1f20d290..502ce9c2901 100644
--- a/scss/core/_variables.scss
+++ b/scss/core/_variables.scss
@@ -688,7 +688,6 @@ $embed-responsive-aspect-ratios: join(
 //
 // Font, line-height, and color for body text, headings, and more.
 
-// stylelint-disable value-keyword-case
 $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" !default;
@@ -696,7 +695,6 @@ $font-family-serif:           serif !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
   "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
 
 $font-size-base:              1.125rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:                $font-size-base * 1.25 !default;
@@ -789,15 +787,15 @@ $table-th-font-weight:        null !default;
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
-$zindex-dropdown:                   1000 !default;
-$zindex-sticky:                     1020 !default;
-$zindex-fixed:                      1030 !default;
-$zindex-sheet-backdrop:             1031 !default;
-$zindex-sheet:                      1032 !default;
-$zindex-modal-backdrop:             1040 !default;
-$zindex-modal:                      1050 !default;
-$zindex-popover:                    1060 !default;
-$zindex-tooltip:                    1070 !default;
+$zindex-dropdown:                   var(--pgn-dropdown-zindex) !default;
+$zindex-sticky:                     var(--pgn-zindex-sticky) !default;
+$zindex-fixed:                      var(--pgn-zindex-fixed) !default;
+$zindex-sheet-backdrop:             var(--pgn-sheet-zindex-backdrop) !default;
+$zindex-sheet:                      var(--pgn-sheet-zindex-main) !default;
+$zindex-modal-backdrop:             var(--pgn-modal-backdrop-zindex) !default;
+$zindex-modal:                      var(--pgn-modal-zindex) !default;
+$zindex-popover:                    var(--pgn-popover-zindex) !default;
+$zindex-tooltip:                    var(--pgn-tooltip-zindex) !default;
 
 // Buttons + Forms
 //
diff --git a/scss/core/core.scss b/scss/core/core.scss
index d6a2b072f77..6b9630c778c 100644
--- a/scss/core/core.scss
+++ b/scss/core/core.scss
@@ -1,3 +1,4 @@
+@import "tokens";
 @import "functions";
 @import "variables";
 @import "~bootstrap/scss/mixins";
diff --git a/scss/core/tokens.css b/scss/core/tokens.css
new file mode 100644
index 00000000000..36ef0763868
--- /dev/null
+++ b/scss/core/tokens.css
@@ -0,0 +1,980 @@
+:root {
+  --pgn-line-height-sm: 1.5;
+  --pgn-line-height-lg: 1.5;
+  --pgn-line-height-base: 1.5556;
+  --pgn-font-weight-lead: null;
+  --pgn-font-weight-bolder: bolder;
+  --pgn-font-weight-bold: 700;
+  --pgn-font-weight-semi-bold: 500;
+  --pgn-font-weight-normal: 400;
+  --pgn-font-weight-light: 300;
+  --pgn-font-weight-lighter: lighter;
+  --pgn-font-size-mobile-h1: 2.25rem;
+  --pgn-font-size-h6: .75rem;
+  --pgn-font-size-h5: .875rem;
+  --pgn-font-size-h4: 1.125rem;
+  --pgn-font-size-h3: 1.375rem;
+  --pgn-font-size-h2: 2rem;
+  --pgn-font-size-h1: 2.5rem;
+  --pgn-font-size-small-x: 75%;
+  --pgn-font-size-small-base: 87.5%;
+  --pgn-font-size-xs: .75rem;
+  --pgn-font-size-sm: .875rem;
+  --pgn-font-size-lg: 1.4063rem;
+  --pgn-font-size-base: 1.125rem;
+  --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  "Courier New", monospace;
+  --pgn-font-family-serif: serif;
+  --pgn-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pgn-transition-collapse: height .35s ease;
+  --pgn-transition-fade: opacity .15s linear;
+  --pgn-transition-base: all .2s ease-in-out;
+  --pgn-spacer-base: 1rem;
+  --pgn-spacer-0: 0;
+  --pgn-grid-row-columns: 6;
+  --pgn-grid-gutter-width: 24px;
+  --pgn-grid-columns: 12;
+  --pgn-zindex-fixed: 1030;
+  --pgn-zindex-sticky: 1020;
+  --pgn-zindex-2000: 2000;
+  --pgn-zindex-1800: 1800;
+  --pgn-zindex-1600: 1600;
+  --pgn-zindex-1400: 1400;
+  --pgn-zindex-1200: 1200;
+  --pgn-zindex-1000: 1000;
+  --pgn-zindex-800: 800;
+  --pgn-zindex-600: 600;
+  --pgn-zindex-400: 400;
+  --pgn-zindex-200: 200;
+  --pgn-zindex-0: 0;
+  --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
+  --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-display-line-height-mobile: 3.5rem;
+  --pgn-display-line-height-base: 1;
+  --pgn-display-size-mobile: 3.25rem;
+  --pgn-display-size-4: 7.5rem;
+  --pgn-display-size-3: 5.625rem;
+  --pgn-display-size-2: 4.875rem;
+  --pgn-display-size-1: 3.75rem;
+  --pgn-breakpoint-xxl: 1400px;
+  --pgn-breakpoint-xl: 1200px;
+  --pgn-breakpoint-lg: 992px;
+  --pgn-breakpoint-md: 768px;
+  --pgn-breakpoint-sm: 576px;
+  --pgn-breakpoint-xs: 0;
+  --pgn-border-radius-sm: .25rem;
+  --pgn-border-radius-lg: .425rem;
+  --pgn-border-radius-base: .375rem;
+  --pgn-border-width: 1px;
+  --pgn-tooltip-zindex: 1070;
+  --pgn-tooltip-arrow-height: .4rem;
+  --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-tooltip-margin: 0;
+  --pgn-tooltip-padding-x: .5rem;
+  --pgn-tooltip-padding-y: .5rem;
+  --pgn-tooltip-opacity: 1;
+  --pgn-tooltip-max-width: 200px;
+  --pgn-toast-container-gutter-sm: .625rem;
+  --pgn-toast-container-gutter-lg: 1.25rem;
+  --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
+  --pgn-toast-border-radius: .25rem;
+  --pgn-toast-border-width: 1px;
+  --pgn-toast-color-base: null;
+  --pgn-toast-font-size: .875rem;
+  --pgn-toast-padding-y: .25rem;
+  --pgn-toast-padding-x: .75rem;
+  --pgn-toast-max-width: 400px;
+  --pgn-tabs-notification-width: 1rem;
+  --pgn-tabs-notification-height: 1rem;
+  --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-sticky-offset: 0;
+  --pgn-stack-gap: 0;
+  --pgn-spinner-sm-border-width: .2em;
+  --pgn-spinner-sm-width: 1rem;
+  --pgn-spinner-border-width: .25em;
+  --pgn-spinner-width: 2rem;
+  --pgn-sheet-zindex-main: 1032;
+  --pgn-sheet-zindex-backdrop: 1031;
+  --pgn-selectable-box-box-space: .75rem;
+  --pgn-selectable-box-border-radius: .25rem;
+  --pgn-selectable-box-padding: 1rem;
+  --pgn-search-field-button-margin: .5rem;
+  --pgn-search-field-disabled-opacity: .3;
+  --pgn-search-field-line-height: 1.5rem;
+  --pgn-search-field-border-width-focus: .3125rem;
+  --pgn-search-field-border-width-interaction: .125rem;
+  --pgn-search-field-border-width-base: .0625rem;
+  --pgn-search-field-border-radius: 0;
+  --pgn-progress-bar-hint-annotation-gap: .5rem;
+  --pgn-progress-bar-threshold-circle: .5625rem;
+  --pgn-progress-bar-bar-transition: width .6s ease;
+  --pgn-progress-bar-bar-animation-timing: 1s linear infinite;
+  --pgn-progress-bar-box-shadow: none;
+  --pgn-progress-bar-border-width: 1px;
+  --pgn-progress-bar-border-radius: 0;
+  --pgn-progress-bar-bg: transparent;
+  --pgn-progress-bar-height-annotated: .3125rem;
+  --pgn-progress-bar-height-base: 1rem;
+  --pgn-product-tour-checkpoint-zindex: 1060;
+  --pgn-product-tour-checkpoint-width-max: 480px;
+  --pgn-product-tour-checkpoint-width-arrow: 15px;
+  --pgn-product-tour-checkpoint-width-border: 8px;
+  --pgn-popover-zindex: 1060;
+  --pgn-popover-arrow-height: .5rem;
+  --pgn-popover-arrow-width: 1rem;
+  --pgn-popover-icon-width: 1rem;
+  --pgn-popover-icon-height: 1rem;
+  --pgn-popover-icon-margin-right: .5rem;
+  --pgn-popover-header-padding-x: 1rem;
+  --pgn-popover-header-padding-y: .5rem;
+  --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-popover-max-width: 480px;
+  --pgn-reduced-dropdown-width-min: 6rem;
+  --pgn-reduced-dropdown-height-max: 60vh;
+  --pgn-pagination-focus-border-width: .125rem;
+  --pgn-pagination-focus-outline: 0;
+  --pgn-pagination-secondary-height-sm: 2.25rem;
+  --pgn-pagination-secondary-height-base: 2.75rem;
+  --pgn-pagination-toggle-border-sm: .25rem;
+  --pgn-pagination-toggle-border-base: .3125rem;
+  --pgn-pagination-icon-height: 2.25rem;
+  --pgn-pagination-icon-width: 2.25rem;
+  --pgn-pagination-icon-size-sm: 1rem;
+  --pgn-pagination-icon-size-base: 1.375rem;
+  --pgn-pagination-font-size-sm: .875rem;
+  --pgn-pagination-line-height: 1.5rem;
+  --pgn-pagination-margin-y: .5rem;
+  --pgn-pagination-margin-x: .5rem;
+  --pgn-pagination-padding-icon: .5rem;
+  --pgn-pagination-padding-x-lg: 1.5rem;
+  --pgn-pagination-padding-x-sm: .6rem;
+  --pgn-pagination-padding-x-base: 1rem;
+  --pgn-pagination-padding-y-lg: .75rem;
+  --pgn-pagination-padding-y-sm: .8rem;
+  --pgn-pagination-padding-y-base: .625rem;
+  --pgn-navbar-toggler-padding-x: .75rem;
+  --pgn-navbar-toggler-padding-y: .25rem;
+  --pgn-navbar-nav-scroll-max-height: 75vh;
+  --pgn-navbar-padding-x-nav-link: .5rem;
+  --pgn-nav-tabs-border-radius: 0;
+  --pgn-nav-tabs-border-width: 2px;
+  --pgn-nav-link-font-weight: 500;
+  --pgn-nav-link-padding-x: 1rem;
+  --pgn-nav-link-padding-y: .5rem;
+  --pgn-modal-zindex: 1050;
+  --pgn-modal-transform-scale: scale(1.02);
+  --pgn-modal-transform-show: none;
+  --pgn-modal-transform-fade: translate(0, -50px);
+  --pgn-modal-transform-base: transform .3s ease-out;
+  --pgn-modal-sm: 500px;
+  --pgn-modal-md: 500px;
+  --pgn-modal-lg: 800px;
+  --pgn-modal-xl: 1140px;
+  --pgn-modal-header-padding-x: 1.5rem;
+  --pgn-modal-header-padding-y: 1rem;
+  --pgn-modal-backdrop-zindex: 1040;
+  --pgn-modal-backdrop-opacity: .5;
+  --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
+  --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5);
+  --pgn-modal-content-border-width: 0rem;
+  --pgn-modal-content-color: null;
+  --pgn-modal-footer-padding-y: 1.5rem;
+  --pgn-modal-footer-padding-x: 1rem;
+  --pgn-modal-inner-padding-bottom: .7rem;
+  --pgn-modal-inner-padding-base: 1.5rem;
+  --pgn-menu-border-hover: transparent;
+  --pgn-menu-border-active: transparent;
+  --pgn-menu-border-base: transparent;
+  --pgn-image-figure-caption-font-size: 90%;
+  --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-image-thumbnail-padding: .25rem;
+  --pgn-icon-button-bg: transparent;
+  --pgn-icon-button-diameter-sm: 2.25rem;
+  --pgn-icon-button-diameter-md: 2.75rem;
+  --pgn-icon-lg: 1.75rem;
+  --pgn-icon-md: 1.5rem;
+  --pgn-icon-sm: 1.25rem;
+  --pgn-icon-inline: .8em;
+  --pgn-mark-bg: #FFF243FF;
+  --pgn-mark-padding: .2em;
+  --pgn-paragraph-margin-bottom: 1rem;
+  --pgn-list-group-item-padding-x: 1.25rem;
+  --pgn-list-group-item-padding-y: .75rem;
+  --pgn-list-group-color: null;
+  --pgn-list-inline-padding: .5rem;
+  --pgn-link-emphasized-hover-darken-percentage: 15%;
+  --pgn-link-brand-inline-hover-decoration: underline;
+  --pgn-link-brand-inline-decoration: underline;
+  --pgn-link-brand-hover-decoration: underline;
+  --pgn-link-brand-decoration: none;
+  --pgn-link-muted-inline-hover-decoration: underline;
+  --pgn-link-muted-inline-decoration: underline;
+  --pgn-link-muted-hover-decoration: underline;
+  --pgn-link-muted-decoration: none;
+  --pgn-link-inline-hover-decoration: underline;
+  --pgn-link-inline-decoration: underline;
+  --pgn-link-hover-decoration: underline;
+  --pgn-link-decoration: none;
+  --pgn-input-btn-focus-width: 1px;
+  --pgn-input-btn-line-height-sm: 1.4286;
+  --pgn-input-btn-line-height-base: 1.3333;
+  --pgn-input-btn-font-size-lg: 1.325rem;
+  --pgn-input-btn-font-size-sm: .875rem;
+  --pgn-input-btn-font-size-base: 1.125rem;
+  --pgn-input-btn-font-family: inherit;
+  --pgn-input-btn-padding-lg-x: 1.25rem;
+  --pgn-input-btn-padding-lg-y: .6875rem;
+  --pgn-input-btn-padding-sm-x: .75rem;
+  --pgn-input-btn-padding-sm-y: .4375rem;
+  --pgn-input-btn-padding-x: 1rem;
+  --pgn-input-btn-padding-y: .5625rem;
+  --pgn-headings-line-height: 1.25;
+  --pgn-headings-font-family: null;
+  --pgn-headings-margin-bottom: .5rem;
+  --pgn-caret-spacing: .255em;
+  --pgn-caret-vertical-align: .255em;
+  --pgn-caret-width: .3em;
+  --pgn-form-select-icon-padding: .5625rem;
+  --pgn-form-control-icon-width: 32px;
+  --pgn-form-feedback-tooltip-opacity: .9;
+  --pgn-form-feedback-tooltip-padding-x: .5rem;
+  --pgn-form-feedback-tooltip-padding-y: .25rem;
+  --pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
+  --pgn-form-custom-range-thumb-border-radius: 1rem;
+  --pgn-form-custom-range-thumb-border-base: 0;
+  --pgn-form-custom-range-thumb-width: 1rem;
+  --pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
+  --pgn-form-custom-range-track-border-radius: 1rem;
+  --pgn-form-custom-range-track-cursor: pointer;
+  --pgn-form-custom-range-track-height: .5rem;
+  --pgn-form-custom-range-track-width: 100%;
+  --pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-form-custom-select-bg-size: 24px 24px;
+  --pgn-form-custom-select-indicator-padding: 1rem;
+  --pgn-form-custom-radio-indicator-border-radius: 50%;
+  --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none;
+  --pgn-form-custom-checkbox-indicator-border-radius: 0;
+  --pgn-form-custom-control-label-color-base: null;
+  --pgn-form-custom-control-indicator-active-bg: #0A3055FF;
+  --pgn-form-custom-control-indicator-active-box-shadow: none;
+  --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1);
+  --pgn-form-custom-control-indicator-checked-box-shadow-base: none;
+  --pgn-form-custom-control-indicator-border-width: 2px;
+  --pgn-form-custom-control-indicator-bg-size: 100%;
+  --pgn-form-custom-control-indicator-size: 1.25rem;
+  --pgn-form-custom-control-cursor: null;
+  --pgn-form-custom-control-spacer-x: 1rem;
+  --pgn-form-custom-control-gutter: .5rem;
+  --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  --pgn-form-group-margin-bottom: 1rem;
+  --pgn-form-check-border-width: .125rem;
+  --pgn-form-check-border-radius-focus: .0625rem;
+  --pgn-form-check-position-axis: .375rem;
+  --pgn-form-check-inline-margin-x: .75rem;
+  --pgn-form-text-margin-top: .25rem;
+  --pgn-form-input-check-margin-y: .3rem;
+  --pgn-form-input-check-margin-x-inline: .3125rem;
+  --pgn-form-input-check-margin-x-base: .25rem;
+  --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  --pgn-form-input-width-hover: 1px;
+  --pgn-form-input-focus-width: 1px;
+  --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075);
+  --pgn-dropzone-padding: 1.5rem;
+  --pgn-dropdown-zindex: 1000;
+  --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+  --pgn-dropdown-spacer: .125rem;
+  --pgn-dropdown-padding-y-item: .5rem;
+  --pgn-dropdown-padding-y-base: .25rem;
+  --pgn-dropdown-padding-x-item: 1rem;
+  --pgn-dropdown-padding-x-base: 0;
+  --pgn-dropdown-min-width: 18rem;
+  --pgn-data-table-pagination-dropdown-min-width: 6rem;
+  --pgn-data-table-pagination-dropdown-max-height: 60vh;
+  --pgn-data-table-footer-position: center;
+  --pgn-data-table-padding-head-cell: .5rem .75rem;
+  --pgn-data-table-padding-cell: .75rem;
+  --pgn-data-table-padding-small: .5rem;
+  --pgn-data-table-padding-y: .75rem;
+  --pgn-data-table-padding-x: .75rem;
+  --pgn-container-max-width-xl: 1440px;
+  --pgn-container-max-width-lg: 1192px;
+  --pgn-container-max-width-md: 952px;
+  --pgn-container-max-width-sm: 708px;
+  --pgn-container-max-width-xs: 464px;
+  --pgn-collapsible-card-spacer-basic-icon: .625rem;
+  --pgn-collapsible-card-spacer-basic-x: .5rem;
+  --pgn-collapsible-card-spacer-basic-y: .5rem;
+  --pgn-collapsible-card-spacer-icon: 2.5rem;
+  --pgn-collapsible-card-spacer-left-body: .75rem;
+  --pgn-collapsible-card-spacer-x-base: .5rem;
+  --pgn-collapsible-card-spacer-y-base: .5rem;
+  --pgn-code-pre-scrollable-max-height: 340px;
+  --pgn-code-kbd-padding-x: .4rem;
+  --pgn-code-kbd-padding-y: .2rem;
+  --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
+  --pgn-code-color: #E83E8CFF;
+  --pgn-code-font-size: 87.5%;
+  --pgn-chip-icon-size: 1.25rem;
+  --pgn-chip-disabled-opacity: .3;
+  --pgn-chip-line-height: 1.5rem;
+  --pgn-chip-font-weight: 400;
+  --pgn-chip-font-size: .75rem;
+  --pgn-chip-position-axis: .125rem;
+  --pgn-chip-border-width: .0625rem;
+  --pgn-chip-border-radius-focus: .5rem;
+  --pgn-chip-border-radius-base: .4375rem;
+  --pgn-chip-margin-inline: .5rem;
+  --pgn-chip-margin-base: .125rem;
+  --pgn-chip-padding-icon-to: 3px;
+  --pgn-chip-padding-icon-base: .25rem;
+  --pgn-chip-padding-x: .5rem;
+  --pgn-chip-padding-y: .125rem;
+  --pgn-carousel-transition-duration: .6s;
+  --pgn-carousel-caption-width: 70%;
+  --pgn-carousel-indicator-transition: opacity .6s ease;
+  --pgn-carousel-indicator-spacer: 3px;
+  --pgn-carousel-indicator-height-area-hit: 3px;
+  --pgn-carousel-indicator-height-base: 3px;
+  --pgn-carousel-indicator-width: 30px;
+  --pgn-carousel-control-transition: opacity .15s ease;
+  --pgn-carousel-control-opacity-hover: .9;
+  --pgn-carousel-control-opacity-base: .5;
+  --pgn-carousel-control-width-icon: 20px;
+  --pgn-carousel-control-width-base: 15%;
+  --pgn-card-loading-skeleton-spacer: .313rem;
+  --pgn-card-logo-height: 4.125rem;
+  --pgn-card-logo-width: 7.25rem;
+  --pgn-card-logo-bottom-offset-horizontal: .4375rem;
+  --pgn-card-logo-bottom-offset-base: 1rem;
+  --pgn-card-logo-left-offset-horizontal: .4375rem;
+  --pgn-card-logo-left-offset-base: 1.5rem;
+  --pgn-card-footer-action-gap: .5rem;
+  --pgn-card-columns-gap: 1.25rem;
+  --pgn-card-columns-count: 3;
+  --pgn-card-margin-group: 12px;
+  --pgn-card-image-vertical-height-max: 140px;
+  --pgn-card-image-horizontal-width-max: 240px;
+  --pgn-card-image-overlay-padding: 1.25rem;
+  --pgn-card-color: null;
+  --pgn-card-height-base: null;
+  --pgn-card-cap-color: null;
+  --pgn-card-border-radius-logo: .25rem;
+  --pgn-card-border-radius-image: .3125rem;
+  --pgn-card-spacer-y: .75rem;
+  --pgn-card-spacer-x: 1.25rem;
+  --pgn-btn-transition: null;
+  --pgn-btn-block-spacing-y: .5rem;
+  --pgn-btn-tertiary-inverse-bg-base: transparent;
+  --pgn-btn-disabled-opacity: .65;
+  --pgn-btn-focus-gap: 1px;
+  --pgn-btn-focus-width: 2px;
+  --pgn-btn-box-shadow-active: none;
+  --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+  --pgn-bubble-expandable-padding-x: .25rem;
+  --pgn-bubble-expandable-padding-y: 0;
+  --pgn-breadcrumb-border-radius-focus: .125rem;
+  --pgn-breadcrumb-border-focus-width: .0625rem;
+  --pgn-breadcrumb-border-focus-axis-x: .25rem;
+  --pgn-breadcrumb-border-focus-axis-y: .5rem;
+  --pgn-breadcrumb-margin-left: .5rem;
+  --pgn-breadcrumb-margin-bottom: 1rem;
+  --pgn-breadcrumb-padding-item: .5rem;
+  --pgn-breadcrumb-padding-x: 1rem;
+  --pgn-breadcrumb-padding-y: .75rem;
+  --pgn-breadcrumb-font-size: null;
+  --pgn-badge-transition: none;
+  --pgn-badge-border-radius-pill: 10rem;
+  --pgn-badge-border-radius-base: .25rem;
+  --pgn-badge-padding-y: .125rem;
+  --pgn-badge-padding-x-pill: .6em;
+  --pgn-badge-padding-x-base: .5rem;
+  --pgn-badge-font-size: 75%;
+  --pgn-avatar-button-padding-left-lg: .25em;
+  --pgn-avatar-button-padding-left-sm: .25em;
+  --pgn-avatar-button-padding-left-base: .25em;
+  --pgn-avatar-size-huge: 18.75rem;
+  --pgn-avatar-size-xxl: 11.5rem;
+  --pgn-avatar-size-xl: 6rem;
+  --pgn-avatar-size-lg: 4rem;
+  --pgn-avatar-size-sm: 2.25rem;
+  --pgn-avatar-size-xs: 1.5rem;
+  --pgn-avatar-size-base: 3rem;
+  --pgn-avatar-border-radius: 100%;
+  --pgn-annotation-arrow-border-width: .5rem;
+  --pgn-annotation-arrow-side-margin: .25rem;
+  --pgn-annotation-max-width: 18.75rem;
+  --pgn-annotation-border-radius: .25rem;
+  --pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-annotation-padding: .5rem;
+  --pgn-alert-line-height: 1.5rem;
+  --pgn-alert-icon-space: .8rem;
+  --pgn-alert-level-color: 6;
+  --pgn-alert-level-border: -9;
+  --pgn-alert-level-bg: -10;
+  --pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
+  --pgn-alert-font-size: .875rem;
+  --pgn-alert-border-width: 0;
+  --pgn-alert-margin-bottom: 1rem;
+  --pgn-alert-padding-x: 1.5rem;
+  --pgn-alert-padding-y: 1.5rem;
+  --pgn-action-row-gap-y: .5rem;
+  --pgn-action-row-gap-x: .5rem;
+  --pgn-color-dark-base: #273F2FFF;
+  --pgn-color-light-base: #E1DDDBFF;
+  --pgn-color-brand-base: #9D0054FF;
+  --pgn-color-primary-base: #0A3055FF;
+  --pgn-color-gray-base: #707070FF;
+  --pgn-color-gray-900: #212529FF;
+  --pgn-color-gray-800: #333333FF;
+  --pgn-color-gray-700: #454545FF;
+  --pgn-color-gray-600: #5C5C5CFF;
+  --pgn-color-gray-400: #8F8F8FFF;
+  --pgn-color-gray-300: #ADADADFF;
+  --pgn-color-gray-200: #CCCCCCFF;
+  --pgn-color-gray-100: #EBEBEBFF;
+  --pgn-color-theme-interval: 8%;
+  --pgn-color-accent-b: #FFEE88FF;
+  --pgn-color-accent-a: #00BBF9FF;
+  --pgn-color-teal: #006DAAFF;
+  --pgn-color-yellow: #FFD900FF;
+  --pgn-color-green: #178253FF;
+  --pgn-color-red: #C32D3AFF;
+  --pgn-color-blue: #23419FFF;
+  --pgn-color-black: #000000FF;
+  --pgn-color-white: #FFFFFFFF;
+  --pgn-font-weight-base: var(--pgn-font-weight-normal);
+  --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-font-size-mobile-h6: var(--pgn-font-size-h6);
+  --pgn-font-size-mobile-h5: var(--pgn-font-size-h5);
+  --pgn-font-size-mobile-h4: var(--pgn-font-size-h4);
+  --pgn-font-size-mobile-h3: var(--pgn-font-size-h3);
+  --pgn-font-size-mobile-h2: var(--pgn-font-size-h2);
+  --pgn-font-family-base: var(--pgn-font-family-sans-serif);
+  --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem);
+  --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem);
+  --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem);
+  --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem);
+  --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem);
+  --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem);
+  --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem);
+  --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem);
+  --pgn-spacer-3: var(--pgn-spacer-base);
+  --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem);
+  --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem);
+  --pgn-display-weight-4: var(--pgn-font-weight-bold);
+  --pgn-display-weight-3: var(--pgn-font-weight-bold);
+  --pgn-display-weight-2: var(--pgn-font-weight-bold);
+  --pgn-display-weight-1: var(--pgn-font-weight-bold);
+  --pgn-border-color: var(--pgn-color-gray-200);
+  --pgn-tooltip-arrow-color-light: var(--pgn-color-white);
+  --pgn-tooltip-border-radius: var(--pgn-border-radius-base);
+  --pgn-tooltip-bg-light: var(--pgn-color-white);
+  --pgn-tooltip-bg-base: var(--pgn-color-black);
+  --pgn-tooltip-color-light: var(--pgn-color-black);
+  --pgn-tooltip-color-base: var(--pgn-color-white);
+  --pgn-tooltip-font-size: var(--pgn-font-size-sm);
+  --pgn-toast-header-color-border: #00000080;
+  --pgn-toast-header-color-background: var(--pgn-color-gray-700);
+  --pgn-toast-header-color-base: var(--pgn-color-white);
+  --pgn-toast-border-color: #0000001A;
+  --pgn-toast-color-background: var(--pgn-color-gray-700);
+  --pgn-tabs-notification-font-size: var(--pgn-font-size-xs);
+  --pgn-spinner-sm-height: var(--pgn-spinner-sm-width);
+  --pgn-spinner-height: var(--pgn-spinner-width);
+  --pgn-sheet-skrim-component-box-shadow: #00000026;
+  --pgn-sheet-skrim-bg: #ADADAD80;
+  --pgn-search-field-border-color-focus: var(--pgn-color-black);
+  --pgn-search-field-border-color-interaction: var(--pgn-color-black);
+  --pgn-scrollable-body-box-shadow: #0000008C;
+  --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
+  --pgn-progress-bar-bar-color: var(--pgn-color-white);
+  --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75);
+  --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent;
+  --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background);
+  --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border);
+  --pgn-product-tour-checkpoint-color-box-shadow: #0000004D;
+  --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700);
+  --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x);
+  --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y);
+  --pgn-popover-header-border-darken: #E5E5E5FF;
+  --pgn-popover-header-bg-darken: #E5E5E5FF;
+  --pgn-popover-border-width: var(--pgn-border-width);
+  --pgn-popover-border-radius: var(--pgn-border-radius-sm);
+  --pgn-popover-font-size: var(--pgn-font-size-sm);
+  --pgn-pagination-focus-color-text: var(--pgn-color-black);
+  --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-pagination-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-pagination-border-color-disabled: var(--pgn-color-gray-100);
+  --pgn-pagination-border-color-hover: var(--pgn-color-gray-200);
+  --pgn-pagination-border-color-base: var(--pgn-color-gray-200);
+  --pgn-pagination-border-width: var(--pgn-border-width);
+  --pgn-pagination-bg-disabled: var(--pgn-color-white);
+  --pgn-pagination-bg-hover: var(--pgn-color-gray-100);
+  --pgn-pagination-color-inverse: var(--pgn-color-white);
+  --pgn-navbar-light-toggler-border-color: #0000001A;
+  --pgn-navbar-light-color-disabled: #0000004D;
+  --pgn-navbar-light-color-active: #000000E6;
+  --pgn-navbar-light-color-hover: #000000B3;
+  --pgn-navbar-dark-toggler-border-color: #FFFFFF1A;
+  --pgn-navbar-dark-color-disabled: #FFFFFF40;
+  --pgn-navbar-dark-color-hover: #FFFFFFBF;
+  --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg);
+  --pgn-navbar-brand-font-size: var(--pgn-font-size-lg);
+  --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2);
+  --pgn-navbar-padding-x-base: var(--pgn-spacer-base);
+  --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-nav-color-light: #00000080;
+  --pgn-nav-color-dark: #FFFFFF80;
+  --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-nav-divider-color: var(--pgn-color-gray-100);
+  --pgn-nav-pills-border-radius: var(--pgn-border-radius-base);
+  --pgn-nav-link-color-disabled: var(--pgn-color-gray-300);
+  --pgn-nav-link-color-base: var(--pgn-color-gray-700);
+  --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x);
+  --pgn-modal-header-border-width: var(--pgn-modal-content-border-width);
+  --pgn-modal-backdrop-bg: var(--pgn-color-black);
+  --pgn-modal-content-border-radius: var(--pgn-border-radius-lg);
+  --pgn-modal-content-border-color: #00000033;
+  --pgn-modal-title-line-height: var(--pgn-line-height-base);
+  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y);
+  --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base);
+  --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200);
+  --pgn-image-thumbnail-border-width: var(--pgn-border-width);
+  --pgn-icon-button-accent-color: var(--pgn-color-white);
+  --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em);
+  --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base);
+  --pgn-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-list-group-action-color-base: var(--pgn-color-gray-700);
+  --pgn-list-group-disabled-color: var(--pgn-color-gray-600);
+  --pgn-list-group-border-radius: var(--pgn-border-radius-base);
+  --pgn-list-group-border-width: var(--pgn-border-width);
+  --pgn-list-group-border-color: #00000020;
+  --pgn-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-dt-font-weight: var(--pgn-font-weight-bold);
+  --pgn-input-btn-border-width: var(--pgn-border-width);
+  --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color);
+  --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg);
+  --pgn-hr-border-margin-y: var(--pgn-spacer-base);
+  --pgn-hr-border-width: var(--pgn-border-width);
+  --pgn-hr-border-color: #0000001A;
+  --pgn-headings-color: var(--pgn-color-black);
+  --pgn-headings-font-weight: var(--pgn-font-weight-bold);
+  --pgn-body-color: var(--pgn-color-gray-700);
+  --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base);
+  --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base);
+  --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm);
+  --pgn-form-feedback-font-size: var(--pgn-font-size-small-base);
+  --pgn-form-feedback-margin-top: var(--pgn-form-text-margin-top);
+  --pgn-form-custom-file-box-shadow-base: var(--pgn-form-input-box-shadow-base);
+  --pgn-form-custom-range-thumb-box-shadow-focus-width: var(--pgn-form-input-focus-width);
+  --pgn-form-custom-range-thumb-height: var(--pgn-form-custom-range-thumb-width);
+  --pgn-form-custom-range-track-bg: var(--pgn-color-gray-300);
+  --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base);
+  --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width);
+  --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4);
+  --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2);
+  --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75);
+  --pgn-form-custom-control-indicator-border-color: var(--pgn-color-gray-700);
+  --pgn-form-custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base);
+  --pgn-form-input-group-addon-bg: var(--pgn-color-gray-100);
+  --pgn-form-input-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-form-input-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-form-input-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-form-input-color-base: var(--pgn-color-gray-700);
+  --pgn-form-input-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm);
+  --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base);
+  --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg);
+  --pgn-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm);
+  --pgn-form-input-font-size-base: var(--pgn-input-btn-font-size-base);
+  --pgn-form-input-font-family: var(--pgn-input-btn-font-family);
+  --pgn-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x);
+  --pgn-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x);
+  --pgn-form-input-padding-x-base: var(--pgn-input-btn-padding-x);
+  --pgn-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y);
+  --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y);
+  --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y);
+  --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x);
+  --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900);
+  --pgn-dropdown-link-color: var(--pgn-color-gray-900);
+  --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-dropdown-divider-bg: var(--pgn-color-gray-100);
+  --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-dropdown-border-width: var(--pgn-border-width);
+  --pgn-dropdown-border-color: #00000026;
+  --pgn-dropdown-font-size: var(--pgn-font-size-base);
+  --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item);
+  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
+  --pgn-data-table-border: 1px solid var(--pgn-color-gray-200);
+  --pgn-data-table-background-is-loading: #FFFFFFB3;
+  --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x);
+  --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y);
+  --pgn-code-pre-color: var(--pgn-color-gray-900);
+  --pgn-code-kbd-bg: var(--pgn-color-gray-700);
+  --pgn-code-kbd-color: var(--pgn-color-white);
+  --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold);
+  --pgn-code-kbd-font-size: var(--pgn-code-font-size);
+  --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
+  --pgn-close-button-color: var(--pgn-color-black);
+  --pgn-close-button-font-weight: var(--pgn-font-weight-bold);
+  --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5);
+  --pgn-carousel-caption-color: var(--pgn-color-white);
+  --pgn-carousel-indicator-active-bg: var(--pgn-color-white);
+  --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x);
+  --pgn-card-divider-margin-y: var(--pgn-card-spacer-y);
+  --pgn-card-columns-margin: var(--pgn-card-spacer-y);
+  --pgn-card-margin-grid: var(--pgn-card-margin-group);
+  --pgn-card-margin-deck: var(--pgn-card-margin-group);
+  --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max);
+  --pgn-card-cap-bg: #00000008;
+  --pgn-card-border-color-focus: #00000080;
+  --pgn-card-border-color-base: #00000020;
+  --pgn-card-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-card-border-width: var(--pgn-border-width);
+  --pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A;
+  --pgn-btn-tertiary-inverse-color: var(--pgn-color-white);
+  --pgn-btn-tertiary-color: var(--pgn-color-gray-700);
+  --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-btn-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm);
+  --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base);
+  --pgn-btn-font-weight: var(--pgn-font-weight-normal);
+  --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg);
+  --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm);
+  --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base);
+  --pgn-btn-font-family: var(--pgn-input-btn-font-family);
+  --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x);
+  --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x);
+  --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x);
+  --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y);
+  --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y);
+  --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y);
+  --pgn-breadcrumb-inverse-color: var(--pgn-color-white);
+  --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600);
+  --pgn-breadcrumb-bg: var(--pgn-color-gray-200);
+  --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-badge-focus-width: var(--pgn-input-btn-focus-width);
+  --pgn-badge-font-weight: var(--pgn-font-weight-bold);
+  --pgn-annotation-line-height: var(--pgn-line-height-sm);
+  --pgn-annotation-font-size: var(--pgn-font-size-sm);
+  --pgn-alert-color-content: var(--pgn-color-gray-700);
+  --pgn-alert-color-title: var(--pgn-color-black);
+  --pgn-alert-font-weight-link: var(--pgn-font-weight-normal);
+  --pgn-alert-border-radius: var(--pgn-border-radius-base);
+  --pgn-color-dark-900: #1B2C21FF;
+  --pgn-color-dark-800: #1D2F23FF;
+  --pgn-color-dark-700: #1F3226FF;
+  --pgn-color-dark-600: #23392AFF;
+  --pgn-color-dark-500: var(--pgn-color-dark-base);
+  --pgn-color-dark-400: #5D6F63FF;
+  --pgn-color-dark-300: #939F97FF;
+  --pgn-color-dark-200: #C9CFCBFF;
+  --pgn-color-dark-100: #F2F3F3FF;
+  --pgn-color-light-900: #9E9B99FF;
+  --pgn-color-light-800: #A9A6A4FF;
+  --pgn-color-light-700: #B4B1AFFF;
+  --pgn-color-light-600: #CBC7C5FF;
+  --pgn-color-light-500: var(--pgn-color-light-base);
+  --pgn-color-light-400: #E9E6E4FF;
+  --pgn-color-light-300: #F0EEEDFF;
+  --pgn-color-light-200: #F8F7F6FF;
+  --pgn-color-light-100: #FDFDFDFF;
+  --pgn-color-danger-base: var(--pgn-color-red);
+  --pgn-color-warning-base: var(--pgn-color-yellow);
+  --pgn-color-info-base: var(--pgn-color-teal);
+  --pgn-color-success-base: var(--pgn-color-green);
+  --pgn-color-brand-900: #6E003BFF;
+  --pgn-color-brand-800: #76003FFF;
+  --pgn-color-brand-700: #7E0043FF;
+  --pgn-color-brand-600: #8D004CFF;
+  --pgn-color-brand-500: var(--pgn-color-brand-base);
+  --pgn-color-brand-400: #B6407FFF;
+  --pgn-color-brand-300: #CE80AAFF;
+  --pgn-color-brand-200: #E7BFD4FF;
+  --pgn-color-brand-100: #F9F0F5FF;
+  --pgn-color-secondary-base: var(--pgn-color-gray-700);
+  --pgn-color-primary-900: #07223CFF;
+  --pgn-color-primary-800: #082440FF;
+  --pgn-color-primary-700: #082644FF;
+  --pgn-color-primary-600: #092B4DFF;
+  --pgn-color-primary-500: var(--pgn-color-primary-base);
+  --pgn-color-primary-400: #476480FF;
+  --pgn-color-primary-300: #8598AAFF;
+  --pgn-color-primary-200: #C2CBD5FF;
+  --pgn-color-primary-100: #F0F3F5FF;
+  --pgn-color-gray-500: var(--pgn-color-gray-base);
+  --pgn-color-active: var(--pgn-color-white);
+  --pgn-color-background-base: var(--pgn-color-white);
+  --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base);
+  --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
+  --pgn-search-field-button-variants-dark: var(--pgn-color-brand-500);
+  --pgn-search-field-button-variants-light: var(--pgn-color-primary-500);
+  --pgn-search-field-border-color-base: var(--pgn-color-gray-500);
+  --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
+  --pgn-progress-bar-border-color: var(--pgn-color-gray-500);
+  --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500);
+  --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500);
+  --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300);
+  --pgn-popover-body-color: var(--pgn-body-color);
+  --pgn-popover-header-color: var(--pgn-headings-color);
+  --pgn-popover-bg: var(--pgn-color-background-base);
+  --pgn-pagination-focus-color-base: var(--pgn-color-primary-500);
+  --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-pagination-bg-base: var(--pgn-color-background-base);
+  --pgn-pagination-color-active: var(--pgn-color-active);
+  --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active);
+  --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active);
+  --pgn-navbar-dark-color-active: var(--pgn-color-active);
+  --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base);
+  --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2);
+  --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base));
+  --pgn-nav-pills-link-link-active-color: var(--pgn-color-active);
+  --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500);
+  --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500);
+  --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400);
+  --pgn-nav-tabs-border-color: var(--pgn-color-light-400);
+  --pgn-modal-header-border-color: var(--pgn-border-color);
+  --pgn-modal-content-bg: var(--pgn-color-background-base);
+  --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width);
+  --pgn-image-figure-caption-color: var(--pgn-color-gray-500);
+  --pgn-text-muted: var(--pgn-color-gray-500);
+  --pgn-list-group-action-active-color: var(--pgn-body-color);
+  --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base);
+  --pgn-list-group-active-color-base: var(--pgn-color-active);
+  --pgn-list-group-bg-base: var(--pgn-color-background-base);
+  --pgn-link-brand-inline-color: var(--pgn-color-brand-500);
+  --pgn-link-brand-color: var(--pgn-color-brand-500);
+  --pgn-link-muted-inline-color: var(--pgn-color-primary-500);
+  --pgn-link-muted-color: var(--pgn-color-primary-500);
+  --pgn-body-bg: var(--pgn-color-background-base);
+  --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg);
+  --pgn-form-custom-file-color: var(--pgn-form-input-color-base);
+  --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family);
+  --pgn-form-custom-file-line-height: var(--pgn-form-input-line-height-base);
+  --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base);
+  --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base);
+  --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled);
+  --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base);
+  --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base);
+  --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg);
+  --pgn-form-custom-select-font-size-sm: var(--pgn-form-input-font-size-sm);
+  --pgn-form-custom-select-font-size-base: var(--pgn-form-input-font-size-base);
+  --pgn-form-custom-select-font-family: var(--pgn-form-input-font-family);
+  --pgn-form-custom-select-padding-x-lg: var(--pgn-form-input-padding-x-lg);
+  --pgn-form-custom-select-padding-x-sm: var(--pgn-form-input-padding-x-sm);
+  --pgn-form-custom-select-padding-x-base: var(--pgn-form-input-padding-x-base);
+  --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg);
+  --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm);
+  --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base);
+  --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500);
+  --pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580;
+  --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled);
+  --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2));
+  --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base));
+  --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
+  --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-form-input-border-width: var(--pgn-input-btn-border-width);
+  --pgn-form-input-border-color: var(--pgn-color-gray-500);
+  --pgn-form-input-color-plaintext: var(--pgn-body-color);
+  --pgn-form-input-color-placeholder: var(--pgn-color-gray-500);
+  --pgn-form-input-bg-base: var(--pgn-color-background-base);
+  --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg);
+  --pgn-form-input-font-weight: var(--pgn-font-weight-base);
+  --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500);
+  --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500);
+  --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500);
+  --pgn-dropdown-link-active-color: var(--pgn-color-active);
+  --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300);
+  --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width));
+  --pgn-dropdown-bg: var(--pgn-color-background-base);
+  --pgn-dropdown-color-header: var(--pgn-color-gray-500);
+  --pgn-dropdown-color-base: var(--pgn-body-color);
+  --pgn-data-table-background-color: var(--pgn-color-background-base);
+  --pgn-card-divider-bg: var(--pgn-color-light-400);
+  --pgn-card-bg: var(--pgn-color-background-base);
+  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
+  --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500);
+  --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500);
+  --pgn-btn-border-width: var(--pgn-input-btn-border-width);
+  --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg);
+  --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
+  --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500);
+  --pgn-breadcrumb-color-active: var(--pgn-color-gray-500);
+  --pgn-breadcrumb-color-base: var(--pgn-color-primary-500);
+  --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300);
+  --pgn-alert-actions-gap: var(--pgn-spacer-3);
+  --pgn-color-danger-900: #892029FF;
+  --pgn-color-danger-800: #92222CFF;
+  --pgn-color-danger-700: #9C242EFF;
+  --pgn-color-danger-600: #B02934FF;
+  --pgn-color-danger-500: var(--pgn-color-danger-base);
+  --pgn-color-danger-400: #D2626BFF;
+  --pgn-color-danger-300: #E1969DFF;
+  --pgn-color-danger-200: #F0CBCEFF;
+  --pgn-color-danger-100: #FBF2F3FF;
+  --pgn-color-warning-900: #B39800FF;
+  --pgn-color-warning-800: #BFA300FF;
+  --pgn-color-warning-700: #CCAE00FF;
+  --pgn-color-warning-600: #E6C300FF;
+  --pgn-color-warning-500: var(--pgn-color-warning-base);
+  --pgn-color-warning-400: #FFE340FF;
+  --pgn-color-warning-300: #FFEC80FF;
+  --pgn-color-warning-200: #FFF6BFFF;
+  --pgn-color-warning-100: #FFFDF0FF;
+  --pgn-color-info-900: #004C77FF;
+  --pgn-color-info-800: #005280FF;
+  --pgn-color-info-700: #005788FF;
+  --pgn-color-info-600: #006299FF;
+  --pgn-color-info-500: var(--pgn-color-info-base);
+  --pgn-color-info-400: #4092BFFF;
+  --pgn-color-info-300: #80B6D5FF;
+  --pgn-color-info-200: #BFDBEAFF;
+  --pgn-color-info-100: #F0F6FAFF;
+  --pgn-color-success-900: #105B3AFF;
+  --pgn-color-success-800: #11623EFF;
+  --pgn-color-success-700: #126842FF;
+  --pgn-color-success-600: #15754BFF;
+  --pgn-color-success-500: var(--pgn-color-success-base);
+  --pgn-color-success-400: #51A17EFF;
+  --pgn-color-success-300: #8BC1A9FF;
+  --pgn-color-success-200: #C5E0D4FF;
+  --pgn-color-success-100: #F1F8F5FF;
+  --pgn-color-secondary-900: #303030FF;
+  --pgn-color-secondary-800: #343434FF;
+  --pgn-color-secondary-700: #373737FF;
+  --pgn-color-secondary-600: #3E3E3EFF;
+  --pgn-color-secondary-500: var(--pgn-color-secondary-base);
+  --pgn-color-secondary-400: #747474FF;
+  --pgn-color-secondary-300: #A2A2A2FF;
+  --pgn-color-secondary-200: #D1D1D1FF;
+  --pgn-color-secondary-100: #F4F4F4FF;
+  --pgn-color-input-focus: var(--pgn-color-primary-500);
+  --pgn-color-disabled: var(--pgn-color-gray-500);
+  --pgn-color-background-active: var(--pgn-color-primary-500);
+  --pgn-popover-danger-icon-color: var(--pgn-color-warning-500);
+  --pgn-popover-danger-bg: var(--pgn-color-danger-100);
+  --pgn-popover-warning-icon-color: var(--pgn-color-warning-500);
+  --pgn-popover-warning-bg: var(--pgn-color-warning-100);
+  --pgn-popover-success-icon-color: var(--pgn-color-success-500);
+  --pgn-popover-success-bg: var(--pgn-color-success-100);
+  --pgn-popover-arrow-color: var(--pgn-popover-bg);
+  --pgn-pagination-bg-active: var(--pgn-color-background-active);
+  --pgn-pagination-color-disabled: var(--pgn-color-disabled);
+  --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active);
+  --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active);
+  --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active);
+  --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg);
+  --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color);
+  --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color);
+  --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active);
+  --pgn-image-thumbnail-bg: var(--pgn-body-bg);
+  --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base);
+  --pgn-list-group-active-bg: var(--pgn-color-background-active);
+  --pgn-link-brand-inline-hover-color: #95004EFF;
+  --pgn-link-brand-inline-decoration-color: #9D00544D;
+  --pgn-link-brand-hover-color: #95004EFF;
+  --pgn-link-muted-inline-hover-color: #002A4FFF;
+  --pgn-link-muted-inline-decoration-color: #0A30554D;
+  --pgn-link-muted-hover-color: #002A4FFF;
+  --pgn-input-btn-focus-color: var(--pgn-color-input-focus);
+  --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color);
+  --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight);
+  --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus);
+  --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width);
+  --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color);
+  --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base);
+  --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base);
+  --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus);
+  --pgn-form-custom-range-thumb-bg-active: #1F3E64FF;
+  --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active);
+  --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm);
+  --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color);
+  --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width);
+  --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half);
+  --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding));
+  --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding));
+  --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-custom-select-color-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight);
+  --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base);
+  --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active);
+  --pgn-form-custom-control-label-floating-text: #FFFFFF1A;
+  --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color);
+  --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-focus-color-border: var(--pgn-color-input-focus);
+  --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base);
+  --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2);
+  --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500);
+  --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300);
+  --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300);
+  --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300);
+  --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled);
+  --pgn-dropdown-link-active-bg: var(--pgn-color-background-active);
+  --pgn-btn-disabled-link-color: var(--pgn-color-disabled);
+  --pgn-color-link: var(--pgn-color-info-500);
+  --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active);
+  --pgn-pagination-color-base: var(--pgn-color-link);
+  --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg);
+  --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color);
+  --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color);
+  --pgn-link-inline-color: var(--pgn-color-link);
+  --pgn-link-hover-color: #0066A3FF;
+  --pgn-link-color: var(--pgn-color-link);
+  --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg);
+  --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg);
+  --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-pagination-color-hover: var(--pgn-link-hover-color);
+  --pgn-link-inline-hover-color: #0066A3FF;
+  --pgn-link-inline-decoration-color: #006DAA4D;
+  --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color);
+}
diff --git a/src/ActionRow/_variables.scss b/src/ActionRow/_variables.scss
index 37b2d3913de..65e304d57a7 100644
--- a/src/ActionRow/_variables.scss
+++ b/src/ActionRow/_variables.scss
@@ -1,2 +1,2 @@
-$action-row-gap-x:                   .5rem !default;
-$action-row-gap-y:                   .5rem !default;
+$action-row-gap-x: var(--pgn-action-row-gap-x) !default;
+$action-row-gap-y: var(--pgn-action-row-gap-y) !default;
diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss
index c17ad75a079..fc1e4cc38f9 100644
--- a/src/Alert/Alert.scss
+++ b/src/Alert/Alert.scss
@@ -68,7 +68,7 @@
 
 // Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2;
+  padding-right: calc(($font-size-base * 1.5) + $alert-padding-x * 2);
 
   // Adjust close link position
   .close {
diff --git a/src/Alert/_variables.scss b/src/Alert/_variables.scss
index 493a06fecea..c6dd2eaa543 100644
--- a/src/Alert/_variables.scss
+++ b/src/Alert/_variables.scss
@@ -2,23 +2,23 @@
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-y:                   1.5rem !default;
-$alert-padding-x:                   1.5rem !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-normal !default;
-$alert-border-width:                0 !default;
-$alert-title-color:                 #000000 !default;
-$alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
+$alert-padding-y: var(--pgn-alert-padding-y) !default;
+$alert-padding-x: var(--pgn-alert-padding-x) !default;
+$alert-margin-bottom: var(--pgn-alert-margin-bottom) !default;
+$alert-border-radius: var(--pgn-alert-border-radius) !default;
+$alert-link-font-weight: var(--pgn-alert-font-weight-link) !default;
+$alert-border-width: var(--pgn-alert-border-width) !default;
+$alert-title-color: var(--pgn-alert-color-title) !default;
+$alert-box-shadow: var(--pgn-alert-box-shadow) !default;
 
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
+$alert-bg-level: var(--pgn-alert-level-bg) !default;
+$alert-border-level: var(--pgn-alert-level-border) !default;
+$alert-color-level: var(--pgn-alert-level-color) !default;
 
-$alert-icon-space:                  .8rem !default;
+$alert-icon-space: var(--pgn-alert-icon-space) !default;
 
-$alert-font-size:                   .875rem !default;
-$alert-line-height:                 1.5rem !default;
-$alert-content-color:               $gray-700 !default;
+$alert-font-size: var(--pgn-alert-font-size) !default;
+$alert-line-height: var(--pgn-alert-line-height) !default;
+$alert-content-color: var(--pgn-alert-color-content) !default;
 
-$alert-actions-gap:                 map-get($spacers, 3);
+$alert-actions-gap: var(--pgn-alert-actions-gap) !default;
diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss
index bdfefa71369..ba8cd746355 100644
--- a/src/Annotation/Annotation.scss
+++ b/src/Annotation/Annotation.scss
@@ -1,50 +1,54 @@
 @import "variables";
 
-@mixin triangle($color, $direction) {
+@mixin triangle($triangle-color, $triangle-direction) {
+  content: "";
   height: 0;
   width: 0;
   position: absolute;
-  content: "";
   border: solid transparent;
 
-  @if $direction == top {
-    border-bottom-color: $color;
+  @if $triangle-direction == top {
+    border-bottom-color: $triangle-color;
     border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width;
     right: 0;
     left: 0;
-    top: -$annotation-arrow-border-width;
+    top: calc(#{$annotation-arrow-border-width} * -1);
     margin: 0 auto;
   }
 
-  @else if $direction == right {
-    border-left-color: $color;
-    border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width;
+  @else if $triangle-direction == right {
+    border-left-color: $triangle-color;
+    border-width:
+      $annotation-arrow-border-width 0 $annotation-arrow-border-width
+      $annotation-arrow-border-width;
     top: 0;
     bottom: 0;
-    right: -$annotation-arrow-border-width;
+    right: calc(#{$annotation-arrow-border-width} * -1);
     margin: auto 0;
   }
 
-  @else if $direction == bottom {
-    border-top-color: $color;
+  @else if $triangle-direction == bottom {
+    border-top-color: $triangle-color;
     border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0;
     right: 0;
     left: 0;
-    bottom: -$annotation-arrow-border-width;
+    bottom: calc(#{$annotation-arrow-border-width} * -1);
     margin: 0 auto;
   }
 
-  @else if $direction == left {
-    border-right-color: $color;
-    border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0;
+  @else if $triangle-direction == left {
+    border-right-color: $triangle-color;
+    border-width:
+      $annotation-arrow-border-width $annotation-arrow-border-width
+      $annotation-arrow-border-width 0;
     top: 0;
     bottom: 0;
-    left: -$annotation-arrow-border-width;
+    left: calc(#{$annotation-arrow-border-width} * -1);
     margin: auto 0;
   }
 
   @else {
-    @error "Unknown direction #{$direction}.";
+    @error "Unknown direction #{$triangle-direction}.";
   }
 }
 
@@ -70,17 +74,17 @@ $arrow-directions: top, right, bottom, left;
       color: map-get($colors, "color");
 
       // set additional margin to arrow side of the Annotation
-      margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+      margin-#{$direction}: calc($annotation-arrow-border-width + $annotation-arrow-side-margin);
 
       [dir="rtl"] & {
         @if $direction == left {
           margin-left: 0;
-          margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+          margin-right: calc($annotation-arrow-border-width + $annotation-arrow-side-margin);
         }
 
         @else if $direction == right {
           margin-right: 0;
-          margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+          margin-left: calc($annotation-arrow-border-width + $annotation-arrow-side-margin);
         }
       }
 
@@ -90,7 +94,7 @@ $arrow-directions: top, right, bottom, left;
         [dir="rtl"] & {
           @if $direction == left {
             left: initial;
-            right: -$annotation-arrow-border-width;
+            right: calc(#{$annotation-arrow-border-width} * -1);
             border-width:
               $annotation-arrow-border-width 0 $annotation-arrow-border-width
               $annotation-arrow-border-width;
@@ -99,7 +103,7 @@ $arrow-directions: top, right, bottom, left;
 
           @else if $direction == right {
             right: initial;
-            left: -$annotation-arrow-border-width;
+            left: calc(#{$annotation-arrow-border-width} * -1);
             border-width:
               $annotation-arrow-border-width $annotation-arrow-border-width
               $annotation-arrow-border-width 0;
diff --git a/src/Annotation/_variables.scss b/src/Annotation/_variables.scss
index dfe1de4e588..79aff6604f7 100644
--- a/src/Annotation/_variables.scss
+++ b/src/Annotation/_variables.scss
@@ -1,18 +1,17 @@
-$annotation-padding:               .5rem !default;
-$annotation-box-shadow:            drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$annotation-border-radius:         .25rem !default;
-$annotation-max-width:             18.75rem !default;
-$annotation-font-size:             $font-size-sm !default;
-$annotation-line-height:           $line-height-sm !default;
+$annotation-padding: var(--pgn-annotation-padding) !default;
+$annotation-box-shadow: var(--pgn-annotation-box-shadow) !default;
+$annotation-border-radius: var(--pgn-annotation-border-radius) !default;
+$annotation-max-width: var(--pgn-annotation-max-width) !default;
+$annotation-font-size: var(--pgn-annotation-font-size) !default;
+$annotation-line-height: var(--pgn-annotation-line-height) !default;
 
 $annotation-variants: (
-  "success": ( "background-color": $success, "color": $white ),
-  "warning": ( "background-color": $accent-b, "color": $black ),
-  "error":   ( "background-color": $danger, "color": $white ),
-  "light":   ( "background-color": $white, "color": $primary-500 ),
-  "dark":    ( "background-color": $dark, "color": $white ),
+  "success": ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ),
+  "warning": ( "background-color": var(--pgn-color-accent-b), "color": var(--pgn-color-black) ),
+  "error":   ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ),
+  "light":   ( "background-color": var(--pgn-color-white), "color": var(--pgn-color-primary-500) ),
+  "dark":    ( "background-color": var(--pgn-color-dark-base), "color": var(--pgn-color-white) ),
 ) !default;
 
-$annotation-arrow-side-margin:     .25rem !default;
-$annotation-arrow-border-width:    .5rem !default;
+$annotation-arrow-side-margin: var(--pgn-annotation-arrow-side-margin) !default;
+$annotation-arrow-border-width: var(--pgn-annotation-arrow-border-width) !default;
diff --git a/src/Avatar/_variables.scss b/src/Avatar/_variables.scss
index 1d38482cab7..e8a3f3a8f20 100644
--- a/src/Avatar/_variables.scss
+++ b/src/Avatar/_variables.scss
@@ -1,10 +1,10 @@
-$avatar-border-radius:               100% !default;
-$avatar-border:                      solid 1px $light-300 !default;
+$avatar-border-radius: var(--pgn-avatar-border-radius) !default;
+$avatar-border: var(--pgn-avatar-border-base) !default;
 
-$avatar-size-xs:                     1.5rem !default;
-$avatar-size-sm:                     2.25rem !default;
-$avatar-size:                        3rem !default;
-$avatar-size-lg:                     4rem !default;
-$avatar-size-xl:                     6rem !default;
-$avatar-size-xxl:                    11.5rem !default;
-$avatar-size-huge:                   18.75rem !default;
+$avatar-size-xs: var(--pgn-avatar-size-xs) !default;
+$avatar-size-sm: var(--pgn-avatar-size-sm) !default;
+$avatar-size: var(--pgn-avatar-size-base) !default;
+$avatar-size-lg: var(--pgn-avatar-size-lg) !default;
+$avatar-size-xl: var(--pgn-avatar-size-xl) !default;
+$avatar-size-xxl: var(--pgn-avatar-size-xxl) !default;
+$avatar-size-huge: var(--pgn-avatar-size-huge) !default;
diff --git a/src/AvatarButton/_variables.scss b/src/AvatarButton/_variables.scss
index cf568ae1274..21bc685e143 100644
--- a/src/AvatarButton/_variables.scss
+++ b/src/AvatarButton/_variables.scss
@@ -1,3 +1,3 @@
-$avatar-button-padding-left: .25em !default;
-$avatar-button-padding-left-sm: .25em !default;
-$avatar-button-padding-left-lg: .25em !default;
+$avatar-button-padding-left: var(--pgn-avatar-button-padding-left-base) !default;
+$avatar-button-padding-left-sm: var(--pgn-avatar-button-padding-left-sm) !default;
+$avatar-button-padding-left-lg: var(--pgn-avatar-button-padding-left-lg) !default;
diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss
index c019627d0ea..7f352e84570 100644
--- a/src/Badge/Badge.scss
+++ b/src/Badge/Badge.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/badge";
+@import "badge-bootstrap";
diff --git a/src/Badge/_variables.scss b/src/Badge/_variables.scss
index 6067ea7d8af..50dd0684504 100644
--- a/src/Badge/_variables.scss
+++ b/src/Badge/_variables.scss
@@ -1,16 +1,16 @@
 // Badges
 
-$badge-font-size:                   75% !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-padding-y:                   .125rem !default;
-$badge-padding-x:                   .5rem !default;
-$badge-border-radius:               .25rem !default;
+$badge-font-size: var(--pgn-badge-font-size) !default;
+$badge-font-weight: var(--pgn-badge-font-weight) !default;
+$badge-padding-y: var(--pgn-badge-padding-y) !default;
+$badge-padding-x: var(--pgn-badge-padding-x-base) !default;
+$badge-border-radius: var(--pgn-badge-border-radius-base) !default;
 
-$badge-transition:                  none !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
+$badge-transition: var(--pgn-badge-transition) !default;
+$badge-focus-width: var(--pgn-badge-focus-width) !default;
 
-$badge-pill-padding-x:              .6em !default;
+$badge-pill-padding-x: var(--pgn-badge-padding-x-pill) !default;
 
 // Use a higher than normal value to ensure completely rounded edges when
 // customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;
+$badge-pill-border-radius: var(--pgn-badge-border-radius-pill) !default;
diff --git a/src/Badge/badge-bootstrap.scss b/src/Badge/badge-bootstrap.scss
new file mode 100644
index 00000000000..e88a094bc1c
--- /dev/null
+++ b/src/Badge/badge-bootstrap.scss
@@ -0,0 +1,43 @@
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+
+  @include font-size($badge-font-size);
+
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+
+  @include border-radius($badge-pill-border-radius);
+}
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}
diff --git a/src/Breadcrumb/Breadcrumb.scss b/src/Breadcrumb/Breadcrumb.scss
index 2466a631c2c..7a301d4d7d8 100644
--- a/src/Breadcrumb/Breadcrumb.scss
+++ b/src/Breadcrumb/Breadcrumb.scss
@@ -19,10 +19,10 @@
       &:focus::before {
         content: "";
         position: absolute;
-        top: -$breadcrumb-border-focus-axis-y;
-        right: -$breadcrumb-border-focus-axis-x;
-        bottom: -$breadcrumb-border-focus-axis-y;
-        left: -$breadcrumb-border-focus-axis-x;
+        top: calc(#{$breadcrumb-border-focus-axis-y} * -1);
+        right: calc(#{$breadcrumb-border-focus-axis-x} * -1);
+        bottom: calc(#{$breadcrumb-border-focus-axis-y} * -1);
+        left: calc(#{$breadcrumb-border-focus-axis-x} * -1);
         border: $breadcrumb-border-focus-width solid $breadcrumb-color;
         border-radius: $breadcrumb-focus-border-radius;
       }
diff --git a/src/Breadcrumb/_variables.scss b/src/Breadcrumb/_variables.scss
index 955751b0d78..0672dfd8df4 100644
--- a/src/Breadcrumb/_variables.scss
+++ b/src/Breadcrumb/_variables.scss
@@ -1,27 +1,27 @@
 // Breadcrumbs
 
-$breadcrumb-font-size:              null !default;
+$breadcrumb-font-size: var(--pgn-breadcrumb-font-size) !default;
 
-$breadcrumb-padding-y:              .75rem !default;
-$breadcrumb-padding-x:              1rem !default;
-$breadcrumb-item-padding:           .5rem !default;
+$breadcrumb-padding-y: var(--pgn-breadcrumb-padding-y) !default;
+$breadcrumb-padding-x: var(--pgn-breadcrumb-padding-x) !default;
+$breadcrumb-item-padding: var(--pgn-breadcrumb-padding-item) !default;
 
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-margin-left:           .5rem !default;
+$breadcrumb-margin-bottom: var(--pgn-breadcrumb-margin-bottom) !default;
+$breadcrumb-margin-left: var(--pgn-breadcrumb-margin-left) !default;
 
-$breadcrumb-border-focus-axis-x:    .25rem !default;
-$breadcrumb-border-focus-axis-y:    .5rem !default;
+$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default;
+$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default;
 
-$breadcrumb-border-focus-width:     .0625rem !default;
+$breadcrumb-border-focus-width: var(--pgn-breadcrumb-border-focus-width) !default;
 
-$breadcrumb-bg:                     $gray-200 !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-500 !default;
-$breadcrumb-inverse-active:         $light-500 !default;
-$breadcrumb-inverse-spacer:         $light-700 !default;
-$breadcrumb-color:                  $primary-500 !default;
-$breadcrumb-inverse-color:          $white !default;
-$breadcrumb-divider:                "/" !default;
+$breadcrumb-bg: var(--pgn-breadcrumb-bg) !default;
+$breadcrumb-divider-color: var(--pgn-breadcrumb-color-divider) !default;
+$breadcrumb-active-color: var(--pgn-breadcrumb-color-active) !default;
+$breadcrumb-inverse-active: var(--pgn-breadcrumb-inverse-active) !default;
+$breadcrumb-inverse-spacer: var(--pgn-breadcrumb-inverse-spacer) !default;
+$breadcrumb-color: var(--pgn-breadcrumb-color-base) !default;
+$breadcrumb-inverse-color: var(--pgn-breadcrumb-inverse-color) !default;
+$breadcrumb-divider: "/" !default;
 
-$breadcrumb-border-radius:          $border-radius !default;
-$breadcrumb-focus-border-radius:          .125rem !default;
+$breadcrumb-border-radius: var(--pgn-breadcrumb-border-radius-base) !default;
+$breadcrumb-focus-border-radius: var(--pgn-breadcrumb-border-radius-focus) !default;
diff --git a/src/Bubble/_variables.scss b/src/Bubble/_variables.scss
index e09ee586c8f..7726e63f7d9 100644
--- a/src/Bubble/_variables.scss
+++ b/src/Bubble/_variables.scss
@@ -1,8 +1,8 @@
 $bubble-variants: (
-  "success":    ( "background-color": $success, "color": $white ),
-  "warning":    ( "background-color": $warning, "color": $white ),
-  "error":      ( "background-color": $danger, "color": $white ),
-  "primary":    ( "background-color": $primary, "color": $white ),
+  "success":    ( "background-color": var(--pgn-color-success-base), "color": var(--pgn-color-white) ),
+  "warning":    ( "background-color": var(--pgn-color-warning-base), "color": var(--pgn-color-white) ),
+  "error":      ( "background-color": var(--pgn-color-danger-base), "color": var(--pgn-color-white) ),
+  "primary":    ( "background-color": var(--pgn-color-primary-base), "color": var(--pgn-color-white) ),
 ) !default;
-$bubble-expandable-padding-x:              .25rem !default;
-$bubble-expandable-padding-y:              0 !default;
+$bubble-expandable-padding-x: var(--pgn-bubble-expandable-padding-x) !default;
+$bubble-expandable-padding-y: var(--pgn-bubble-expandable-padding-y) !default;
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
index 52c3eae069b..b1f9f9c2da9 100644
--- a/src/Button/Button.scss
+++ b/src/Button/Button.scss
@@ -1,34 +1,37 @@
 @import "variables";
-@import "~bootstrap/scss/button-group";
+@import "button-bootstrap";
 
+// TODO Pending decision on usage with CSS variables.
 @mixin button-variant(
-  $background, $border, $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%), $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background),
-  $active-color: color-yiq($active-background)
+  $btn-variant-bg, $btn-variant-border, $btn-variant-hover-bg: darken($btn-variant-bg, 7.5%),
+  $btn-variant-hover-border: darken($btn-variant-border, 10%),
+  $btn-variant-active-bg: darken($btn-variant-bg, 10%),
+  $btn-variant-active-border: darken($btn-variant-border, 12.5%),
+  $btn-variant-color: color-yiq($btn-variant-bg), $btn-variant-hover-color: color-yiq($btn-variant-hover-bg),
+  $btn-variant-active-color: color-yiq($btn-variant-active-bg)
 ) {
-  color: $color;
+  color: $btn-variant-color;
 
-  @include gradient-bg($background);
+  @include gradient-bg($btn-variant-bg);
 
-  border-color: $border;
+  border-color: $btn-variant-border;
 
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    color: $hover-color;
+    color: $btn-variant-hover-color;
 
-    @include gradient-bg($hover-background);
+    @include gradient-bg($btn-variant-hover-bg);
 
-    border-color: $hover-border;
+    border-color: $btn-variant-hover-border;
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    color: $color;
-    background-color: $background;
-    border-color: $border;
+    color: $btn-variant-color;
+    background-color: $btn-variant-bg;
+    border-color: $btn-variant-border;
 
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
@@ -39,44 +42,47 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: $active-color;
-    background-color: $active-background;
+    color: $btn-variant-active-color;
+    background-color: $btn-variant-active-bg;
 
     @if $enable-gradients {
       background-image: none; // Remove the gradient for the pressed/active state
     }
 
-    border-color: $active-border;
+    border-color: $btn-variant-active-border;
   }
 }
 
 // OVERRIDE FROM BOOTSTRAP
 // We do this to better control active and focus states.
 @mixin button-outline-variant(
-  $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color
+  $color-val,
+  $color-val-hover: color-yiq($color-val),
+  $color-val-active-bg: $color-val,
+  $btn-outline-variant-active-border: $color-val
 ) {
-  color: $color;
-  border-color: $color;
+  color: $color-val;
+  border-color: $color-val;
 
   @include hover {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
+    color: $color-val-hover;
+    background-color: $color-val-active-bg;
+    border-color: $btn-outline-variant-active-border;
   }
 
   &.disabled,
   &:disabled {
-    color: $color;
+    color: $color-val;
     background-color: transparent;
-    border-color: $color;
+    border-color: $color-val;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    border-color: $active-border;
+    color: color-yiq($color-val-active-bg);
+    background-color: $color-val-active-bg;
+    border-color: $btn-outline-variant-active-border;
   }
 }
 
@@ -84,15 +90,18 @@
 // No changes made. We do this to keep all button related mixins together,
 //
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  padding: $padding-y $padding-x;
+@mixin button-size(
+  $btn-size-padding-y, $btn-size-padding-x, $btn-size-font-size,
+  $btn-size-line-height, $btn-size-border-radius
+) {
+  padding: $btn-size-padding-y $btn-size-padding-x;
 
-  @include font-size($font-size);
+  @include font-size($btn-size-font-size);
 
-  line-height: $line-height;
+  line-height: $btn-size-line-height;
 
   // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
+  @include border-radius($btn-size-border-radius, 0);
 }
 
 // ------------------------
@@ -103,30 +112,32 @@
 // A new variant of button (inverse)
 //
 @mixin button-inverse-variant(
-  $color, $background: color-yiq($color), $active-background: $color, $active-border: $color
+  $btn-inverse-variant-color, $btn-inverse-variant-bg: color-yiq($btn-inverse-variant-color),
+  $btn-inverse-variant-active-bg: $btn-inverse-variant-color,
+  $btn-inverse-variant-active-border: $btn-inverse-variant-color
 ) {
-  color: $color;
+  color: $btn-inverse-variant-color;
   border-color: transparent;
-  background-color: $background;
+  background-color: $btn-inverse-variant-bg;
 
   &:not(:disabled):not(.disabled) {
     @include hover {
-      color: darken($color, 7.5%);
-      background-color: darken($background, 7.5%);
+      color: darken($btn-inverse-variant-color, 7.5%);
+      background-color: darken($btn-inverse-variant-bg, 7.5%);
       border-color: transparent;
     }
   }
 
   &.disabled,
   &:disabled {
-    color: $color;
-    background-color: $background;
+    color: $btn-inverse-variant-color;
+    background-color: $btn-inverse-variant-bg;
   }
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: darken($color, 10%);
+    color: darken($btn-inverse-variant-color, 10%);
     background: #EEEEEE;
   }
 }
@@ -141,10 +152,10 @@
     &::before {
       content: "";
       position: absolute;
-      top: -1 * $btn-focus-distance-to-border;
-      right: -1 * $btn-focus-distance-to-border;
-      bottom: -1 * $btn-focus-distance-to-border;
-      left: -1 * $btn-focus-distance-to-border;
+      top: calc(#{$btn-focus-distance-to-border} * -1);
+      right: calc(#{$btn-focus-distance-to-border} * -1);
+      bottom: calc(#{$btn-focus-distance-to-border} * -1);
+      left: calc(#{$btn-focus-distance-to-border} * -1);
       border: solid $btn-focus-width $ring-color;
       border-radius: $btn-focus-border-radius;
     }
@@ -198,7 +209,8 @@
   background-color: transparent;
   border: $btn-border-width solid transparent;
 
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size,
+  $btn-line-height, $btn-border-radius);
   @include transition($btn-transition);
 
   @include hover {
@@ -247,27 +259,27 @@ fieldset:disabled a.btn {
 
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
-    $background: $value;
-    $border: $value;
+    $theme-color-bg: $value;
+    $theme-color-border: $value;
 
-    $hover-background: theme-color($color, "hover");
-    $hover-border: theme-color($color, "hover");
-    $active-background: theme-color($color, "active");
-    $active-border: theme-color($color, "active");
+    $theme-color-hover-bg: theme-color($color, "hover");
+    $theme-color-hover-border: theme-color($color, "hover");
+    $theme-color-hover-border-active-bg: theme-color($color, "active");
+    $theme-color-active-border: theme-color($color, "active");
 
     // Defaults
-    $hover-background: darken($background, 7.5%) !default;
-    $hover-border: darken($border, 10%) !default;
-    $active-background: darken($background, 10%) !default;
-    $active-border: darken($border, 12.5%) !default;
+    $theme-color-hover-bg: darken($theme-color-bg, 7.5%) !default;
+    $theme-color-hover-border: darken($theme-color-border, 10%) !default;
+    $theme-color-hover-border-active-bg: darken($theme-color-bg, 10%) !default;
+    $theme-color-active-border: darken($theme-color-border, 12.5%) !default;
 
     @include button-variant(
-      $background,
-      $border,
-      $hover-background,
-      $hover-border,
-      $active-background,
-      $active-border
+      $theme-color-bg,
+      $theme-color-border,
+      $theme-color-hover-bg,
+      $theme-color-hover-border,
+      $theme-color-hover-border-active-bg,
+      $theme-color-active-border
     );
     @include button-focus(theme-color($color, "focus"));
   }
@@ -275,20 +287,20 @@ fieldset:disabled a.btn {
   .btn-outline-#{$color} {
     $text-and-border: $value;
 
-    $color-hover: theme-color($color, "hover");
-    $active-background: theme-color($color, "background");
-    $active-border: theme-color($color, "active");
+    $btn-outline-color-hover: theme-color($color, "hover");
+    $btn-outline-active-background: theme-color($color, "background");
+    $btn-outline-active-border: theme-color($color, "active");
 
     // Defaults
     $color-hover: color-yiq($value) !default;
     $active-background: $value !default;
-    $active-border: $value !default;
+    $btn-outline-active-border: $value !default;
 
     @include button-outline-variant(
       $text-and-border,
-      $color-hover,
-      $active-background,
-      $active-border,
+      $btn-outline-color-hover,
+      $btn-outline-active-background,
+      $btn-outline-active-border,
     );
     @include button-focus(theme-color($color, "focus"));
   }
@@ -300,15 +312,15 @@ fieldset:disabled a.btn {
     $active-border: theme-color($color, "active");
 
     // Defaults
-    $background: color-yiq($value) !default;
-    $active-background: $value !default;
-    $active-border: $value !default;
+    $btn-inverse-bg: color-yiq($value) !default;
+    $btn-inverse-active-bg: $value !default;
+    $btn-inverse-active-border: $value !default;
 
     @include button-inverse-variant(
       $text,
-      $background,
-      $active-background,
-      $active-border,
+      $btn-inverse-bg,
+      $btn-inverse-active-bg,
+      $btn-inverse-active-border,
     );
     @include button-focus($white);
   }
@@ -317,19 +329,19 @@ fieldset:disabled a.btn {
     $text-and-border: $white;
 
     $color-hover: theme-color($color, "hover");
-    $active-background: theme-color($color, "background");
-    $active-border: transparent;
+    $active-bg-color: theme-color($color, "background");
+    $active-border-color: transparent;
 
     // Defaults
     $color-hover: color-yiq($value) !default;
-    $active-background: $value !default;
-    $active-border: $value !default;
+    $active-bg-color: $value !default;
+    $active-border-color: $value !default;
 
     @include button-outline-variant(
       $text-and-border,
       $color-hover,
-      $active-background,
-      $active-border,
+      $active-bg-color,
+      $active-border-color,
     );
     @include button-focus($white);
   }
@@ -340,20 +352,20 @@ fieldset:disabled a.btn {
 //
 
 .btn-tertiary {
-  $background: $btn-tertiary-bg;
-  $border: transparent;
+  $button-tertiary-background: $btn-tertiary-bg;
+  $button-tertiary-border: transparent;
   $hover-background: $btn-tertiary-hover-bg;
-  $hover-border: transparent;
-  $active-background: $btn-tertiary-active-bg;
-  $active-border: transparent;
+  $button-tertiary-hover-border: transparent;
+  $button-tertiary-active-bg: $btn-tertiary-active-bg;
+  $button-tertiary-active-border: transparent;
 
   @include button-variant(
-    $background,
-    $border,
+    $button-tertiary-background,
+    $button-tertiary-border,
     $hover-background,
-    $hover-border,
-    $active-background,
-    $active-border,
+    $button-tertiary-hover-border,
+    $button-tertiary-active-bg,
+    $button-tertiary-active-border,
     $btn-tertiary-color,
     $btn-tertiary-color,
     $btn-tertiary-color
@@ -362,20 +374,20 @@ fieldset:disabled a.btn {
 }
 
 .btn-inverse-tertiary {
-  $background: $btn-inverse-tertiary-bg;
-  $border: transparent;
+  $button-inverse-tertiary-bg: $btn-tertiary-bg;
+  $button-inverse-tertiary-border: transparent;
   $hover-background: $btn-inverse-tertiary-hover-bg;
-  $hover-border: transparent;
-  $active-background: $btn-inverse-tertiary-active-bg;
-  $active-border: transparent;
+  $button-inverse-hover-border: transparent;
+  $button-inverse-tertiary-active-bg: $btn-inverse-tertiary-active-bg;
+  $button-inverse-tertiary-active-border: transparent;
 
   @include button-variant(
-    $background,
-    $border,
+    $button-inverse-tertiary-bg,
+    $button-inverse-tertiary-border,
     $hover-background,
-    $hover-border,
-    $active-background,
-    $active-border,
+    $button-inverse-hover-border,
+    $button-inverse-tertiary-active-bg,
+    $button-inverse-tertiary-active-border,
     $btn-inverse-tertiary-color,
     $btn-inverse-tertiary-color,
     $btn-inverse-tertiary-color
@@ -424,13 +436,15 @@ fieldset:disabled a.btn {
 
 .btn-lg {
   @include button-size(
-    $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg
+    $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg,
+    $btn-line-height-lg, $btn-border-radius-lg
   );
 }
 
 .btn-sm {
   @include button-size(
-    $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm
+    $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm,
+    $btn-line-height-sm, $btn-border-radius-sm
   );
 }
 
@@ -449,7 +463,7 @@ fieldset:disabled a.btn {
 }
 
 .btn-inline {
-  line-height: calc(#{$line-height-base}em - #{2 * $btn-border-width});
+  line-height: calc(#{$line-height-base}em - 2 * #{$btn-border-width});
   font-size: inherit;
   vertical-align: bottom;
   padding: 0 .25em;
diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
index 5d92ed82717..9ca4159d150 100644
--- a/src/Button/_variables.scss
+++ b/src/Button/_variables.scss
@@ -1,48 +1,49 @@
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-$btn-line-height-sm:          $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $input-btn-line-height-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             2px !default;
-$btn-focus-gap:               1px !default;
+$btn-padding-y: var(--pgn-btn-padding-y-base) !default;
+$btn-padding-x: var(--pgn-btn-padding-x-base) !default;
+$btn-font-family: var(--pgn-btn-font-family) !default;
+$btn-font-size: var(--pgn-btn-font-size-base) !default;
+$btn-line-height: var(--pgn-btn-line-height-base) !default;
+
+$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default;
+$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default;
+$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default;
+$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default;
+
+$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default;
+$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default;
+$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default;
+$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default;
+
+$btn-border-width: var(--pgn-btn-border-width) !default;
+
+$btn-font-weight: var(--pgn-btn-font-weight) !default;
+$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default;
+$btn-focus-width: var(--pgn-btn-focus-width) !default;
+$btn-focus-gap: var(--pgn-btn-focus-gap) !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       none;
+$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default;
+$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default;
 
-$btn-tertiary-color:          $gray-700 !default;
-$btn-tertiary-bg:             transparent !default;
-$btn-tertiary-hover-bg:       $light-500 !default;
-$btn-tertiary-active-bg:      $light-500 !default;
-$btn-inverse-tertiary-color:          $white !default;
-$btn-inverse-tertiary-bg:             transparent !default;
-$btn-inverse-tertiary-hover-bg:       rgba(255, 255, 255, .1) !default;
-$btn-inverse-tertiary-active-bg:      rgba(255, 255, 255, .1) !default;
+$btn-tertiary-color: var(--pgn-btn-tertiary-color) !default;
+$btn-tertiary-bg: transparent !default;
 
-$btn-link-disabled-color:     theme-color("gray", "light-text") !default;
+$btn-tertiary-hover-bg: var(--pgn-btn-tertiary-bg-hover) !default;
+$btn-tertiary-active-bg: var(--pgn-btn-tertiary-bg-active) !default;
+$btn-inverse-tertiary-color: var(--pgn-btn-tertiary-inverse-color) !default;
+$btn-inverse-tertiary-bg: var(--pgn-btn-tertiary-inverse-bg-base) !default;
+$btn-inverse-tertiary-hover-bg: var(--pgn-btn-tertiary-inverse-bg-hover) !default;
+$btn-inverse-tertiary-active-bg: var(--pgn-btn-tertiary-inverse-bg-active) !default;
 
-$btn-block-spacing-y:         .5rem !default;
+$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default;
+
+$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
+$btn-border-radius: var(--pgn-btn-border-radius-base) !default;
+$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default;
+$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default;
 
-$btn-transition: null;
+$btn-transition: var(--pgn-btn-transition) !default;
 
 $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
 $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
diff --git a/src/Button/button-bootstrap.scss b/src/Button/button-bootstrap.scss
new file mode 100644
index 00000000000..b13a0a58b6c
--- /dev/null
+++ b/src/Button/button-bootstrap.scss
@@ -0,0 +1,126 @@
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    @include hover() {
+      z-index: 1;
+    }
+
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: calc($btn-border-width * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-sm > .btn { @extend .btn-sm; }
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+.dropdown-toggle-split {
+  padding-right: calc($btn-padding-x * .75);
+  padding-left: calc($btn-padding-x * .75);
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: calc($btn-padding-x-sm * .75);
+  padding-left: calc($btn-padding-x-sm * .75);
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: calc($btn-padding-x-lg * .75);
+  padding-left: calc($btn-padding-x-lg * .75);
+}
+
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc($btn-border-width * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0;
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
index 099c6f5bd9a..32a8fafe433 100644
--- a/src/Card/Card.scss
+++ b/src/Card/Card.scss
@@ -1,5 +1,5 @@
 @import "variables";
-@import "~bootstrap/scss/card";
+@import "card-bootstrap";
 
 .pgn__card,
 .pgn__card-body {
@@ -261,7 +261,7 @@ a .pgn__card {
 
   &.horizontal-stacked {
     flex-direction: column-reverse;
-    padding-top: $card-spacer-x - $card-footer-actions-gap;
+    padding-top: calc(#{$card-spacer-x} - #{$card-footer-actions-gap});
 
     & > * {
       margin-top: $card-footer-actions-gap;
@@ -327,9 +327,9 @@ a .pgn__card {
 
   .pgn__card-image-cap-loader {
     .react-loading-skeleton {
-      margin-bottom: -$loading-skeleton-spacer;
+      margin-bottom: calc(#{$loading-skeleton-spacer} * -1);
       position: relative;
-      top: -$loading-skeleton-spacer;
+      top: calc(#{$loading-skeleton-spacer} * -1);
       height: 100%;
     }
   }
@@ -351,7 +351,7 @@ a .pgn__card {
 .pgn__card-logo-cap {
   position: absolute;
   inset-inline-start: $card-logo-left-offset;
-  bottom: #{-$card-logo-bottom-offset};
+  bottom: #{calc(#{$card-logo-bottom-offset} * -1)};
   width: $card-logo-width;
   height: $card-logo-height;
   border-radius: $card-logo-border-radius;
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
index 0d9ed7a08d4..695e2dbfb19 100644
--- a/src/Card/_variables.scss
+++ b/src/Card/_variables.scss
@@ -1,55 +1,55 @@
 // Card
 
-$card-spacer-y:                      .75rem !default;
-$card-spacer-x:                      1.25rem !default;
-$card-border-width:                  $border-width !default;
-$card-border-radius:                 $border-radius !default;
-$card-border-color:                  rgba($black, .125) !default;
-$card-border-focus-color:            rgba($black, .5) !default;
+$card-spacer-y: var(--pgn-card-spacer-y) !default;
+$card-spacer-x: var(--pgn-card-spacer-x) !default;
+$card-border-width: var(--pgn-card-border-width) !default;
+$card-border-radius: var(--pgn-card-border-radius-base) !default;
+$card-border-color: var(--pgn-card-border-color-base) !default;
+$card-border-focus-color: var(--pgn-card-border-color-focus) !default;
 $card-border-focus-color-dark:       theme-color("primary", "focus") !default;
-$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                        rgba($black, .03) !default;
-$card-cap-color:                     null !default;
-$card-height:                        null !default;
-$card-color:                         null !default;
-$card-bg:                            $white !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg: var(--pgn-card-cap-bg) !default;
+$card-cap-color: var(--pgn-card-cap-color) !default;
+$card-height: var(--pgn-card-height-base) !default;
+$card-color: var(--pgn-card-color) !default;
+$card-bg: var(--pgn-card-bg) !default;
 $card-bg-dark:                       $primary-500 !default;
 $card-bg-muted:                      $light-200 !default;
 
-$card-img-overlay-padding:           1.25rem !default;
+$card-img-overlay-padding: var(--pgn-card-image-overlay-padding) !default;
 
-$card-group-margin:                  calc($grid-gutter-width / 2) !default;
-$card-deck-margin:                   $card-group-margin !default;
-$card-grid-margin:                   $card-group-margin !default;
+$card-group-margin: var(--pgn-card-margin-group) !default;
+$card-deck-margin: var(--pgn-card-margin-deck) !default;
+$card-grid-margin: var(--pgn-card-margin-grid) !default;
 $card-deck-margin-bottom:            map_get($spacers, 3) !default;
 $card-grid-margin-bottom:            map_get($spacers, 3) !default;
 
-$card-columns-count:                 3 !default;
-$card-columns-gap:                   1.25rem !default;
-$card-columns-margin:                $card-spacer-y !default;
+$card-columns-count: var(--pgn-card-columns-count) !default;
+$card-columns-gap: var(--pgn-card-columns-gap) !default;
+$card-columns-margin: var(--pgn-card-columns-margin) !default;
 
-$card-divider-bg:                    $light-400 !default;
-$card-divider-margin-y:              $card-spacer-y !default;
+$card-divider-bg: var(--pgn-card-divider-bg) !default;
+$card-divider-margin-y: var(--pgn-card-divider-margin-y) !default;
 
-$card-footer-actions-gap:            .5rem !default;
+$card-footer-actions-gap: var(--pgn-card-footer-action-gap) !default;
 
-$card-logo-left-offset:              1.5rem !default;
-$card-logo-bottom-offset:            1rem !default;
-$card-logo-left-offset-horizontal:   .4375rem !default;
-$card-logo-bottom-offset-horizontal: .4375rem !default;
+$card-logo-left-offset: var(--pgn-card-logo-left-offset-base) !default;
+$card-logo-bottom-offset: var(--pgn-card-logo-bottom-offset-base) !default;
+$card-logo-left-offset-horizontal: var(--pgn-card-logo-left-offset-horizontal) !default;
+$card-logo-bottom-offset-horizontal: var(--pgn-card-logo-bottom-offset-horizontal) !default;
 
-$card-logo-width:                    7.25rem !default;
-$card-logo-height:                   4.125rem !default;
+$card-logo-width: var(--pgn-card-logo-width) !default;
+$card-logo-height: var(--pgn-card-logo-height) !default;
 
-$card-image-border-radius:           .3125rem !default;
-$card-logo-border-radius:            .25rem !default;
+$card-image-border-radius: var(--pgn-card-border-radius-image) !default;
+$card-logo-border-radius: var(--pgn-card-border-radius-logo) !default;
 
-$card-footer-text-font-size:         $x-small-font-size;
+$card-footer-text-font-size: var(--pgn-card-footer-text-font-size) !default;
 
-$card-image-horizontal-max-width:    240px !default;
-$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
-$card-image-vertical-max-height:     140px !default;
-$loading-skeleton-spacer:            .313rem !default;
+$card-image-horizontal-max-width: var(--pgn-card-image-horizontal-width-max) !default;
+$card-image-horizontal-min-width: var(--pgn-card-image-horizontal-width-min) !default;
+$card-image-vertical-max-height: var(--pgn-card-image-vertical-height-max) !default;
+$loading-skeleton-spacer: var(--pgn-card-loading-skeleton-spacer) !default;
 
 $card-focus-border-offset:           5px !default;
 $card-focus-border-width:            2px !default;
diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss
new file mode 100644
index 00000000000..45f4904affc
--- /dev/null
+++ b/src/Card/card-bootstrap.scss
@@ -0,0 +1,254 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: $card-height;
+  word-wrap: break-word;
+  background-color: $card-bg;
+  background-clip: border-box;
+  border: $card-border-width solid $card-border-color;
+  position: relative;
+
+  @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+
+      @include border-top-radius($card-inner-border-radius);
+    }
+
+    &:last-child {
+      border-bottom-width: 0;
+
+      @include border-bottom-radius($card-inner-border-radius);
+    }
+  }
+
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
+}
+
+.card-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: $card-spacer-x;
+  color: $card-color;
+}
+
+.card-title {
+  margin-bottom: $card-spacer-y;
+}
+
+.card-subtitle {
+  margin-top: calc($card-spacer-y * -.5);
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  @include hover() {
+    text-decoration: none;
+  }
+
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
+
+// Optional textual caps
+.card-header {
+  padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
+
+  &:first-child {
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+  }
+}
+
+.card-footer {
+  padding: $card-spacer-y $card-spacer-x;
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
+
+  &:last-child {
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+  }
+}
+
+// Header navs
+.card-header-tabs {
+  margin-right: calc($card-spacer-x * -.5);
+  margin-bottom: calc($card-spacer-y * -1);
+  margin-left: calc($card-spacer-x * -.5);
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: calc($card-spacer-x * -.5);
+  margin-left: calc($card-spacer-x * .5);
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $card-img-overlay-padding;
+
+  @include border-radius($card-inner-border-radius);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  @include border-top-radius($card-inner-border-radius);
+}
+
+.card-img,
+.card-img-bottom {
+  @include border-bottom-radius($card-inner-border-radius);
+}
+
+// Card deck
+.card-deck {
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: calc($card-deck-margin * -1);
+    margin-left: calc($card-deck-margin * -1);
+
+    .card {
+      flex: 1 0 0%;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $card-deck-margin;
+    }
+  }
+}
+
+// Card groups
+.card-group {
+  > .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+
+    > .card {
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-right-radius: 0;
+          }
+
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-left-radius: 0;
+          }
+
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Columns
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
+    orphans: 1;
+    widows: 1;
+
+    .card {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}
+
+// Accordion
+.accordion {
+  overflow-anchor: none;
+
+  > .card {
+    overflow: hidden;
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+
+      @include border-bottom-radius(0);
+    }
+
+    &:not(:first-of-type) {
+      @include border-top-radius(0);
+    }
+
+    > .card-header {
+      @include border-radius(0);
+
+      margin-bottom: calc($card-border-width * -1);
+    }
+  }
+}
diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss
index f2aad611976..060291e5eb5 100644
--- a/src/Carousel/Carousel.scss
+++ b/src/Carousel/Carousel.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/carousel";
+@import "carousel-bootstrap";
diff --git a/src/Carousel/_variables.scss b/src/Carousel/_variables.scss
index 6ee4508d9a5..6f32a28f0ef 100644
--- a/src/Carousel/_variables.scss
+++ b/src/Carousel/_variables.scss
@@ -1,27 +1,27 @@
 // Carousel
 
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
+// TODO use css variable
+$carousel-control-color: #FFFFFF !default;
+$carousel-control-width: var(--pgn-carousel-control-width-base) !default;
+$carousel-control-opacity: var(--pgn-carousel-control-opacity-base) !default;
+$carousel-control-hover-opacity: var(--pgn-carousel-control-opacity-hover) !default;
+$carousel-control-transition: var(--pgn-carousel-control-transition) !default;
 
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
+$carousel-indicator-width: var(--pgn-carousel-indicator-width) !default;
+$carousel-indicator-height: var(--pgn-carousel-indicator-height-base) !default;
+$carousel-indicator-hit-area-height: var(--pgn-carousel-indicator-height-area-hit) !default;
+$carousel-indicator-spacer: var(--pgn-carousel-indicator-spacer) !default;
+$carousel-indicator-active-bg: var(--pgn-carousel-indicator-active-bg) !default;
+$carousel-indicator-transition: var(--pgn-carousel-indicator-transition) !default;
 
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
+$carousel-caption-width: var(--pgn-carousel-caption-width) !default;
+$carousel-caption-color: var(--pgn-carousel-caption-color) !default;
 
-$carousel-control-icon-width:        20px !default;
+$carousel-control-icon-width: var(--pgn-carousel-control-width-icon) !default;
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;
 
-$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;
-$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;
-
-$carousel-transition-duration:       .6s !default;
+$carousel-transition-duration: var(--pgn-carousel-transition-duration) !default;
 
 // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default;
diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss
new file mode 100644
index 00000000000..1cfb8f0828f
--- /dev/null
+++ b/src/Carousel/carousel-bootstrap.scss
@@ -0,0 +1,183 @@
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+
+  @include transition($carousel-transition);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+// Alternate transitions
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+
+    @include transition(opacity 0s var(--pgn-carousel-transition-base));
+  }
+}
+
+
+// Left/right controls for nav
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $carousel-control-width;
+  padding: 0;
+  color: var(--pgn-carousel-control-color);
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: $carousel-control-opacity;
+
+  @include transition($carousel-control-transition);
+
+  @include hover-focus() {
+    color: var(--pgn-carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: $carousel-control-hover-opacity;
+  }
+}
+
+.carousel-control-prev {
+  left: 0;
+
+  @if $enable-gradients {
+    // TODO needs a decision
+    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+
+.carousel-control-next {
+  right: 0;
+
+  @if $enable-gradients {
+    // TODO needs a decision
+    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: 50% / 100% 100% no-repeat;
+}
+
+.carousel-control-prev-icon {
+  background-image: escape-svg($carousel-control-prev-icon-bg);
+}
+
+.carousel-control-next-icon {
+  background-image: escape-svg($carousel-control-next-icon-bg);
+}
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: $carousel-indicator-active-bg;
+    background-clip: padding-box;
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: .5;
+
+    @include transition($carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+// Optional captions
+.carousel-caption {
+  position: absolute;
+  right: calc((calc(100% - $carousel-caption-width)) * .5);
+  bottom: 20px;
+  left: calc((calc(100% - $carousel-caption-width)) * .5);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: $carousel-caption-color;
+  text-align: center;
+}
diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss
index 90c2878e076..6b864dbd8fa 100644
--- a/src/Chip/_variables.scss
+++ b/src/Chip/_variables.scss
@@ -1,19 +1,19 @@
-$chip-padding-x:                    .5rem !default;
-$chip-padding-y:                    .125rem !default;
-$chip-padding-to-icon:              3px !default;
-$chip-icon-padding:                 .25rem !default;
-$chip-margin:                       .125rem !default;
-$chip-border-radius:                .25rem !default;
-$chip-disable-opacity:              .3 !default;
-$chip-icon-size:                    1.25rem !default;
+$chip-padding-x: var(--pgn-chip-padding-x) !default;
+$chip-padding-y: var(--pgn-chip-padding-y) !default;
+$chip-padding-to-icon: var(--pgn-chip-padding-icon-to) !default;
+$chip-icon-padding: var(--pgn-chip-padding-icon-base) !default;
+$chip-margin: var(--pgn-chip-margin-base) !default;
+$chip-border-radius: var(--pgn-chip-border-radius-base) !default;
+$chip-disable-opacity: var(--pgn-chip-disabled-opacity) !default;
+$chip-icon-size: var(--pgn-chip-icon-size) !default;
 
 $chip-theme-variants: (
   "light": (
-    "background": $light-500,
-    "color": $black,
+    "background": var(--pgn-color-light-500),
+    "color": var(--pgn-color-black),
   ),
   "dark": (
-    "background": $dark-200,
-    "color": $white,
+    "background": var(--pgn-color-dark-200),
+    "color": var(--pgn-color-white),
   )
 ) !default;
diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss
index a84e20236e2..e13cdb38224 100644
--- a/src/CloseButton/CloseButton.scss
+++ b/src/CloseButton/CloseButton.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/close";
+@import "close-button-bootstrap";
diff --git a/src/CloseButton/_variables.scss b/src/CloseButton/_variables.scss
index 3ce0a0d7908..0415c627743 100644
--- a/src/CloseButton/_variables.scss
+++ b/src/CloseButton/_variables.scss
@@ -1,6 +1,6 @@
 // Close
 
-$close-font-size:                   $font-size-base * 1.5 !default;
-$close-font-weight:                 $font-weight-bold !default;
-$close-color:                       $black !default;
-$close-text-shadow:                 0 1px 0 $white !default;
+$close-font-size: var(--pgn-close-button-font-size) !default;
+$close-font-weight: var(--pgn-close-button-font-weight) !default;
+$close-color: var(--pgn-close-button-color) !default;
+$close-text-shadow: var(--pgn-close-button-text-shadow) !default;
diff --git a/src/CloseButton/close-button-bootstrap.scss b/src/CloseButton/close-button-bootstrap.scss
new file mode 100644
index 00000000000..c3d1789db4e
--- /dev/null
+++ b/src/CloseButton/close-button-bootstrap.scss
@@ -0,0 +1,32 @@
+.close {
+  float: right;
+
+  @include font-size($close-font-size);
+
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  @include hover() {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}
diff --git a/src/Code/Code.scss b/src/Code/Code.scss
index 62147a3ba5c..f92537e5e8d 100644
--- a/src/Code/Code.scss
+++ b/src/Code/Code.scss
@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/code";
+@import "code-bootstrap";
diff --git a/src/Code/_variables.scss b/src/Code/_variables.scss
index a6790b97bad..118d2cab286 100644
--- a/src/Code/_variables.scss
+++ b/src/Code/_variables.scss
@@ -1,17 +1,17 @@
 // Code
 
-$code-font-size:                    87.5% !default;
-$code-color:                        #E83E8C !default;
+$code-font-size: var(--pgn-code-font-size) !default;
+$code-color: var(--pgn-code-color) !default;
 
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
-$nested-kbd-font-weight:      $font-weight-bold !default;
+$kbd-box-shadow: var(--pgn-code-kbd-box-shadow) !default;
+$nested-kbd-font-weight: var(--pgn-code-kbd-nested-font-weight) !default;
 
 // HTML Keyboard Input element (<kbd>) styles
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            theme-color("gray", "hover") !default;
+$kbd-padding-y: var(--pgn-code-kbd-padding-y) !default;
+$kbd-padding-x: var(--pgn-code-kbd-padding-x) !default;
+$kbd-font-size: var(--pgn-code-kbd-font-size) !default;
+$kbd-color: var(--pgn-code-kbd-color) !default;
+$kbd-bg: var(--pgn-code-kbd-bg) !default;
 
-$pre-color:                         theme-color("gray", "dark-text") !default;
-$pre-scrollable-max-height:         340px !default;
+$pre-color: var(--pgn-code-pre-color) !default;
+$pre-scrollable-max-height: var(--pgn-code-pre-scrollable-max-height) !default;
diff --git a/src/Code/code-bootstrap.scss b/src/Code/code-bootstrap.scss
new file mode 100644
index 00000000000..f01dc417954
--- /dev/null
+++ b/src/Code/code-bootstrap.scss
@@ -0,0 +1,56 @@
+code {
+  @include font-size($code-font-size);
+
+  color: $code-color;
+  word-wrap: break-word;
+
+  a > & {
+    color: inherit;
+  }
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: $kbd-padding-y $kbd-padding-x;
+
+  @include font-size($kbd-font-size);
+
+  color: $kbd-color;
+  background-color: $kbd-bg;
+
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
+
+  kbd {
+    padding: 0;
+
+    @include font-size(100%);
+
+    font-weight: $nested-kbd-font-weight;
+
+    @include box-shadow(none);
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+
+  @include font-size($code-font-size);
+
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    @include font-size(inherit);
+
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}
diff --git a/src/Collapsible/_variables.scss b/src/Collapsible/_variables.scss
index 19b10836b74..f7ae8f19b0f 100644
--- a/src/Collapsible/_variables.scss
+++ b/src/Collapsible/_variables.scss
@@ -1,12 +1,12 @@
 // Collapsible
 
-$collapsible-card-spacer-y:               .5rem !default;
-$collapsible-card-spacer-x:               .5rem !default;
-$collapsible-card-spacer-y-lg:         $card-spacer-y !default;
-$collapsible-card-spacer-x-lg:         $card-spacer-x !default;
-$collapsible-card-body-spacer-left:        .75rem !default;
-$collapsible-card-spacer-icon:             2.5rem !default;
+$collapsible-card-spacer-y: var(--pgn-collapsible-card-spacer-y-base) !default;
+$collapsible-card-spacer-x: var(--pgn-collapsible-card-spacer-x-base) !default;
+$collapsible-card-spacer-y-lg: var(--pgn-collapsible-card-spacer-y-lg) !default;
+$collapsible-card-spacer-x-lg: var(--pgn-collapsible-card-spacer-x-lg) !default;
+$collapsible-card-body-spacer-left: var(--pgn-collapsible-card-spacer-left-body) !default;
+$collapsible-card-spacer-icon: var(--pgn-collapsible-card-spacer-icon) !default;
 
-$collapsible-basic-spacer-y:               .5rem !default;
-$collapsible-basic-spacer-x:               .5rem !default;
-$collapsible-basic-spacer-icon:            .625rem !default;
+$collapsible-basic-spacer-y: var(--pgn-collapsible-card-spacer-basic-y) !default;
+$collapsible-basic-spacer-x: var(--pgn-collapsible-card-spacer-basic-x) !default;
+$collapsible-basic-spacer-icon: var(--pgn-collapsible-card-spacer-basic-icon) !default;
diff --git a/src/Container/_variables.scss b/src/Container/_variables.scss
index 64d6f892c5e..428adb0ae45 100644
--- a/src/Container/_variables.scss
+++ b/src/Container/_variables.scss
@@ -1,5 +1,5 @@
-$max-width-xs: 464px !default;
-$max-width-sm: 708px !default;
-$max-width-md: 952px !default;
-$max-width-lg: 1192px !default;
-$max-width-xl: 1440px !default;
+$max-width-xs: var(--pgn-container-max-width-xs) !default;
+$max-width-sm: var(--pgn-container-max-width-sm) !default;
+$max-width-md: var(--pgn-container-max-width-md) !default;
+$max-width-lg: var(--pgn-container-max-width-lg) !default;
+$max-width-xl: var(--pgn-container-max-width-xl) !default;
diff --git a/src/DataTable/CollapsibleButtonGroup.jsx b/src/DataTable/CollapsibleButtonGroup.jsx
index fced75f8eae..2fc6a346238 100644
--- a/src/DataTable/CollapsibleButtonGroup.jsx
+++ b/src/DataTable/CollapsibleButtonGroup.jsx
@@ -79,7 +79,7 @@ function CollapsibleButtonGroup({
             placement="bottom-end"
             isOpen={isOverflowMenuOpen}
           >
-            <div className="pgn__datatable__overflow-actions-menu">
+            <div className="pgn__data-table__overflow-actions-menu">
               <Stack gap={2}>
                 {dropdownActions.map(cloneAction)}
               </Stack>
@@ -87,7 +87,7 @@ function CollapsibleButtonGroup({
           </ModalPopup>
         </>
       )}
-      <div className="pgn__datatable__visible-actions">
+      <div className="pgn__data-table__visible-actions">
         {visibleActions.map(cloneAction)}
       </div>
     </div>
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
index 1461de33a0b..9cc7a0ad268 100644
--- a/src/DataTable/DataTable.scss
+++ b/src/DataTable/DataTable.scss
@@ -1,13 +1,4 @@
-$data-table-background-color: $white !default;
-$data-table-border: 1px solid $gray-200 !default;
-$data-table-box-shadow: $box-shadow-sm !default;
-$data-table-padding-x: .75rem !default;
-$data-table-padding-y: .75rem !default;
-$data-table-padding-small: .5rem !default;
-$data-table-cell-padding: .5rem .75rem !default;
-$data-table-footer-position: center !default;
-$data-table-pagination-dropdown-max-height: 60vh !default;
-$data-table-pagination-dropdown-min-width: 6rem !default;
+@import "variables";
 
 .pgn__data-table-wrapper {
   font-size: $font-size-sm;
@@ -34,7 +25,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default;
 .pgn__table-actions {
   display: flex;
 
-  .pgn__datatable__visible-actions {
+  .pgn__data-table__visible-actions {
     margin-inline-start: map_get($spacers, 2);
 
     .btn {
@@ -88,7 +79,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($white, .7);
+    background-color: $data-table-is-loading-bg;
     z-index: 1;
   }
 }
@@ -97,6 +88,7 @@ $data-table-pagination-dropdown-min-width: 6rem !default;
   display: flex;
   align-items: flex-start;
 
+  // TODO CSS variables cannot be used as media breakpoints
   @media (max-width: $max-width-xl) {
     overflow-x: scroll;
   }
@@ -137,12 +129,12 @@ $data-table-pagination-dropdown-min-width: 6rem !default;
 
   th {
     background-color: $light-300;
-    padding: $data-table-cell-padding;
+    padding: $data-table-head-cell-padding;
     text-align: start;
   }
 
   td {
-    padding: $table-cell-padding;
+    padding: $data-table-cell-padding;
     line-height: 24px;
     text-align: start;
   }
@@ -283,8 +275,8 @@ $data-table-pagination-dropdown-min-width: 6rem !default;
   z-index: 2;
 }
 
-.pgn__datatable__overflow-actions-menu {
-  background: #FFFFFF;
+.pgn__data-table__overflow-actions-menu {
+  background: $white;
   padding: map_get($spacers, 2);
   box-shadow: $level-1-box-shadow;
   border-radius: 4px;
diff --git a/src/DataTable/_variables.scss b/src/DataTable/_variables.scss
new file mode 100644
index 00000000000..d5d3cb07cc1
--- /dev/null
+++ b/src/DataTable/_variables.scss
@@ -0,0 +1,12 @@
+$data-table-background-color: var(--pgn-data-table-background-color) !default;
+$data-table-border: var(--pgn-data-table-border) !default;
+$data-table-box-shadow: var(--pgn-data-table-box-shadow) !default;
+$data-table-padding-x: var(--pgn-data-table-padding-x) !default;
+$data-table-padding-y: var(--pgn-data-table-padding-y) !default;
+$data-table-padding-small: var(--pgn-data-table-padding-small) !default;
+$data-table-head-cell-padding: var(--pgn-data-table-padding-head-cell) !default;
+$data-table-cell-padding: var(--pgn-data-table-padding-cell) !default;
+$data-table-footer-position: var(--pgn-data-table-footer-position) !default;
+$data-table-pagination-dropdown-max-height: var(--pgn-data-table-pagination-dropdown-max-height) !default;
+$data-table-pagination-dropdown-min-width: var(--pgn-data-table-pagination-dropdown-min-width) !default;
+$data-table-is-loading-bg: var(--pgn-data-table-background-is-loading) !default;
diff --git a/src/Dropdown/Dropdown.scss b/src/Dropdown/Dropdown.scss
index cd3091a1074..7982c3a2e22 100644
--- a/src/Dropdown/Dropdown.scss
+++ b/src/Dropdown/Dropdown.scss
@@ -38,10 +38,10 @@
 }
 
 .dropdown-toggle::after {
+  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
-  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;
diff --git a/src/Dropdown/_variables.scss b/src/Dropdown/_variables.scss
index dfc4e9316f1..3337c9807e5 100644
--- a/src/Dropdown/_variables.scss
+++ b/src/Dropdown/_variables.scss
@@ -2,32 +2,32 @@
 //
 // Dropdown menu container and contents.
 
-$dropdown-min-width:                18rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg:               theme-color("gray", "background") !default;
-$dropdown-divider-margin-y:         calc($spacer / 2) !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+$dropdown-min-width: var(--pgn-dropdown-min-width) !default;
+$dropdown-padding-x: var(--pgn-dropdown-padding-x-base) !default;
+$dropdown-padding-y: var(--pgn-dropdown-padding-y-base) !default;
+$dropdown-spacer: var(--pgn-dropdown-spacer) !default;
+$dropdown-font-size: var(--pgn-dropdown-font-size) !default;
+$dropdown-color: var(--pgn-dropdown-color-base) !default;
+$dropdown-bg: var(--pgn-dropdown-bg) !default;
+$dropdown-border-color: var(--pgn-dropdown-border-color) !default;
+$dropdown-border-radius: var(--pgn-dropdown-border-radius-base) !default;
+$dropdown-border-width: var(--pgn-dropdown-border-width) !default;
+$dropdown-inner-border-radius: var(--pgn-dropdown-border-radius-inner) !default;
+$dropdown-divider-bg: var(--pgn-dropdown-divider-bg) !default;
+$dropdown-divider-margin-y: var(--pgn-dropdown-divider-margin-y) !default;
+$dropdown-box-shadow: var(--pgn-dropdown-box-shadow) !default;
 
-$dropdown-link-color:               theme-color("gray", "dark-text") !default;
-$dropdown-link-hover-color:         darken(theme-color("gray", "dark-text"), 5%) !default;
-$dropdown-link-hover-bg:            $light-300 !default;
+$dropdown-link-color: var(--pgn-dropdown-link-color) !default;
+$dropdown-link-hover-color: var(--pgn-dropdown-link-hover-color) !default;
+$dropdown-link-hover-bg: var(--pgn-dropdown-link-hover-bg) !default;
 
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
+$dropdown-link-active-color: var(--pgn-dropdown-link-active-color) !default;
+$dropdown-link-active-bg: var(--pgn-dropdown-link-active-bg) !default;
 
-$dropdown-link-disabled-color:      theme-color("gray", "light-text") !default;
+$dropdown-link-disabled-color: var(--pgn-dropdown-link-disabled-color) !default;
 
-$dropdown-item-padding-y:           .25rem !default;
-$dropdown-item-padding-x:           1rem !default;
+$dropdown-item-padding-y: var(--pgn-dropdown-padding-y-item) !default;
+$dropdown-item-padding-x: var(--pgn-dropdown-padding-x-item) !default;
 
-$dropdown-header-color:             theme-color("gray", "light-text") !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+$dropdown-header-color: var(--pgn-dropdown-color-header) !default;
+$dropdown-header-padding: var(--pgn-dropdown-padding-header) !default;
diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss
index ee7caed6a40..41a75670048 100644
--- a/src/Dropzone/_variables.scss
+++ b/src/Dropzone/_variables.scss
@@ -1,9 +1,9 @@
-$dropzone-padding:                          1.5rem !default;
-$dropzone-border-default:                   1px dashed $gray-500 !default;
-$dropzone-border-hover:                     2px solid $info-300 !default;
-$dropzone-border-focus:                     2px solid $info-300 !default;
-$dropzone-border-active:                    2px solid $primary-500 !default;
-$dropzone-border-error:                     2px solid $danger-300 !default;
-$dropzone-error-wrapper-color:              $danger-500 !default;
-$dropzone-restriction-msg-font-size:        $x-small-font-size !default;
-$dropzone-restriction-msg-color:            $gray-500 !default;
+$dropzone-padding: var(--pgn-dropzone-padding) !default;
+$dropzone-border-default: var(--pgn-dropzone-border-default) !default;
+$dropzone-border-hover: var(--pgn-dropzone-border-hover) !default;
+$dropzone-border-focus: var(--pgn-dropzone-border-focus) !default;
+$dropzone-border-active: var(--pgn-dropzone-border-active) !default;
+$dropzone-border-error: var(--pgn-dropzone-border-error) !default;
+$dropzone-error-wrapper-color: var(--pgn-dropzone-error-wrapper-color) !default;
+$dropzone-restriction-msg-font-size: var(--pgn-dropzone-restriction-msg-font-size) !default;
+$dropzone-restriction-msg-color: var(--pgn-dropzone-restriction-msg-color) !default;
diff --git a/src/Fieldset/Fieldset.scss b/src/Fieldset/Fieldset.scss
index 5e039319ad5..d9494193698 100644
--- a/src/Fieldset/Fieldset.scss
+++ b/src/Fieldset/Fieldset.scss
@@ -1,5 +1,5 @@
 .paragon-fieldset {
-  margin-bottom: $spacer * 1.5;
+  margin-bottom: calc($spacer * 1.5);
 
   .form-control {
     height: auto;
diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss
index 6d42e7dccda..13fd452065c 100644
--- a/src/Form/_Form.scss
+++ b/src/Form/_Form.scss
@@ -1,14 +1,11 @@
 @import "variables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
+@import "bootstrap-custom-forms";
 @import "mixins";
 @import "FormText";
 @import "FormControlSet";
 
-$form-control-icon-width: 32px !default;
-$select-icon-padding: .5625rem !default;
-
 // A form input state used by the now deprecate Fieldset and asInput
 // we can remove this when they are deleted.
 .form-control.is-invalid.is-invalid-nodanger {
@@ -117,13 +114,13 @@ $select-icon-padding: .5625rem !default;
   &.pgn__form-control-decorator-leading {
     inset-inline-start: 0;
     padding-inline-start: $input-padding-x;
-    padding-inline-end: calc($input-padding-x / 2);
+    padding-inline-end: calc(#{$input-padding-x} / 2);
   }
 
   &.pgn__form-control-decorator-trailing {
     inset-inline-end: 0;
-    padding-inline-start: calc($input-padding-x / 2);
-    padding-inline-end: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
+    padding-inline-start: calc(#{$input-padding-x} / 2);
+    padding-inline-end: calc(#{$input-padding-y-sm} - calc(2 * #{$input-border-width}));
   }
 
   .pgn__form-control-decorator-group-lg & {
@@ -137,7 +134,7 @@ $select-icon-padding: .5625rem !default;
 
     &.pgn__form-control-decorator-trailing {
       padding-left: calc($input-padding-x-lg / 2);
-      padding-right: calc(#{$input-padding-y} - #{2 * $input-border-width});
+      padding-right: calc(#{$input-padding-y} - (2 * $input-border-width));
     }
   }
 
@@ -152,7 +149,7 @@ $select-icon-padding: .5625rem !default;
 
     &.pgn__form-control-decorator-trailing {
       padding-left: calc($input-padding-x-sm / 2);
-      padding-right: calc(#{$input-padding-y-sm} - #{2 * $input-border-width});
+      padding-right: calc($input-padding-y-sm - (2 * $input-border-width));
     }
   }
 
@@ -198,7 +195,7 @@ $select-icon-padding: .5625rem !default;
     // Prevent background-color from being output as "transparent"
     // Firefox doesn't handle the first animation well from transparent to
     // a color. Adding an alpha channel smooths it out.
-    background-color: rgba($input-bg, .01);
+    background-color: $form-control-floating-label-text-bg;
     white-space: nowrap;
     max-width: 75vw;
     display: block;
@@ -215,7 +212,7 @@ $select-icon-padding: .5625rem !default;
       transform: translateX(#{$form-control-icon-width});
 
       [dir="rtl"] & {
-        transform: translateX(#{-$form-control-icon-width});
+        transform: translateX(calc(-1 * #{$form-control-icon-width}));
       }
     }
   }
@@ -319,7 +316,7 @@ $select-icon-padding: .5625rem !default;
 }
 
 select.form-control {
-  padding-inline-end: 2rem + $select-icon-padding;
+  padding-inline-end: calc(#{$select-icon-padding} + 2rem);
   background-image: $custom-select-indicator;
   background-position: right $select-icon-padding center;
   background-repeat: no-repeat;
@@ -365,7 +362,9 @@ select.form-control {
   height: $custom-control-indicator-size;
   width: $custom-control-indicator-size;
   background-color: $custom-control-indicator-bg;
-  border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color;
+  border:
+    solid $custom-control-indicator-border-width
+    $custom-control-indicator-border-color;
   border-radius: $custom-checkbox-indicator-border-radius;
   margin-inline-end: $custom-control-gutter;
   background-position: center;
@@ -410,10 +409,10 @@ select.form-control {
   &:focus::before {
     content: "";
     position: absolute;
-    top: -$form-check-position-axis;
-    right: -$form-check-position-axis;
-    bottom: -$form-check-position-axis;
-    left: -$form-check-position-axis;
+    top: calc(#{$form-check-position-axis} * -1);
+    right: calc(#{$form-check-position-axis} * -1);
+    bottom: calc(#{$form-check-position-axis} * -1);
+    left: calc(#{$form-check-position-axis} * -1);
     border: $form-check-border-width solid $input-focus-border-color;
     border-radius: $form-check-focus-border-radius;
   }
diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
new file mode 100644
index 00000000000..8d86d34d2d6
--- /dev/null
+++ b/src/Form/_bootstrap-custom-forms.scss
@@ -0,0 +1,554 @@
+// Embedded icons from Open Iconic.
+// Released under MIT and copyright 2014 Waybury.
+// https://useiconic.com/open
+
+
+// Checkboxes and radios
+//
+// Base class takes care of all the key behavioral aspects.
+
+.custom-control {
+  position: relative;
+  z-index: 1;
+  display: block;
+  min-height: calc(#{$font-size-base} * #{$line-height-base});
+  padding-left: calc(#{$custom-control-gutter} + #{$custom-control-indicator-size});
+  print-color-adjust: exact; // Keep themed appearance for print
+}
+
+.custom-control-inline {
+  display: inline-flex;
+  margin-right: $custom-control-spacer-x;
+}
+
+.custom-control-input {
+  position: absolute;
+  left: 0;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
+  width: $custom-control-indicator-size;
+  height: calc((#{$font-size-base} * #{$line-height-base} + #{$custom-control-indicator-size}) * .5);
+  opacity: 0;
+
+  &:checked ~ .custom-control-label::before {
+    color: $custom-control-indicator-checked-color;
+    border-color: $custom-control-indicator-checked-border-color;
+
+    @include gradient-bg($custom-control-indicator-checked-bg);
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
+  }
+
+  &:focus ~ .custom-control-label::before {
+    // the mixin is not used here to make sure there is feedback
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
+    }
+
+    @else {
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+  }
+
+  &:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+
+  &:not(:disabled):active ~ .custom-control-label::before {
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    border-color: $custom-control-indicator-active-border-color;
+
+    @include box-shadow($custom-control-indicator-active-box-shadow);
+  }
+
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    ~ .custom-control-label {
+      color: $custom-control-label-disabled-color;
+
+      &::before {
+        background-color: $custom-control-indicator-disabled-bg;
+      }
+    }
+  }
+}
+
+// Custom control indicators
+//
+// Build the custom controls out of pseudo-elements.
+
+.custom-control-label {
+  position: relative;
+  margin-bottom: 0;
+  color: $custom-control-label-color;
+  vertical-align: top;
+  cursor: $custom-control-cursor;
+
+  // Background-color and (when enabled) gradient
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5);
+    left: -($custom-control-gutter + $custom-control-indicator-size);
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    pointer-events: none;
+    background-color: $custom-control-indicator-bg;
+    border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
+
+    @include box-shadow($custom-control-indicator-box-shadow);
+  }
+
+  // Foreground (icon)
+  &::after {
+    content: "";
+    position: absolute;
+    top: calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5);
+    left: -($custom-control-gutter + $custom-control-indicator-size);
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
+  }
+}
+
+
+// Checkboxes
+//
+// Tweak just a few things for checkboxes.
+
+.custom-checkbox {
+  .custom-control-label::before {
+    @include border-radius($custom-checkbox-indicator-border-radius);
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
+    }
+  }
+
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::before {
+      border-color: $custom-checkbox-indicator-indeterminate-border-color;
+
+      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
+      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+    }
+
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+
+    &:indeterminate ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+// Radios
+//
+// Tweak just a few things for radios.
+
+.custom-radio {
+  .custom-control-label::before {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: $custom-radio-indicator-border-radius;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-image: escape-svg($custom-radio-indicator-icon-checked);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  padding-left: calc(#{$custom-switch-width} + #{$custom-control-gutter});
+
+  .custom-control-label {
+    &::before {
+      left: calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter}));
+      width: $custom-switch-width;
+      pointer-events: all;
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: $custom-switch-indicator-border-radius;
+    }
+
+    &::after {
+      // stylelint-disable-next-line max-line-length
+      top: calc(calc((#{$font-size-base} * #{$line-height-base} - #{$custom-control-indicator-size}) * .5) + calc(#{$custom-control-indicator-border-width} * 2));
+      // stylelint-disable-next-line max-line-length
+      left: calc(calc(-1 * (#{$custom-switch-width} + #{$custom-control-gutter})) + calc(#{$custom-control-indicator-border-width} * 2));
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+      background-color: $custom-control-indicator-border-color;
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: $custom-switch-indicator-border-radius;
+
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-color: $custom-control-indicator-bg;
+      transform: translateX(calc(#{$custom-switch-width} - #{$custom-control-indicator-size}));
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+//
+
+.custom-select {
+  display: inline-block;
+  width: 100%;
+  height: $custom-select-height;
+  // stylelint-disable-next-line max-line-length
+  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  font-family: $custom-select-font-family;
+  font-weight: $custom-select-font-weight;
+  line-height: $custom-select-line-height;
+  color: $custom-select-color;
+  vertical-align: middle;
+  background: $custom-select-bg $custom-select-background;
+  border: $custom-select-border-width solid $custom-select-border-color;
+  appearance: none;
+
+  @include font-size($custom-select-font-size);
+  @include border-radius($custom-select-border-radius,0);
+  @include box-shadow($custom-select-box-shadow);
+
+  &:focus {
+    border-color: $custom-select-focus-border-color;
+    outline: 0;
+
+    @if $enable-shadows {
+      @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
+    }
+
+    @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $custom-select-focus-box-shadow;
+    }
+
+    &::-ms-value {
+      // For visual consistency with other platforms/browsers,
+      // suppress the default white text on blue background highlight given to
+      // the selected option text when the (still closed) <select> receives focus
+      // in IE and (under certain conditions) Edge.
+      // See https://github.com/twbs/bootstrap/issues/19398.
+      color: $input-color;
+      background-color: $input-bg;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    height: auto;
+    padding-right: $custom-select-padding-x;
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $custom-select-disabled-color;
+    background-color: $custom-select-disabled-bg;
+  }
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $custom-select-color;
+  }
+}
+
+.custom-select-sm {
+  height: $custom-select-height-sm;
+  padding-top: $custom-select-padding-y-sm;
+  padding-bottom: $custom-select-padding-y-sm;
+  padding-left: $custom-select-padding-x-sm;
+
+  @include font-size($custom-select-font-size-sm);
+}
+
+.custom-select-lg {
+  height: $custom-select-height-lg;
+  padding-top: $custom-select-padding-y-lg;
+  padding-bottom: $custom-select-padding-y-lg;
+  padding-left: $custom-select-padding-x-lg;
+
+  @include font-size($custom-select-font-size-lg);
+}
+
+
+// File
+//
+// Custom file input.
+
+.custom-file {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $custom-file-height;
+  margin-bottom: 0;
+}
+
+.custom-file-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: $custom-file-height;
+  margin: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  &:focus ~ .custom-file-label {
+    border-color: $custom-file-focus-border-color;
+    box-shadow: $custom-file-focus-box-shadow;
+  }
+
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .custom-file-label,
+  &:disabled ~ .custom-file-label {
+    background-color: $custom-file-disabled-bg;
+  }
+
+  @each $lang, $value in $custom-file-text {
+    &:lang(#{$lang}) ~ .custom-file-label::after {
+      content: $value;
+    }
+  }
+
+  ~ .custom-file-label[data-browse]::after {
+    content: attr(data-browse);
+  }
+}
+
+.custom-file-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: $custom-file-height;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  overflow: hidden;
+  font-family: $custom-file-font-family;
+  font-weight: $custom-file-font-weight;
+  line-height: $custom-file-line-height;
+  color: $custom-file-color;
+  background-color: $custom-file-bg;
+  border: $custom-file-border-width solid $custom-file-border-color;
+
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+
+  &::after {
+    content: "Browse";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    display: block;
+    height: $custom-file-height-inner;
+    padding: $custom-file-padding-y $custom-file-padding-x;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    border-left: inherit;
+
+    @include gradient-bg($custom-file-button-bg);
+    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+  }
+}
+
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.custom-range {
+  width: 100%;
+  height: calc($custom-range-thumb-height + calc(#{$custom-range-thumb-focus-box-shadow-width} * 2));
+  padding: 0; // Need to reset padding
+  background-color: transparent;
+  appearance: none;
+
+  &:focus {
+    outline: 0;
+
+    // Pseudo-elements must be split across multiple rulesets to have an effect.
+    // No box-shadow() mixin for focus accessibility.
+    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific
+    border: $custom-range-thumb-border;
+    appearance: none;
+
+    @include gradient-bg($custom-range-thumb-bg);
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent; // Why?
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent;
+
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-moz-range-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    border: $custom-range-thumb-border;
+    appearance: none;
+
+    @include gradient-bg($custom-range-thumb-bg);
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-moz-range-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent; // Firefox specific?
+
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: 0; // Edge specific
+    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
+    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
+    border: $custom-range-thumb-border;
+    appearance: none;
+
+    @include gradient-bg($custom-range-thumb-bg);
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-ms-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: calc(#{$custom-range-thumb-height} * .5);
+
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-fill-lower {
+    background-color: $custom-range-track-bg;
+
+    @include border-radius($custom-range-track-border-radius);
+  }
+
+  &::-ms-fill-upper {
+    margin-right: 15px; // arbitrary?
+    background-color: $custom-range-track-bg;
+
+    @include border-radius($custom-range-track-border-radius);
+  }
+
+  &:disabled {
+    &::-webkit-slider-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-webkit-slider-runnable-track {
+      cursor: default;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-moz-range-track {
+      cursor: default;
+    }
+
+    &::-ms-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+  }
+}
+
+.custom-control-label::before,
+.custom-file-label,
+.custom-select {
+  @include transition($custom-forms-transition);
+}
diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
index bce3eb1276b..97e8d0cfea0 100644
--- a/src/Form/_mixins.scss
+++ b/src/Form/_mixins.scss
@@ -3,7 +3,7 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-initial-border-width
 ) {
   padding: 0 $padding-x;
 
@@ -19,12 +19,14 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-float-border-width
 ) {
   .pgn__form-control-floating-label-text {
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform: translateY(-$padding-y) scale(.75)  translateY(-$percent-height-minus-no-bottom-leading);
+    transform:
+      translateY(calc($padding-y * -1)) scale(.75)
+      translateY(calc($percent-height-minus-no-bottom-leading * -1));
   }
 }
diff --git a/src/Form/_variables.scss b/src/Form/_variables.scss
index 8f8b6a01b97..52d4e43fa4c 100644
--- a/src/Form/_variables.scss
+++ b/src/Form/_variables.scss
@@ -1,227 +1,227 @@
-$input-padding-y:                       $input-btn-padding-y !default;
-$input-padding-x:                       $input-btn-padding-x !default;
-$input-font-family:                     $input-btn-font-family !default;
-$input-font-size:                       $input-btn-font-size !default;
-$input-font-weight:                     $font-weight-base !default;
-$input-line-height:                     $input-btn-line-height !default;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    $input-btn-font-size-sm !default;
-$input-line-height-sm:                  $input-btn-line-height-sm !default;
-
-$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
-$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-$input-font-size-lg:                    $input-btn-font-size-lg !default;
-$input-line-height-lg:                  $input-btn-line-height-lg !default;
-
-$input-bg:                              $white !default;
-$input-disabled-bg:                     theme-color("gray", "background") !default;
-
-$input-color:                           theme-color("gray", "text") !default;
-$input-border-color:                    $gray-500 !default;
-$input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
-
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-lg:                $border-radius-lg !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-
-$input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              $component-active-bg !default;
-$input-focus-color:                     $input-color !default;
-$input-focus-width:                     1px !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color:               theme-color("gray", "light-text") !default;
-$input-plaintext-color:                 $body-color !default;
-
-$input-height-border:                   $input-border-width * 2 !default;
-
-$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
-$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
-$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default;
-
-$input-height:                          calc(
-  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
-) !default;
-$input-height-sm:                       calc(
-  #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
-) !default;
-$input-height-lg:                       calc(
-  #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
-) !default;
+$input-padding-y: var(--pgn-form-input-padding-y-base) !default;
+$input-padding-x: var(--pgn-form-input-padding-x-base) !default;
+$input-font-family: var(--pgn-form-input-font-family) !default;
+$input-font-size: var(--pgn-form-input-font-size-base) !default;
+$input-font-weight: var(--pgn-form-input-font-weight) !default;
+$input-line-height: var(--pgn-form-input-line-height-base) !default;
+
+$input-padding-y-sm: var(--pgn-form-input-padding-y-sm) !default;
+$input-padding-x-sm: var(--pgn-form-input-padding-x-sm) !default;
+$input-font-size-sm: var(--pgn-form-input-font-size-sm) !default;
+$input-line-height-sm: var(--pgn-form-input-line-height-sm) !default;
+
+$input-padding-y-lg: var(--pgn-form-input-padding-y-lg) !default;
+$input-padding-x-lg: var(--pgn-form-input-padding-x-lg) !default;
+$input-font-size-lg: var(--pgn-form-input-font-size-lg) !default;
+$input-line-height-lg: var(--pgn-form-input-line-height-lg) !default;
+
+$input-bg: var(--pgn-form-input-bg-base) !default;
+$input-disabled-bg: var(--pgn-form-input-bg-disabled) !default;
+
+$input-color: var(--pgn-form-input-color-base) !default;
+$input-border-color: var(--pgn-form-input-border-color) !default;
+$input-border-width: var(--pgn-form-input-border-width) !default;
+$input-box-shadow: var(--pgn-form-input-box-shadow-base) !default;
+
+$input-border-radius: var(--pgn-form-input-border-radius-base) !default;
+$input-border-radius-lg: var(--pgn-form-input-border-radius-lg) !default;
+$input-border-radius-sm: var(--pgn-form-input-border-radius-sm) !default;
+
+$input-focus-bg: var(--pgn-form-input-focus-bg) !default;
+$input-focus-border-color: var(--pgn-form-input-focus-color-border) !default;
+$input-focus-color: var(--pgn-form-input-focus-color-base) !default;
+$input-focus-width: var(--pgn-form-input-focus-width) !default;
+$input-focus-box-shadow: var(--pgn-form-input-box-shadow-focus) !default;
+
+$input-placeholder-color: var(--pgn-form-input-color-plaintext) !default;
+$input-plaintext-color:                 var(--pgn-body-color) !default;
+
+$input-height-border: var(--pgn-form-input-border-height) !default;
 
-$input-hover-width:                     1px !default;
-$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$input-height-inner: var(--pgn-form-input-height-inner-base) !default;
+$input-height-inner-half: var(--pgn-form-input-height-inner-half) !default;
+$input-height-inner-quarter: var(--pgn-form-input-height-inner-quarter) !default;
 
-$form-text-margin-top:                  .25rem !default;
+$input-height: var(--pgn-form-input-height-base) !default;
+$input-height-sm: var(--pgn-form-input-height-sm) !default;
+$input-height-lg: var(--pgn-form-input-height-lg) !default;
+
+$input-hover-width: var(--pgn-form-input-width-hover) !default;
+$input-transition: var(--pgn-form-input-transition) !default;
+
+$form-text-margin-top: var(--pgn-form-text-margin-top) !default;
 
 $form-check-input-gutter:               1.25rem !default;
-$form-check-input-margin-y:             .3rem !default;
-$form-check-input-margin-x:             .25rem !default;
+$form-check-input-margin-y: var(--pgn-form-input-check-margin-y) !default;
+$form-check-input-margin-x: var(--pgn-form-input-check-margin-x-base) !default;
 
-$form-check-inline-margin-x:            .75rem !default;
-$form-check-inline-input-margin-x:      .3125rem !default;
+$form-check-inline-margin-x: var(--pgn-form-check-inline-margin-x) !default;
+$form-check-inline-input-margin-x: var(--pgn-form-input-check-margin-x-inline) !default;
 
-$form-check-position-axis:              .375rem !default;
-$form-check-focus-border-radius:        .0625rem !default;
-$form-check-border-width:               .125rem !default;
+$form-check-position-axis: var(--pgn-form-check-position-axis) !default;
+$form-check-focus-border-radius: var(--pgn-form-check-border-radius-focus) !default;
+$form-check-border-width: var(--pgn-form-check-border-width) !default;
 
 $form-grid-gutter-width:                10px !default;
-$form-group-margin-bottom:              1rem !default;
+$form-group-margin-bottom: var(--pgn-form-group-margin-bottom) !default;
+
+$input-group-addon-color: var(--pgn-form-input-group-addon-color-base) !default;
+$input-group-addon-bg: var(--pgn-form-input-group-addon-bg) !default;
+$input-group-addon-border-color: var(--pgn-form-input-group-addon-color-border) !default;
 
-$input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  theme-color("gray", "background") !default;
-$input-group-addon-border-color:        $input-border-color !default;
+$custom-forms-transition: var(--pgn-form-custom-transition) !default;
 
-$custom-forms-transition:               background-color .15s ease-in-out,
-  border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$custom-control-gutter: var(--pgn-form-custom-control-gutter) !default;
+$custom-control-spacer-x: var(--pgn-form-custom-control-spacer-x) !default;
+$custom-control-cursor: var(--pgn-form-custom-control-cursor) !default;
 
-$custom-control-gutter:                 .5rem !default;
-$custom-control-spacer-x:               1rem !default;
-$custom-control-cursor:                 null !default;
+$custom-control-indicator-size: var(--pgn-form-custom-control-indicator-size) !default;
+$custom-control-indicator-bg: var(--pgn-form-custom-control-indicator-bg-base) !default;
 
-$custom-control-indicator-size:         1.25rem !default;
-$custom-control-indicator-bg:           $input-bg !default;
+$custom-control-indicator-bg-size: var(--pgn-form-custom-control-indicator-bg-size) !default;
+$custom-control-indicator-box-shadow: var(--pgn-form-custom-control-indicator-box-shadow) !default;
+$custom-control-indicator-border-color: var(--pgn-form-custom-control-indicator-border-color) !default;
+$custom-control-indicator-border-width: var(--pgn-form-custom-control-indicator-border-width) !default;
 
-$custom-control-indicator-bg-size:      100% !default;
-$custom-control-indicator-box-shadow:   $input-box-shadow !default;
-$custom-control-indicator-border-color: $gray-700 !default;
-$custom-control-indicator-border-width: 2px !default;
+$custom-control-label-color: var(--pgn-form-custom-control-label-color-base) !default;
+$custom-control-indicator-disabled-bg: var(--pgn-form-custom-control-indicator-disabled-bg) !default;
+$custom-control-label-disabled-color: var(--pgn-form-custom-control-label-color-disabled) !default;
 
-$custom-control-label-color:            null !default;
-$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
-$custom-control-label-disabled-color:           theme-color("gray", "light-text") !default;
+// TODO can't use css variables due to conflict with str-replace function.
+$custom-control-indicator-checked-color: #0A3055 !default;
+$custom-control-indicator-checked-bg: #0A3055 !default;
+$custom-control-indicator-checked-disabled-bg: var(--pgn-form-custom-control-indicator-checked-bg-disabled) !default;
 
-$custom-control-indicator-checked-color:        $component-active-bg !default;
-$custom-control-indicator-checked-bg:           $component-active-bg !default;
-$custom-control-indicator-checked-disabled-bg:  rgba($primary, .5) !default;
-$custom-control-indicator-checked-box-shadow:   none !default;
-$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+// stylelint-disable-next-line max-line-length
+$custom-control-indicator-checked-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-base) !default;
 
-$custom-control-indicator-focus-box-shadow:     0 0 0 4px rgba(0, 0, 0, .1) !default;
-$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+// stylelint-disable-next-line max-line-length
+$custom-control-indicator-checked-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-base) !default;
 
-$custom-control-indicator-active-color:         $component-active-color !default;
-$custom-control-indicator-active-bg:            $component-active-bg !default;
-$custom-control-indicator-active-box-shadow:    none !default;
-$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
-$custom-checkbox-indicator-border-radius:       0 !default;
-$custom-checkbox-indicator-icon-checked:        str-replace(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='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;
+$custom-control-indicator-focus-box-shadow: var(--pgn-form-custom-control-indicator-checked-box-shadow-focus) !default;
 
-$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+// stylelint-disable-next-line max-line-length
+$custom-control-indicator-focus-border-color: var(--pgn-form-custom-control-indicator-checked-border-color-focus) !default;
+
+// TODO can't use css variable due to conflict with str-replace function.
+$custom-control-indicator-active-color: #FFFFFF !default;
+$custom-control-indicator-active-bg: var(--pgn-form-custom-control-indicator-active-bg) !default;
+$custom-control-indicator-active-box-shadow: var(--pgn-form-custom-control-indicator-active-box-shadow) !default;
+$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
+$custom-checkbox-indicator-border-radius: var(--pgn-form-custom-checkbox-indicator-border-radius) !default;
+$custom-checkbox-indicator-icon-checked: str-replace(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='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg) !default;
 $custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
 $custom-checkbox-indicator-icon-indeterminate:         str-replace(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='#{$custom-checkbox-indicator-indeterminate-color}'/></svg>"), "#", "%23") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
-$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
 
-$custom-radio-indicator-border-radius:          50% !default;
+// stylelint-disable-next-line max-line-length
+$custom-checkbox-indicator-indeterminate-box-shadow: var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow) !default;
+
+// stylelint-disable-next-line max-line-length
+$custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color) !default;
+
+$custom-radio-indicator-border-radius: var(--pgn-form-custom-radio-indicator-border-radius) !default;
 $custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
 $custom-switch-indicator-icon-off:              str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
 $custom-switch-indicator-icon-on:               str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
-$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         calc($custom-control-indicator-size / 2) !default;
-$custom-switch-indicator-size:                  calc(
-  #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}
-) !default;
+$custom-switch-width: var(--pgn-form-custom-switch-width) !default;
+$custom-switch-indicator-border-radius: var(--pgn-form-custom-switch-indicator-border-radius) !default;
+$custom-switch-indicator-size: var(--pgn-form-custom-switch-indicator-size) !default;
 $custom-switch-indicator-checked-bg:            theme-color("success") !default;
 
-$custom-select-padding-y:           $input-padding-y !default;
-$custom-select-padding-x:           $input-padding-x !default;
-$custom-select-font-family:         $input-font-family !default;
-$custom-select-font-size:           $input-font-size !default;
-$custom-select-height:              $input-height !default;
+$custom-select-padding-y: var(--pgn-form-custom-select-padding-y-base) !default;
+$custom-select-padding-x: var(--pgn-form-custom-select-padding-x-base) !default;
+$custom-select-font-family: var(--pgn-form-custom-select-font-family) !default;
+$custom-select-font-size: var(--pgn-form-custom-select-font-size-base) !default;
+$custom-select-height: var(--pgn-form-custom-select-font-height-base) !default;
 
 // Extra padding to account for the presence of the background-image based indicator
-$custom-select-indicator-padding:   1rem !default;
-$custom-select-font-weight:         $input-font-weight !default;
-$custom-select-line-height:         $input-line-height !default;
-$custom-select-color:               $input-color !default;
-$custom-select-disabled-color:      theme-color("gray", "light-text") !default;
-$custom-select-bg:                  $input-bg !default;
-$custom-select-disabled-bg:         theme-color("gray", "background") !default;
-$custom-select-bg-size:             24px 24px !default; // In pixels because image dimensions
+$custom-select-indicator-padding: var(--pgn-form-custom-select-indicator-padding) !default;
+$custom-select-font-weight: var(--pgn-form-custom-select-font-weight) !default;
+$custom-select-line-height: var(--pgn-form-custom-select-line-height) !default;
+$custom-select-color: var(--pgn-form-custom-select-color-base) !default;
+$custom-select-disabled-color: var(--pgn-form-custom-select-color-disabled) !default;
+$custom-select-bg: var(--pgn-form-custom-select-bg-base) !default;
+$custom-select-disabled-bg: var(--pgn-form-custom-select-bg-disabled) !default;
+$custom-select-bg-size: var(--pgn-form-custom-select-bg-size) !default;
 $custom-select-indicator-color:     theme-color("gray", "hover") !default;
 
 $custom-select-indicator:           str-replace(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="#{$custom-select-indicator-color}"/></svg>'), "#", "%23") !default;
 
 // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-background:          $custom-select-indicator no-repeat right
-  $input-padding-y center / $custom-select-bg-size !default;
-
-$custom-select-feedback-icon-padding-right: calc(
-  (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}
-) !default;
-$custom-select-feedback-icon-position:      center right
-  ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
-
-$custom-select-border-width:        $input-border-width !default;
-$custom-select-border-color:        $input-border-color !default;
-$custom-select-border-radius:       $border-radius !default;
-$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
-
-$custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-width:         $input-focus-width !default;
-$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow !default;
-
-$custom-select-padding-y-sm:        $input-padding-y-sm !default;
-$custom-select-padding-x-sm:        $input-padding-x-sm !default;
-$custom-select-font-size-sm:        $input-font-size-sm !default;
-$custom-select-height-sm:           $input-height-sm !default;
-
-$custom-select-padding-y-lg:        $input-padding-y-lg !default;
-$custom-select-padding-x-lg:        $input-padding-x-lg !default;
-$custom-select-font-size-lg:        $input-font-size-lg !default;
-$custom-select-height-lg:           $input-height-lg !default;
-
-$custom-range-track-width:          100% !default;
-$custom-range-track-height:         .5rem !default;
-$custom-range-track-cursor:         pointer !default;
-$custom-range-track-bg:             theme-color("gray", "graphic") !default;
-$custom-range-track-border-radius:  1rem !default;
-$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
-
-$custom-range-thumb-width:                   1rem !default;
-$custom-range-thumb-height:                  $custom-range-thumb-width !default;
-$custom-range-thumb-bg:                      $component-active-bg !default;
-$custom-range-thumb-border:                  0 !default;
-$custom-range-thumb-border-radius:           1rem !default;
-$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
-$custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;
-
-$custom-file-height:                $input-height !default;
-$custom-file-height-inner:          $input-height-inner !default;
-$custom-file-focus-border-color:    $input-focus-border-color !default;
-$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
-$custom-file-disabled-bg:           $input-disabled-bg !default;
-
-$custom-file-padding-y:             $input-padding-y !default;
-$custom-file-padding-x:             $input-padding-x !default;
-$custom-file-line-height:           $input-line-height !default;
-$custom-file-font-family:           $input-font-family !default;
-$custom-file-font-weight:           $input-font-weight !default;
-$custom-file-color:                 $input-color !default;
-$custom-file-bg:                    $input-bg !default;
-$custom-file-border-width:          $input-border-width !default;
-$custom-file-border-color:          $input-border-color !default;
-$custom-file-border-radius:         $input-border-radius !default;
-$custom-file-box-shadow:            $input-box-shadow !default;
-$custom-file-button-color:          $custom-file-color !default;
-$custom-file-button-bg:             $input-group-addon-bg !default;
+  var(--pgn-form-input-padding-y-base) center / var(--pgn-form-custom-select-bg-size) !default;
+
+$custom-select-feedback-icon-padding-right: var(--pgn-form-custom-select-feedback-icon-padding-right) !default;
+$custom-select-feedback-icon-position: var(--pgn-form-custom-select-feedback-icon-position) !default;
+$custom-select-feedback-icon-size: var(--pgn-form-custom-select-feedback-icon-size) !default;
+
+$custom-select-border-width: var(--pgn-form-custom-select-border-width-base) !default;
+$custom-select-border-color: var(--pgn-form-custom-select-border-color-base) !default;
+$custom-select-border-radius: var(--pgn-form-custom-select-border-radius) !default;
+$custom-select-box-shadow: var(--pgn-form-custom-select-border-box-shadow-base) !default;
+
+$custom-select-focus-border-color: var(--pgn-form-custom-select-border-color-focus) !default;
+$custom-select-focus-width: var(--pgn-form-custom-select-border-width-focus) !default;
+$custom-select-focus-box-shadow: var(--pgn-form-custom-select-border-box-shadow-focus) !default;
+
+$custom-select-padding-y-sm: var(--pgn-form-custom-select-padding-y-sm) !default;
+$custom-select-padding-x-sm: var(--pgn-form-custom-select-padding-x-sm) !default;
+$custom-select-font-size-sm: var(--pgn-form-custom-select-font-size-sm) !default;
+$custom-select-height-sm: var(--pgn-form-custom-select-height-sm) !default;
+
+$custom-select-padding-y-lg: var(--pgn-form-custom-select-padding-y-lg) !default;
+$custom-select-padding-x-lg: var(--pgn-form-custom-select-padding-x-lg) !default;
+$custom-select-font-size-lg: var(--pgn-form-custom-select-font-size-lg) !default;
+$custom-select-height-lg: var(--pgn-form-custom-select-font-height-lg) !default;
+
+$custom-range-track-width: var(--pgn-form-custom-range-track-width) !default;
+$custom-range-track-height: var(--pgn-form-custom-range-track-height) !default;
+$custom-range-track-cursor: var(--pgn-form-custom-range-track-cursor) !default;
+$custom-range-track-bg: var(--pgn-form-custom-range-track-bg) !default;
+$custom-range-track-border-radius: var(--pgn-form-custom-range-track-border-radius) !default;
+$custom-range-track-box-shadow: var(--pgn-form-custom-range-track-box-shadow) !default;
+
+$custom-range-thumb-width: var(--pgn-form-custom-range-thumb-width) !default;
+$custom-range-thumb-height: var(--pgn-form-custom-range-thumb-height) !default;
+$custom-range-thumb-bg: var(--pgn-form-custom-range-thumb-bg-base) !default;
+$custom-range-thumb-border: var(--pgn-form-custom-range-thumb-border-base) !default;
+$custom-range-thumb-border-radius: var(--pgn-form-custom-range-thumb-border-radius) !default;
+$custom-range-thumb-box-shadow: var(--pgn-form-custom-range-thumb-box-shadow-base) !default;
+$custom-range-thumb-focus-box-shadow: var(--pgn-form-custom-range-thumb-box-shadow-focus-base) !default;
+$custom-range-thumb-focus-box-shadow-width: var(--pgn-form-custom-range-thumb-box-shadow-focus-width) !default;
+$custom-range-thumb-active-bg: var(--pgn-form-custom-range-thumb-bg-active) !default;
+$custom-range-thumb-disabled-bg: var(--pgn-form-custom-range-thumb-bg-disabled) !default;
+
+$custom-file-height: var(--pgn-form-custom-file-height-base) !default;
+$custom-file-height-inner: var(--pgn-form-custom-file-height-inner) !default;
+$custom-file-focus-border-color: var(--pgn-form-custom-file-border-color-focus) !default;
+$custom-file-focus-box-shadow: var(--pgn-form-custom-file-box-shadow-focus) !default;
+$custom-file-disabled-bg: var(--pgn-form-custom-file-bg-disabled) !default;
+
+$custom-file-padding-y: var(--pgn-form-custom-file-padding-y) !default;
+$custom-file-padding-x: var(--pgn-form-custom-file-padding-x) !default;
+$custom-file-line-height: var(--pgn-form-custom-file-line-height) !default;
+$custom-file-font-family: var(--pgn-form-custom-file-font-family) !default;
+$custom-file-font-weight: var(--pgn-form-custom-file-font-weight) !default;
+$custom-file-color: var(--pgn-form-custom-file-color) !default;
+$custom-file-bg: var(--pgn-form-custom-file-bg-base) !default;
+$custom-file-border-width: var(--pgn-form-custom-file-border-width) !default;
+$custom-file-border-color: var(--pgn-form-custom-file-border-color-base) !default;
+$custom-file-border-radius: var(--pgn-form-custom-file-border-color-radius) !default;
+$custom-file-box-shadow: var(--pgn-form-custom-file-box-shadow-base) !default;
+$custom-file-button-color: var(--pgn-form-custom-file-button-color) !default;
+$custom-file-button-bg: var(--pgn-form-custom-file-button-bg) !default;
 $custom-file-text: (
   en: "Browse"
 ) !default;
 
 // Form validation
 
-$form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-margin-top: var(--pgn-form-feedback-margin-top) !default;
+$form-feedback-font-size: var(--pgn-form-feedback-font-size) !default;
 $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
@@ -247,15 +247,19 @@ $form-validation-states: map-merge(
 );
 
 // Form tooltips must come after regular tooltips
-$form-feedback-tooltip-padding-y:     .25rem !default;
-$form-feedback-tooltip-padding-x:     .5rem !default;
-$form-feedback-tooltip-font-size:     $font-size-sm !default;
-$form-feedback-tooltip-line-height:   $line-height-base !default;
-$form-feedback-tooltip-opacity:       .9 !default;
-$form-feedback-tooltip-border-radius: $border-radius !default;
+$form-feedback-tooltip-padding-y: var(--pgn-form-feedback-tooltip-padding-y) !default;
+$form-feedback-tooltip-padding-x: var(--pgn-form-feedback-tooltip-padding-x) !default;
+$form-feedback-tooltip-font-size: var(--pgn-form-feedback-tooltip-font-size) !default;
+$form-feedback-tooltip-line-height: var(--pgn-form-feedback-tooltip-line-height) !default;
+$form-feedback-tooltip-opacity: var(--pgn-form-feedback-tooltip-opacity) !default;
+$form-feedback-tooltip-border-radius: var(--pgn-form-feedback-tooltip-border-radius) !default;
+
+$form-control-icon-width: var(--pgn-form-control-icon-width) !default;
+$select-icon-padding: var(--pgn-form-select-icon-padding) !default;
 
 $form-autosuggest-icon-width: 2.4rem;
 $form-autosuggest-icon-height: $form-autosuggest-icon-width;
 $form-autosuggest-spinner-width: 1.25rem;
 $form-autosuggest-spinner-height: $form-autosuggest-spinner-width;
 $form-autosuggest-border-width: .125rem;
+$form-control-floating-label-text-bg: var(--pgn-form-custom-control-label-floating-text) !default;
diff --git a/src/Icon/_variables.scss b/src/Icon/_variables.scss
index fb5072cf108..1e0cbac0848 100644
--- a/src/Icon/_variables.scss
+++ b/src/Icon/_variables.scss
@@ -1,6 +1,6 @@
 // Icons sizes
 
-$icon-inline: .8em !default;
-$icon-sm: 1.25rem !default;
-$icon-md: 1.5rem !default;
-$icon-lg: 1.75rem !default;
+$icon-inline: var(--pgn-icon-inline) !default;
+$icon-sm: var(--pgn-icon-sm) !default;
+$icon-md: var(--pgn-icon-md) !default;
+$icon-lg: var(--pgn-icon-lg) !default;
diff --git a/src/IconButton/IconButton.scss b/src/IconButton/IconButton.scss
index 3843925ed6c..d6e920c97cd 100644
--- a/src/IconButton/IconButton.scss
+++ b/src/IconButton/IconButton.scss
@@ -1,20 +1,4 @@
-$icon-button-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "brand": $brand,
-  "success": $success,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "dark": $dark,
-  "black": $black,
-) !default;
-$btn-icon-diameter-md: 2.75rem !default;
-$btn-icon-diameter-sm: 2.25rem !default;
-$btn-icon-diameter-inline: calc(#{$line-height-base}em + .1em) !default;
-
-$btn-icon-bg: transparent !default;
-$btn-icon-accent-color: white !default;
+@import "variables";
 
 @mixin btn-icon-size($icon-size) {
   width: $icon-size;
diff --git a/src/IconButton/_variables.scss b/src/IconButton/_variables.scss
new file mode 100644
index 00000000000..8f2b205e823
--- /dev/null
+++ b/src/IconButton/_variables.scss
@@ -0,0 +1,17 @@
+$icon-button-colors: (
+  "primary": var(--pgn-color-primary-base),
+  "secondary": var(--pgn-color-secondary-base),
+  "brand": var(--pgn-color-brand-base),
+  "success": var(--pgn-color-success-base),
+  "warning": var(--pgn-color-warning-base),
+  "danger": var(--pgn-color-danger-base),
+  "light": var(--pgn-color-light-base),
+  "dark": var(--pgn-color-dark-base),
+  "black": var(--pgn-color-black),
+) !default;
+$btn-icon-diameter-md: var(--pgn-icon-button-diameter-md) !default;
+$btn-icon-diameter-sm: var(--pgn-icon-button-diameter-sm) !default;
+$btn-icon-diameter-inline: var(--pgn-icon-button-diameter-inline) !default;
+
+$btn-icon-bg: var(--pgn-icon-button-bg) !default;
+$btn-icon-accent-color: var(--pgn-icon-button-accent-color) !default;
diff --git a/src/Image/_variables.scss b/src/Image/_variables.scss
index 9de79353004..7fd6b14ada8 100644
--- a/src/Image/_variables.scss
+++ b/src/Image/_variables.scss
@@ -1,13 +1,13 @@
 // Image thumbnails
 
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            theme-color("gray", "border") !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+$thumbnail-padding: var(--pgn-image-thumbnail-padding) !default;
+$thumbnail-bg: var(--pgn-image-thumbnail-bg) !default;
+$thumbnail-border-width: var(--pgn-image-thumbnail-border-width) !default;
+$thumbnail-border-color: var(--pgn-image-thumbnail-border-color) !default;
+$thumbnail-border-radius: var(--pgn-image-thumbnail-border-radius) !default;
+$thumbnail-box-shadow: var(--pgn-image-thumbnail-box-shadow) !default;
 
 // Figures
 
-$figure-caption-font-size:          90% !default;
-$figure-caption-color:              theme-color("gray", "light-text") !default;
+$figure-caption-font-size: var(--pgn-image-figure-caption-font-size) !default;
+$figure-caption-color: var(--pgn-image-figure-caption-color) !default;
diff --git a/src/Menu/Menu.scss b/src/Menu/Menu.scss
index 57da20ed96e..3b6ac0f8f73 100644
--- a/src/Menu/Menu.scss
+++ b/src/Menu/Menu.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__menu-item {
   display: flex;
   align-items: center;
@@ -20,7 +22,6 @@
   font-size: $btn-font-size;
   height: 48px;
   border-radius: 0;
-  $hover-border: transparent;
 
   .pgn__menu-item-content-spacer {
     flex-grow: 1;
@@ -39,11 +40,6 @@
     opacity: $btn-disabled-opacity;
   }
 
-  $background: $btn-tertiary-bg;
-  $border: transparent;
-  $active-background: $btn-tertiary-active-bg;
-  $active-border: transparent;
-
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
diff --git a/src/Menu/_variables.scss b/src/Menu/_variables.scss
new file mode 100644
index 00000000000..800162c5c39
--- /dev/null
+++ b/src/Menu/_variables.scss
@@ -0,0 +1,5 @@
+$background: $btn-tertiary-bg;
+$border: var(--pgn-menu-border-base) !default;
+$active-background: var(--pgn-menu-background-active) !default;
+$active-border: var(--pgn-menu-border-active) !default;
+$hover-border: var(--pgn-menu-border-hover) !default;
diff --git a/src/Modal/Modal.scss b/src/Modal/Modal.scss
index 6d8aae5209d..e08ba3daeec 100644
--- a/src/Modal/Modal.scss
+++ b/src/Modal/Modal.scss
@@ -129,7 +129,7 @@
   }
 
   &::before {
-    border-top-color: rgba($black, 20%);
+    border-top-color: rgba(0, 0, 0, .2);
   }
 }
 
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index b1f6b7e2136..bf0a5530bdd 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -129,21 +129,24 @@
 
 .pgn__modal-body {
   flex-grow: 1;
-  padding: $modal-inner-padding $modal-inner-padding calc(#{$modal-inner-padding} / 2);
+  padding:
+    $modal-inner-padding
+    $modal-inner-padding calc(#{$modal-inner-padding} / 2);
   overflow: auto;
   position: relative;
 
   &::before {
     content: "";
     background-color: transparent;
+    // TODO needs a decision
     background-image: linear-gradient(#605C5C, #B8BEBE, transparent 50%);
     display: block;
     height: 20px;
     position: sticky;
-    top: -$modal-inner-padding;
-    margin-top: -$modal-inner-padding;
-    margin-left: -$modal-inner-padding;
-    margin-right: -$modal-inner-padding;
+    top: calc($modal-inner-padding * -1);
+    margin-top: calc($modal-inner-padding * -1);
+    margin-left: calc($modal-inner-padding * -1);
+    margin-right: calc($modal-inner-padding * -1);
     opacity: .5;
     z-index: 2;
   }
@@ -151,6 +154,7 @@
   &::after {
     content: "";
     background-color: transparent;
+    // TODO needs a decision
     background-image:
       linear-gradient(
         360deg,
@@ -162,9 +166,9 @@
     height: 20px;
     position: sticky;
     bottom: calc(#{$modal-inner-padding} / 2 * -1);
-    margin-bottom: -$modal-inner-padding-bottom;
-    margin-left: -$modal-inner-padding;
-    margin-right: -$modal-inner-padding;
+    margin-bottom: calc($modal-inner-padding-bottom * -1);
+    margin-left: calc($modal-inner-padding * -1);
+    margin-right: calc($modal-inner-padding * -1);
     opacity: .5;
   }
 
diff --git a/src/Modal/_variables.scss b/src/Modal/_variables.scss
index 65637fdc79f..7e1725ca360 100644
--- a/src/Modal/_variables.scss
+++ b/src/Modal/_variables.scss
@@ -1,50 +1,56 @@
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding:               1.5rem !default;
-$modal-inner-padding-bottom:        .7rem !default;
+$modal-inner-padding: var(--pgn-modal-inner-padding-base) !default;
+$modal-inner-padding-bottom: var(--pgn-modal-inner-padding-bottom) !default;
 
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+// TODO can't use css variables due to conflict with SCSS functions
+// Margin between elements in footer, must be lower than or equal to 2 * var(--pgn-modal-inner-padding-base)
 $modal-footer-margin-between:       .5rem !default;
 
+// TODO can't use css variables due to conflict with SCSS functions
 $modal-dialog-margin:               1.5rem !default;
+// TODO can't use css variables due to conflict with SCSS functions
 $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        0 !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up:    0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            1rem !default;
-$modal-header-padding-x:            1.5rem !default;
+$modal-title-line-height: var(--pgn-modal-title-line-height) !default;
+
+$modal-content-color: var(--pgn-modal-content-color) !default;
+$modal-content-bg: var(--pgn-modal-content-bg) !default;
+$modal-content-border-color: var(--pgn-modal-content-border-color) !default;
+$modal-content-border-width: var(--pgn-modal-content-border-width) !default;
+$modal-content-border-radius: var(--pgn-modal-content-border-radius) !default;
+
+// stylelint-disable-next-line max-line-length
+$modal-content-inner-border-radius: calc(#{var(--pgn-modal-content-border-radius)} - #{var(--pgn-modal-content-border-width)}) !default;
+$modal-content-box-shadow-xs: var(--pgn-modal-content-box-shadow-xs) !default;
+$modal-content-box-shadow-sm-up: var(--pgn-modal-content-box-shadow-sm-up) !default;
+
+$modal-backdrop-bg: var(--pgn-modal-backdrop-bg) !default;
+$modal-backdrop-opacity: var(--pgn-modal-backdrop-opacity) !default;
+$modal-header-border-color: var(--pgn-modal-header-border-color) !default;
+$modal-footer-border-color: var(--pgn-modal-footer-border-color) !default;
+$modal-header-border-width: var(--pgn-modal-header-border-width) !default;
+$modal-footer-border-width: var(--pgn-modal-footer-border-width) !default;
+$modal-header-padding-y: var(--pgn-modal-header-padding-y) !default;
+$modal-header-padding-x: var(--pgn-modal-header-padding-x) !default;
 $modal-close-container-top:         .625rem !default;
 
+
 // Keep this for backwards compatibility
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default;
-$modal-footer-padding-y:            1rem !default;
-$modal-footer-padding-x:            1.5rem !default;
+$modal-header-padding: var(--pgn-modal-header-padding-base) !default;
+$modal-footer-padding-y: var(--pgn-modal-footer-padding-y) !default;
+$modal-footer-padding-x: var(--pgn-modal-footer-padding-x) !default;
 
 // Keep this for backwards compatibility
-$modal-footer-padding:              $modal-footer-padding-y $modal-footer-padding-x !default;
+$modal-footer-padding: var(--pgn-modal-footer-padding-base) !default;
 
-$modal-xl:                          1140px !default;
-$modal-lg:                          800px !default;
-$modal-md:                          500px !default;
-$modal-sm:                          400px !default;
+$modal-xl: var(--pgn-modal-xl) !default;
+$modal-lg: var(--pgn-modal-lg) !default;
+$modal-md: var(--pgn-modal-md) !default;
+$modal-sm: var(--pgn-modal-sm) !default;
 
-$modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              none !default;
-$modal-transition:                  transform .3s ease-out !default;
-$modal-scale-transform:             scale(1.02) !default;
+$modal-fade-transform: var(--pgn-modal-transform-fade) !default;
+$modal-show-transform: var(--pgn-modal-transform-show) !default;
+$modal-transition: var(--pgn-modal-transform-base) !default;
+$modal-scale-transform: var(--pgn-modal-transform-scale) !default;
diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss
index 48b8e6680eb..a90f6ce3b03 100644
--- a/src/Nav/Nav.scss
+++ b/src/Nav/Nav.scss
@@ -41,7 +41,7 @@
   border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   .nav-link {
-    margin-bottom: -$nav-tabs-border-width;
+    margin-bottom: calc($nav-tabs-border-width * -1);
     border-top: $nav-tabs-border-width solid transparent;
     border-bottom: $nav-tabs-border-width solid transparent;
     border-left: none;
@@ -70,7 +70,7 @@
 
   .dropdown-menu {
     // Make dropdown border overlap tab border
-    margin-top: -$nav-tabs-border-width;
+    margin-top: calc($nav-tabs-border-width * -1);
 
     // Remove the top rounded corners here since there is a hard edge above the menu
     @include border-top-radius(0);
diff --git a/src/Nav/_variables.scss b/src/Nav/_variables.scss
index 668909b664a..24370fc5e1d 100644
--- a/src/Nav/_variables.scss
+++ b/src/Nav/_variables.scss
@@ -1,23 +1,23 @@
 // Navs
 
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-color:                    $gray-700 !default;
-$nav-link-disabled-color:           $gray-300 !default;
-$nav-link-font-weight:              500 !default;
+$nav-link-padding-y: var(--pgn-nav-link-padding-y) !default;
+$nav-link-padding-x: var(--pgn-nav-link-padding-x) !default;
+$nav-link-color: var(--pgn-nav-link-color-base) !default;
+$nav-link-disabled-color: var(--pgn-nav-link-color-disabled) !default;
+$nav-link-font-weight: var(--pgn-nav-link-font-weight) !default;
 
-$nav-tabs-border-color:             $light-400 !default;
-$nav-tabs-border-width:             2px !default;
-$nav-tabs-border-radius:            0 !default;
-$nav-tabs-link-hover-border-color:  transparent transparent $nav-tabs-border-color !default;
-$nav-tabs-link-hover-bg:            $light-400 !default;
-$nav-tabs-link-active-color:        $primary-500 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: transparent transparent $primary-500 !default;
+$nav-tabs-border-color: var(--pgn-nav-tabs-border-color) !default;
+$nav-tabs-border-width: var(--pgn-nav-tabs-border-width) !default;
+$nav-tabs-border-radius: var(--pgn-nav-tabs-border-radius) !default;
+$nav-tabs-link-hover-border-color: var(--pgn-nav-tabs-link-hover-border-color) !default;
+$nav-tabs-link-hover-bg: var(--pgn-nav-tabs-link-hover-bg) !default;
+$nav-tabs-link-active-color: var(--pgn-nav-tabs-link-active-color-base) !default;
+$nav-tabs-link-active-bg: var(--pgn-nav-tabs-link-active-bg) !default;
+$nav-tabs-link-active-border-color: var(--pgn-nav-tabs-link-active-color-border) !default;
 
-$nav-pills-border-radius:           $border-radius !default;
-$nav-pills-link-active-color:       $component-active-color !default;
-$nav-pills-link-active-bg:          $component-active-bg !default;
+$nav-pills-border-radius: var(--pgn-nav-pills-border-radius) !default;
+$nav-pills-link-active-color: var(--pgn-nav-pills-link-link-active-color) !default;
+$nav-pills-link-active-bg: var(--pgn-nav-pills-link-link-active-bg) !default;
 
-$nav-divider-color:                 theme-color("gray", "background") !default;
-$nav-divider-margin-y:              calc($spacer / 2) !default;
+$nav-divider-color: var(--pgn-nav-divider-color) !default;
+$nav-divider-margin-y: var(--pgn-nav-divider-margin-y) !default;
diff --git a/src/Navbar/_variables.scss b/src/Navbar/_variables.scss
index ad0fd8830a7..82ab8b243cb 100644
--- a/src/Navbar/_variables.scss
+++ b/src/Navbar/_variables.scss
@@ -1,40 +1,40 @@
 // Navbar
 
-$navbar-padding-y:                  calc($spacer / 2) !default;
-$navbar-padding-x:                  $spacer !default;
+$navbar-padding-y: var(--pgn-navbar-padding-y) !default;
+$navbar-padding-x: var(--pgn-navbar-padding-x-base) !default;
 
-$navbar-nav-link-padding-x:         .5rem !default;
+$navbar-nav-link-padding-x: var(--pgn-navbar-padding-x-nav-link) !default;
 
-$navbar-brand-font-size:            $font-size-lg !default;
+$navbar-brand-font-size: var(--pgn-navbar-brand-font-size) !default;
 
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-// The default for $nav-link-padding-y is .5rem. Copied here for modularization
-$nav-link-height:                   $font-size-base * $line-height-base + .5rem * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2) !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-
-$navbar-nav-scroll-max-height:      75vh !default;
-
-$navbar-dark-color:                 rgba($white, .5) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                rgba($black, .5) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+// The default for var(--pgn-nav-link-padding-y) is .5rem. Copied here for modularization
+$nav-link-height: var(--pgn-navbar-nav-link-height) !default;
+$navbar-brand-height: var(--pgn-navbar-brand-height) !default;
+$navbar-brand-padding-y: var(--pgn-navbar-brand-padding-y) !default;
+
+$navbar-toggler-padding-y: var(--pgn-navbar-toggler-padding-y) !default;
+$navbar-toggler-padding-x: var(--pgn-navbar-toggler-padding-x) !default;
+$navbar-toggler-font-size: var(--pgn-navbar-toggler-font-size) !default;
+$navbar-toggler-border-radius: var(--pgn-navbar-toggler-border-radius) !default;
+
+$navbar-nav-scroll-max-height: var(--pgn-navbar-nav-scroll-max-height) !default;
+
+$navbar-dark-color: var(--pgn-nav-color-dark) !default;
+$navbar-dark-hover-color: var(--pgn-navbar-dark-color-hover) !default;
+$navbar-dark-active-color: var(--pgn-navbar-dark-color-active) !default;
+$navbar-dark-disabled-color: var(--pgn-navbar-dark-color-disabled) !default;
+$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-dark-toggler-border-color: var(--pgn-navbar-dark-toggler-border-color) !default;
+
+$navbar-light-color: var(--pgn-nav-color-light) !default;
+$navbar-light-hover-color: var(--pgn-navbar-light-color-hover) !default;
+$navbar-light-active-color: var(--pgn-navbar-light-color-active) !default;
+$navbar-light-disabled-color: var(--pgn-navbar-light-color-disabled) !default;
+$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-light-toggler-border-color: var(--pgn-navbar-light-toggler-border-color) !default;
+
+$navbar-light-brand-color: var(--pgn-navbar-light-brand-color-base) !default;
+$navbar-light-brand-hover-color: var(--pgn-navbar-light-brand-color-hover) !default;
+$navbar-dark-brand-color: var(--pgn-navbar-dark-brand-color-base) !default;
+$navbar-dark-brand-hover-color: var(--pgn-navbar-dark-brand-color-hover) !default;
diff --git a/src/PageBanner/PageBanner.scss b/src/PageBanner/PageBanner.scss
index 229dbda334a..8abfddbd7fb 100644
--- a/src/PageBanner/PageBanner.scss
+++ b/src/PageBanner/PageBanner.scss
@@ -14,30 +14,30 @@
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__dark {
   background-color: $dark-500;
-  color: white;
+  color: $white;
 }
 
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__light {
   background-color: $light-400;
-  color: black;
+  color: $black;
 }
 
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__accentA {
   background-color: $accent-a;
-  color: black;
+  color: $black;
 }
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__accentB {
   background-color: $accent-b;
-  color: black;
+  color: $black;
 }
 
 // stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__warning {
   background-color: $warning-100;
-  color: black;
+  color: $black;
 }
 
 // stylelint-disable-next-line selector-class-pattern
diff --git a/src/Pagination/Pagination.scss b/src/Pagination/Pagination.scss
index d1f634d917c..1dce76af022 100644
--- a/src/Pagination/Pagination.scss
+++ b/src/Pagination/Pagination.scss
@@ -70,7 +70,12 @@
   &.btn-primary:focus::before {
     border: $pagination-focus-border-width solid $pagination-focus-color;
 
-    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+    @include button-size(
+      $btn-padding-y,
+      $btn-padding-x,
+      $btn-font-size,
+      $btn-line-height,
+      $btn-border-radius);
   }
 
   div {
diff --git a/src/Pagination/_variables.scss b/src/Pagination/_variables.scss
index 1fc4c09c413..a1b743d3138 100644
--- a/src/Pagination/_variables.scss
+++ b/src/Pagination/_variables.scss
@@ -1,52 +1,52 @@
 // Pagination
 
-$pagination-padding-y:              .625rem !default;
-$pagination-padding-x:              1rem !default;
-$pagination-padding-y-sm:           .8rem !default;
-$pagination-padding-x-sm:           .6rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-$pagination-margin-x:               .5rem !default;
-$pagination-margin-y:               .5rem !default;
-$pagination-line-height:            1.5rem !default;
-$pagination-font-size-sm:           .875rem !default;
-
-$pagination-icon-size:              1.375rem !default;
-$pagination-icon-size-sm:           1rem !default;
-$pagination-icon-width:             2.25rem !default;
-$pagination-icon-height:            2.25rem !default;
-$pagination-padding-icon:           .5rem !default;
-$pagination-toggle-border:          .3125rem !default;
-$pagination-toggle-border-sm:       .25rem !default;
-$pagination-secondary-height:       2.75rem !default;
-$pagination-secondary-height-sm:    2.25rem !default;
-
-$pagination-color:                  $link-color !default;
-$pagination-color-inverse:          $white !default;
-$pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
-$pagination-border-color:           theme-color("gray", "border") !default;
-
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-$pagination-focus-border-width:     .125rem !default;
-$pagination-focus-color:            $primary-500 !default;
-$pagination-focus-color-text:       $black !default;
-
-$pagination-hover-color:            $link-hover-color !default;
-$pagination-hover-bg:               theme-color("gray", "background") !default;
-$pagination-hover-border-color:     theme-color("gray", "border") !default;
-
-$pagination-active-color:           $component-active-color !default;
-$pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
-
-$pagination-disabled-color:         theme-color("gray", "light-text") !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  theme-color("gray", "disabled-border") !default;
-
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
-
-$pagination-reduced-dropdown-max-height: 60vh !default;
-$pagination-reduced-dropdown-min-width: 6rem !default;
+$pagination-padding-y: var(--pgn-pagination-padding-y-base) !default;
+$pagination-padding-x: var(--pgn-pagination-padding-x-base) !default;
+$pagination-padding-y-sm: var(--pgn-pagination-padding-y-sm) !default;
+$pagination-padding-x-sm: var(--pgn-pagination-padding-x-sm) !default;
+$pagination-padding-y-lg: var(--pgn-pagination-padding-y-lg) !default;
+$pagination-padding-x-lg: var(--pgn-pagination-padding-x-lg) !default;
+$pagination-margin-x: var(--pgn-pagination-margin-x) !default;
+$pagination-margin-y: var(--pgn-pagination-margin-y) !default;
+$pagination-line-height: var(--pgn-pagination-line-height) !default;
+$pagination-font-size-sm: var(--pgn-pagination-font-size-sm) !default;
+
+$pagination-icon-size: var(--pgn-pagination-icon-size-base) !default;
+$pagination-icon-size-sm: var(--pgn-pagination-icon-size-sm) !default;
+$pagination-icon-width: var(--pgn-pagination-icon-width) !default;
+$pagination-icon-height: var(--pgn-pagination-icon-height) !default;
+$pagination-padding-icon: var(--pgn-pagination-padding-icon) !default;
+$pagination-toggle-border: var(--pgn-pagination-toggle-border-base) !default;
+$pagination-toggle-border-sm: var(--pgn-pagination-toggle-border-sm) !default;
+$pagination-secondary-height: var(--pgn-pagination-secondary-height-base) !default;
+$pagination-secondary-height-sm: var(--pgn-pagination-secondary-height-sm) !default;
+
+$pagination-color: var(--pgn-pagination-color-base) !default;
+$pagination-color-inverse: var(--pgn-pagination-color-inverse) !default;
+$pagination-bg: var(--pgn-pagination-bg-base) !default;
+$pagination-border-width: var(--pgn-pagination-border-width) !default;
+$pagination-border-color: var(--pgn-pagination-border-color-base) !default;
+
+$pagination-focus-box-shadow: var(--pgn-pagination-focus-box-shadow) !default;
+$pagination-focus-outline: var(--pgn-pagination-focus-outline) !default;
+$pagination-focus-border-width: var(--pgn-pagination-focus-border-width) !default;
+$pagination-focus-color: var(--pgn-pagination-focus-color-base) !default;
+$pagination-focus-color-text: var(--pgn-pagination-focus-color-text) !default;
+
+$pagination-hover-color: var(--pgn-pagination-color-hover) !default;
+$pagination-hover-bg: var(--pgn-pagination-bg-hover) !default;
+$pagination-hover-border-color: var(--pgn-pagination-border-color-hover) !default;
+
+$pagination-active-color: var(--pgn-pagination-color-active) !default;
+$pagination-active-bg: var(--pgn-pagination-bg-active) !default;
+$pagination-active-border-color: var(--pgn-pagination-border-color-active) !default;
+
+$pagination-disabled-color: var(--pgn-pagination-color-disabled) !default;
+$pagination-disabled-bg: var(--pgn-pagination-bg-disabled) !default;
+$pagination-disabled-border-color: var(--pgn-pagination-border-color-disabled) !default;
+
+$pagination-border-radius-sm: var(--pgn-pagination-border-radius-sm) !default;
+$pagination-border-radius-lg: var(--pgn-pagination-border-radius-lg) !default;
+
+$pagination-reduced-dropdown-max-height: var(--pgn-reduced-dropdown-height-max) !default;
+$pagination-reduced-dropdown-min-width: var(--pgn-reduced-dropdown-width-min) !default;
diff --git a/src/Popover/Popover.scss b/src/Popover/Popover.scss
index 5da744d7403..61049a3bdf1 100644
--- a/src/Popover/Popover.scss
+++ b/src/Popover/Popover.scss
@@ -1,5 +1,5 @@
 @import "variables";
-@import "~bootstrap/scss/popover";
+@import "popover-bootstrap";
 
 .popover {
   filter: $popover-box-shadow;
diff --git a/src/Popover/_variables.scss b/src/Popover/_variables.scss
index 869f00f2121..e262ad11743 100644
--- a/src/Popover/_variables.scss
+++ b/src/Popover/_variables.scss
@@ -1,36 +1,42 @@
 // Popovers
 
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 480px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-sm !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$popover-icon-margin-right:         .5rem;
-$popover-icon-height:               1rem;
-$popover-icon-width:                1rem;
-
-$popover-header-bg:                 $white !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          1rem !default;
-
-$popover-body-color:                $body-color !default;
-$popover-body-padding-y:            $popover-header-padding-y !default;
-$popover-body-padding-x:            $popover-header-padding-x !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-
-$popover-success-bg:                $success-100 !default;
-$popover-success-icon-color:        $success-500 !default;
-$popover-warning-bg:                $warning-100 !default;
-$popover-warning-icon-color:        $warning-500 !default;
-$popover-danger-bg:                 $danger-100 !default;
-$popover-danger-icon-color:         $danger-500 !default;
+$popover-font-size: var(--pgn-popover-font-size) !default;
+$popover-bg: var(--pgn-popover-bg) !default;
+$popover-max-width: var(--pgn-popover-max-width) !default;
+$popover-border-width: var(--pgn-popover-border-width) !default;
+$popover-border-color: rgba(0, 0, 0, .2) !default;
+
+$popover-border-radius: var(--pgn-popover-border-radius) !default;
+$popover-inner-border-radius: calc(#{var(--pgn-popover-border-radius)} - #{var(--pgn-popover-border-border)}) !default;
+$popover-box-shadow: var(--pgn-popover-box-shadow) !default;
+$popover-icon-margin-right: var(--pgn-popover-icon-margin-right) !default;
+$popover-icon-height: var(--pgn-popover-icon-height) !default;
+$popover-icon-width: var(--pgn-popover-icon-width) !default;
+
+// TODO can't use css variable due to conflict with SCSS functions, should use #FFFFFF instead
+$popover-header-bg: #FFFFFF !default;
+$popover-header-bg-dark: var(--pgn-popover-header-bg-darken) !default;
+
+$popover-header-color: var(--pgn-popover-header-color) !default;
+$popover-header-padding-y: var(--pgn-popover-header-padding-y) !default;
+$popover-header-padding-x: var(--pgn-popover-header-padding-x) !default;
+
+$popover-body-color: var(--pgn-popover-body-color) !default;
+$popover-body-padding-y: var(--pgn-popover-body-padding-y) !default;
+$popover-body-padding-x: var(--pgn-popover-body-padding-x) !default;
+
+$popover-arrow-width: var(--pgn-popover-arrow-width) !default;
+$popover-arrow-height: var(--pgn-popover-arrow-height) !default;
+$popover-arrow-color: var(--pgn-popover-arrow-color) !default;
+
+// TODO can't use css variable due to conflict with SCSS functions,
+// should use var(--pgn-popover-border-color) instead of #000000.
+$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
+
+$popover-success-bg: var(--pgn-popover-success-bg) !default;
+$popover-success-icon-color: var(--pgn-popover-success-icon-color) !default;
+$popover-warning-bg: var(--pgn-popover-warning-bg) !default;
+$popover-warning-icon-color: var(--pgn-popover-warning-icon-color) !default;
+$popover-danger-bg: var(--pgn-popover-danger-bg) !default;
+$popover-danger-icon-color: var(--pgn-popover-danger-icon-color) !default;
+$popover-header-border-bottom-darken: var(--pgn-popover-header-border-darken) !default;
diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss
new file mode 100644
index 00000000000..43dfc116d66
--- /dev/null
+++ b/src/Popover/popover-bootstrap.scss
@@ -0,0 +1,180 @@
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindex-popover;
+  display: block;
+  max-width: $popover-max-width;
+
+  @include reset-text();
+  @include font-size($popover-font-size);
+
+  word-wrap: break-word;
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  border: $popover-border-width solid $popover-border-color;
+
+  @include border-radius($popover-border-radius);
+  @include box-shadow($popover-box-shadow);
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+    margin: 0 $popover-border-radius;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      display: block;
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top {
+  margin-bottom: $popover-arrow-height;
+
+  > .arrow {
+    bottom: calc(#{$popover-border-width} - #{$popover-arrow-height});
+
+    &::before {
+      bottom: 0;
+      border-width: $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0;
+      border-top-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      bottom: $popover-border-width;
+      border-width: $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0;
+      border-top-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-right {
+  margin-left: $popover-arrow-height;
+
+  > .arrow {
+    left: calc(#{$popover-border-width} - #{$popover-arrow-height});
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $popover-border-radius 0;
+
+    &::before {
+      left: 0;
+      border-width: calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0;
+      border-right-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      left: $popover-border-width;
+      border-width: calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5) 0;
+      border-right-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-bottom {
+  margin-top: $popover-arrow-height;
+
+  > .arrow {
+    top: calc(#{$popover-border-width} - #{$popover-arrow-height});
+
+    &::before {
+      top: 0;
+      border-width: 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5);
+      border-bottom-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      top: $popover-border-width;
+      border-width: 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height calc(#{$popover-arrow-width} * .5);
+      border-bottom-color: $popover-arrow-color;
+    }
+  }
+
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: $popover-arrow-width;
+    margin-left: calc($popover-arrow-width * -.5);
+    border-bottom: $popover-border-width solid $popover-header-bg;
+  }
+}
+
+.bs-popover-left {
+  margin-right: $popover-arrow-height;
+
+  > .arrow {
+    right: calc(#{$popover-border-width} - #{$popover-arrow-height});
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $popover-border-radius 0;
+
+    &::before {
+      right: 0;
+      border-width: calc(#{$popover-arrow-width} * .5) 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height;
+      border-left-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      right: $popover-border-width;
+      border-width: calc(#{$popover-arrow-width} * .5) 0 calc(#{$popover-arrow-width} * .5) $popover-arrow-height;
+      border-left-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-top;
+  }
+
+  &[x-placement^="right"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-right;
+  }
+
+  &[x-placement^="bottom"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-bottom;
+  }
+
+  &[x-placement^="left"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-left;
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  padding: $popover-header-padding-y $popover-header-padding-x;
+  margin-bottom: 0;
+
+  @include font-size($font-size-base);
+
+  color: $popover-header-color;
+  background-color: $popover-header-bg;
+  border-bottom: $popover-border-width solid $popover-header-border-bottom-darken;
+
+  @include border-top-radius($popover-inner-border-radius);
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-body {
+  padding: $popover-body-padding-y $popover-body-padding-x;
+  color: $popover-body-color;
+}
diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss
index 5a2940274cf..21aa11456da 100644
--- a/src/ProductTour/Checkpoint.scss
+++ b/src/ProductTour/Checkpoint.scss
@@ -1,16 +1,12 @@
 @import "variables";
 
-$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
-$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color;
-$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
-
 .pgn__checkpoint {
   position: absolute;
   background: $checkpoint-background-color;
   border-top: $checkpoint-border-width solid $checkpoint-border-color;
   border-radius: $border-radius;
   padding: map_get($spacers, 4);
-  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  box-shadow: 0 .25rem .5rem $checkpoint-box-shadow-color;
   z-index: $checkpoint-z-index;
   max-width: $checkpoint-max-width;
 
@@ -38,8 +34,8 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
   #pgn__checkpoint-arrow::before,
   #pgn__checkpoint-arrow::after {
-    visibility: visible;
     content: "";
+    visibility: visible;
   }
 
   .pgn__checkpoint-button_dismiss {
@@ -99,7 +95,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 }
 
 .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow {
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement
   bottom: 1px;
 
   [dir="rtl"] & {
@@ -118,7 +114,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
 .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow {
   top: -36px;
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement
 
   &::after {
     border-bottom: $checkpoint-arrow-top-color;
@@ -129,7 +125,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 }
 
 .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement
   right: 1px;
 
   &::after {
@@ -142,11 +138,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 }
 
 .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement
   left: 1px;
 
   &::after {
-    left: -2 * $checkpoint-arrow-width;
+    left: calc(-2 * $checkpoint-arrow-width);
     border-bottom: $checkpoint-arrow-transparent;
     border-top: $checkpoint-arrow-transparent;
     border-left: $checkpoint-arrow-transparent;
diff --git a/src/ProductTour/_variables.scss b/src/ProductTour/_variables.scss
index 73635c81202..31d4e18a0b5 100644
--- a/src/ProductTour/_variables.scss
+++ b/src/ProductTour/_variables.scss
@@ -1,15 +1,20 @@
 // Checkpoints
 
-$checkpoint-background-color:       $light-300 !default;
+$checkpoint-background-color: var(--pgn-product-tour-checkpoint-color-background) !default;
 
-$checkpoint-body-color:             $gray-700;
+$checkpoint-body-color: var(--pgn-product-tour-checkpoint-color-body) !default;
 
-$checkpoint-border-color:           $brand !default;
-$checkpoint-border-width:           8px !default;
+$checkpoint-border-color: var(--pgn-product-tour-checkpoint-color-border) !default;
+$checkpoint-border-width: var(--pgn-product-tour-checkpoint-width-border) !default;
 
-$checkpoint-breadcrumb-color:       $primary !default;
+$checkpoint-breadcrumb-color: var(--pgn-product-tour-checkpoint-color-breadcrumb) !default;
 
-$checkpoint-arrow-width:            15px !default;
-$checkpoint-max-width:              480px !default;
+$checkpoint-arrow-width: var(--pgn-product-tour-checkpoint-width-arrow) !default;
+$checkpoint-max-width: var(--pgn-product-tour-checkpoint-width-max) !default;
 
-$checkpoint-z-index:                1060 !default;
+$checkpoint-z-index: var(--pgn-product-tour-checkpoint-zindex) !default;
+
+$checkpoint-arrow-top-color: var(--pgn-product-tour-checkpoint-arrow-color-top) !default;
+$checkpoint-arrow-default-color: var(--pgn-product-tour-checkpoint-arrow-color-default) !default;
+$checkpoint-arrow-transparent: var(--pgn-product-tour-checkpoint-arrow-transparent) !default;
+$checkpoint-box-shadow-color: var(--pgn-product-tour-checkpoint-color-box-shadow) !default;
diff --git a/src/ProgressBar/ProgressBar.scss b/src/ProgressBar/ProgressBar.scss
index 5b3532d62fc..8c09f6110a6 100644
--- a/src/ProgressBar/ProgressBar.scss
+++ b/src/ProgressBar/ProgressBar.scss
@@ -52,8 +52,9 @@
           display: block;
           background: $color;
           position: absolute;
-          top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
-          right: -(calc($progress-threshold-circle / 2));
+          /* stylelint-disable max-line-length */
+          top: calc($progress-threshold-circle / 2 - $annotated-progress-height / 2);
+          right: calc($progress-threshold-circle / -2);
           width: $progress-threshold-circle;
           height: $progress-threshold-circle;
           border-radius: calc($progress-threshold-circle / 2);
diff --git a/src/ProgressBar/_variables.scss b/src/ProgressBar/_variables.scss
index cd0d49b4e9c..10e910dd353 100644
--- a/src/ProgressBar/_variables.scss
+++ b/src/ProgressBar/_variables.scss
@@ -1,23 +1,23 @@
 // Progress bars
 
-$progress-height:                   1rem !default;
-$annotated-progress-height:         .3125rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       transparent !default;
-$progress-border-radius:            0 !default;
-$progress-box-shadow:               none !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   theme-color("accent-a") !default;
-$annotated-progress-bar-bg:         theme-color("dark") !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-$progress-bar-border-width:         1px !default;
-$progress-bar-border-color:         $gray-500 !default;
-$progress-threshold-circle:         .5625rem !default;
-$progress-hint-annotation-gap:      .5rem !default;
+$progress-height: var(--pgn-progress-bar-height-base) !default;
+$annotated-progress-height: var(--pgn-progress-bar-height-annotated) !default;
+$progress-font-size: var(--pgn-progress-bar-font-size) !default;
+$progress-bg: var(--pgn-progress-bar-bg) !default;
+$progress-border-radius: var(--pgn-progress-bar-border-radius) !default;
+$progress-box-shadow: var(--pgn-progress-bar-box-shadow) !default;
+$progress-bar-color: var(--pgn-progress-bar-bar-color) !default;
+$progress-bar-bg: var(--pgn-progress-bar-bar-bg-base) !default;
+$annotated-progress-bar-bg: var(--pgn-progress-bar-bar-bg-annotated) !default;
+$progress-bar-animation-timing: var(--pgn-progress-bar-bar-animation-timing) !default;
+$progress-bar-transition: var(--pgn-progress-bar-bar-transition) !default;
+$progress-bar-border-width: var(--pgn-progress-bar-border-width) !default;
+$progress-bar-border-color: var(--pgn-progress-bar-border-color) !default;
+$progress-threshold-circle: var(--pgn-progress-bar-threshold-circle) !default;
+$progress-hint-annotation-gap: var(--pgn-progress-bar-hint-annotation-gap) !default;
 $progress-colors: (
-  "dark":    $primary-500,
-  "success": $success-500,
-  "error":   $danger-500,
-  "warning": $accent-b,
+  "dark":    var(--pgn-color-primary-500),
+  "success": var(--pgn-color-success-500),
+  "error":   var(--pgn-color-danger-500),
+  "warning": var(--pgn-color-accent-b),
 ) !default;
diff --git a/src/Scrollable/Scrollable.scss b/src/Scrollable/Scrollable.scss
index f2b2ec5a269..cf3e5fcd457 100644
--- a/src/Scrollable/Scrollable.scss
+++ b/src/Scrollable/Scrollable.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__scrollable-body {
   display: flex;
   flex-direction: column;
@@ -9,7 +11,7 @@
   &::before {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px $scrollable-body-box-shadow;
     display: block;
     height: 2px;
     position: sticky;
@@ -21,7 +23,7 @@
   &::after {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px $scrollable-body-box-shadow;
     display: block;
     height: 2px;
     position: sticky;
diff --git a/src/Scrollable/_variables.scss b/src/Scrollable/_variables.scss
new file mode 100644
index 00000000000..20292d21a19
--- /dev/null
+++ b/src/Scrollable/_variables.scss
@@ -0,0 +1 @@
+$scrollable-body-box-shadow: var(--pgn-scrollable-body-box-shadow) !default;
diff --git a/src/SearchField/_variables.scss b/src/SearchField/_variables.scss
index ebbdad6ae52..0bf6271c704 100644
--- a/src/SearchField/_variables.scss
+++ b/src/SearchField/_variables.scss
@@ -1,15 +1,15 @@
 $search-btn-variants: (
-  "light":  $primary-500,
-  "dark":   $brand-500,
+  "light":  var(--pgn-color-primary-500),
+  "dark":   var(--pgn-color-brand-500),
 );
-$search-border-radius:                0 !default;
-$search-line-height:                  1.5rem !default;
-$search-border-color:                 $gray-500 !default;
-$search-border-color-interaction:     $black !default;
-$search-border-width:                 .0625rem !default;
-$search-border-width-interaction:     .125rem !default;
-$search-disabled-opacity:             .3 !default;
-$search-button-margin:                .5rem !default;
-$input-height-search:                 calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
-$search-border-focus-color:           $black !default;
-$search-border-focus-width:           .3125rem !default;
+$search-border-radius: var(--pgn-search-field-border-radius) !default;
+$search-line-height: var(--pgn-search-field-line-height) !default;
+$search-border-color: var(--pgn-search-field-border-color-base) !default;
+$search-border-color-interaction: var(--pgn-search-field-border-color-interaction) !default;
+$search-border-width: var(--pgn-search-field-border-width-base) !default;
+$search-border-width-interaction: var(--pgn-search-field-border-width-interaction) !default;
+$search-disabled-opacity: var(--pgn-search-field-disabled-opacity) !default;
+$search-button-margin: var(--pgn-search-field-button-margin) !default;
+$input-height-search: var(--pgn-search-field-input-height-search) !default;
+$search-border-focus-color: var(--pgn-search-field-border-color-focus) !default;
+$search-border-focus-width: var(--pgn-search-field-border-width-focus) !default;
diff --git a/src/SelectableBox/_variables.scss b/src/SelectableBox/_variables.scss
index b7d4e114db1..78a08c4b575 100644
--- a/src/SelectableBox/_variables.scss
+++ b/src/SelectableBox/_variables.scss
@@ -1,5 +1,7 @@
-$selectable-box-padding:                   1rem !default;
-$selectable-box-border-radius:             .25rem !default;
-$selectable-box-space:                     .75rem !default;
+$selectable-box-padding: var(--pgn-selectable-box-padding) !default;
+$selectable-box-border-radius: var(--pgn-selectable-box-border-radius) !default;
+$selectable-box-space: var(--pgn-selectable-box-box-space) !default;
+
+// TODO can't use css variables due to conflict with SCSS functions
 $min-cols-number:                          1 !default;
 $max-cols-number:                          12 !default;
diff --git a/src/Sheet/Sheet.scss b/src/Sheet/Sheet.scss
index e5f57544406..fe14f924277 100644
--- a/src/Sheet/Sheet.scss
+++ b/src/Sheet/Sheet.scss
@@ -1,7 +1,9 @@
+@import "variables";
+
 .pgn__sheet-skrim {
   width: 100%;
   height: 100%;
-  background-color: rgba(196, 196, 196, .5);
+  background-color: $sheet-skrim-bg;
   position: fixed;
   top: 0;
   left: 0;
@@ -15,12 +17,12 @@
 
 %component-left {
   left: 0;
-  box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15);
+  box-shadow: 8px 0 16px 0 $sheet-skrim-component-box-shadow;
 }
 
 %component-right {
   right: 0;
-  box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15);
+  box-shadow: -8px 0 16px 0 $sheet-skrim-component-box-shadow;
 }
 
 .pgn__sheet-component-left {
@@ -34,7 +36,7 @@
 .pgn__sheet-component {
   position: fixed;
   padding: 1.25rem;
-  background-color: white;
+  background-color: $white;
   z-index: $zindex-sheet;
 
   &.pgn__sheet__dark {
@@ -44,12 +46,12 @@
 
   &.bottom {
     bottom: 0;
-    box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 -8px 16px 0 $sheet-skrim-component-box-shadow;
   }
 
   &.top {
     top: 0;
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 8px 16px 0 $sheet-skrim-component-box-shadow;
   }
 
   &.left {
diff --git a/src/Sheet/_variables.scss b/src/Sheet/_variables.scss
new file mode 100644
index 00000000000..986710bec6b
--- /dev/null
+++ b/src/Sheet/_variables.scss
@@ -0,0 +1,2 @@
+$sheet-skrim-bg: var(--pgn-sheet-skrim-bg) !default;
+$sheet-skrim-component-box-shadow: var(--pgn-sheet-skrim-component-box-shadow) !default;
diff --git a/src/Spinner/_variables.scss b/src/Spinner/_variables.scss
index ce9d97c7da6..4ae978f6563 100644
--- a/src/Spinner/_variables.scss
+++ b/src/Spinner/_variables.scss
@@ -1,9 +1,9 @@
 // Spinners
 
-$spinner-width:         2rem !default;
-$spinner-height:        $spinner-width !default;
-$spinner-border-width:  .25em !default;
+$spinner-width: var(--pgn-spinner-width) !default;
+$spinner-height: var(--pgn-spinner-height) !default;
+$spinner-border-width: var(--pgn-spinner-border-width) !default;
 
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
+$spinner-width-sm: var(--pgn-spinner-sm-width) !default;
+$spinner-height-sm: var(--pgn-spinner-sm-height) !default;
+$spinner-border-width-sm: var(--pgn-spinner-sm-border-width) !default;
diff --git a/src/Stack/_variables.scss b/src/Stack/_variables.scss
index 77a318bba6a..ec878b18ca0 100644
--- a/src/Stack/_variables.scss
+++ b/src/Stack/_variables.scss
@@ -1 +1 @@
-$stack-gap:                       0 !default;
+$stack-gap: var(--pgn-stack-gap) !default;
diff --git a/src/Sticky/_variables.scss b/src/Sticky/_variables.scss
index 42c3b9041d9..157e62577ab 100644
--- a/src/Sticky/_variables.scss
+++ b/src/Sticky/_variables.scss
@@ -1,3 +1,3 @@
-$sticky-offset:                       0 !default;
-$sticky-shadow-top:                   0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
-$sticky-shadow-bottom:                0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
+$sticky-offset: var(--pgn-sticky-offset) !default;
+$sticky-shadow-top: var(--pgn-sticky-shadow-top) !default;
+$sticky-shadow-bottom: var(--pgn-sticky-shadow-bottom) !default;
diff --git a/src/Table/_variables.scss b/src/Table/_variables.scss
index a494d0a47a9..6ad5c5e5949 100644
--- a/src/Table/_variables.scss
+++ b/src/Table/_variables.scss
@@ -2,6 +2,8 @@
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
+// Design tokens for the Table component are not created because it is deprecated.
+
 $table-cell-padding:          .75rem !default;
 $table-cell-padding-sm:       .3rem !default;
 
diff --git a/src/Tabs/_variables.scss b/src/Tabs/_variables.scss
index 1aa61d194a2..e16cc20a647 100644
--- a/src/Tabs/_variables.scss
+++ b/src/Tabs/_variables.scss
@@ -1,3 +1,3 @@
-$tab-notification-height:       1rem !default;
-$tab-notification-width:        1rem !default;
-$tab-notification-font-size:    $font-size-xs !default;
+$tab-notification-height: var(--pgn-tabs-notification-height) !default;
+$tab-notification-width: var(--pgn-tabs-notification-width) !default;
+$tab-notification-font-size: var(--pgn-tabs-notification-font-size) !default;
diff --git a/src/Toast/_variables.scss b/src/Toast/_variables.scss
index 34168aaa628..2a8db79b476 100644
--- a/src/Toast/_variables.scss
+++ b/src/Toast/_variables.scss
@@ -1,19 +1,19 @@
 // Toasts
 
-$toast-max-width:                   400px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .25rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            $gray-700 !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
-$toast-border-radius:               .25rem !default;
-$toast-box-shadow:                  0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
+$toast-max-width: var(--pgn-toast-max-width) !default;
+$toast-padding-x: var(--pgn-toast-padding-x) !default;
+$toast-padding-y: var(--pgn-toast-padding-y) !default;
+$toast-font-size: var(--pgn-toast-font-size) !default;
+$toast-color: var(--pgn-toast-color-base) !default;
+$toast-background-color: var(--pgn-toast-color-background) !default;
+$toast-border-width: var(--pgn-toast-border-width) !default;
+$toast-border-color: var(--pgn-toast-border-color) !default;
+$toast-border-radius: var(--pgn-toast-border-radius) !default;
+$toast-box-shadow: var(--pgn-toast-box-shadow) !default;
 
-$toast-header-color:                $white !default;
-$toast-header-background-color:     $gray-700 !default;
-$toast-header-border-color:         rgba(0, 0, 0, .5) !default;
+$toast-header-color: var(--pgn-toast-header-color-base) !default;
+$toast-header-background-color: var(--pgn-toast-header-color-background) !default;
+$toast-header-border-color: var(--pgn-toast-header-color-border) !default;
 
-$toast-container-gutter-lg:         1.25rem !default;
-$toast-container-gutter-sm:         .625rem !default;
+$toast-container-gutter-lg: var(--pgn-toast-container-gutter-lg) !default;
+$toast-container-gutter-sm: var(--pgn-toast-container-gutter-sm) !default;
diff --git a/src/Tooltip/_variables.scss b/src/Tooltip/_variables.scss
index cd74cfe2121..2d226207aa4 100644
--- a/src/Tooltip/_variables.scss
+++ b/src/Tooltip/_variables.scss
@@ -1,21 +1,20 @@
 // Tooltips
 
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
-$tooltip-opacity:                   1 !default;
-$tooltip-padding-y:                 .5rem !default;
-$tooltip-padding-x:                 .5rem !default;
-$tooltip-margin:                    0 !default;
-$tooltip-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$tooltip-font-size: var(--pgn-tooltip-font-size) !default;
+$tooltip-max-width: var(--pgn-tooltip-max-width) !default;
+$tooltip-color: var(--pgn-tooltip-color-base) !default;
+$tooltip-bg: var(--pgn-tooltip-bg-base) !default;
+$tooltip-border-radius: var(--pgn-tooltip-border-radius) !default;
+$tooltip-opacity: var(--pgn-tooltip-opacity) !default;
+$tooltip-padding-y: var(--pgn-tooltip-padding-y) !default;
+$tooltip-padding-x: var(--pgn-tooltip-padding-x) !default;
+$tooltip-margin: var(--pgn-tooltip-margin) !default;
+$tooltip-box-shadow: var(--pgn-tooltip-box-shadow) !default;
 
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: var(--pgn-tooltip-arrow-height) !default;
+$tooltip-arrow-color: var(--pgn-tooltip-arrow-color-base) !default;
 
-$tooltip-color-light:               $black !default;
-$tooltip-bg-light:                  $white !default;
-$tooltip-arrow-color-light:         $white !default;
+$tooltip-color-light: var(--pgn-tooltip-color-light) !default;
+$tooltip-bg-light: var(--pgn-tooltip-bg-light) !default;
+$tooltip-arrow-color-light: var(--pgn-tooltip-arrow-color-light) !default;
diff --git a/tokens/build-tokens.js b/tokens/build-tokens.js
new file mode 100644
index 00000000000..d3b5cd24655
--- /dev/null
+++ b/tokens/build-tokens.js
@@ -0,0 +1,114 @@
+const StyleDictionary = require('style-dictionary');
+const path = require('path');
+const chroma = require('chroma-js');
+
+const { formattedVariables, fileHeader } = StyleDictionary.formatHelpers;
+
+const PGN_PREFIX = 'pgn';
+const BASE_BUILD_PATH = path.resolve(__dirname, 'build');
+
+const colorTransform = (token) => {
+  const { value, modify = [], original } = token;
+
+  if (original.value.endsWith('%')) {
+    return original.value;
+  }
+
+  let color = chroma(value);
+
+  if (modify.length > 0) {
+    // iterate over the modify array (see tokens/color.json)
+    // and apply each modification in order
+    modify.forEach(({ type, amount, otherColor }) => {
+      // modifier type must match a method name in chromajs
+      // https://gka.github.io/chroma.js/
+      // chroma methods can be chained, so each time we override the color variable
+      // we can still call other chroma methods, similar to
+      // chroma(value).brighten(1).darken(1).hex();
+      if (type === 'mix') {
+        color = color[type](otherColor, amount, 'rgb');
+      } else {
+        color = color[type](amount);
+      }
+    });
+  }
+
+  return color.hex('rgba').toUpperCase();
+};
+
+/**
+ * Transforms color values to be in uppercase format to be compatible with our stylelint rules.
+ */
+StyleDictionary.registerTransform({
+  name: 'color/sass-functions',
+  transitive: true,
+  type: 'value',
+  matcher(token) {
+    return token.attributes.category === 'color' || token.value.toString().startsWith('#');
+  },
+  transformer: colorTransform,
+});
+
+/**
+ * Overrides default scss/variables formatter to add new line at the end of file
+ * to be compatible with our stylelint rules.
+ */
+StyleDictionary.registerFormat({
+  name: 'scss/variables-with-new-line',
+  formatter({ dictionary, options, file }) {
+    const { outputReferences, themeable = false } = options;
+    return `${fileHeader({ file, commentStyle: 'short' })
+      + formattedVariables({
+        format: 'sass', dictionary, outputReferences, themeable,
+      })
+    }\n`;
+  },
+});
+
+const paragonStyleDictionary = StyleDictionary.extend({
+  source: ['./source/**/*.json'],
+  platforms: {
+    scss: {
+      transformGroup: 'scss',
+      prefix: PGN_PREFIX,
+      buildPath: `${BASE_BUILD_PATH}/`,
+      files: [{
+        destination: '_variables.scss',
+        format: 'scss/variables-with-new-line',
+        options: {
+          outputReferences: true,
+        },
+      }],
+      transforms: StyleDictionary.transformGroup.scss.concat('color/sass-functions'),
+      options: {
+        showFileHeader: false,
+      },
+    },
+    css: {
+      transformGroup: 'css',
+      prefix: PGN_PREFIX,
+      files: [
+        {
+          format: 'css/variables',
+          destination: `${BASE_BUILD_PATH}/variables.css`,
+          options: {
+            outputReferences: true,
+          },
+        },
+        {
+          format: 'css/variables',
+          destination: path.resolve(__dirname, '../scss/core/tokens.css'),
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+      transforms: StyleDictionary.transformGroup.css.concat('color/sass-functions'),
+      options: {
+        showFileHeader: false,
+      },
+    },
+  },
+});
+
+paragonStyleDictionary.buildAllPlatforms();
diff --git a/tokens/build/_variables.scss b/tokens/build/_variables.scss
new file mode 100644
index 00000000000..963d69911c1
--- /dev/null
+++ b/tokens/build/_variables.scss
@@ -0,0 +1,978 @@
+$pgn-line-height-sm: 1.5 !default;
+$pgn-line-height-lg: 1.5 !default;
+$pgn-line-height-base: 1.5556 !default;
+$pgn-font-weight-lead: null !default;
+$pgn-font-weight-bolder: bolder !default;
+$pgn-font-weight-bold: 700 !default;
+$pgn-font-weight-semi-bold: 500 !default;
+$pgn-font-weight-normal: 400 !default;
+$pgn-font-weight-light: 300 !default;
+$pgn-font-weight-lighter: lighter !default;
+$pgn-font-size-mobile-h1: 2.25rem !default;
+$pgn-font-size-h6: .75rem !default;
+$pgn-font-size-h5: .875rem !default;
+$pgn-font-size-h4: 1.125rem !default;
+$pgn-font-size-h3: 1.375rem !default;
+$pgn-font-size-h2: 2rem !default;
+$pgn-font-size-h1: 2.5rem !default;
+$pgn-font-size-small-x: 75% !default;
+$pgn-font-size-small-base: 87.5% !default;
+$pgn-font-size-xs: .75rem !default;
+$pgn-font-size-sm: .875rem !default;
+$pgn-font-size-lg: 1.4063rem !default;
+$pgn-font-size-base: 1.125rem !default;
+$pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  "Courier New", monospace !default;
+$pgn-font-family-serif: serif !default;
+$pgn-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" !default;
+$pgn-transition-collapse: height .35s ease !default;
+$pgn-transition-fade: opacity .15s linear !default;
+$pgn-transition-base: all .2s ease-in-out !default;
+$pgn-spacer-base: 1rem !default;
+$pgn-spacer-0: 0 !default;
+$pgn-grid-row-columns: 6 !default;
+$pgn-grid-gutter-width: 24px !default;
+$pgn-grid-columns: 12 !default;
+$pgn-zindex-fixed: 1030 !default;
+$pgn-zindex-sticky: 1020 !default;
+$pgn-zindex-2000: 2000 !default;
+$pgn-zindex-1800: 1800 !default;
+$pgn-zindex-1600: 1600 !default;
+$pgn-zindex-1400: 1400 !default;
+$pgn-zindex-1200: 1200 !default;
+$pgn-zindex-1000: 1000 !default;
+$pgn-zindex-800: 800 !default;
+$pgn-zindex-600: 600 !default;
+$pgn-zindex-400: 400 !default;
+$pgn-zindex-200: 200 !default;
+$pgn-zindex-0: 0 !default;
+$pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3) !default;
+$pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2) !default;
+$pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3) !default;
+$pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15) !default;
+$pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15) !default;
+$pgn-display-line-height-mobile: 3.5rem !default;
+$pgn-display-line-height-base: 1 !default;
+$pgn-display-size-mobile: 3.25rem !default;
+$pgn-display-size-4: 7.5rem !default;
+$pgn-display-size-3: 5.625rem !default;
+$pgn-display-size-2: 4.875rem !default;
+$pgn-display-size-1: 3.75rem !default;
+$pgn-breakpoint-xxl: 1400px !default;
+$pgn-breakpoint-xl: 1200px !default;
+$pgn-breakpoint-lg: 992px !default;
+$pgn-breakpoint-md: 768px !default;
+$pgn-breakpoint-sm: 576px !default;
+$pgn-breakpoint-xs: 0 !default;
+$pgn-border-radius-sm: .25rem !default;
+$pgn-border-radius-lg: .425rem !default;
+$pgn-border-radius-base: .375rem !default;
+$pgn-border-width: 1px !default;
+$pgn-tooltip-zindex: 1070 !default;
+$pgn-tooltip-arrow-height: .4rem !default;
+$pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$pgn-tooltip-margin: 0 !default;
+$pgn-tooltip-padding-x: .5rem !default;
+$pgn-tooltip-padding-y: .5rem !default;
+$pgn-tooltip-opacity: 1 !default;
+$pgn-tooltip-max-width: 200px !default;
+$pgn-toast-container-gutter-sm: .625rem !default;
+$pgn-toast-container-gutter-lg: 1.25rem !default;
+$pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15) !default;
+$pgn-toast-border-radius: .25rem !default;
+$pgn-toast-border-width: 1px !default;
+$pgn-toast-color-base: null !default;
+$pgn-toast-font-size: .875rem !default;
+$pgn-toast-padding-y: .25rem !default;
+$pgn-toast-padding-x: .75rem !default;
+$pgn-toast-max-width: 400px !default;
+$pgn-tabs-notification-width: 1rem !default;
+$pgn-tabs-notification-height: 1rem !default;
+$pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
+$pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
+$pgn-sticky-offset: 0 !default;
+$pgn-stack-gap: 0 !default;
+$pgn-spinner-sm-border-width: .2em !default;
+$pgn-spinner-sm-width: 1rem !default;
+$pgn-spinner-border-width: .25em !default;
+$pgn-spinner-width: 2rem !default;
+$pgn-sheet-zindex-main: 1032 !default;
+$pgn-sheet-zindex-backdrop: 1031 !default;
+$pgn-selectable-box-box-space: .75rem !default;
+$pgn-selectable-box-border-radius: .25rem !default;
+$pgn-selectable-box-padding: 1rem !default;
+$pgn-search-field-button-margin: .5rem !default;
+$pgn-search-field-disabled-opacity: .3 !default;
+$pgn-search-field-line-height: 1.5rem !default;
+$pgn-search-field-border-width-focus: .3125rem !default;
+$pgn-search-field-border-width-interaction: .125rem !default;
+$pgn-search-field-border-width-base: .0625rem !default;
+$pgn-search-field-border-radius: 0 !default;
+$pgn-progress-bar-hint-annotation-gap: .5rem !default;
+$pgn-progress-bar-threshold-circle: .5625rem !default;
+$pgn-progress-bar-bar-transition: width .6s ease !default;
+$pgn-progress-bar-bar-animation-timing: 1s linear infinite !default;
+$pgn-progress-bar-box-shadow: none !default;
+$pgn-progress-bar-border-width: 1px !default;
+$pgn-progress-bar-border-radius: 0 !default;
+$pgn-progress-bar-bg: transparent !default;
+$pgn-progress-bar-height-annotated: .3125rem !default;
+$pgn-progress-bar-height-base: 1rem !default;
+$pgn-product-tour-checkpoint-zindex: 1060 !default;
+$pgn-product-tour-checkpoint-width-max: 480px !default;
+$pgn-product-tour-checkpoint-width-arrow: 15px !default;
+$pgn-product-tour-checkpoint-width-border: 8px !default;
+$pgn-popover-zindex: 1060 !default;
+$pgn-popover-arrow-height: .5rem !default;
+$pgn-popover-arrow-width: 1rem !default;
+$pgn-popover-icon-width: 1rem !default;
+$pgn-popover-icon-height: 1rem !default;
+$pgn-popover-icon-margin-right: .5rem !default;
+$pgn-popover-header-padding-x: 1rem !default;
+$pgn-popover-header-padding-y: .5rem !default;
+$pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$pgn-popover-max-width: 480px !default;
+$pgn-reduced-dropdown-width-min: 6rem !default;
+$pgn-reduced-dropdown-height-max: 60vh !default;
+$pgn-pagination-focus-border-width: .125rem !default;
+$pgn-pagination-focus-outline: 0 !default;
+$pgn-pagination-secondary-height-sm: 2.25rem !default;
+$pgn-pagination-secondary-height-base: 2.75rem !default;
+$pgn-pagination-toggle-border-sm: .25rem !default;
+$pgn-pagination-toggle-border-base: .3125rem !default;
+$pgn-pagination-icon-height: 2.25rem !default;
+$pgn-pagination-icon-width: 2.25rem !default;
+$pgn-pagination-icon-size-sm: 1rem !default;
+$pgn-pagination-icon-size-base: 1.375rem !default;
+$pgn-pagination-font-size-sm: .875rem !default;
+$pgn-pagination-line-height: 1.5rem !default;
+$pgn-pagination-margin-y: .5rem !default;
+$pgn-pagination-margin-x: .5rem !default;
+$pgn-pagination-padding-icon: .5rem !default;
+$pgn-pagination-padding-x-lg: 1.5rem !default;
+$pgn-pagination-padding-x-sm: .6rem !default;
+$pgn-pagination-padding-x-base: 1rem !default;
+$pgn-pagination-padding-y-lg: .75rem !default;
+$pgn-pagination-padding-y-sm: .8rem !default;
+$pgn-pagination-padding-y-base: .625rem !default;
+$pgn-navbar-toggler-padding-x: .75rem !default;
+$pgn-navbar-toggler-padding-y: .25rem !default;
+$pgn-navbar-nav-scroll-max-height: 75vh !default;
+$pgn-navbar-padding-x-nav-link: .5rem !default;
+$pgn-nav-tabs-border-radius: 0 !default;
+$pgn-nav-tabs-border-width: 2px !default;
+$pgn-nav-link-font-weight: 500 !default;
+$pgn-nav-link-padding-x: 1rem !default;
+$pgn-nav-link-padding-y: .5rem !default;
+$pgn-modal-zindex: 1050 !default;
+$pgn-modal-transform-scale: scale(1.02) !default;
+$pgn-modal-transform-show: none !default;
+$pgn-modal-transform-fade: translate(0, -50px) !default;
+$pgn-modal-transform-base: transform .3s ease-out !default;
+$pgn-modal-sm: 500px !default;
+$pgn-modal-md: 500px !default;
+$pgn-modal-lg: 800px !default;
+$pgn-modal-xl: 1140px !default;
+$pgn-modal-header-padding-x: 1.5rem !default;
+$pgn-modal-header-padding-y: 1rem !default;
+$pgn-modal-backdrop-zindex: 1040 !default;
+$pgn-modal-backdrop-opacity: .5 !default;
+$pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15) !default;
+$pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5) !default;
+$pgn-modal-content-border-width: 0rem !default;
+$pgn-modal-content-color: null !default;
+$pgn-modal-footer-padding-y: 1.5rem !default;
+$pgn-modal-footer-padding-x: 1rem !default;
+$pgn-modal-inner-padding-bottom: .7rem !default;
+$pgn-modal-inner-padding-base: 1.5rem !default;
+$pgn-menu-border-hover: transparent !default;
+$pgn-menu-border-active: transparent !default;
+$pgn-menu-border-base: transparent !default;
+$pgn-image-figure-caption-font-size: 90% !default;
+$pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075) !default;
+$pgn-image-thumbnail-padding: .25rem !default;
+$pgn-icon-button-bg: transparent !default;
+$pgn-icon-button-diameter-sm: 2.25rem !default;
+$pgn-icon-button-diameter-md: 2.75rem !default;
+$pgn-icon-lg: 1.75rem !default;
+$pgn-icon-md: 1.5rem !default;
+$pgn-icon-sm: 1.25rem !default;
+$pgn-icon-inline: .8em !default;
+$pgn-mark-bg: #FFF243FF !default;
+$pgn-mark-padding: .2em !default;
+$pgn-paragraph-margin-bottom: 1rem !default;
+$pgn-list-group-item-padding-x: 1.25rem !default;
+$pgn-list-group-item-padding-y: .75rem !default;
+$pgn-list-group-color: null !default;
+$pgn-list-inline-padding: .5rem !default;
+$pgn-link-emphasized-hover-darken-percentage: 15% !default;
+$pgn-link-brand-inline-hover-decoration: underline !default;
+$pgn-link-brand-inline-decoration: underline !default;
+$pgn-link-brand-hover-decoration: underline !default;
+$pgn-link-brand-decoration: none !default;
+$pgn-link-muted-inline-hover-decoration: underline !default;
+$pgn-link-muted-inline-decoration: underline !default;
+$pgn-link-muted-hover-decoration: underline !default;
+$pgn-link-muted-decoration: none !default;
+$pgn-link-inline-hover-decoration: underline !default;
+$pgn-link-inline-decoration: underline !default;
+$pgn-link-hover-decoration: underline !default;
+$pgn-link-decoration: none !default;
+$pgn-input-btn-focus-width: 1px !default;
+$pgn-input-btn-line-height-sm: 1.4286 !default;
+$pgn-input-btn-line-height-base: 1.3333 !default;
+$pgn-input-btn-font-size-lg: 1.325rem !default;
+$pgn-input-btn-font-size-sm: .875rem !default;
+$pgn-input-btn-font-size-base: 1.125rem !default;
+$pgn-input-btn-font-family: inherit !default;
+$pgn-input-btn-padding-lg-x: 1.25rem !default;
+$pgn-input-btn-padding-lg-y: .6875rem !default;
+$pgn-input-btn-padding-sm-x: .75rem !default;
+$pgn-input-btn-padding-sm-y: .4375rem !default;
+$pgn-input-btn-padding-x: 1rem !default;
+$pgn-input-btn-padding-y: .5625rem !default;
+$pgn-headings-line-height: 1.25 !default;
+$pgn-headings-font-family: null !default;
+$pgn-headings-margin-bottom: .5rem !default;
+$pgn-caret-spacing: .255em !default;
+$pgn-caret-vertical-align: .255em !default;
+$pgn-caret-width: .3em !default;
+$pgn-form-select-icon-padding: .5625rem !default;
+$pgn-form-control-icon-width: 32px !default;
+$pgn-form-feedback-tooltip-opacity: .9 !default;
+$pgn-form-feedback-tooltip-padding-x: .5rem !default;
+$pgn-form-feedback-tooltip-padding-y: .25rem !default;
+$pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1) !default;
+$pgn-form-custom-range-thumb-border-radius: 1rem !default;
+$pgn-form-custom-range-thumb-border-base: 0 !default;
+$pgn-form-custom-range-thumb-width: 1rem !default;
+$pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1) !default;
+$pgn-form-custom-range-track-border-radius: 1rem !default;
+$pgn-form-custom-range-track-cursor: pointer !default;
+$pgn-form-custom-range-track-height: .5rem !default;
+$pgn-form-custom-range-track-width: 100% !default;
+$pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075) !default;
+$pgn-form-custom-select-bg-size: 24px 24px !default;
+$pgn-form-custom-select-indicator-padding: 1rem !default;
+$pgn-form-custom-radio-indicator-border-radius: 50% !default;
+$pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+$pgn-form-custom-checkbox-indicator-border-radius: 0 !default;
+$pgn-form-custom-control-label-color-base: null !default;
+$pgn-form-custom-control-indicator-active-bg: #0A3055FF !default;
+$pgn-form-custom-control-indicator-active-box-shadow: none !default;
+$pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1) !default;
+$pgn-form-custom-control-indicator-checked-box-shadow-base: none !default;
+$pgn-form-custom-control-indicator-border-width: 2px !default;
+$pgn-form-custom-control-indicator-bg-size: 100% !default;
+$pgn-form-custom-control-indicator-size: 1.25rem !default;
+$pgn-form-custom-control-cursor: null !default;
+$pgn-form-custom-control-spacer-x: 1rem !default;
+$pgn-form-custom-control-gutter: .5rem !default;
+$pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$pgn-form-group-margin-bottom: 1rem !default;
+$pgn-form-check-border-width: .125rem !default;
+$pgn-form-check-border-radius-focus: .0625rem !default;
+$pgn-form-check-position-axis: .375rem !default;
+$pgn-form-check-inline-margin-x: .75rem !default;
+$pgn-form-text-margin-top: .25rem !default;
+$pgn-form-input-check-margin-y: .3rem !default;
+$pgn-form-input-check-margin-x-inline: .3125rem !default;
+$pgn-form-input-check-margin-x-base: .25rem !default;
+$pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$pgn-form-input-width-hover: 1px !default;
+$pgn-form-input-focus-width: 1px !default;
+$pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075) !default;
+$pgn-dropzone-padding: 1.5rem !default;
+$pgn-dropdown-zindex: 1000 !default;
+$pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175) !default;
+$pgn-dropdown-spacer: .125rem !default;
+$pgn-dropdown-padding-y-item: .5rem !default;
+$pgn-dropdown-padding-y-base: .25rem !default;
+$pgn-dropdown-padding-x-item: 1rem !default;
+$pgn-dropdown-padding-x-base: 0 !default;
+$pgn-dropdown-min-width: 18rem !default;
+$pgn-data-table-pagination-dropdown-min-width: 6rem !default;
+$pgn-data-table-pagination-dropdown-max-height: 60vh !default;
+$pgn-data-table-footer-position: center !default;
+$pgn-data-table-padding-head-cell: .5rem .75rem !default;
+$pgn-data-table-padding-cell: .75rem !default;
+$pgn-data-table-padding-small: .5rem !default;
+$pgn-data-table-padding-y: .75rem !default;
+$pgn-data-table-padding-x: .75rem !default;
+$pgn-container-max-width-xl: 1440px !default;
+$pgn-container-max-width-lg: 1192px !default;
+$pgn-container-max-width-md: 952px !default;
+$pgn-container-max-width-sm: 708px !default;
+$pgn-container-max-width-xs: 464px !default;
+$pgn-collapsible-card-spacer-basic-icon: .625rem !default;
+$pgn-collapsible-card-spacer-basic-x: .5rem !default;
+$pgn-collapsible-card-spacer-basic-y: .5rem !default;
+$pgn-collapsible-card-spacer-icon: 2.5rem !default;
+$pgn-collapsible-card-spacer-left-body: .75rem !default;
+$pgn-collapsible-card-spacer-x-base: .5rem !default;
+$pgn-collapsible-card-spacer-y-base: .5rem !default;
+$pgn-code-pre-scrollable-max-height: 340px !default;
+$pgn-code-kbd-padding-x: .4rem !default;
+$pgn-code-kbd-padding-y: .2rem !default;
+$pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25) !default;
+$pgn-code-color: #E83E8CFF !default;
+$pgn-code-font-size: 87.5% !default;
+$pgn-chip-icon-size: 1.25rem !default;
+$pgn-chip-disabled-opacity: .3 !default;
+$pgn-chip-line-height: 1.5rem !default;
+$pgn-chip-font-weight: 400 !default;
+$pgn-chip-font-size: .75rem !default;
+$pgn-chip-position-axis: .125rem !default;
+$pgn-chip-border-width: .0625rem !default;
+$pgn-chip-border-radius-focus: .5rem !default;
+$pgn-chip-border-radius-base: .4375rem !default;
+$pgn-chip-margin-inline: .5rem !default;
+$pgn-chip-margin-base: .125rem !default;
+$pgn-chip-padding-icon-to: 3px !default;
+$pgn-chip-padding-icon-base: .25rem !default;
+$pgn-chip-padding-x: .5rem !default;
+$pgn-chip-padding-y: .125rem !default;
+$pgn-carousel-transition-duration: .6s !default;
+$pgn-carousel-caption-width: 70% !default;
+$pgn-carousel-indicator-transition: opacity .6s ease !default;
+$pgn-carousel-indicator-spacer: 3px !default;
+$pgn-carousel-indicator-height-area-hit: 3px !default;
+$pgn-carousel-indicator-height-base: 3px !default;
+$pgn-carousel-indicator-width: 30px !default;
+$pgn-carousel-control-transition: opacity .15s ease !default;
+$pgn-carousel-control-opacity-hover: .9 !default;
+$pgn-carousel-control-opacity-base: .5 !default;
+$pgn-carousel-control-width-icon: 20px !default;
+$pgn-carousel-control-width-base: 15% !default;
+$pgn-card-loading-skeleton-spacer: .313rem !default;
+$pgn-card-logo-height: 4.125rem !default;
+$pgn-card-logo-width: 7.25rem !default;
+$pgn-card-logo-bottom-offset-horizontal: .4375rem !default;
+$pgn-card-logo-bottom-offset-base: 1rem !default;
+$pgn-card-logo-left-offset-horizontal: .4375rem !default;
+$pgn-card-logo-left-offset-base: 1.5rem !default;
+$pgn-card-footer-action-gap: .5rem !default;
+$pgn-card-columns-gap: 1.25rem !default;
+$pgn-card-columns-count: 3 !default;
+$pgn-card-margin-group: 12px !default;
+$pgn-card-image-vertical-height-max: 140px !default;
+$pgn-card-image-horizontal-width-max: 240px !default;
+$pgn-card-image-overlay-padding: 1.25rem !default;
+$pgn-card-color: null !default;
+$pgn-card-height-base: null !default;
+$pgn-card-cap-color: null !default;
+$pgn-card-border-radius-logo: .25rem !default;
+$pgn-card-border-radius-image: .3125rem !default;
+$pgn-card-spacer-y: .75rem !default;
+$pgn-card-spacer-x: 1.25rem !default;
+$pgn-btn-transition: null !default;
+$pgn-btn-block-spacing-y: .5rem !default;
+$pgn-btn-tertiary-inverse-bg-base: transparent !default;
+$pgn-btn-disabled-opacity: .65 !default;
+$pgn-btn-focus-gap: 1px !default;
+$pgn-btn-focus-width: 2px !default;
+$pgn-btn-box-shadow-active: none !default;
+$pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) !default;
+$pgn-bubble-expandable-padding-x: .25rem !default;
+$pgn-bubble-expandable-padding-y: 0 !default;
+$pgn-breadcrumb-border-radius-focus: .125rem !default;
+$pgn-breadcrumb-border-focus-width: .0625rem !default;
+$pgn-breadcrumb-border-focus-axis-x: .25rem !default;
+$pgn-breadcrumb-border-focus-axis-y: .5rem !default;
+$pgn-breadcrumb-margin-left: .5rem !default;
+$pgn-breadcrumb-margin-bottom: 1rem !default;
+$pgn-breadcrumb-padding-item: .5rem !default;
+$pgn-breadcrumb-padding-x: 1rem !default;
+$pgn-breadcrumb-padding-y: .75rem !default;
+$pgn-breadcrumb-font-size: null !default;
+$pgn-badge-transition: none !default;
+$pgn-badge-border-radius-pill: 10rem !default;
+$pgn-badge-border-radius-base: .25rem !default;
+$pgn-badge-padding-y: .125rem !default;
+$pgn-badge-padding-x-pill: .6em !default;
+$pgn-badge-padding-x-base: .5rem !default;
+$pgn-badge-font-size: 75% !default;
+$pgn-avatar-button-padding-left-lg: .25em !default;
+$pgn-avatar-button-padding-left-sm: .25em !default;
+$pgn-avatar-button-padding-left-base: .25em !default;
+$pgn-avatar-size-huge: 18.75rem !default;
+$pgn-avatar-size-xxl: 11.5rem !default;
+$pgn-avatar-size-xl: 6rem !default;
+$pgn-avatar-size-lg: 4rem !default;
+$pgn-avatar-size-sm: 2.25rem !default;
+$pgn-avatar-size-xs: 1.5rem !default;
+$pgn-avatar-size-base: 3rem !default;
+$pgn-avatar-border-radius: 100% !default;
+$pgn-annotation-arrow-border-width: .5rem !default;
+$pgn-annotation-arrow-side-margin: .25rem !default;
+$pgn-annotation-max-width: 18.75rem !default;
+$pgn-annotation-border-radius: .25rem !default;
+$pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$pgn-annotation-padding: .5rem !default;
+$pgn-alert-line-height: 1.5rem !default;
+$pgn-alert-icon-space: .8rem !default;
+$pgn-alert-level-color: 6 !default;
+$pgn-alert-level-border: -9 !default;
+$pgn-alert-level-bg: -10 !default;
+$pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
+$pgn-alert-font-size: .875rem !default;
+$pgn-alert-border-width: 0 !default;
+$pgn-alert-margin-bottom: 1rem !default;
+$pgn-alert-padding-x: 1.5rem !default;
+$pgn-alert-padding-y: 1.5rem !default;
+$pgn-action-row-gap-y: .5rem !default;
+$pgn-action-row-gap-x: .5rem !default;
+$pgn-color-dark-base: #273F2FFF !default;
+$pgn-color-light-base: #E1DDDBFF !default;
+$pgn-color-brand-base: #9D0054FF !default;
+$pgn-color-primary-base: #0A3055FF !default;
+$pgn-color-gray-base: #707070FF !default;
+$pgn-color-gray-900: #212529FF !default;
+$pgn-color-gray-800: #333333FF !default;
+$pgn-color-gray-700: #454545FF !default;
+$pgn-color-gray-600: #5C5C5CFF !default;
+$pgn-color-gray-400: #8F8F8FFF !default;
+$pgn-color-gray-300: #ADADADFF !default;
+$pgn-color-gray-200: #CCCCCCFF !default;
+$pgn-color-gray-100: #EBEBEBFF !default;
+$pgn-color-theme-interval: 8% !default;
+$pgn-color-accent-b: #FFEE88FF !default;
+$pgn-color-accent-a: #00BBF9FF !default;
+$pgn-color-teal: #006DAAFF !default;
+$pgn-color-yellow: #FFD900FF !default;
+$pgn-color-green: #178253FF !default;
+$pgn-color-red: #C32D3AFF !default;
+$pgn-color-blue: #23419FFF !default;
+$pgn-color-black: #000000FF !default;
+$pgn-color-white: #FFFFFFFF !default;
+$pgn-font-weight-base: $pgn-font-weight-normal !default;
+$pgn-font-size-lead: calc($pgn-font-size-base * 1.25) !default;
+$pgn-font-size-mobile-h6: $pgn-font-size-h6 !default;
+$pgn-font-size-mobile-h5: $pgn-font-size-h5 !default;
+$pgn-font-size-mobile-h4: $pgn-font-size-h4 !default;
+$pgn-font-size-mobile-h3: $pgn-font-size-h3 !default;
+$pgn-font-size-mobile-h2: $pgn-font-size-h2 !default;
+$pgn-font-family-base: $pgn-font-family-sans-serif !default;
+$pgn-spacer-5-5: calc($pgn-spacer-base * 4rem) !default;
+$pgn-spacer-4-5: calc($pgn-spacer-base * 2rem) !default;
+$pgn-spacer-3-5: calc($pgn-spacer-base * 1.25rem) !default;
+$pgn-spacer-2-5: calc($pgn-spacer-base * .75rem) !default;
+$pgn-spacer-1-5: calc($pgn-spacer-base * .375rem) !default;
+$pgn-spacer-6: calc($pgn-spacer-base * 5rem) !default;
+$pgn-spacer-5: calc($pgn-spacer-base * 3rem) !default;
+$pgn-spacer-4: calc($pgn-spacer-base * 1.5rem) !default;
+$pgn-spacer-3: $pgn-spacer-base !default;
+$pgn-spacer-2: calc($pgn-spacer-base * .5rem) !default;
+$pgn-spacer-1: calc($pgn-spacer-base * .25rem) !default;
+$pgn-display-weight-4: $pgn-font-weight-bold !default;
+$pgn-display-weight-3: $pgn-font-weight-bold !default;
+$pgn-display-weight-2: $pgn-font-weight-bold !default;
+$pgn-display-weight-1: $pgn-font-weight-bold !default;
+$pgn-border-color: $pgn-color-gray-200 !default;
+$pgn-tooltip-arrow-color-light: $pgn-color-white !default;
+$pgn-tooltip-border-radius: $pgn-border-radius-base !default;
+$pgn-tooltip-bg-light: $pgn-color-white !default;
+$pgn-tooltip-bg-base: $pgn-color-black !default;
+$pgn-tooltip-color-light: $pgn-color-black !default;
+$pgn-tooltip-color-base: $pgn-color-white !default;
+$pgn-tooltip-font-size: $pgn-font-size-sm !default;
+$pgn-toast-header-color-border: #00000080 !default;
+$pgn-toast-header-color-background: $pgn-color-gray-700 !default;
+$pgn-toast-header-color-base: $pgn-color-white !default;
+$pgn-toast-border-color: #0000001A !default;
+$pgn-toast-color-background: $pgn-color-gray-700 !default;
+$pgn-tabs-notification-font-size: $pgn-font-size-xs !default;
+$pgn-spinner-sm-height: $pgn-spinner-sm-width !default;
+$pgn-spinner-height: $pgn-spinner-width !default;
+$pgn-sheet-skrim-component-box-shadow: #00000026 !default;
+$pgn-sheet-skrim-bg: #ADADAD80 !default;
+$pgn-search-field-border-color-focus: $pgn-color-black !default;
+$pgn-search-field-border-color-interaction: $pgn-color-black !default;
+$pgn-scrollable-body-box-shadow: #0000008C !default;
+$pgn-progress-bar-bar-bg-base: $pgn-color-accent-a !default;
+$pgn-progress-bar-bar-color: $pgn-color-white !default;
+$pgn-progress-bar-font-size: calc($pgn-font-size-base * .75) !default;
+$pgn-product-tour-checkpoint-arrow-transparent: solid $pgn-product-tour-checkpoint-width-arrow transparent !default;
+$pgn-product-tour-checkpoint-arrow-color-default: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-color-background !default;
+$pgn-product-tour-checkpoint-arrow-color-top: solid $pgn-product-tour-checkpoint-width-arrow $pgn-product-tour-checkpoint-width-border !default;
+$pgn-product-tour-checkpoint-color-box-shadow: #0000004D !default;
+$pgn-product-tour-checkpoint-color-body: $pgn-color-gray-700 !default;
+$pgn-popover-body-padding-x: $pgn-popover-header-padding-x !default;
+$pgn-popover-body-padding-y: $pgn-popover-header-padding-y !default;
+$pgn-popover-header-border-darken: #E5E5E5FF !default;
+$pgn-popover-header-bg-darken: #E5E5E5FF !default;
+$pgn-popover-border-width: $pgn-border-width !default;
+$pgn-popover-border-radius: $pgn-border-radius-sm !default;
+$pgn-popover-font-size: $pgn-font-size-sm !default;
+$pgn-pagination-focus-color-text: $pgn-color-black !default;
+$pgn-pagination-border-radius-lg: $pgn-border-radius-lg !default;
+$pgn-pagination-border-radius-sm: $pgn-border-radius-sm !default;
+$pgn-pagination-border-color-disabled: $pgn-color-gray-100 !default;
+$pgn-pagination-border-color-hover: $pgn-color-gray-200 !default;
+$pgn-pagination-border-color-base: $pgn-color-gray-200 !default;
+$pgn-pagination-border-width: $pgn-border-width !default;
+$pgn-pagination-bg-disabled: $pgn-color-white !default;
+$pgn-pagination-bg-hover: $pgn-color-gray-100 !default;
+$pgn-pagination-color-inverse: $pgn-color-white !default;
+$pgn-navbar-light-toggler-border-color: #0000001A !default;
+$pgn-navbar-light-color-disabled: #0000004D !default;
+$pgn-navbar-light-color-active: #000000E6 !default;
+$pgn-navbar-light-color-hover: #000000B3 !default;
+$pgn-navbar-dark-toggler-border-color: #FFFFFF1A !default;
+$pgn-navbar-dark-color-disabled: #FFFFFF40 !default;
+$pgn-navbar-dark-color-hover: #FFFFFFBF !default;
+$pgn-navbar-toggler-font-size: $pgn-font-size-lg !default;
+$pgn-navbar-brand-font-size: $pgn-font-size-lg !default;
+$pgn-navbar-nav-link-height: calc($pgn-font-size-base * $pgn-line-height-base + .5rem * 2) !default;
+$pgn-navbar-padding-x-base: $pgn-spacer-base !default;
+$pgn-navbar-padding-y: calc($pgn-spacer-base / 2) !default;
+$pgn-nav-color-light: #00000080 !default;
+$pgn-nav-color-dark: #FFFFFF80 !default;
+$pgn-nav-divider-margin-y: calc($pgn-spacer-base / 2) !default;
+$pgn-nav-divider-color: $pgn-color-gray-100 !default;
+$pgn-nav-pills-border-radius: $pgn-border-radius-base !default;
+$pgn-nav-link-color-disabled: $pgn-color-gray-300 !default;
+$pgn-nav-link-color-base: $pgn-color-gray-700 !default;
+$pgn-modal-header-padding-base: $pgn-modal-header-padding-y $pgn-modal-header-padding-x !default;
+$pgn-modal-header-border-width: $pgn-modal-content-border-width !default;
+$pgn-modal-backdrop-bg: $pgn-color-black !default;
+$pgn-modal-content-border-radius: $pgn-border-radius-lg !default;
+$pgn-modal-content-border-color: #00000033 !default;
+$pgn-modal-title-line-height: $pgn-line-height-base !default;
+$pgn-modal-footer-padding-base: $pgn-modal-footer-padding-x $pgn-modal-footer-padding-y !default;
+$pgn-image-thumbnail-border-radius: $pgn-border-radius-base !default;
+$pgn-image-thumbnail-border-color: $pgn-color-gray-200 !default;
+$pgn-image-thumbnail-border-width: $pgn-border-width !default;
+$pgn-icon-button-accent-color: $pgn-color-white !default;
+$pgn-icon-button-diameter-inline: calc($pgn-line-height-base + .1em) !default;
+$pgn-blockquote-font-size: calc($pgn-font-size-base * 1.25) !default;
+$pgn-blockquote-small-font-size: $pgn-font-size-small-base !default;
+$pgn-list-group-action-active-bg: $pgn-color-gray-200 !default;
+$pgn-list-group-action-color-base: $pgn-color-gray-700 !default;
+$pgn-list-group-disabled-color: $pgn-color-gray-600 !default;
+$pgn-list-group-border-radius: $pgn-border-radius-base !default;
+$pgn-list-group-border-width: $pgn-border-width !default;
+$pgn-list-group-border-color: #00000020 !default;
+$pgn-list-group-bg-hover: $pgn-color-gray-100 !default;
+$pgn-dt-font-weight: $pgn-font-weight-bold !default;
+$pgn-input-btn-border-width: $pgn-border-width !default;
+$pgn-input-btn-focus-box-shadow: 0 0 0 $pgn-input-btn-focus-width $pgn-input-btn-focus-color !default;
+$pgn-input-btn-line-height-lg: $pgn-line-height-lg !default;
+$pgn-hr-border-margin-y: $pgn-spacer-base !default;
+$pgn-hr-border-width: $pgn-border-width !default;
+$pgn-hr-border-color: #0000001A !default;
+$pgn-headings-color: $pgn-color-black !default;
+$pgn-headings-font-weight: $pgn-font-weight-bold !default;
+$pgn-body-color: $pgn-color-gray-700 !default;
+$pgn-form-feedback-tooltip-border-radius: $pgn-border-radius-base !default;
+$pgn-form-feedback-tooltip-line-height: $pgn-line-height-base !default;
+$pgn-form-feedback-tooltip-font-size: $pgn-font-size-sm !default;
+$pgn-form-feedback-font-size: $pgn-font-size-small-base !default;
+$pgn-form-feedback-margin-top: $pgn-form-text-margin-top !default;
+$pgn-form-custom-file-box-shadow-base: $pgn-form-input-box-shadow-base !default;
+$pgn-form-custom-range-thumb-box-shadow-focus-width: $pgn-form-input-focus-width !default;
+$pgn-form-custom-range-thumb-height: $pgn-form-custom-range-thumb-width !default;
+$pgn-form-custom-range-track-bg: $pgn-color-gray-300 !default;
+$pgn-form-custom-select-border-radius: $pgn-border-radius-base !default;
+$pgn-form-custom-select-border-width-focus: $pgn-form-input-focus-width !default;
+$pgn-form-custom-select-bg-disabled: $pgn-color-gray-100 !default;
+$pgn-form-custom-switch-indicator-size: calc($pgn-form-custom-control-indicator-size - $pgn-form-custom-control-indicator-border-width * 4) !default;
+$pgn-form-custom-switch-indicator-border-radius: calc($pgn-form-custom-control-indicator-size / 2) !default;
+$pgn-form-custom-switch-width: calc($pgn-form-custom-control-indicator-size * 1.75) !default;
+$pgn-form-custom-control-indicator-border-color: $pgn-color-gray-700 !default;
+$pgn-form-custom-control-indicator-box-shadow: $pgn-form-input-box-shadow-base !default;
+$pgn-form-input-group-addon-bg: $pgn-color-gray-100 !default;
+$pgn-form-input-border-radius-sm: $pgn-border-radius-sm !default;
+$pgn-form-input-border-radius-lg: $pgn-border-radius-lg !default;
+$pgn-form-input-border-radius-base: $pgn-border-radius-base !default;
+$pgn-form-input-color-base: $pgn-color-gray-700 !default;
+$pgn-form-input-bg-disabled: $pgn-color-gray-100 !default;
+$pgn-form-input-line-height-sm: $pgn-input-btn-line-height-sm !default;
+$pgn-form-input-line-height-base: $pgn-input-btn-line-height-base !default;
+$pgn-form-input-font-size-lg: $pgn-input-btn-font-size-lg !default;
+$pgn-form-input-font-size-sm: $pgn-input-btn-font-size-sm !default;
+$pgn-form-input-font-size-base: $pgn-input-btn-font-size-base !default;
+$pgn-form-input-font-family: $pgn-input-btn-font-family !default;
+$pgn-form-input-padding-x-lg: $pgn-input-btn-padding-lg-x !default;
+$pgn-form-input-padding-x-sm: $pgn-input-btn-padding-sm-x !default;
+$pgn-form-input-padding-x-base: $pgn-input-btn-padding-x !default;
+$pgn-form-input-padding-y-lg: $pgn-input-btn-padding-lg-y !default;
+$pgn-form-input-padding-y-sm: $pgn-input-btn-padding-sm-y !default;
+$pgn-form-input-padding-y-base: $pgn-input-btn-padding-y !default;
+$pgn-dropzone-restriction-msg-font-size: $pgn-font-size-small-x !default;
+$pgn-dropdown-link-hover-color: $pgn-color-gray-900 !default;
+$pgn-dropdown-link-color: $pgn-color-gray-900 !default;
+$pgn-dropdown-divider-margin-y: calc($pgn-spacer-base / 2) !default;
+$pgn-dropdown-divider-bg: $pgn-color-gray-100 !default;
+$pgn-dropdown-border-radius-base: $pgn-border-radius-base !default;
+$pgn-dropdown-border-width: $pgn-border-width !default;
+$pgn-dropdown-border-color: #00000026 !default;
+$pgn-dropdown-font-size: $pgn-font-size-base !default;
+$pgn-dropdown-padding-header: $pgn-dropdown-padding-y-base $pgn-dropdown-padding-x-item !default;
+$pgn-data-table-box-shadow: $pgn-box-shadow-sm !default;
+$pgn-data-table-border: 1px solid $pgn-color-gray-200 !default;
+$pgn-data-table-background-is-loading: #FFFFFFB3 !default;
+$pgn-collapsible-card-spacer-x-lg: $pgn-card-spacer-x !default;
+$pgn-collapsible-card-spacer-y-lg: $pgn-card-spacer-y !default;
+$pgn-code-pre-color: $pgn-color-gray-900 !default;
+$pgn-code-kbd-bg: $pgn-color-gray-700 !default;
+$pgn-code-kbd-color: $pgn-color-white !default;
+$pgn-code-kbd-nested-font-weight: $pgn-font-weight-bold !default;
+$pgn-code-kbd-font-size: $pgn-code-font-size !default;
+$pgn-close-button-text-shadow: 0 1px 0 $pgn-color-white !default;
+$pgn-close-button-color: $pgn-color-black !default;
+$pgn-close-button-font-weight: $pgn-font-weight-bold !default;
+$pgn-close-button-font-size: calc($pgn-font-size-base * 1.5) !default;
+$pgn-carousel-caption-color: $pgn-color-white !default;
+$pgn-carousel-indicator-active-bg: $pgn-color-white !default;
+$pgn-card-footer-text-font-size: $pgn-font-size-small-x !default;
+$pgn-card-divider-margin-y: $pgn-card-spacer-y !default;
+$pgn-card-columns-margin: $pgn-card-spacer-y !default;
+$pgn-card-margin-grid: $pgn-card-margin-group !default;
+$pgn-card-margin-deck: $pgn-card-margin-group !default;
+$pgn-card-image-horizontal-width-min: $pgn-card-image-horizontal-width-max !default;
+$pgn-card-cap-bg: #00000008 !default;
+$pgn-card-border-color-focus: #00000080 !default;
+$pgn-card-border-color-base: #00000020 !default;
+$pgn-card-border-radius-base: $pgn-border-radius-base !default;
+$pgn-card-border-width: $pgn-border-width !default;
+$pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A !default;
+$pgn-btn-tertiary-inverse-color: $pgn-color-white !default;
+$pgn-btn-tertiary-color: $pgn-color-gray-700 !default;
+$pgn-btn-border-radius-sm: $pgn-border-radius-sm !default;
+$pgn-btn-border-radius-lg: $pgn-border-radius-lg !default;
+$pgn-btn-border-radius-base: $pgn-border-radius-base !default;
+$pgn-btn-line-height-sm: $pgn-input-btn-line-height-sm !default;
+$pgn-btn-line-height-base: $pgn-input-btn-line-height-base !default;
+$pgn-btn-font-weight: $pgn-font-weight-normal !default;
+$pgn-btn-font-size-lg: $pgn-input-btn-font-size-lg !default;
+$pgn-btn-font-size-sm: $pgn-input-btn-font-size-sm !default;
+$pgn-btn-font-size-base: $pgn-input-btn-font-size-base !default;
+$pgn-btn-font-family: $pgn-input-btn-font-family !default;
+$pgn-btn-padding-x-sm: $pgn-input-btn-padding-sm-x !default;
+$pgn-btn-padding-x-lg: $pgn-input-btn-padding-lg-x !default;
+$pgn-btn-padding-x-base: $pgn-input-btn-padding-x !default;
+$pgn-btn-padding-y-sm: $pgn-input-btn-padding-sm-y !default;
+$pgn-btn-padding-y-lg: $pgn-input-btn-padding-lg-y !default;
+$pgn-btn-padding-y-base: $pgn-input-btn-padding-y !default;
+$pgn-breadcrumb-inverse-color: $pgn-color-white !default;
+$pgn-breadcrumb-color-divider: $pgn-color-gray-600 !default;
+$pgn-breadcrumb-bg: $pgn-color-gray-200 !default;
+$pgn-breadcrumb-border-radius-base: $pgn-border-radius-base !default;
+$pgn-badge-focus-width: $pgn-input-btn-focus-width !default;
+$pgn-badge-font-weight: $pgn-font-weight-bold !default;
+$pgn-annotation-line-height: $pgn-line-height-sm !default;
+$pgn-annotation-font-size: $pgn-font-size-sm !default;
+$pgn-alert-color-content: $pgn-color-gray-700 !default;
+$pgn-alert-color-title: $pgn-color-black !default;
+$pgn-alert-font-weight-link: $pgn-font-weight-normal !default;
+$pgn-alert-border-radius: $pgn-border-radius-base !default;
+$pgn-color-dark-900: #1B2C21FF !default;
+$pgn-color-dark-800: #1D2F23FF !default;
+$pgn-color-dark-700: #1F3226FF !default;
+$pgn-color-dark-600: #23392AFF !default;
+$pgn-color-dark-500: $pgn-color-dark-base !default;
+$pgn-color-dark-400: #5D6F63FF !default;
+$pgn-color-dark-300: #939F97FF !default;
+$pgn-color-dark-200: #C9CFCBFF !default;
+$pgn-color-dark-100: #F2F3F3FF !default;
+$pgn-color-light-900: #9E9B99FF !default;
+$pgn-color-light-800: #A9A6A4FF !default;
+$pgn-color-light-700: #B4B1AFFF !default;
+$pgn-color-light-600: #CBC7C5FF !default;
+$pgn-color-light-500: $pgn-color-light-base !default;
+$pgn-color-light-400: #E9E6E4FF !default;
+$pgn-color-light-300: #F0EEEDFF !default;
+$pgn-color-light-200: #F8F7F6FF !default;
+$pgn-color-light-100: #FDFDFDFF !default;
+$pgn-color-danger-base: $pgn-color-red !default;
+$pgn-color-warning-base: $pgn-color-yellow !default;
+$pgn-color-info-base: $pgn-color-teal !default;
+$pgn-color-success-base: $pgn-color-green !default;
+$pgn-color-brand-900: #6E003BFF !default;
+$pgn-color-brand-800: #76003FFF !default;
+$pgn-color-brand-700: #7E0043FF !default;
+$pgn-color-brand-600: #8D004CFF !default;
+$pgn-color-brand-500: $pgn-color-brand-base !default;
+$pgn-color-brand-400: #B6407FFF !default;
+$pgn-color-brand-300: #CE80AAFF !default;
+$pgn-color-brand-200: #E7BFD4FF !default;
+$pgn-color-brand-100: #F9F0F5FF !default;
+$pgn-color-secondary-base: $pgn-color-gray-700 !default;
+$pgn-color-primary-900: #07223CFF !default;
+$pgn-color-primary-800: #082440FF !default;
+$pgn-color-primary-700: #082644FF !default;
+$pgn-color-primary-600: #092B4DFF !default;
+$pgn-color-primary-500: $pgn-color-primary-base !default;
+$pgn-color-primary-400: #476480FF !default;
+$pgn-color-primary-300: #8598AAFF !default;
+$pgn-color-primary-200: #C2CBD5FF !default;
+$pgn-color-primary-100: #F0F3F5FF !default;
+$pgn-color-gray-500: $pgn-color-gray-base !default;
+$pgn-color-active: $pgn-color-white !default;
+$pgn-color-background-base: $pgn-color-white !default;
+$pgn-tooltip-arrow-color-base: $pgn-tooltip-bg-base !default;
+$pgn-search-field-input-height-search: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default;
+$pgn-search-field-button-variants-dark: $pgn-color-brand-500 !default;
+$pgn-search-field-button-variants-light: $pgn-color-primary-500 !default;
+$pgn-search-field-border-color-base: $pgn-color-gray-500 !default;
+$pgn-progress-bar-bar-bg-annotated: $pgn-color-dark-500 !default;
+$pgn-progress-bar-border-color: $pgn-color-gray-500 !default;
+$pgn-product-tour-checkpoint-color-breadcrumb: $pgn-color-primary-500 !default;
+$pgn-product-tour-checkpoint-color-border: $pgn-color-brand-500 !default;
+$pgn-product-tour-checkpoint-color-background: $pgn-color-light-300 !default;
+$pgn-popover-body-color: $pgn-body-color !default;
+$pgn-popover-header-color: $pgn-headings-color !default;
+$pgn-popover-bg: $pgn-color-background-base !default;
+$pgn-pagination-focus-color-base: $pgn-color-primary-500 !default;
+$pgn-pagination-focus-box-shadow: $pgn-input-btn-focus-box-shadow !default;
+$pgn-pagination-bg-base: $pgn-color-background-base !default;
+$pgn-pagination-color-active: $pgn-color-active !default;
+$pgn-navbar-light-brand-color-hover: $pgn-navbar-light-color-active !default;
+$pgn-navbar-light-brand-color-base: $pgn-navbar-light-color-active !default;
+$pgn-navbar-dark-color-active: $pgn-color-active !default;
+$pgn-navbar-toggler-border-radius: $pgn-btn-border-radius-base !default;
+$pgn-navbar-brand-padding-y: calc(($pgn-navbar-nav-link-height - $pgn-navbar-brand-height) / 2) !default;
+$pgn-navbar-brand-height: calc($pgn-navbar-brand-font-size * $pgn-line-height-base) !default;
+$pgn-nav-pills-link-link-active-color: $pgn-color-active !default;
+$pgn-nav-tabs-link-active-color-border: transparent transparent $pgn-color-primary-500 !default;
+$pgn-nav-tabs-link-active-color-base: $pgn-color-primary-500 !default;
+$pgn-nav-tabs-link-hover-bg: $pgn-color-light-400 !default;
+$pgn-nav-tabs-border-color: $pgn-color-light-400 !default;
+$pgn-modal-header-border-color: $pgn-border-color !default;
+$pgn-modal-content-bg: $pgn-color-background-base !default;
+$pgn-modal-footer-border-width: $pgn-modal-header-border-width !default;
+$pgn-image-figure-caption-color: $pgn-color-gray-500 !default;
+$pgn-text-muted: $pgn-color-gray-500 !default;
+$pgn-list-group-action-active-color: $pgn-body-color !default;
+$pgn-list-group-action-color-hover: $pgn-list-group-action-color-base !default;
+$pgn-list-group-active-color-base: $pgn-color-active !default;
+$pgn-list-group-bg-base: $pgn-color-background-base !default;
+$pgn-link-brand-inline-color: $pgn-color-brand-500 !default;
+$pgn-link-brand-color: $pgn-color-brand-500 !default;
+$pgn-link-muted-inline-color: $pgn-color-primary-500 !default;
+$pgn-link-muted-color: $pgn-color-primary-500 !default;
+$pgn-body-bg: $pgn-color-background-base !default;
+$pgn-form-custom-file-button-bg: $pgn-form-input-group-addon-bg !default;
+$pgn-form-custom-file-color: $pgn-form-input-color-base !default;
+$pgn-form-custom-file-font-family: $pgn-form-input-font-family !default;
+$pgn-form-custom-file-line-height: $pgn-form-input-line-height-base !default;
+$pgn-form-custom-file-padding-x: $pgn-form-input-padding-x-base !default;
+$pgn-form-custom-file-padding-y: $pgn-form-input-padding-y-base !default;
+$pgn-form-custom-file-bg-disabled: $pgn-form-input-bg-disabled !default;
+$pgn-form-custom-file-border-color-radius: $pgn-form-input-border-radius-base !default;
+$pgn-form-custom-select-border-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default;
+$pgn-form-custom-select-color-base: $pgn-form-input-color-base !default;
+$pgn-form-custom-select-line-height: $pgn-form-input-line-height-base !default;
+$pgn-form-custom-select-font-size-lg: $pgn-form-input-font-size-lg !default;
+$pgn-form-custom-select-font-size-sm: $pgn-form-input-font-size-sm !default;
+$pgn-form-custom-select-font-size-base: $pgn-form-input-font-size-base !default;
+$pgn-form-custom-select-font-family: $pgn-form-input-font-family !default;
+$pgn-form-custom-select-padding-x-lg: $pgn-form-input-padding-x-lg !default;
+$pgn-form-custom-select-padding-x-sm: $pgn-form-input-padding-x-sm !default;
+$pgn-form-custom-select-padding-x-base: $pgn-form-input-padding-x-base !default;
+$pgn-form-custom-select-padding-y-lg: $pgn-form-input-padding-y-lg !default;
+$pgn-form-custom-select-padding-y-sm: $pgn-form-input-padding-y-sm !default;
+$pgn-form-custom-select-padding-y-base: $pgn-form-input-padding-y-base !default;
+$pgn-form-custom-control-indicator-checked-border-color-base: $pgn-color-primary-500 !default;
+$pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580 !default;
+$pgn-form-custom-control-indicator-disabled-bg: $pgn-form-input-bg-disabled !default;
+$pgn-form-input-group-addon-color-base: $pgn-form-input-color-base !default;
+$pgn-form-input-height-inner-quarter: calc($pgn-form-input-line-height-base * .25em + calc($pgn-form-input-padding-y-base / 2)) !default;
+$pgn-form-input-height-inner-half: calc($pgn-form-input-line-height-base * .5em + $pgn-form-input-padding-y-base) !default;
+$pgn-form-input-height-inner-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2) !default;
+$pgn-form-input-height-sm: calc($pgn-form-input-line-height-sm * 1em + $pgn-input-btn-padding-sm-y * 2 + $pgn-form-input-border-height) !default;
+$pgn-form-input-height-base: calc($pgn-form-input-line-height-base * 1em + $pgn-form-input-padding-y-base * 2 + $pgn-form-input-border-height) !default;
+$pgn-form-input-focus-color-base: $pgn-form-input-color-base !default;
+$pgn-form-input-box-shadow-focus: $pgn-input-btn-focus-box-shadow !default;
+$pgn-form-input-border-width: $pgn-input-btn-border-width !default;
+$pgn-form-input-border-color: $pgn-color-gray-500 !default;
+$pgn-form-input-color-plaintext: $pgn-body-color !default;
+$pgn-form-input-color-placeholder: $pgn-color-gray-500 !default;
+$pgn-form-input-bg-base: $pgn-color-background-base !default;
+$pgn-form-input-line-height-lg: $pgn-input-btn-line-height-lg !default;
+$pgn-form-input-font-weight: $pgn-font-weight-base !default;
+$pgn-dropzone-restriction-msg-color: $pgn-color-gray-500 !default;
+$pgn-dropzone-border-active: 2px solid $pgn-color-primary-500 !default;
+$pgn-dropzone-border-default: 1px dashed $pgn-color-gray-500 !default;
+$pgn-dropdown-link-active-color: $pgn-color-active !default;
+$pgn-dropdown-link-hover-bg: $pgn-color-light-300 !default;
+$pgn-dropdown-border-radius-inner: calc($pgn-dropdown-border-radius-base - $pgn-dropdown-border-width) !default;
+$pgn-dropdown-bg: $pgn-color-background-base !default;
+$pgn-dropdown-color-header: $pgn-color-gray-500 !default;
+$pgn-dropdown-color-base: $pgn-body-color !default;
+$pgn-data-table-background-color: $pgn-color-background-base !default;
+$pgn-card-divider-bg: $pgn-color-light-400 !default;
+$pgn-card-bg: $pgn-color-background-base !default;
+$pgn-btn-tertiary-inverse-bg-active: $pgn-btn-tertiary-inverse-bg-hover !default;
+$pgn-btn-tertiary-bg-active: $pgn-color-light-500 !default;
+$pgn-btn-tertiary-bg-hover: $pgn-color-light-500 !default;
+$pgn-btn-border-width: $pgn-input-btn-border-width !default;
+$pgn-btn-line-height-lg: $pgn-input-btn-line-height-lg !default;
+$pgn-breadcrumb-inverse-spacer: $pgn-color-light-700 !default;
+$pgn-breadcrumb-inverse-active: $pgn-color-light-500 !default;
+$pgn-breadcrumb-color-active: $pgn-color-gray-500 !default;
+$pgn-breadcrumb-color-base: $pgn-color-primary-500 !default;
+$pgn-avatar-border-base: solid 1px $pgn-color-light-300 !default;
+$pgn-alert-actions-gap: $pgn-spacer-3 !default;
+$pgn-color-danger-900: #892029FF !default;
+$pgn-color-danger-800: #92222CFF !default;
+$pgn-color-danger-700: #9C242EFF !default;
+$pgn-color-danger-600: #B02934FF !default;
+$pgn-color-danger-500: $pgn-color-danger-base !default;
+$pgn-color-danger-400: #D2626BFF !default;
+$pgn-color-danger-300: #E1969DFF !default;
+$pgn-color-danger-200: #F0CBCEFF !default;
+$pgn-color-danger-100: #FBF2F3FF !default;
+$pgn-color-warning-900: #B39800FF !default;
+$pgn-color-warning-800: #BFA300FF !default;
+$pgn-color-warning-700: #CCAE00FF !default;
+$pgn-color-warning-600: #E6C300FF !default;
+$pgn-color-warning-500: $pgn-color-warning-base !default;
+$pgn-color-warning-400: #FFE340FF !default;
+$pgn-color-warning-300: #FFEC80FF !default;
+$pgn-color-warning-200: #FFF6BFFF !default;
+$pgn-color-warning-100: #FFFDF0FF !default;
+$pgn-color-info-900: #004C77FF !default;
+$pgn-color-info-800: #005280FF !default;
+$pgn-color-info-700: #005788FF !default;
+$pgn-color-info-600: #006299FF !default;
+$pgn-color-info-500: $pgn-color-info-base !default;
+$pgn-color-info-400: #4092BFFF !default;
+$pgn-color-info-300: #80B6D5FF !default;
+$pgn-color-info-200: #BFDBEAFF !default;
+$pgn-color-info-100: #F0F6FAFF !default;
+$pgn-color-success-900: #105B3AFF !default;
+$pgn-color-success-800: #11623EFF !default;
+$pgn-color-success-700: #126842FF !default;
+$pgn-color-success-600: #15754BFF !default;
+$pgn-color-success-500: $pgn-color-success-base !default;
+$pgn-color-success-400: #51A17EFF !default;
+$pgn-color-success-300: #8BC1A9FF !default;
+$pgn-color-success-200: #C5E0D4FF !default;
+$pgn-color-success-100: #F1F8F5FF !default;
+$pgn-color-secondary-900: #303030FF !default;
+$pgn-color-secondary-800: #343434FF !default;
+$pgn-color-secondary-700: #373737FF !default;
+$pgn-color-secondary-600: #3E3E3EFF !default;
+$pgn-color-secondary-500: $pgn-color-secondary-base !default;
+$pgn-color-secondary-400: #747474FF !default;
+$pgn-color-secondary-300: #A2A2A2FF !default;
+$pgn-color-secondary-200: #D1D1D1FF !default;
+$pgn-color-secondary-100: #F4F4F4FF !default;
+$pgn-color-input-focus: $pgn-color-primary-500 !default;
+$pgn-color-disabled: $pgn-color-gray-500 !default;
+$pgn-color-background-active: $pgn-color-primary-500 !default;
+$pgn-popover-danger-icon-color: $pgn-color-warning-500 !default;
+$pgn-popover-danger-bg: $pgn-color-danger-100 !default;
+$pgn-popover-warning-icon-color: $pgn-color-warning-500 !default;
+$pgn-popover-warning-bg: $pgn-color-warning-100 !default;
+$pgn-popover-success-icon-color: $pgn-color-success-500 !default;
+$pgn-popover-success-bg: $pgn-color-success-100 !default;
+$pgn-popover-arrow-color: $pgn-popover-bg !default;
+$pgn-pagination-bg-active: $pgn-color-background-active !default;
+$pgn-pagination-color-disabled: $pgn-color-disabled !default;
+$pgn-navbar-dark-brand-color-hover: $pgn-navbar-dark-color-active !default;
+$pgn-navbar-dark-brand-color-base: $pgn-navbar-dark-color-active !default;
+$pgn-nav-pills-link-link-active-bg: $pgn-color-background-active !default;
+$pgn-nav-tabs-link-active-bg: $pgn-body-bg !default;
+$pgn-nav-tabs-link-hover-border-color: transparent transparent $pgn-nav-tabs-border-color !default;
+$pgn-modal-footer-border-color: $pgn-modal-header-border-color !default;
+$pgn-menu-background-active: $pgn-btn-tertiary-bg-active !default;
+$pgn-image-thumbnail-bg: $pgn-body-bg !default;
+$pgn-list-group-disabled-bg: $pgn-list-group-bg-base !default;
+$pgn-list-group-active-bg: $pgn-color-background-active !default;
+$pgn-link-brand-inline-hover-color: #95004EFF !default;
+$pgn-link-brand-inline-decoration-color: #9D00544D !default;
+$pgn-link-brand-hover-color: #95004EFF !default;
+$pgn-link-muted-inline-hover-color: #002A4FFF !default;
+$pgn-link-muted-inline-decoration-color: #0A30554D !default;
+$pgn-link-muted-hover-color: #002A4FFF !default;
+$pgn-input-btn-focus-color: $pgn-color-input-focus !default;
+$pgn-form-custom-file-button-color: $pgn-form-custom-file-color !default;
+$pgn-form-custom-file-font-weight: $pgn-form-input-font-weight !default;
+$pgn-form-custom-file-bg-base: $pgn-form-input-bg-base !default;
+$pgn-form-custom-file-box-shadow-focus: $pgn-form-input-box-shadow-focus !default;
+$pgn-form-custom-file-border-width: $pgn-form-input-border-width !default;
+$pgn-form-custom-file-border-color-base: $pgn-form-input-border-color !default;
+$pgn-form-custom-file-height-inner: $pgn-form-input-height-inner-base !default;
+$pgn-form-custom-file-height-base: $pgn-form-input-height-base !default;
+$pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px $pgn-body-bg, $pgn-form-input-box-shadow-focus !default;
+$pgn-form-custom-range-thumb-bg-active: #1F3E64FF !default;
+$pgn-form-custom-range-thumb-bg-disabled: $pgn-color-disabled !default;
+$pgn-form-custom-range-thumb-bg-base: $pgn-color-background-active !default;
+$pgn-form-custom-select-height-sm: $pgn-form-input-height-sm !default;
+$pgn-form-custom-select-border-color-base: $pgn-form-input-border-color !default;
+$pgn-form-custom-select-border-width-base: $pgn-form-input-border-width !default;
+$pgn-form-custom-select-feedback-icon-size: $pgn-form-input-height-inner-half $pgn-form-input-height-inner-half !default;
+$pgn-form-custom-select-feedback-icon-position: center right calc($pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default;
+$pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * $pgn-form-custom-select-padding-y-base) * 3 / 4 + $pgn-form-custom-select-padding-x-base + $pgn-form-custom-select-indicator-padding) !default;
+$pgn-form-custom-select-bg-base: $pgn-form-input-bg-base !default;
+$pgn-form-custom-select-color-disabled: $pgn-color-disabled !default;
+$pgn-form-custom-select-font-weight: $pgn-form-input-font-weight !default;
+$pgn-form-custom-select-font-height-base: $pgn-form-input-height-base !default;
+$pgn-form-custom-checkbox-indicator-indeterminate-bg: $pgn-color-background-active !default;
+$pgn-form-custom-control-label-floating-text: #FFFFFF1A !default;
+$pgn-form-custom-control-label-color-disabled: $pgn-color-disabled !default;
+$pgn-form-custom-control-indicator-bg-base: $pgn-form-input-bg-base !default;
+$pgn-form-input-group-addon-color-border: $pgn-form-input-border-color !default;
+$pgn-form-input-height-lg: calc($pgn-form-input-line-height-lg * 1em + $pgn-input-btn-padding-lg-y * 2 + $pgn-form-input-border-height) !default;
+$pgn-form-input-focus-color-border: $pgn-color-input-focus !default;
+$pgn-form-input-focus-bg: $pgn-form-input-bg-base !default;
+$pgn-form-input-border-height: calc($pgn-form-input-border-width * 2) !default;
+$pgn-dropzone-error-wrapper-color: $pgn-color-danger-500 !default;
+$pgn-dropzone-border-error: 2px solid $pgn-color-danger-300 !default;
+$pgn-dropzone-border-focus: 2px solid $pgn-color-info-300 !default;
+$pgn-dropzone-border-hover: 2px solid $pgn-color-info-300 !default;
+$pgn-dropdown-link-disabled-color: $pgn-color-disabled !default;
+$pgn-dropdown-link-active-bg: $pgn-color-background-active !default;
+$pgn-btn-disabled-link-color: $pgn-color-disabled !default;
+$pgn-color-link: $pgn-color-info-500 !default;
+$pgn-pagination-border-color-active: $pgn-pagination-bg-active !default;
+$pgn-pagination-color-base: $pgn-color-link !default;
+$pgn-list-group-active-color-border: $pgn-list-group-active-bg !default;
+$pgn-link-brand-inline-hover-decoration-color: $pgn-link-brand-inline-hover-color !default;
+$pgn-link-muted-inline-hover-decoration-color: $pgn-link-muted-inline-hover-color !default;
+$pgn-link-inline-color: $pgn-color-link !default;
+$pgn-link-hover-color: #0066A3FF !default;
+$pgn-link-color: $pgn-color-link !default;
+$pgn-form-custom-file-border-color-focus: $pgn-form-input-focus-color-border !default;
+$pgn-form-custom-select-border-color-focus: $pgn-form-input-focus-color-border !default;
+$pgn-form-custom-select-font-height-lg: $pgn-form-input-height-lg !default;
+$pgn-form-custom-checkbox-indicator-indeterminate-border-color: $pgn-form-custom-checkbox-indicator-indeterminate-bg !default;
+$pgn-form-custom-control-indicator-checked-border-color-focus: $pgn-form-input-focus-color-border !default;
+$pgn-pagination-color-hover: $pgn-link-hover-color !default;
+$pgn-link-inline-hover-color: #0066A3FF !default;
+$pgn-link-inline-decoration-color: #006DAA4D !default;
+$pgn-link-inline-hover-decoration-color: $pgn-link-inline-hover-color !default;
diff --git a/tokens/build/css-to-scss.json b/tokens/build/css-to-scss.json
new file mode 100644
index 00000000000..89e56f760ab
--- /dev/null
+++ b/tokens/build/css-to-scss.json
@@ -0,0 +1 @@
+{"var(--pgn-color-background-active)":"$component-active-bg","var(--pgn-color-active)":"$component-active-color","var(--pgn-action-row-gap-x)":"$action-row-gap-x","var(--pgn-action-row-gap-y)":"$action-row-gap-y","var(--pgn-alert-padding-y)":"$alert-padding-y","var(--pgn-alert-padding-x)":"$alert-padding-x","var(--pgn-alert-margin-bottom)":"$alert-margin-bottom","var(--pgn-alert-border-radius)":"$alert-border-radius","var(--pgn-alert-border-width)":"$alert-border-width","var(--pgn-alert-font-weight-link)":"$alert-link-font-weight","var(--pgn-alert-font-size)":"$alert-font-size","var(--pgn-alert-color-title)":"$alert-title-color","var(--pgn-alert-color-content)":"$alert-content-color","var(--pgn-alert-box-shadow)":"$alert-box-shadow","var(--pgn-alert-level-bg)":"$alert-bg-level","var(--pgn-alert-level-border)":"$alert-border-level","var(--pgn-alert-level-color)":"$alert-color-level","var(--pgn-alert-icon-space)":"$alert-icon-space","var(--pgn-alert-line-height)":"$alert-line-height","var(--pgn-alert-actions-gap)":"$alert-actions-gap","var(--pgn-annotation-padding)":"$annotation-padding","var(--pgn-annotation-box-shadow)":"$annotation-box-shadow","var(--pgn-annotation-border-radius)":"$annotation-border-radius","var(--pgn-annotation-max-width)":"$annotation-max-width","var(--pgn-annotation-font-size)":"$annotation-font-size","var(--pgn-annotation-line-height)":"$annotation-line-height","var(--pgn-annotation-arrow-side-margin)":"$annotation-arrow-side-margin","var(--pgn-annotation-arrow-border-width)":"$annotation-arrow-border-width","var(--pgn-avatar-border-base)":"$avatar-border","var(--pgn-avatar-border-radius)":"$avatar-border-radius","var(--pgn-avatar-size-base)":"$avatar-size","var(--pgn-avatar-size-xs)":"$avatar-size-xs","var(--pgn-avatar-size-sm)":"$avatar-size-sm","var(--pgn-avatar-size-lg)":"$avatar-size-lg","var(--pgn-avatar-size-xl)":"$avatar-size-xl","var(--pgn-avatar-size-xxl)":"$avatar-size-xxl","var(--pgn-avatar-size-huge)":"$avatar-size-huge","var(--pgn-avatar-button-padding-left-base)":"$avatar-button-padding-left","var(--pgn-avatar-button-padding-left-sm)":"$avatar-button-padding-left-sm","var(--pgn-avatar-button-padding-left-lg)":"$avatar-button-padding-left-lg","var(--pgn-badge-font-size)":"$badge-font-size","var(--pgn-badge-font-weight)":"$badge-font-weight","var(--pgn-badge-padding-x-base)":"$badge-padding-x","var(--pgn-badge-padding-x-pill)":"$badge-pill-padding-x","var(--pgn-badge-padding-y)":"$badge-padding-y","var(--pgn-badge-border-radius-base)":"$badge-border-radius","var(--pgn-badge-border-radius-pill)":"$badge-pill-border-radius","var(--pgn-badge-transition)":"$badge-transition","var(--pgn-badge-focus-width)":"$badge-focus-width","var(--pgn-breadcrumb-font-size)":"$breadcrumb-font-size","var(--pgn-breadcrumb-padding-y)":"$breadcrumb-padding-y","var(--pgn-breadcrumb-padding-x)":"$breadcrumb-padding-x","var(--pgn-breadcrumb-padding-item)":"$breadcrumb-item-padding","var(--pgn-breadcrumb-margin-bottom)":"$breadcrumb-margin-bottom","var(--pgn-breadcrumb-margin-left)":"$breadcrumb-margin-left","var(--pgn-breadcrumb-border-focus-axis-y)":"$breadcrumb-border-focus-axis-y","var(--pgn-breadcrumb-border-focus-axis-x)":"$breadcrumb-border-focus-axis-x","var(--pgn-breadcrumb-border-focus-width)":"$breadcrumb-border-focus-width","var(--pgn-breadcrumb-border-radius-base)":"$breadcrumb-border-radius","var(--pgn-breadcrumb-border-radius-focus)":"$breadcrumb-focus-border-radius","var(--pgn-breadcrumb-bg)":"$breadcrumb-bg","var(--pgn-breadcrumb-color-base)":"$breadcrumb-color","var(--pgn-breadcrumb-color-divider)":"$breadcrumb-divider-color","var(--pgn-breadcrumb-color-active)":"$breadcrumb-active-color","var(--pgn-breadcrumb-inverse-active)":"$breadcrumb-inverse-active","var(--pgn-breadcrumb-inverse-spacer)":"$breadcrumb-inverse-spacer","var(--pgn-breadcrumb-inverse-color)":"$breadcrumb-inverse-color","var(--pgn-bubble-expandable-padding-y)":"$bubble-expandable-padding-y","var(--pgn-bubble-expandable-padding-x)":"$bubble-expandable-padding-x","var(--pgn-btn-padding-y-base)":"$btn-padding-y","var(--pgn-btn-padding-y-lg)":"$btn-padding-y-lg","var(--pgn-btn-padding-y-sm)":"$btn-padding-y-sm","var(--pgn-btn-padding-x-base)":"$btn-padding-x","var(--pgn-btn-padding-x-lg)":"$btn-padding-x-lg","var(--pgn-btn-padding-x-sm)":"$btn-padding-x-sm","var(--pgn-btn-font-family)":"$btn-font-family","var(--pgn-btn-font-size-base)":"$btn-font-size","var(--pgn-btn-font-size-sm)":"$btn-font-size-sm","var(--pgn-btn-font-size-lg)":"$btn-font-size-lg","var(--pgn-btn-font-weight)":"$btn-font-weight","var(--pgn-btn-line-height-base)":"$btn-line-height","var(--pgn-btn-line-height-sm)":"$btn-line-height-sm","var(--pgn-btn-line-height-lg)":"$btn-line-height-lg","var(--pgn-btn-border-width)":"$btn-border-width","var(--pgn-btn-border-radius-base)":"$btn-border-radius","var(--pgn-btn-border-radius-lg)":"$btn-border-radius-lg","var(--pgn-btn-border-radius-sm)":"$btn-border-radius-sm","var(--pgn-btn-box-shadow-base)":"$btn-box-shadow","var(--pgn-btn-box-shadow-active)":"$btn-active-box-shadow","var(--pgn-btn-focus-width)":"$btn-focus-width","var(--pgn-btn-focus-gap)":"$btn-focus-gap","var(--pgn-btn-disabled-opacity)":"$btn-disabled-opacity","var(--pgn-btn-disabled-link-color)":"$btn-link-disabled-color","var(--pgn-btn-tertiary-color)":"$btn-tertiary-color","var(--pgn-btn-tertiary-bg-hover)":"$btn-tertiary-hover-bg","var(--pgn-btn-tertiary-bg-active)":"$btn-tertiary-active-bg","var(--pgn-btn-tertiary-inverse-color)":"$btn-inverse-tertiary-color","var(--pgn-btn-tertiary-inverse-bg-base)":"$btn-inverse-tertiary-bg","var(--pgn-btn-tertiary-inverse-bg-hover)":"$btn-inverse-tertiary-hover-bg","var(--pgn-btn-tertiary-inverse-bg-active)":"$btn-inverse-tertiary-active-bg","var(--pgn-btn-block-spacing-y)":"$btn-block-spacing-y","var(--pgn-btn-transition)":"$btn-transition","var(--pgn-card-spacer-x)":"$card-spacer-x","var(--pgn-card-spacer-y)":"$card-spacer-y","var(--pgn-card-border-width)":"$card-border-width","var(--pgn-card-border-radius-base)":"$card-border-radius","var(--pgn-card-border-radius-image)":"$card-image-border-radius","var(--pgn-card-border-radius-logo)":"$card-logo-border-radius","var(--pgn-card-border-color-base)":"$card-border-color","var(--pgn-card-border-color-focus)":"$card-border-focus-color","var(--pgn-card-cap-bg)":"$card-cap-bg","var(--pgn-card-cap-color)":"$card-cap-color","var(--pgn-card-height-base)":"$card-height","var(--pgn-card-color)":"$card-color","var(--pgn-card-bg)":"$card-bg","var(--pgn-card-image-overlay-padding)":"$card-img-overlay-padding","var(--pgn-card-image-horizontal-width-max)":"$card-image-horizontal-max-width","var(--pgn-card-image-horizontal-width-min)":"$card-image-horizontal-min-width","var(--pgn-card-image-vertical-height-max)":"$card-image-vertical-max-height","var(--pgn-card-margin-group)":"$card-group-margin","var(--pgn-card-margin-deck)":"$card-deck-margin","var(--pgn-card-margin-grid)":"$card-grid-margin","var(--pgn-card-columns-count)":"$card-columns-count","var(--pgn-card-columns-gap)":"$card-columns-gap","var(--pgn-card-columns-margin)":"$card-columns-margin","var(--pgn-card-divider-bg)":"$card-divider-bg","var(--pgn-card-divider-margin-y)":"$card-divider-margin-y","var(--pgn-card-footer-action-gap)":"$card-footer-actions-gap","var(--pgn-card-footer-text-font-size)":"$card-footer-text-font-size","var(--pgn-card-logo-left-offset-base)":"$card-logo-left-offset","var(--pgn-card-logo-left-offset-horizontal)":"$card-logo-left-offset-horizontal","var(--pgn-card-logo-bottom-offset-base)":"$card-logo-bottom-offset","var(--pgn-card-logo-bottom-offset-horizontal)":"$card-logo-bottom-offset-horizontal","var(--pgn-card-logo-width)":"$card-logo-width","var(--pgn-card-logo-height)":"$card-logo-height","var(--pgn-card-loading-skeleton-spacer)":"$loading-skeleton-spacer","var(--pgn-carousel-control-width-base)":"$carousel-control-width","var(--pgn-carousel-control-width-icon)":"$carousel-control-icon-width","var(--pgn-carousel-control-opacity-base)":"$carousel-control-opacity","var(--pgn-carousel-control-opacity-hover)":"$carousel-control-hover-opacity","var(--pgn-carousel-control-transition)":"$carousel-control-transition","var(--pgn-carousel-indicator-width)":"$carousel-indicator-width","var(--pgn-carousel-indicator-height-base)":"$carousel-indicator-height","var(--pgn-carousel-indicator-height-area-hit)":"$carousel-indicator-hit-area-height","var(--pgn-carousel-indicator-spacer)":"$carousel-indicator-spacer","var(--pgn-carousel-indicator-active-bg)":"$carousel-indicator-active-bg","var(--pgn-carousel-indicator-transition)":"$carousel-indicator-transition","var(--pgn-carousel-caption-width)":"$carousel-caption-width","var(--pgn-carousel-caption-color)":"$carousel-caption-color","var(--pgn-carousel-transition-duration)":"$carousel-transition-duration","var(--pgn-chip-padding-y)":"$chip-padding-y","var(--pgn-chip-padding-x)":"$chip-padding-x","var(--pgn-chip-padding-icon-base)":"$chip-icon-padding","var(--pgn-chip-padding-icon-to)":"$chip-padding-to-icon","var(--pgn-chip-margin-base)":"$chip-margin","var(--pgn-chip-margin-inline)":"$chip-margin-inline","var(--pgn-chip-border-radius-base)":"$chip-border-radius","var(--pgn-chip-border-radius-focus)":"$chip-focus-border-radius","var(--pgn-chip-border-width)":"$chip-border-width","var(--pgn-chip-position-axis)":"$chip-position-axis","var(--pgn-chip-font-size)":"$chip-font-size","var(--pgn-chip-font-weight)":"$chip-font-weight","var(--pgn-chip-line-height)":"$chip-line-height","var(--pgn-chip-disabled-opacity)":"$chip-disable-opacity","var(--pgn-chip-icon-size)":"$chip-icon-size","var(--pgn-close-button-font-size)":"$close-font-size","var(--pgn-close-button-font-weight)":"$close-font-weight","var(--pgn-close-button-color)":"$close-color","var(--pgn-close-button-text-shadow)":"$close-text-shadow","var(--pgn-code-font-size)":"$code-font-size","var(--pgn-code-color)":"$code-color","var(--pgn-code-kbd-font-size)":"$kbd-font-size","var(--pgn-code-kbd-box-shadow)":"$kbd-box-shadow","var(--pgn-code-kbd-nested-font-weight)":"$nested-kbd-font-weight","var(--pgn-code-kbd-padding-y)":"$kbd-padding-y","var(--pgn-code-kbd-padding-x)":"$kbd-padding-x","var(--pgn-code-kbd-color)":"$kbd-color","var(--pgn-code-kbd-bg)":"$kbd-bg","var(--pgn-code-pre-color)":"$pre-color","var(--pgn-code-pre-scrollable-max-height)":"$pre-scrollable-max-height","var(--pgn-collapsible-card-spacer-y-base)":"$collapsible-card-spacer-y","var(--pgn-collapsible-card-spacer-y-lg)":"$collapsible-card-spacer-y-lg","var(--pgn-collapsible-card-spacer-x-base)":"$collapsible-card-spacer-x","var(--pgn-collapsible-card-spacer-x-lg)":"$collapsible-card-spacer-x-lg","var(--pgn-collapsible-card-spacer-left-body)":"$collapsible-card-body-spacer-left","var(--pgn-collapsible-card-spacer-icon)":"$collapsible-card-spacer-icon","var(--pgn-collapsible-card-spacer-basic-y)":"$collapsible-basic-spacer-y","var(--pgn-collapsible-card-spacer-basic-x)":"$collapsible-basic-spacer-x","var(--pgn-collapsible-card-spacer-basic-icon)":"$collapsible-basic-spacer-icon","var(--pgn-container-max-width-xs)":"$max-width-xs","var(--pgn-container-max-width-sm)":"$max-width-sm","var(--pgn-container-max-width-md)":"$max-width-md","var(--pgn-container-max-width-lg)":"$max-width-lg","var(--pgn-container-max-width-xl)":"$max-width-xl","var(--pgn-data-table-background-color)":"$data-table-background-color","var(--pgn-data-table-background-is-loading)":"$data-table-is-loading-bg","var(--pgn-data-table-border)":"$data-table-border","var(--pgn-data-table-box-shadow)":"$data-table-box-shadow","var(--pgn-data-table-padding-x)":"$data-table-padding-x","var(--pgn-data-table-padding-y)":"$data-table-padding-y","var(--pgn-data-table-padding-small)":"$data-table-padding-small","var(--pgn-data-table-padding-cell)":"$data-table-cell-padding","var(--pgn-data-table-padding-head-cell)":"$data-table-head-cell-padding","var(--pgn-data-table-footer-position)":"$data-table-footer-position","var(--pgn-data-table-pagination-dropdown-max-height)":"$data-table-pagination-dropdown-max-height","var(--pgn-data-table-pagination-dropdown-min-width)":"$data-table-pagination-dropdown-min-width","var(--pgn-dropdown-min-width)":"$dropdown-min-width","var(--pgn-dropdown-padding-x-base)":"$dropdown-padding-x","var(--pgn-dropdown-padding-x-item)":"$dropdown-item-padding-x","var(--pgn-dropdown-padding-y-base)":"$dropdown-padding-y","var(--pgn-dropdown-padding-y-item)":"$dropdown-item-padding-y","var(--pgn-dropdown-padding-header)":"$dropdown-header-padding","var(--pgn-dropdown-spacer)":"$dropdown-spacer","var(--pgn-dropdown-font-size)":"$dropdown-font-size","var(--pgn-dropdown-color-base)":"$dropdown-color","var(--pgn-dropdown-color-header)":"$dropdown-header-color","var(--pgn-dropdown-bg)":"$dropdown-bg","var(--pgn-dropdown-border-color)":"$dropdown-border-color","var(--pgn-dropdown-border-width)":"$dropdown-border-width","var(--pgn-dropdown-border-radius-base)":"$dropdown-border-radius","var(--pgn-dropdown-border-radius-inner)":"$dropdown-inner-border-radius","var(--pgn-dropdown-divider-bg)":"$dropdown-divider-bg","var(--pgn-dropdown-divider-margin-y)":"$dropdown-divider-margin-y","var(--pgn-dropdown-box-shadow)":"$dropdown-box-shadow","var(--pgn-dropdown-link-color)":"$dropdown-link-color","var(--pgn-dropdown-link-hover-color)":"$dropdown-link-hover-color","var(--pgn-dropdown-link-hover-bg)":"$dropdown-link-hover-bg","var(--pgn-dropdown-link-active-color)":"$dropdown-link-active-color","var(--pgn-dropdown-link-active-bg)":"$dropdown-link-active-bg","var(--pgn-dropdown-link-disabled-color)":"$dropdown-link-disabled-color","var(--pgn-dropdown-zindex)":"$zindex-dropdown","var(--pgn-dropzone-padding)":"$dropzone-padding","var(--pgn-dropzone-border-default)":"$dropzone-border-default","var(--pgn-dropzone-border-hover)":"$dropzone-border-hover","var(--pgn-dropzone-border-focus)":"$dropzone-border-focus","var(--pgn-dropzone-border-active)":"$dropzone-border-active","var(--pgn-dropzone-border-error)":"$dropzone-border-error","var(--pgn-dropzone-error-wrapper-color)":"$dropzone-error-wrapper-color","var(--pgn-dropzone-restriction-msg-font-size)":"$dropzone-restriction-msg-font-size","var(--pgn-dropzone-restriction-msg-color)":"$dropzone-restriction-msg-color","var(--pgn-form-input-padding-y-base)":"$input-padding-y","var(--pgn-form-input-padding-y-sm)":"$input-padding-y-sm","var(--pgn-form-input-padding-y-lg)":"$input-padding-y-lg","var(--pgn-form-input-padding-x-base)":"$input-padding-x","var(--pgn-form-input-padding-x-sm)":"$input-padding-x-sm","var(--pgn-form-input-padding-x-lg)":"$input-padding-x-lg","var(--pgn-form-input-font-family)":"$input-font-family","var(--pgn-form-input-font-size-base)":"$input-font-size","var(--pgn-form-input-font-size-sm)":"$input-font-size-sm","var(--pgn-form-input-font-size-lg)":"$input-font-size-lg","var(--pgn-form-input-font-weight)":"$input-font-weight","var(--pgn-form-input-line-height-base)":"$input-line-height","var(--pgn-form-input-line-height-sm)":"$input-line-height-sm","var(--pgn-form-input-line-height-lg)":"$input-line-height-lg","var(--pgn-form-input-bg-base)":"$input-bg","var(--pgn-form-input-bg-disabled)":"$input-disabled-bg","var(--pgn-form-input-color-base)":"$input-color","var(--pgn-form-input-color-plaintext)":"$input-placeholder-color","var(--pgn-form-input-border-color)":"$input-border-color","var(--pgn-form-input-border-width)":"$input-border-width","var(--pgn-form-input-border-height)":"$input-height-border","var(--pgn-form-input-border-radius-base)":"$input-border-radius","var(--pgn-form-input-border-radius-lg)":"$input-border-radius-lg","var(--pgn-form-input-border-radius-sm)":"$input-border-radius-sm","var(--pgn-form-input-box-shadow-base)":"$input-box-shadow","var(--pgn-form-input-box-shadow-focus)":"$input-focus-box-shadow","var(--pgn-form-input-focus-bg)":"$input-focus-bg","var(--pgn-form-input-focus-color-base)":"$input-focus-color","var(--pgn-form-input-focus-color-border)":"$input-focus-border-color","var(--pgn-form-input-focus-width)":"$input-focus-width","var(--pgn-form-input-height-base)":"$input-height","var(--pgn-form-input-height-sm)":"$input-height-sm","var(--pgn-form-input-height-lg)":"$input-height-lg","var(--pgn-form-input-height-inner-base)":"$input-height-inner","var(--pgn-form-input-height-inner-half)":"$input-height-inner-half","var(--pgn-form-input-height-inner-quarter)":"$input-height-inner-quarter","var(--pgn-form-input-width-hover)":"$input-hover-width","var(--pgn-form-input-transition)":"$input-transition","var(--pgn-form-input-check-margin-x-base)":"$form-check-input-margin-x","var(--pgn-form-input-check-margin-x-inline)":"$form-check-inline-input-margin-x","var(--pgn-form-input-check-margin-y)":"$form-check-input-margin-y","var(--pgn-form-input-group-addon-color-base)":"$input-group-addon-color","var(--pgn-form-input-group-addon-color-border)":"$input-group-addon-border-color","var(--pgn-form-input-group-addon-bg)":"$input-group-addon-bg","var(--pgn-form-text-margin-top)":"$form-text-margin-top","var(--pgn-form-check-inline-margin-x)":"$form-check-inline-margin-x","var(--pgn-form-check-position-axis)":"$form-check-position-axis","var(--pgn-form-check-border-radius-focus)":"$form-check-focus-border-radius","var(--pgn-form-check-border-width)":"$form-check-border-width","var(--pgn-form-group-margin-bottom)":"$form-group-margin-bottom","var(--pgn-form-custom-transition)":"$custom-forms-transition","var(--pgn-form-custom-control-gutter)":"$custom-control-gutter","var(--pgn-form-custom-control-spacer-x)":"$custom-control-spacer-x","var(--pgn-form-custom-control-cursor)":"$custom-control-cursor","var(--pgn-form-custom-control-indicator-size)":"$custom-control-indicator-size","var(--pgn-form-custom-control-indicator-bg-base)":"$custom-control-indicator-bg","var(--pgn-form-custom-control-indicator-bg-size)":"$custom-control-indicator-bg-size","var(--pgn-form-custom-control-indicator-box-shadow)":"$custom-control-indicator-box-shadow","var(--pgn-form-custom-control-indicator-border-color)":"$custom-control-indicator-border-color","var(--pgn-form-custom-control-indicator-border-width)":"$custom-control-indicator-border-width","var(--pgn-form-custom-control-indicator-disabled-bg)":"$custom-control-indicator-disabled-bg","var(--pgn-form-custom-control-indicator-checked-bg-disabled)":"$custom-control-indicator-checked-disabled-bg","var(--pgn-form-custom-control-indicator-checked-box-shadow-base)":"$custom-control-indicator-checked-box-shadow","var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)":"$custom-control-indicator-focus-box-shadow","var(--pgn-form-custom-control-indicator-checked-border-color-base)":"$custom-control-indicator-checked-border-color","var(--pgn-form-custom-control-indicator-checked-border-color-focus)":"$custom-control-indicator-focus-border-color","var(--pgn-form-custom-control-indicator-active-box-shadow)":"$custom-control-indicator-active-box-shadow","var(--pgn-form-custom-control-indicator-active-bg)":"$custom-control-indicator-active-bg","var(--pgn-form-custom-control-label-color-base)":"$custom-control-label-color","var(--pgn-form-custom-control-label-color-disabled)":"$custom-control-label-disabled-color","var(--pgn-form-custom-control-label-floating-text)":"$form-control-floating-label-text-bg","var(--pgn-form-custom-checkbox-indicator-border-radius)":"$custom-checkbox-indicator-border-radius","var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)":"$custom-checkbox-indicator-indeterminate-bg","var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)":"$custom-checkbox-indicator-indeterminate-box-shadow","var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)":"$custom-checkbox-indicator-indeterminate-border-color","var(--pgn-form-custom-radio-indicator-border-radius)":"$custom-radio-indicator-border-radius","var(--pgn-form-custom-switch-width)":"$custom-switch-width","var(--pgn-form-custom-switch-indicator-border-radius)":"$custom-switch-indicator-border-radius","var(--pgn-form-custom-switch-indicator-size)":"$custom-switch-indicator-size","var(--pgn-form-custom-select-padding-y-base)":"$custom-select-padding-y","var(--pgn-form-custom-select-padding-y-sm)":"$custom-select-padding-y-sm","var(--pgn-form-custom-select-padding-y-lg)":"$custom-select-padding-y-lg","var(--pgn-form-custom-select-padding-x-base)":"$custom-select-padding-x","var(--pgn-form-custom-select-padding-x-sm)":"$custom-select-padding-x-sm","var(--pgn-form-custom-select-padding-x-lg)":"$custom-select-padding-x-lg","var(--pgn-form-custom-select-font-family)":"$custom-select-font-family","var(--pgn-form-custom-select-font-size-base)":"$custom-select-font-size","var(--pgn-form-custom-select-font-size-sm)":"$custom-select-font-size-sm","var(--pgn-form-custom-select-font-size-lg)":"$custom-select-font-size-lg","var(--pgn-form-custom-select-font-height-base)":"$custom-select-height","var(--pgn-form-custom-select-font-height-lg)":"$custom-select-height-lg","var(--pgn-form-custom-select-font-weight)":"$custom-select-font-weight","var(--pgn-form-custom-select-line-height)":"$custom-select-line-height","var(--pgn-form-custom-select-indicator-padding)":"$custom-select-indicator-padding","var(--pgn-form-custom-select-color-base)":"$custom-select-color","var(--pgn-form-custom-select-color-disabled)":"$custom-select-disabled-color","var(--pgn-form-custom-select-bg-base)":"$custom-select-bg","var(--pgn-form-custom-select-bg-disabled)":"$custom-select-disabled-bg","var(--pgn-form-custom-select-bg-size)":"$custom-select-bg-size","var(--pgn-form-custom-select-feedback-icon-padding-right)":"$custom-select-feedback-icon-padding-right","var(--pgn-form-custom-select-feedback-icon-position)":"$custom-select-feedback-icon-position","var(--pgn-form-custom-select-feedback-icon-size)":"$custom-select-feedback-icon-size","var(--pgn-form-custom-select-border-width-base)":"$custom-select-border-width","var(--pgn-form-custom-select-border-width-focus)":"$custom-select-focus-width","var(--pgn-form-custom-select-border-color-base)":"$custom-select-border-color","var(--pgn-form-custom-select-border-color-focus)":"$custom-select-focus-border-color","var(--pgn-form-custom-select-border-radius)":"$custom-select-border-radius","var(--pgn-form-custom-select-border-box-shadow-base)":"$custom-select-box-shadow","var(--pgn-form-custom-select-border-box-shadow-focus)":"$custom-select-focus-box-shadow","var(--pgn-form-custom-select-height-sm)":"$custom-select-height-sm","var(--pgn-form-custom-range-track-width)":"$custom-range-track-width","var(--pgn-form-custom-range-track-height)":"$custom-range-track-height","var(--pgn-form-custom-range-track-cursor)":"$custom-range-track-cursor","var(--pgn-form-custom-range-track-bg)":"$custom-range-track-bg","var(--pgn-form-custom-range-track-border-radius)":"$custom-range-track-border-radius","var(--pgn-form-custom-range-track-box-shadow)":"$custom-range-track-box-shadow","var(--pgn-form-custom-range-thumb-width)":"$custom-range-thumb-width","var(--pgn-form-custom-range-thumb-height)":"$custom-range-thumb-height","var(--pgn-form-custom-range-thumb-bg-base)":"$custom-range-thumb-bg","var(--pgn-form-custom-range-thumb-bg-disabled)":"$custom-range-thumb-disabled-bg","var(--pgn-form-custom-range-thumb-bg-active)":"$custom-range-thumb-active-bg","var(--pgn-form-custom-range-thumb-border-base)":"$custom-range-thumb-border","var(--pgn-form-custom-range-thumb-border-radius)":"$custom-range-thumb-border-radius","var(--pgn-form-custom-range-thumb-box-shadow-base)":"$custom-range-thumb-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-base)":"$custom-range-thumb-focus-box-shadow","var(--pgn-form-custom-range-thumb-box-shadow-focus-width)":"$custom-range-thumb-focus-box-shadow-width","var(--pgn-form-custom-file-height-base)":"$custom-file-height","var(--pgn-form-custom-file-height-inner)":"$custom-file-height-inner","var(--pgn-form-custom-file-border-color-base)":"$custom-file-border-color","var(--pgn-form-custom-file-border-color-focus)":"$custom-file-focus-border-color","var(--pgn-form-custom-file-border-color-radius)":"$custom-file-border-radius","var(--pgn-form-custom-file-border-width)":"$custom-file-border-width","var(--pgn-form-custom-file-box-shadow-base)":"$custom-file-box-shadow","var(--pgn-form-custom-file-box-shadow-focus)":"$custom-file-focus-box-shadow","var(--pgn-form-custom-file-bg-base)":"$custom-file-bg","var(--pgn-form-custom-file-bg-disabled)":"$custom-file-disabled-bg","var(--pgn-form-custom-file-padding-y)":"$custom-file-padding-y","var(--pgn-form-custom-file-padding-x)":"$custom-file-padding-x","var(--pgn-form-custom-file-line-height)":"$custom-file-line-height","var(--pgn-form-custom-file-font-family)":"$custom-file-font-family","var(--pgn-form-custom-file-font-weight)":"$custom-file-font-weight","var(--pgn-form-custom-file-color)":"$custom-file-color","var(--pgn-form-custom-file-button-color)":"$custom-file-button-color","var(--pgn-form-custom-file-button-bg)":"$custom-file-button-bg","var(--pgn-form-feedback-margin-top)":"$form-feedback-margin-top","var(--pgn-form-feedback-font-size)":"$form-feedback-font-size","var(--pgn-form-feedback-tooltip-padding-y)":"$form-feedback-tooltip-padding-y","var(--pgn-form-feedback-tooltip-padding-x)":"$form-feedback-tooltip-padding-x","var(--pgn-form-feedback-tooltip-font-size)":"$form-feedback-tooltip-font-size","var(--pgn-form-feedback-tooltip-line-height)":"$form-feedback-tooltip-line-height","var(--pgn-form-feedback-tooltip-opacity)":"$form-feedback-tooltip-opacity","var(--pgn-form-feedback-tooltip-border-radius)":"$form-feedback-tooltip-border-radius","var(--pgn-form-control-icon-width)":"$form-control-icon-width","var(--pgn-form-select-icon-padding)":"$select-icon-padding","var(--pgn-icon-inline)":"$icon-inline","var(--pgn-icon-sm)":"$icon-sm","var(--pgn-icon-md)":"$icon-md","var(--pgn-icon-lg)":"$icon-lg","var(--pgn-icon-button-diameter-md)":"$btn-icon-diameter-md","var(--pgn-icon-button-diameter-sm)":"$btn-icon-diameter-sm","var(--pgn-icon-button-diameter-inline)":"$btn-icon-diameter-inline","var(--pgn-icon-button-bg)":"$btn-icon-bg","var(--pgn-icon-button-accent-color)":"$btn-icon-accent-color","var(--pgn-image-thumbnail-padding)":"$thumbnail-padding","var(--pgn-image-thumbnail-bg)":"$thumbnail-bg","var(--pgn-image-thumbnail-border-width)":"$thumbnail-border-width","var(--pgn-image-thumbnail-border-color)":"$thumbnail-border-color","var(--pgn-image-thumbnail-border-radius)":"$thumbnail-border-radius","var(--pgn-image-thumbnail-box-shadow)":"$thumbnail-box-shadow","var(--pgn-image-figure-caption-font-size)":"$figure-caption-font-size","var(--pgn-image-figure-caption-color)":"$figure-caption-color","var(--pgn-menu-background-active)":"$active-background","var(--pgn-menu-border-base)":"$border","var(--pgn-menu-border-active)":"$active-border","var(--pgn-menu-border-hover)":"$hover-border","var(--pgn-modal-inner-padding-base)":"$modal-inner-padding","var(--pgn-modal-inner-padding-bottom)":"$modal-inner-padding-bottom","var(--pgn-modal-footer-border-color)":"$modal-footer-border-color","var(--pgn-modal-footer-border-width)":"$modal-footer-border-width","var(--pgn-modal-footer-padding-base)":"$modal-footer-padding","var(--pgn-modal-footer-padding-x)":"$modal-footer-padding-x","var(--pgn-modal-footer-padding-y)":"$modal-footer-padding-y","var(--pgn-modal-title-line-height)":"$modal-title-line-height","var(--pgn-modal-content-color)":"$modal-content-color","var(--pgn-modal-content-bg)":"$modal-content-bg","var(--pgn-modal-content-border-color)":"$modal-content-border-color","var(--pgn-modal-content-border-width)":"$modal-content-border-width","var(--pgn-modal-content-border-radius)":"$modal-content-border-radius","var(--pgn-modal-content-box-shadow-xs)":"$modal-content-box-shadow-xs","var(--pgn-modal-content-box-shadow-sm-up)":"$modal-content-box-shadow-sm-up","var(--pgn-modal-backdrop-bg)":"$modal-backdrop-bg","var(--pgn-modal-backdrop-opacity)":"$modal-backdrop-opacity","var(--pgn-modal-backdrop-zindex)":"$zindex-modal-backdrop","var(--pgn-modal-header-border-color)":"$modal-header-border-color","var(--pgn-modal-header-border-width)":"$modal-header-border-width","var(--pgn-modal-header-padding-base)":"$modal-header-padding","var(--pgn-modal-header-padding-y)":"$modal-header-padding-y","var(--pgn-modal-header-padding-x)":"$modal-header-padding-x","var(--pgn-modal-xl)":"$modal-xl","var(--pgn-modal-lg)":"$modal-lg","var(--pgn-modal-md)":"$modal-md","var(--pgn-modal-sm)":"$modal-sm","var(--pgn-modal-transform-base)":"$modal-transition","var(--pgn-modal-transform-fade)":"$modal-fade-transform","var(--pgn-modal-transform-show)":"$modal-show-transform","var(--pgn-modal-transform-scale)":"$modal-scale-transform","var(--pgn-modal-zindex)":"$zindex-modal","var(--pgn-nav-link-padding-y)":"$nav-link-padding-y","var(--pgn-nav-link-padding-x)":"$nav-link-padding-x","var(--pgn-nav-link-color-base)":"$nav-link-color","var(--pgn-nav-link-color-disabled)":"$nav-link-disabled-color","var(--pgn-nav-link-font-weight)":"$nav-link-font-weight","var(--pgn-nav-tabs-border-color)":"$nav-tabs-border-color","var(--pgn-nav-tabs-border-width)":"$nav-tabs-border-width","var(--pgn-nav-tabs-border-radius)":"$nav-tabs-border-radius","var(--pgn-nav-tabs-link-hover-border-color)":"$nav-tabs-link-hover-border-color","var(--pgn-nav-tabs-link-hover-bg)":"$nav-tabs-link-hover-bg","var(--pgn-nav-tabs-link-active-color-base)":"$nav-tabs-link-active-color","var(--pgn-nav-tabs-link-active-color-border)":"$nav-tabs-link-active-border-color","var(--pgn-nav-tabs-link-active-bg)":"$nav-tabs-link-active-bg","var(--pgn-nav-pills-border-radius)":"$nav-pills-border-radius","var(--pgn-nav-pills-link-link-active-color)":"$nav-pills-link-active-color","var(--pgn-nav-pills-link-link-active-bg)":"$nav-pills-link-active-bg","var(--pgn-nav-divider-color)":"$nav-divider-color","var(--pgn-nav-divider-margin-y)":"$nav-divider-margin-y","var(--pgn-nav-color-dark)":"$navbar-dark-color","var(--pgn-nav-color-light)":"$navbar-light-color","var(--pgn-navbar-padding-y)":"$navbar-padding-y","var(--pgn-navbar-padding-x-base)":"$navbar-padding-x","var(--pgn-navbar-padding-x-nav-link)":"$navbar-nav-link-padding-x","var(--pgn-navbar-nav-link-height)":"$nav-link-height","var(--pgn-navbar-nav-scroll-max-height)":"$navbar-nav-scroll-max-height","var(--pgn-navbar-brand-font-size)":"$navbar-brand-font-size","var(--pgn-navbar-brand-height)":"$navbar-brand-height","var(--pgn-navbar-brand-padding-y)":"$navbar-brand-padding-y","var(--pgn-navbar-toggler-padding-y)":"$navbar-toggler-padding-y","var(--pgn-navbar-toggler-padding-x)":"$navbar-toggler-padding-x","var(--pgn-navbar-toggler-font-size)":"$navbar-toggler-font-size","var(--pgn-navbar-toggler-border-radius)":"$navbar-toggler-border-radius","var(--pgn-navbar-dark-color-hover)":"$navbar-dark-hover-color","var(--pgn-navbar-dark-color-active)":"$navbar-dark-active-color","var(--pgn-navbar-dark-color-disabled)":"$navbar-dark-disabled-color","var(--pgn-navbar-dark-toggler-border-color)":"$navbar-dark-toggler-border-color","var(--pgn-navbar-dark-brand-color-base)":"$navbar-dark-brand-color","var(--pgn-navbar-dark-brand-color-hover)":"$navbar-dark-brand-hover-color","var(--pgn-navbar-light-color-hover)":"$navbar-light-hover-color","var(--pgn-navbar-light-color-active)":"$navbar-light-active-color","var(--pgn-navbar-light-color-disabled)":"$navbar-light-disabled-color","var(--pgn-navbar-light-toggler-border-color)":"$navbar-light-toggler-border-color","var(--pgn-navbar-light-brand-color-base)":"$navbar-light-brand-color","var(--pgn-navbar-light-brand-color-hover)":"$navbar-light-brand-hover-color","var(--pgn-pagination-padding-y-base)":"$pagination-padding-y","var(--pgn-pagination-padding-y-sm)":"$pagination-padding-y-sm","var(--pgn-pagination-padding-y-lg)":"$pagination-padding-y-lg","var(--pgn-pagination-padding-x-base)":"$pagination-padding-x","var(--pgn-pagination-padding-x-sm)":"$pagination-padding-x-sm","var(--pgn-pagination-padding-x-lg)":"$pagination-padding-x-lg","var(--pgn-pagination-padding-icon)":"$pagination-padding-icon","var(--pgn-pagination-margin-x)":"$pagination-margin-x","var(--pgn-pagination-margin-y)":"$pagination-margin-y","var(--pgn-pagination-line-height)":"$pagination-line-height","var(--pgn-pagination-font-size-sm)":"$pagination-font-size-sm","var(--pgn-pagination-icon-size-base)":"$pagination-icon-size","var(--pgn-pagination-icon-size-sm)":"$pagination-icon-size-sm","var(--pgn-pagination-icon-width)":"$pagination-icon-width","var(--pgn-pagination-icon-height)":"$pagination-icon-height","var(--pgn-pagination-toggle-border-base)":"$pagination-toggle-border","var(--pgn-pagination-toggle-border-sm)":"$pagination-toggle-border-sm","var(--pgn-pagination-secondary-height-base)":"$pagination-secondary-height","var(--pgn-pagination-secondary-height-sm)":"$pagination-secondary-height-sm","var(--pgn-pagination-color-base)":"$pagination-color","var(--pgn-pagination-color-inverse)":"$pagination-color-inverse","var(--pgn-pagination-color-hover)":"$pagination-hover-color","var(--pgn-pagination-color-active)":"$pagination-active-color","var(--pgn-pagination-color-disabled)":"$pagination-disabled-color","var(--pgn-pagination-bg-base)":"$pagination-bg","var(--pgn-pagination-bg-hover)":"$pagination-hover-bg","var(--pgn-pagination-bg-active)":"$pagination-active-bg","var(--pgn-pagination-bg-disabled)":"$pagination-disabled-bg","var(--pgn-pagination-border-width)":"$pagination-border-width","var(--pgn-pagination-border-color-base)":"$pagination-border-color","var(--pgn-pagination-border-color-hover)":"$pagination-hover-border-color","var(--pgn-pagination-border-color-active)":"$pagination-active-border-color","var(--pgn-pagination-border-color-disabled)":"$pagination-disabled-border-color","var(--pgn-pagination-border-radius-sm)":"$pagination-border-radius-sm","var(--pgn-pagination-border-radius-lg)":"$pagination-border-radius-lg","var(--pgn-pagination-focus-box-shadow)":"$pagination-focus-box-shadow","var(--pgn-pagination-focus-outline)":"$pagination-focus-outline","var(--pgn-pagination-focus-border-width)":"$pagination-focus-border-width","var(--pgn-pagination-focus-color-base)":"$pagination-focus-color","var(--pgn-pagination-focus-color-text)":"$pagination-focus-color-text","var(--pgn-reduced-dropdown-height-max)":"$pagination-reduced-dropdown-max-height","var(--pgn-reduced-dropdown-width-min)":"$pagination-reduced-dropdown-min-width","var(--pgn-popover-font-size)":"$popover-font-size","var(--pgn-popover-bg)":"$popover-bg","var(--pgn-popover-max-width)":"$popover-max-width","var(--pgn-popover-border-radius)":"$popover-border-radius","var(--pgn-popover-border-width)":"$popover-border-width","var(--pgn-popover-box-shadow)":"$popover-box-shadow","var(--pgn-popover-header-color)":"$popover-header-color","var(--pgn-popover-header-padding-y)":"$popover-header-padding-y","var(--pgn-popover-header-padding-x)":"$popover-header-padding-x","var(--pgn-popover-header-bg-darken)":"$popover-header-bg-dark","var(--pgn-popover-header-border-darken)":"$popover-header-border-bottom-darken","var(--pgn-popover-body-color)":"$popover-body-color","var(--pgn-popover-body-padding-y)":"$popover-body-padding-y","var(--pgn-popover-body-padding-x)":"$popover-body-padding-x","var(--pgn-popover-icon-margin-right)":"$popover-icon-margin-right","var(--pgn-popover-icon-height)":"$popover-icon-height","var(--pgn-popover-icon-width)":"$popover-icon-width","var(--pgn-popover-arrow-width)":"$popover-arrow-width","var(--pgn-popover-arrow-height)":"$popover-arrow-height","var(--pgn-popover-arrow-color)":"$popover-arrow-color","var(--pgn-popover-success-bg)":"$popover-success-bg","var(--pgn-popover-success-icon-color)":"$popover-success-icon-color","var(--pgn-popover-warning-bg)":"$popover-warning-bg","var(--pgn-popover-warning-icon-color)":"$popover-warning-icon-color","var(--pgn-popover-danger-bg)":"$popover-danger-bg","var(--pgn-popover-danger-icon-color)":"$popover-danger-icon-color","var(--pgn-popover-zindex)":"$zindex-popover","var(--pgn-product-tour-checkpoint-color-background)":"$checkpoint-background-color","var(--pgn-product-tour-checkpoint-color-body)":"$checkpoint-body-color","var(--pgn-product-tour-checkpoint-color-border)":"$checkpoint-border-color","var(--pgn-product-tour-checkpoint-color-breadcrumb)":"$checkpoint-breadcrumb-color","var(--pgn-product-tour-checkpoint-color-box-shadow)":"$checkpoint-box-shadow-color","var(--pgn-product-tour-checkpoint-width-border)":"$checkpoint-border-width","var(--pgn-product-tour-checkpoint-width-arrow)":"$checkpoint-arrow-width","var(--pgn-product-tour-checkpoint-width-max)":"$checkpoint-max-width","var(--pgn-product-tour-checkpoint-arrow-color-top)":"$checkpoint-arrow-top-color","var(--pgn-product-tour-checkpoint-arrow-color-default)":"$checkpoint-arrow-default-color","var(--pgn-product-tour-checkpoint-arrow-transparent)":"$checkpoint-arrow-transparent","var(--pgn-product-tour-checkpoint-zindex)":"$checkpoint-z-index","var(--pgn-progress-bar-height-base)":"$progress-height","var(--pgn-progress-bar-height-annotated)":"$annotated-progress-height","var(--pgn-progress-bar-font-size)":"$progress-font-size","var(--pgn-progress-bar-bg)":"$progress-bg","var(--pgn-progress-bar-border-radius)":"$progress-border-radius","var(--pgn-progress-bar-border-width)":"$progress-bar-border-width","var(--pgn-progress-bar-border-color)":"$progress-bar-border-color","var(--pgn-progress-bar-box-shadow)":"$progress-box-shadow","var(--pgn-progress-bar-bar-color)":"$progress-bar-color","var(--pgn-progress-bar-bar-bg-base)":"$progress-bar-bg","var(--pgn-progress-bar-bar-bg-annotated)":"$annotated-progress-bar-bg","var(--pgn-progress-bar-bar-animation-timing)":"$progress-bar-animation-timing","var(--pgn-progress-bar-bar-transition)":"$progress-bar-transition","var(--pgn-progress-bar-threshold-circle)":"$progress-threshold-circle","var(--pgn-progress-bar-hint-annotation-gap)":"$progress-hint-annotation-gap","var(--pgn-scrollable-body-box-shadow)":"$scrollable-body-box-shadow","var(--pgn-search-field-border-radius)":"$search-border-radius","var(--pgn-search-field-border-color-base)":"$search-border-color","var(--pgn-search-field-border-color-interaction)":"$search-border-color-interaction","var(--pgn-search-field-border-color-focus)":"$search-border-focus-color","var(--pgn-search-field-border-width-base)":"$search-border-width","var(--pgn-search-field-border-width-interaction)":"$search-border-width-interaction","var(--pgn-search-field-border-width-focus)":"$search-border-focus-width","var(--pgn-search-field-line-height)":"$search-line-height","var(--pgn-search-field-disabled-opacity)":"$search-disabled-opacity","var(--pgn-search-field-button-margin)":"$search-button-margin","var(--pgn-search-field-input-height-search)":"$input-height-search","var(--pgn-selectable-box-padding)":"$selectable-box-padding","var(--pgn-selectable-box-border-radius)":"$selectable-box-border-radius","var(--pgn-selectable-box-box-space)":"$selectable-box-space","var(--pgn-sheet-zindex-backdrop)":"$zindex-sheet-backdrop","var(--pgn-sheet-zindex-main)":"$zindex-sheet","var(--pgn-sheet-skrim-bg)":"$sheet-skrim-bg","var(--pgn-sheet-skrim-component-box-shadow)":"$sheet-skrim-component-box-shadow","var(--pgn-spinner-width)":"$spinner-width","var(--pgn-spinner-height)":"$spinner-height","var(--pgn-spinner-border-width)":"$spinner-border-width","var(--pgn-spinner-sm-width)":"$spinner-width-sm","var(--pgn-spinner-sm-height)":"$spinner-height-sm","var(--pgn-spinner-sm-border-width)":"$spinner-border-width-sm","var(--pgn-stack-gap)":"$stack-gap","var(--pgn-sticky-offset)":"$sticky-offset","var(--pgn-sticky-shadow-top)":"$sticky-shadow-top","var(--pgn-sticky-shadow-bottom)":"$sticky-shadow-bottom","var(--pgn-tabs-notification-height)":"$tab-notification-height","var(--pgn-tabs-notification-width)":"$tab-notification-width","var(--pgn-tabs-notification-font-size)":"$tab-notification-font-size","var(--pgn-toast-max-width)":"$toast-max-width","var(--pgn-toast-padding-x)":"$toast-padding-x","var(--pgn-toast-padding-y)":"$toast-padding-y","var(--pgn-toast-font-size)":"$toast-font-size","var(--pgn-toast-color-base)":"$toast-color","var(--pgn-toast-color-background)":"$toast-background-color","var(--pgn-toast-border-width)":"$toast-border-width","var(--pgn-toast-border-color)":"$toast-border-color","var(--pgn-toast-border-radius)":"$toast-border-radius","var(--pgn-toast-box-shadow)":"$toast-box-shadow","var(--pgn-toast-header-color-base)":"$toast-header-color","var(--pgn-toast-header-color-background)":"$toast-header-background-color","var(--pgn-toast-header-color-border)":"$toast-header-border-color","var(--pgn-toast-container-gutter-lg)":"$toast-container-gutter-lg","var(--pgn-toast-container-gutter-sm)":"$toast-container-gutter-sm","var(--pgn-tooltip-font-size)":"$tooltip-font-size","var(--pgn-tooltip-max-width)":"$tooltip-max-width","var(--pgn-tooltip-color-base)":"$tooltip-color","var(--pgn-tooltip-color-light)":"$tooltip-color-light","var(--pgn-tooltip-bg-base)":"$tooltip-bg","var(--pgn-tooltip-bg-light)":"$tooltip-bg-light","var(--pgn-tooltip-border-radius)":"$tooltip-border-radius","var(--pgn-tooltip-opacity)":"$tooltip-opacity","var(--pgn-tooltip-padding-y)":"$tooltip-padding-y","var(--pgn-tooltip-padding-x)":"$tooltip-padding-x","var(--pgn-tooltip-margin)":"$tooltip-margin","var(--pgn-tooltip-box-shadow)":"$tooltip-box-shadow","var(--pgn-tooltip-arrow-height)":"$tooltip-arrow-height","var(--pgn-tooltip-arrow-color-base)":"$tooltip-arrow-color","var(--pgn-tooltip-arrow-color-light)":"$tooltip-arrow-color-light","var(--pgn-tooltip-zindex)":"$zindex-tooltip","var(--pgn-body-bg)":"$body-bg","var(--pgn-body-color)":"$body-color","var(--pgn-caret-width)":"$caret-width","var(--pgn-caret-vertical-align)":"$caret-vertical-align","var(--pgn-caret-spacing)":"$caret-spacing","var(--pgn-headings-margin-bottom)":"$headings-margin-bottom","var(--pgn-headings-font-family)":"$headings-font-family","var(--pgn-headings-font-weight)":"$headings-font-weight","var(--pgn-headings-line-height)":"$headings-line-height","var(--pgn-headings-color)":"$headings-color","var(--pgn-hr-border-color)":"$hr-border-color","var(--pgn-hr-border-width)":"$hr-border-width","var(--pgn-hr-border-margin-y)":"$hr-margin-y","var(--pgn-input-btn-padding-y)":"$input-btn-padding-y","var(--pgn-input-btn-padding-x)":"$input-btn-padding-x","var(--pgn-input-btn-padding-sm-y)":"$input-btn-padding-y-sm","var(--pgn-input-btn-padding-sm-x)":"$input-btn-padding-x-sm","var(--pgn-input-btn-padding-lg-y)":"$input-btn-padding-y-lg","var(--pgn-input-btn-padding-lg-x)":"$input-btn-padding-x-lg","var(--pgn-input-btn-font-family)":"$input-btn-font-family","var(--pgn-input-btn-font-size-base)":"$input-btn-font-size","var(--pgn-input-btn-font-size-sm)":"$input-btn-font-size-sm","var(--pgn-input-btn-font-size-lg)":"$input-btn-font-size-lg","var(--pgn-input-btn-line-height-base)":"$input-btn-line-height","var(--pgn-input-btn-line-height-sm)":"$input-btn-line-height-sm","var(--pgn-input-btn-line-height-lg)":"$input-btn-line-height-lg","var(--pgn-input-btn-focus-width)":"$input-btn-focus-width","var(--pgn-input-btn-focus-color)":"$input-btn-focus-color","var(--pgn-input-btn-focus-box-shadow)":"$input-btn-focus-box-shadow","var(--pgn-input-btn-border-width)":"$input-btn-border-width","var(--pgn-link-color)":"$link-color","var(--pgn-link-decoration)":"$link-decoration","var(--pgn-link-hover-color)":"$link-hover-color","var(--pgn-link-hover-decoration)":"$link-hover-decoration","var(--pgn-link-brand-inline-color)":"$inline-link-color","var(--pgn-link-brand-inline-decoration)":"$inline-link-decoration","var(--pgn-link-inline-decoration-color)":"$inline-link-decoration-color","var(--pgn-link-inline-hover-color)":"$inline-link-hover-color","var(--pgn-link-inline-hover-decoration)":"$inline-link-hover-decoration","var(--pgn-link-inline-hover-decoration-color)":"$inline-link-hover-decoration-color","var(--pgn-link-muted-color)":"$muted-link-color","var(--pgn-link-muted-decoration)":"$muted-link-decoration","var(--pgn-link-muted-hover-color)":"$muted-link-hover-color","var(--pgn-link-muted-hover-decoration)":"$muted-link-hover-decoration","var(--pgn-link-muted-inline-color)":"$muted-inline-link-color","var(--pgn-link-muted-inline-decoration)":"$muted-inline-link-decoration","var(--pgn-link-muted-inline-decoration-color)":"$muted-inline-link-decoration-color","var(--pgn-link-muted-inline-hover-color)":"$muted-inline-link-hover-color","var(--pgn-link-muted-inline-hover-decoration)":"$muted-inline-link-hover-decoration","var(--pgn-link-muted-inline-hover-decoration-color)":"$muted-inline-link-hover-decoration-color","var(--pgn-link-brand-color)":"$brand-link-color","var(--pgn-link-brand-decoration)":"$brand-link-decoration","var(--pgn-link-brand-hover-color)":"$brand-link-hover-color","var(--pgn-link-brand-hover-decoration)":"$brand-link-hover-decoration","var(--pgn-link-brand-inline-decoration-color)":"$brand-inline-link-decoration-color","var(--pgn-link-brand-inline-hover-color)":"$brand-inline-link-hover-color","var(--pgn-link-brand-inline-hover-decoration)":"$brand-inline-link-hover-decoration","var(--pgn-link-brand-inline-hover-decoration-color)":"$brand-inline-link-hover-decoration-color","var(--pgn-link-emphasized-hover-darken-percentage)":"$emphasized-link-hover-darken-percentage","var(--pgn-dt-font-weight)":"$dt-font-weight","var(--pgn-list-inline-padding)":"$list-inline-padding","var(--pgn-list-group-color)":"$list-group-color","var(--pgn-list-group-bg-base)":"$list-group-bg","var(--pgn-list-group-bg-hover)":"$list-group-hover-bg","var(--pgn-list-group-border-color)":"$list-group-border-color","var(--pgn-list-group-border-width)":"$list-group-border-width","var(--pgn-list-group-border-radius)":"$list-group-border-radius","var(--pgn-list-group-item-padding-y)":"$list-group-item-padding-y","var(--pgn-list-group-item-padding-x)":"$list-group-item-padding-x","var(--pgn-list-group-active-color-base)":"$list-group-active-color","var(--pgn-list-group-active-color-border)":"$list-group-active-border-color","var(--pgn-list-group-active-bg)":"$list-group-active-bg","var(--pgn-list-group-disabled-color)":"$list-group-disabled-color","var(--pgn-list-group-disabled-bg)":"$list-group-disabled-bg","var(--pgn-list-group-action-color-base)":"$list-group-action-color","var(--pgn-list-group-action-color-hover)":"$list-group-action-hover-color","var(--pgn-list-group-action-active-color)":"$list-group-action-active-color","var(--pgn-list-group-action-active-bg)":"$list-group-action-active-bg","var(--pgn-text-muted)":"$text-muted","var(--pgn-paragraph-margin-bottom)":"$paragraph-margin-bottom","var(--pgn-blockquote-small-font-size)":"$blockquote-small-font-size","var(--pgn-blockquote-font-size)":"$blockquote-font-size","var(--pgn-mark-padding)":"$mark-padding","var(--pgn-mark-bg)":"$mark-bg","var(--pgn-border-width)":"$border-width","var(--pgn-border-color)":"$border-color","var(--pgn-border-radius-base)":"$border-radius","var(--pgn-border-radius-lg)":"$border-radius-lg","var(--pgn-border-radius-sm)":"$border-radius-sm","var(--pgn-color-white)":"$white","var(--pgn-color-black)":"$black","var(--pgn-color-blue)":"$blue","var(--pgn-color-red)":"$red","var(--pgn-color-green)":"$green","var(--pgn-color-yellow)":"$yellow","var(--pgn-color-teal)":"$teal","var(--pgn-color-accent-a)":"$accent-a","var(--pgn-color-accent-b)":"$accent-b","var(--pgn-color-theme-interval)":"$theme-color-interval","var(--pgn-color-gray-100)":"$gray-100","var(--pgn-color-gray-200)":"$gray-200","var(--pgn-color-gray-300)":"$gray-300","var(--pgn-color-gray-400)":"$gray-400","var(--pgn-color-gray-500)":"$gray-500","var(--pgn-color-gray-600)":"$gray-600","var(--pgn-color-gray-700)":"$gray-700","var(--pgn-color-gray-800)":"$gray-800","var(--pgn-color-gray-900)":"$gray-900","var(--pgn-color-gray-base)":"$gray","var(--pgn-color-primary-100)":"$primary-100","var(--pgn-color-primary-200)":"$primary-200","var(--pgn-color-primary-300)":"$primary-300","var(--pgn-color-primary-400)":"$primary-400","var(--pgn-color-primary-500)":"$primary-500","var(--pgn-color-primary-600)":"$primary-600","var(--pgn-color-primary-700)":"$primary-700","var(--pgn-color-primary-800)":"$primary-800","var(--pgn-color-primary-900)":"$primary-900","var(--pgn-color-primary-base)":"$primary","var(--pgn-color-secondary-100)":"$secondary-100","var(--pgn-color-secondary-200)":"$secondary-200","var(--pgn-color-secondary-300)":"$secondary-300","var(--pgn-color-secondary-400)":"$secondary-400","var(--pgn-color-secondary-500)":"$secondary-500","var(--pgn-color-secondary-600)":"$secondary-600","var(--pgn-color-secondary-700)":"$secondary-700","var(--pgn-color-secondary-800)":"$secondary-800","var(--pgn-color-secondary-900)":"$secondary-900","var(--pgn-color-secondary-base)":"$secondary","var(--pgn-color-brand-100)":"$brand-100","var(--pgn-color-brand-200)":"$brand-200","var(--pgn-color-brand-300)":"$brand-300","var(--pgn-color-brand-400)":"$brand-400","var(--pgn-color-brand-500)":"$brand-500","var(--pgn-color-brand-600)":"$brand-600","var(--pgn-color-brand-700)":"$brand-700","var(--pgn-color-brand-800)":"$brand-800","var(--pgn-color-brand-900)":"$brand-900","var(--pgn-color-brand-base)":"$brand","var(--pgn-color-success-100)":"$success-100","var(--pgn-color-success-200)":"$success-200","var(--pgn-color-success-300)":"$success-300","var(--pgn-color-success-400)":"$success-400","var(--pgn-color-success-500)":"$success-500","var(--pgn-color-success-600)":"$success-600","var(--pgn-color-success-700)":"$success-700","var(--pgn-color-success-800)":"$success-800","var(--pgn-color-success-900)":"$success-900","var(--pgn-color-success-base)":"$success","var(--pgn-color-info-100)":"$info-100","var(--pgn-color-info-200)":"$info-200","var(--pgn-color-info-300)":"$info-300","var(--pgn-color-info-400)":"$info-400","var(--pgn-color-info-500)":"$info-500","var(--pgn-color-info-600)":"$info-600","var(--pgn-color-info-700)":"$info-700","var(--pgn-color-info-800)":"$info-800","var(--pgn-color-info-900)":"$info-900","var(--pgn-color-info-base)":"$info","var(--pgn-color-warning-100)":"$warning-100","var(--pgn-color-warning-200)":"$warning-200","var(--pgn-color-warning-300)":"$warning-300","var(--pgn-color-warning-400)":"$warning-400","var(--pgn-color-warning-500)":"$warning-500","var(--pgn-color-warning-600)":"$warning-600","var(--pgn-color-warning-700)":"$warning-700","var(--pgn-color-warning-800)":"$warning-800","var(--pgn-color-warning-900)":"$warning-900","var(--pgn-color-warning-base)":"$warning","var(--pgn-color-danger-100)":"$danger-100","var(--pgn-color-danger-200)":"$danger-200","var(--pgn-color-danger-300)":"$danger-300","var(--pgn-color-danger-400)":"$danger-400","var(--pgn-color-danger-500)":"$danger-500","var(--pgn-color-danger-600)":"$danger-600","var(--pgn-color-danger-700)":"$danger-700","var(--pgn-color-danger-800)":"$danger-800","var(--pgn-color-danger-900)":"$danger-900","var(--pgn-color-danger-base)":"$danger","var(--pgn-color-light-100)":"$light-100","var(--pgn-color-light-200)":"$light-200","var(--pgn-color-light-300)":"$light-300","var(--pgn-color-light-400)":"$light-400","var(--pgn-color-light-500)":"$light-500","var(--pgn-color-light-600)":"$light-600","var(--pgn-color-light-700)":"$light-700","var(--pgn-color-light-800)":"$light-800","var(--pgn-color-light-900)":"$light-900","var(--pgn-color-light-base)":"$light","var(--pgn-color-dark-100)":"$dark-100","var(--pgn-color-dark-200)":"$dark-200","var(--pgn-color-dark-300)":"$dark-300","var(--pgn-color-dark-400)":"$dark-400","var(--pgn-color-dark-500)":"$dark-500","var(--pgn-color-dark-600)":"$dark-600","var(--pgn-color-dark-700)":"$dark-700","var(--pgn-color-dark-800)":"$dark-800","var(--pgn-color-dark-900)":"$dark-900","var(--pgn-color-dark-base)":"$dark","var(--pgn-display-size-1)":"$display1-size","var(--pgn-display-size-2)":"$display2-size","var(--pgn-display-size-3)":"$display3-size","var(--pgn-display-size-4)":"$display4-size","var(--pgn-display-size-mobile)":"$display-mobile-size","var(--pgn-display-weight-1)":"$display1-weight","var(--pgn-display-weight-2)":"$display2-weight","var(--pgn-display-weight-3)":"$display3-weight","var(--pgn-display-weight-4)":"$display4-weight","var(--pgn-display-line-height-base)":"$display-line-height","var(--pgn-display-line-height-mobile)":"$display-mobile-line-height","var(--pgn-box-shadow-level-1)":"$level-1-box-shadow","var(--pgn-box-shadow-level-2)":"$level-2-box-shadow","var(--pgn-box-shadow-level-3)":"$level-3-box-shadow","var(--pgn-box-shadow-level-4)":"$level-4-box-shadow","var(--pgn-box-shadow-level-5)":"$level-5-box-shadow","var(--pgn-box-shadow-base)":"$box-shadow","var(--pgn-box-shadow-sm)":"$box-shadow-sm","var(--pgn-box-shadow-lg)":"$box-shadow-lg","var(--pgn-box-shadow-down-1)":"$box-shadow-down-1","var(--pgn-box-shadow-down-2)":"$box-shadow-down-2","var(--pgn-box-shadow-down-3)":"$box-shadow-down-3","var(--pgn-box-shadow-down-4)":"$box-shadow-down-4","var(--pgn-box-shadow-down-5)":"$box-shadow-down-5","var(--pgn-box-shadow-left-1)":"$box-shadow-left-1","var(--pgn-box-shadow-left-2)":"$box-shadow-left-2","var(--pgn-box-shadow-left-3)":"$box-shadow-left-3","var(--pgn-box-shadow-left-4)":"$box-shadow-left-4","var(--pgn-box-shadow-left-5)":"$box-shadow-left-5","var(--pgn-box-shadow-up-1)":"$box-shadow-up-1","var(--pgn-box-shadow-up-2)":"$box-shadow-up-2","var(--pgn-box-shadow-up-3)":"$box-shadow-up-3","var(--pgn-box-shadow-up-4)":"$box-shadow-up-4","var(--pgn-box-shadow-up-5)":"$box-shadow-up-5","var(--pgn-box-shadow-right-1)":"$box-shadow-right-1","var(--pgn-box-shadow-right-2)":"$box-shadow-right-2","var(--pgn-box-shadow-right-3)":"$box-shadow-right-3","var(--pgn-box-shadow-right-4)":"$box-shadow-right-4","var(--pgn-box-shadow-right-5)":"$box-shadow-right-5","var(--pgn-box-shadow-centered-1)":"$box-shadow-centered-1","var(--pgn-box-shadow-centered-2)":"$box-shadow-centered-2","var(--pgn-box-shadow-centered-3)":"$box-shadow-centered-3","var(--pgn-box-shadow-centered-4)":"$box-shadow-centered-4","var(--pgn-box-shadow-centered-5)":"$box-shadow-centered-5","var(--pgn-zindex-sticky)":"$zindex-sticky","var(--pgn-zindex-fixed)":"$zindex-fixed","var(--pgn-grid-columns)":"$grid-columns","var(--pgn-grid-gutter-width)":"$grid-gutter-width","var(--pgn-grid-row-columns)":"$grid-row-columns","var(--pgn-spacer-base)":"$spacer","var(--pgn-transition-base)":"$transition-base","var(--pgn-transition-fade)":"$transition-fade","var(--pgn-transition-collapse)":"$transition-collapse","var(--pgn-font-family-base)":"$font-family-base","var(--pgn-font-family-sans-serif)":"$font-family-sans-serif","var(--pgn-font-family-serif)":"$font-family-serif","var(--pgn-font-family-monospace)":"$font-family-monospace","var(--pgn-font-size-base)":"$font-size-base","var(--pgn-font-size-lg)":"$font-size-lg","var(--pgn-font-size-sm)":"$font-size-sm","var(--pgn-font-size-xs)":"$font-size-xs","var(--pgn-font-size-small-base)":"$small-font-size","var(--pgn-font-size-small-x)":"$x-small-font-size","var(--pgn-font-size-h1)":"$h1-font-size","var(--pgn-font-size-h2)":"$h2-font-size","var(--pgn-font-size-h3)":"$h3-font-size","var(--pgn-font-size-h4)":"$h4-font-size","var(--pgn-font-size-h5)":"$h5-font-size","var(--pgn-font-size-h6)":"$h6-font-size","var(--pgn-font-size-mobile-h1)":"$h1-mobile-font-size","var(--pgn-font-size-mobile-h2)":"$h2-mobile-font-size","var(--pgn-font-size-mobile-h3)":"$h3-mobile-font-size","var(--pgn-font-size-mobile-h4)":"$h4-mobile-font-size","var(--pgn-font-size-mobile-h5)":"$h5-mobile-font-size","var(--pgn-font-size-mobile-h6)":"$h6-mobile-font-size","var(--pgn-font-size-lead)":"$lead-font-size","var(--pgn-font-weight-lighter)":"$font-weight-lighter","var(--pgn-font-weight-light)":"$font-weight-light","var(--pgn-font-weight-normal)":"$font-weight-normal","var(--pgn-font-weight-semi-bold)":"$font-weight-semi-bold","var(--pgn-font-weight-bold)":"$font-weight-bold","var(--pgn-font-weight-bolder)":"$font-weight-bolder","var(--pgn-font-weight-base)":"$font-weight-base","var(--pgn-font-weight-lead)":"$lead-font-weight","var(--pgn-line-height-base)":"$line-height-base","var(--pgn-line-height-lg)":"$line-height-lg","var(--pgn-line-height-sm)":"$line-height-sm"}
\ No newline at end of file
diff --git a/tokens/build/scss-to-css.json b/tokens/build/scss-to-css.json
new file mode 100644
index 00000000000..0128bee4b77
--- /dev/null
+++ b/tokens/build/scss-to-css.json
@@ -0,0 +1 @@
+{"$component-active-bg":"var(--pgn-color-background-active)","$component-active-color":"var(--pgn-color-active)","$action-row-gap-x":"var(--pgn-action-row-gap-x)","$action-row-gap-y":"var(--pgn-action-row-gap-y)","$alert-padding-y":"var(--pgn-alert-padding-y)","$alert-padding-x":"var(--pgn-alert-padding-x)","$alert-margin-bottom":"var(--pgn-alert-margin-bottom)","$alert-border-radius":"var(--pgn-alert-border-radius)","$alert-border-width":"var(--pgn-alert-border-width)","$alert-link-font-weight":"var(--pgn-alert-font-weight-link)","$alert-font-size":"var(--pgn-alert-font-size)","$alert-title-color":"var(--pgn-alert-color-title)","$alert-content-color":"var(--pgn-alert-color-content)","$alert-box-shadow":"var(--pgn-alert-box-shadow)","$alert-bg-level":"var(--pgn-alert-level-bg)","$alert-border-level":"var(--pgn-alert-level-border)","$alert-color-level":"var(--pgn-alert-level-color)","$alert-icon-space":"var(--pgn-alert-icon-space)","$alert-line-height":"var(--pgn-alert-line-height)","$alert-actions-gap":"var(--pgn-alert-actions-gap)","$annotation-padding":"var(--pgn-annotation-padding)","$annotation-box-shadow":"var(--pgn-annotation-box-shadow)","$annotation-border-radius":"var(--pgn-annotation-border-radius)","$annotation-max-width":"var(--pgn-annotation-max-width)","$annotation-font-size":"var(--pgn-annotation-font-size)","$annotation-line-height":"var(--pgn-annotation-line-height)","$annotation-arrow-side-margin":"var(--pgn-annotation-arrow-side-margin)","$annotation-arrow-border-width":"var(--pgn-annotation-arrow-border-width)","$avatar-border":"var(--pgn-avatar-border-base)","$avatar-border-radius":"var(--pgn-avatar-border-radius)","$avatar-size":"var(--pgn-avatar-size-base)","$avatar-size-xs":"var(--pgn-avatar-size-xs)","$avatar-size-sm":"var(--pgn-avatar-size-sm)","$avatar-size-lg":"var(--pgn-avatar-size-lg)","$avatar-size-xl":"var(--pgn-avatar-size-xl)","$avatar-size-xxl":"var(--pgn-avatar-size-xxl)","$avatar-size-huge":"var(--pgn-avatar-size-huge)","$avatar-button-padding-left":"var(--pgn-avatar-button-padding-left-base)","$avatar-button-padding-left-sm":"var(--pgn-avatar-button-padding-left-sm)","$avatar-button-padding-left-lg":"var(--pgn-avatar-button-padding-left-lg)","$badge-font-size":"var(--pgn-badge-font-size)","$badge-font-weight":"var(--pgn-badge-font-weight)","$badge-padding-x":"var(--pgn-badge-padding-x-base)","$badge-pill-padding-x":"var(--pgn-badge-padding-x-pill)","$badge-padding-y":"var(--pgn-badge-padding-y)","$badge-border-radius":"var(--pgn-badge-border-radius-base)","$badge-pill-border-radius":"var(--pgn-badge-border-radius-pill)","$badge-transition":"var(--pgn-badge-transition)","$badge-focus-width":"var(--pgn-badge-focus-width)","$breadcrumb-font-size":"var(--pgn-breadcrumb-font-size)","$breadcrumb-padding-y":"var(--pgn-breadcrumb-padding-y)","$breadcrumb-padding-x":"var(--pgn-breadcrumb-padding-x)","$breadcrumb-item-padding":"var(--pgn-breadcrumb-padding-item)","$breadcrumb-margin-bottom":"var(--pgn-breadcrumb-margin-bottom)","$breadcrumb-margin-left":"var(--pgn-breadcrumb-margin-left)","$breadcrumb-border-focus-axis-y":"var(--pgn-breadcrumb-border-focus-axis-y)","$breadcrumb-border-focus-axis-x":"var(--pgn-breadcrumb-border-focus-axis-x)","$breadcrumb-border-focus-width":"var(--pgn-breadcrumb-border-focus-width)","$breadcrumb-border-radius":"var(--pgn-breadcrumb-border-radius-base)","$breadcrumb-focus-border-radius":"var(--pgn-breadcrumb-border-radius-focus)","$breadcrumb-bg":"var(--pgn-breadcrumb-bg)","$breadcrumb-color":"var(--pgn-breadcrumb-color-base)","$breadcrumb-divider-color":"var(--pgn-breadcrumb-color-divider)","$breadcrumb-active-color":"var(--pgn-breadcrumb-color-active)","$breadcrumb-inverse-active":"var(--pgn-breadcrumb-inverse-active)","$breadcrumb-inverse-spacer":"var(--pgn-breadcrumb-inverse-spacer)","$breadcrumb-inverse-color":"var(--pgn-breadcrumb-inverse-color)","$bubble-expandable-padding-y":"var(--pgn-bubble-expandable-padding-y)","$bubble-expandable-padding-x":"var(--pgn-bubble-expandable-padding-x)","$btn-padding-y":"var(--pgn-btn-padding-y-base)","$btn-padding-y-lg":"var(--pgn-btn-padding-y-lg)","$btn-padding-y-sm":"var(--pgn-btn-padding-y-sm)","$btn-padding-x":"var(--pgn-btn-padding-x-base)","$btn-padding-x-lg":"var(--pgn-btn-padding-x-lg)","$btn-padding-x-sm":"var(--pgn-btn-padding-x-sm)","$btn-font-family":"var(--pgn-btn-font-family)","$btn-font-size":"var(--pgn-btn-font-size-base)","$btn-font-size-sm":"var(--pgn-btn-font-size-sm)","$btn-font-size-lg":"var(--pgn-btn-font-size-lg)","$btn-font-weight":"var(--pgn-btn-font-weight)","$btn-line-height":"var(--pgn-btn-line-height-base)","$btn-line-height-sm":"var(--pgn-btn-line-height-sm)","$btn-line-height-lg":"var(--pgn-btn-line-height-lg)","$btn-border-width":"var(--pgn-btn-border-width)","$btn-border-radius":"var(--pgn-btn-border-radius-base)","$btn-border-radius-lg":"var(--pgn-btn-border-radius-lg)","$btn-border-radius-sm":"var(--pgn-btn-border-radius-sm)","$btn-box-shadow":"var(--pgn-btn-box-shadow-base)","$btn-active-box-shadow":"var(--pgn-btn-box-shadow-active)","$btn-focus-width":"var(--pgn-btn-focus-width)","$btn-focus-gap":"var(--pgn-btn-focus-gap)","$btn-disabled-opacity":"var(--pgn-btn-disabled-opacity)","$btn-link-disabled-color":"var(--pgn-btn-disabled-link-color)","$btn-tertiary-color":"var(--pgn-btn-tertiary-color)","$btn-tertiary-hover-bg":"var(--pgn-btn-tertiary-bg-hover)","$btn-tertiary-active-bg":"var(--pgn-btn-tertiary-bg-active)","$btn-inverse-tertiary-color":"var(--pgn-btn-tertiary-inverse-color)","$btn-inverse-tertiary-bg":"var(--pgn-btn-tertiary-inverse-bg-base)","$btn-inverse-tertiary-hover-bg":"var(--pgn-btn-tertiary-inverse-bg-hover)","$btn-inverse-tertiary-active-bg":"var(--pgn-btn-tertiary-inverse-bg-active)","$btn-block-spacing-y":"var(--pgn-btn-block-spacing-y)","$btn-transition":"var(--pgn-btn-transition)","$card-spacer-x":"var(--pgn-card-spacer-x)","$card-spacer-y":"var(--pgn-card-spacer-y)","$card-border-width":"var(--pgn-card-border-width)","$card-border-radius":"var(--pgn-card-border-radius-base)","$card-image-border-radius":"var(--pgn-card-border-radius-image)","$card-logo-border-radius":"var(--pgn-card-border-radius-logo)","$card-border-color":"var(--pgn-card-border-color-base)","$card-border-focus-color":"var(--pgn-card-border-color-focus)","$card-cap-bg":"var(--pgn-card-cap-bg)","$card-cap-color":"var(--pgn-card-cap-color)","$card-height":"var(--pgn-card-height-base)","$card-color":"var(--pgn-card-color)","$card-bg":"var(--pgn-card-bg)","$card-img-overlay-padding":"var(--pgn-card-image-overlay-padding)","$card-image-horizontal-max-width":"var(--pgn-card-image-horizontal-width-max)","$card-image-horizontal-min-width":"var(--pgn-card-image-horizontal-width-min)","$card-image-vertical-max-height":"var(--pgn-card-image-vertical-height-max)","$card-group-margin":"var(--pgn-card-margin-group)","$card-deck-margin":"var(--pgn-card-margin-deck)","$card-grid-margin":"var(--pgn-card-margin-grid)","$card-columns-count":"var(--pgn-card-columns-count)","$card-columns-gap":"var(--pgn-card-columns-gap)","$card-columns-margin":"var(--pgn-card-columns-margin)","$card-divider-bg":"var(--pgn-card-divider-bg)","$card-divider-margin-y":"var(--pgn-card-divider-margin-y)","$card-footer-actions-gap":"var(--pgn-card-footer-action-gap)","$card-footer-text-font-size":"var(--pgn-card-footer-text-font-size)","$card-logo-left-offset":"var(--pgn-card-logo-left-offset-base)","$card-logo-left-offset-horizontal":"var(--pgn-card-logo-left-offset-horizontal)","$card-logo-bottom-offset":"var(--pgn-card-logo-bottom-offset-base)","$card-logo-bottom-offset-horizontal":"var(--pgn-card-logo-bottom-offset-horizontal)","$card-logo-width":"var(--pgn-card-logo-width)","$card-logo-height":"var(--pgn-card-logo-height)","$loading-skeleton-spacer":"var(--pgn-card-loading-skeleton-spacer)","$carousel-control-width":"var(--pgn-carousel-control-width-base)","$carousel-control-icon-width":"var(--pgn-carousel-control-width-icon)","$carousel-control-opacity":"var(--pgn-carousel-control-opacity-base)","$carousel-control-hover-opacity":"var(--pgn-carousel-control-opacity-hover)","$carousel-control-transition":"var(--pgn-carousel-control-transition)","$carousel-indicator-width":"var(--pgn-carousel-indicator-width)","$carousel-indicator-height":"var(--pgn-carousel-indicator-height-base)","$carousel-indicator-hit-area-height":"var(--pgn-carousel-indicator-height-area-hit)","$carousel-indicator-spacer":"var(--pgn-carousel-indicator-spacer)","$carousel-indicator-active-bg":"var(--pgn-carousel-indicator-active-bg)","$carousel-indicator-transition":"var(--pgn-carousel-indicator-transition)","$carousel-caption-width":"var(--pgn-carousel-caption-width)","$carousel-caption-color":"var(--pgn-carousel-caption-color)","$carousel-transition-duration":"var(--pgn-carousel-transition-duration)","$chip-padding-y":"var(--pgn-chip-padding-y)","$chip-padding-x":"var(--pgn-chip-padding-x)","$chip-icon-padding":"var(--pgn-chip-padding-icon-base)","$chip-padding-to-icon":"var(--pgn-chip-padding-icon-to)","$chip-margin":"var(--pgn-chip-margin-base)","$chip-margin-inline":"var(--pgn-chip-margin-inline)","$chip-border-radius":"var(--pgn-chip-border-radius-base)","$chip-focus-border-radius":"var(--pgn-chip-border-radius-focus)","$chip-border-width":"var(--pgn-chip-border-width)","$chip-position-axis":"var(--pgn-chip-position-axis)","$chip-font-size":"var(--pgn-chip-font-size)","$chip-font-weight":"var(--pgn-chip-font-weight)","$chip-line-height":"var(--pgn-chip-line-height)","$chip-disable-opacity":"var(--pgn-chip-disabled-opacity)","$chip-icon-size":"var(--pgn-chip-icon-size)","$close-font-size":"var(--pgn-close-button-font-size)","$close-font-weight":"var(--pgn-close-button-font-weight)","$close-color":"var(--pgn-close-button-color)","$close-text-shadow":"var(--pgn-close-button-text-shadow)","$code-font-size":"var(--pgn-code-font-size)","$code-color":"var(--pgn-code-color)","$kbd-font-size":"var(--pgn-code-kbd-font-size)","$kbd-box-shadow":"var(--pgn-code-kbd-box-shadow)","$nested-kbd-font-weight":"var(--pgn-code-kbd-nested-font-weight)","$kbd-padding-y":"var(--pgn-code-kbd-padding-y)","$kbd-padding-x":"var(--pgn-code-kbd-padding-x)","$kbd-color":"var(--pgn-code-kbd-color)","$kbd-bg":"var(--pgn-code-kbd-bg)","$pre-color":"var(--pgn-code-pre-color)","$pre-scrollable-max-height":"var(--pgn-code-pre-scrollable-max-height)","$collapsible-card-spacer-y":"var(--pgn-collapsible-card-spacer-y-base)","$collapsible-card-spacer-y-lg":"var(--pgn-collapsible-card-spacer-y-lg)","$collapsible-card-spacer-x":"var(--pgn-collapsible-card-spacer-x-base)","$collapsible-card-spacer-x-lg":"var(--pgn-collapsible-card-spacer-x-lg)","$collapsible-card-body-spacer-left":"var(--pgn-collapsible-card-spacer-left-body)","$collapsible-card-spacer-icon":"var(--pgn-collapsible-card-spacer-icon)","$collapsible-basic-spacer-y":"var(--pgn-collapsible-card-spacer-basic-y)","$collapsible-basic-spacer-x":"var(--pgn-collapsible-card-spacer-basic-x)","$collapsible-basic-spacer-icon":"var(--pgn-collapsible-card-spacer-basic-icon)","$max-width-xs":"var(--pgn-container-max-width-xs)","$max-width-sm":"var(--pgn-container-max-width-sm)","$max-width-md":"var(--pgn-container-max-width-md)","$max-width-lg":"var(--pgn-container-max-width-lg)","$max-width-xl":"var(--pgn-container-max-width-xl)","$data-table-background-color":"var(--pgn-data-table-background-color)","$data-table-is-loading-bg":"var(--pgn-data-table-background-is-loading)","$data-table-border":"var(--pgn-data-table-border)","$data-table-box-shadow":"var(--pgn-data-table-box-shadow)","$data-table-padding-x":"var(--pgn-data-table-padding-x)","$data-table-padding-y":"var(--pgn-data-table-padding-y)","$data-table-padding-small":"var(--pgn-data-table-padding-small)","$data-table-cell-padding":"var(--pgn-data-table-padding-cell)","$data-table-head-cell-padding":"var(--pgn-data-table-padding-head-cell)","$data-table-footer-position":"var(--pgn-data-table-footer-position)","$data-table-pagination-dropdown-max-height":"var(--pgn-data-table-pagination-dropdown-max-height)","$data-table-pagination-dropdown-min-width":"var(--pgn-data-table-pagination-dropdown-min-width)","$dropdown-min-width":"var(--pgn-dropdown-min-width)","$dropdown-padding-x":"var(--pgn-dropdown-padding-x-base)","$dropdown-item-padding-x":"var(--pgn-dropdown-padding-x-item)","$dropdown-padding-y":"var(--pgn-dropdown-padding-y-base)","$dropdown-item-padding-y":"var(--pgn-dropdown-padding-y-item)","$dropdown-header-padding":"var(--pgn-dropdown-padding-header)","$dropdown-spacer":"var(--pgn-dropdown-spacer)","$dropdown-font-size":"var(--pgn-dropdown-font-size)","$dropdown-color":"var(--pgn-dropdown-color-base)","$dropdown-header-color":"var(--pgn-dropdown-color-header)","$dropdown-bg":"var(--pgn-dropdown-bg)","$dropdown-border-color":"var(--pgn-dropdown-border-color)","$dropdown-border-width":"var(--pgn-dropdown-border-width)","$dropdown-border-radius":"var(--pgn-dropdown-border-radius-base)","$dropdown-inner-border-radius":"var(--pgn-dropdown-border-radius-inner)","$dropdown-divider-bg":"var(--pgn-dropdown-divider-bg)","$dropdown-divider-margin-y":"var(--pgn-dropdown-divider-margin-y)","$dropdown-box-shadow":"var(--pgn-dropdown-box-shadow)","$dropdown-link-color":"var(--pgn-dropdown-link-color)","$dropdown-link-hover-color":"var(--pgn-dropdown-link-hover-color)","$dropdown-link-hover-bg":"var(--pgn-dropdown-link-hover-bg)","$dropdown-link-active-color":"var(--pgn-dropdown-link-active-color)","$dropdown-link-active-bg":"var(--pgn-dropdown-link-active-bg)","$dropdown-link-disabled-color":"var(--pgn-dropdown-link-disabled-color)","$zindex-dropdown":"var(--pgn-dropdown-zindex)","$dropzone-padding":"var(--pgn-dropzone-padding)","$dropzone-border-default":"var(--pgn-dropzone-border-default)","$dropzone-border-hover":"var(--pgn-dropzone-border-hover)","$dropzone-border-focus":"var(--pgn-dropzone-border-focus)","$dropzone-border-active":"var(--pgn-dropzone-border-active)","$dropzone-border-error":"var(--pgn-dropzone-border-error)","$dropzone-error-wrapper-color":"var(--pgn-dropzone-error-wrapper-color)","$dropzone-restriction-msg-font-size":"var(--pgn-dropzone-restriction-msg-font-size)","$dropzone-restriction-msg-color":"var(--pgn-dropzone-restriction-msg-color)","$input-padding-y":"var(--pgn-form-input-padding-y-base)","$input-padding-y-sm":"var(--pgn-form-input-padding-y-sm)","$input-padding-y-lg":"var(--pgn-form-input-padding-y-lg)","$input-padding-x":"var(--pgn-form-input-padding-x-base)","$input-padding-x-sm":"var(--pgn-form-input-padding-x-sm)","$input-padding-x-lg":"var(--pgn-form-input-padding-x-lg)","$input-font-family":"var(--pgn-form-input-font-family)","$input-font-size":"var(--pgn-form-input-font-size-base)","$input-font-size-sm":"var(--pgn-form-input-font-size-sm)","$input-font-size-lg":"var(--pgn-form-input-font-size-lg)","$input-font-weight":"var(--pgn-form-input-font-weight)","$input-line-height":"var(--pgn-form-input-line-height-base)","$input-line-height-sm":"var(--pgn-form-input-line-height-sm)","$input-line-height-lg":"var(--pgn-form-input-line-height-lg)","$input-bg":"var(--pgn-form-input-bg-base)","$input-disabled-bg":"var(--pgn-form-input-bg-disabled)","$input-color":"var(--pgn-form-input-color-base)","$input-placeholder-color":"var(--pgn-form-input-color-plaintext)","$input-border-color":"var(--pgn-form-input-border-color)","$input-border-width":"var(--pgn-form-input-border-width)","$input-height-border":"var(--pgn-form-input-border-height)","$input-border-radius":"var(--pgn-form-input-border-radius-base)","$input-border-radius-lg":"var(--pgn-form-input-border-radius-lg)","$input-border-radius-sm":"var(--pgn-form-input-border-radius-sm)","$input-box-shadow":"var(--pgn-form-input-box-shadow-base)","$input-focus-box-shadow":"var(--pgn-form-input-box-shadow-focus)","$input-focus-bg":"var(--pgn-form-input-focus-bg)","$input-focus-color":"var(--pgn-form-input-focus-color-base)","$input-focus-border-color":"var(--pgn-form-input-focus-color-border)","$input-focus-width":"var(--pgn-form-input-focus-width)","$input-height":"var(--pgn-form-input-height-base)","$input-height-sm":"var(--pgn-form-input-height-sm)","$input-height-lg":"var(--pgn-form-input-height-lg)","$input-height-inner":"var(--pgn-form-input-height-inner-base)","$input-height-inner-half":"var(--pgn-form-input-height-inner-half)","$input-height-inner-quarter":"var(--pgn-form-input-height-inner-quarter)","$input-hover-width":"var(--pgn-form-input-width-hover)","$input-transition":"var(--pgn-form-input-transition)","$form-check-input-margin-x":"var(--pgn-form-input-check-margin-x-base)","$form-check-inline-input-margin-x":"var(--pgn-form-input-check-margin-x-inline)","$form-check-input-margin-y":"var(--pgn-form-input-check-margin-y)","$input-group-addon-color":"var(--pgn-form-input-group-addon-color-base)","$input-group-addon-border-color":"var(--pgn-form-input-group-addon-color-border)","$input-group-addon-bg":"var(--pgn-form-input-group-addon-bg)","$form-text-margin-top":"var(--pgn-form-text-margin-top)","$form-check-inline-margin-x":"var(--pgn-form-check-inline-margin-x)","$form-check-position-axis":"var(--pgn-form-check-position-axis)","$form-check-focus-border-radius":"var(--pgn-form-check-border-radius-focus)","$form-check-border-width":"var(--pgn-form-check-border-width)","$form-group-margin-bottom":"var(--pgn-form-group-margin-bottom)","$custom-forms-transition":"var(--pgn-form-custom-transition)","$custom-control-gutter":"var(--pgn-form-custom-control-gutter)","$custom-control-spacer-x":"var(--pgn-form-custom-control-spacer-x)","$custom-control-cursor":"var(--pgn-form-custom-control-cursor)","$custom-control-indicator-size":"var(--pgn-form-custom-control-indicator-size)","$custom-control-indicator-bg":"var(--pgn-form-custom-control-indicator-bg-base)","$custom-control-indicator-bg-size":"var(--pgn-form-custom-control-indicator-bg-size)","$custom-control-indicator-box-shadow":"var(--pgn-form-custom-control-indicator-box-shadow)","$custom-control-indicator-border-color":"var(--pgn-form-custom-control-indicator-border-color)","$custom-control-indicator-border-width":"var(--pgn-form-custom-control-indicator-border-width)","$custom-control-indicator-disabled-bg":"var(--pgn-form-custom-control-indicator-disabled-bg)","$custom-control-indicator-checked-disabled-bg":"var(--pgn-form-custom-control-indicator-checked-bg-disabled)","$custom-control-indicator-checked-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-base)","$custom-control-indicator-focus-box-shadow":"var(--pgn-form-custom-control-indicator-checked-box-shadow-focus)","$custom-control-indicator-checked-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-base)","$custom-control-indicator-focus-border-color":"var(--pgn-form-custom-control-indicator-checked-border-color-focus)","$custom-control-indicator-active-box-shadow":"var(--pgn-form-custom-control-indicator-active-box-shadow)","$custom-control-indicator-active-bg":"var(--pgn-form-custom-control-indicator-active-bg)","$custom-control-label-color":"var(--pgn-form-custom-control-label-color-base)","$custom-control-label-disabled-color":"var(--pgn-form-custom-control-label-color-disabled)","$form-control-floating-label-text-bg":"var(--pgn-form-custom-control-label-floating-text)","$custom-checkbox-indicator-border-radius":"var(--pgn-form-custom-checkbox-indicator-border-radius)","$custom-checkbox-indicator-indeterminate-bg":"var(--pgn-form-custom-checkbox-indicator-indeterminate-bg)","$custom-checkbox-indicator-indeterminate-box-shadow":"var(--pgn-form-custom-checkbox-indicator-indeterminate-box-shadow)","$custom-checkbox-indicator-indeterminate-border-color":"var(--pgn-form-custom-checkbox-indicator-indeterminate-border-color)","$custom-radio-indicator-border-radius":"var(--pgn-form-custom-radio-indicator-border-radius)","$custom-switch-width":"var(--pgn-form-custom-switch-width)","$custom-switch-indicator-border-radius":"var(--pgn-form-custom-switch-indicator-border-radius)","$custom-switch-indicator-size":"var(--pgn-form-custom-switch-indicator-size)","$custom-select-padding-y":"var(--pgn-form-custom-select-padding-y-base)","$custom-select-padding-y-sm":"var(--pgn-form-custom-select-padding-y-sm)","$custom-select-padding-y-lg":"var(--pgn-form-custom-select-padding-y-lg)","$custom-select-padding-x":"var(--pgn-form-custom-select-padding-x-base)","$custom-select-padding-x-sm":"var(--pgn-form-custom-select-padding-x-sm)","$custom-select-padding-x-lg":"var(--pgn-form-custom-select-padding-x-lg)","$custom-select-font-family":"var(--pgn-form-custom-select-font-family)","$custom-select-font-size":"var(--pgn-form-custom-select-font-size-base)","$custom-select-font-size-sm":"var(--pgn-form-custom-select-font-size-sm)","$custom-select-font-size-lg":"var(--pgn-form-custom-select-font-size-lg)","$custom-select-height":"var(--pgn-form-custom-select-font-height-base)","$custom-select-height-lg":"var(--pgn-form-custom-select-font-height-lg)","$custom-select-font-weight":"var(--pgn-form-custom-select-font-weight)","$custom-select-line-height":"var(--pgn-form-custom-select-line-height)","$custom-select-indicator-padding":"var(--pgn-form-custom-select-indicator-padding)","$custom-select-color":"var(--pgn-form-custom-select-color-base)","$custom-select-disabled-color":"var(--pgn-form-custom-select-color-disabled)","$custom-select-bg":"var(--pgn-form-custom-select-bg-base)","$custom-select-disabled-bg":"var(--pgn-form-custom-select-bg-disabled)","$custom-select-bg-size":"var(--pgn-form-custom-select-bg-size)","$custom-select-feedback-icon-padding-right":"var(--pgn-form-custom-select-feedback-icon-padding-right)","$custom-select-feedback-icon-position":"var(--pgn-form-custom-select-feedback-icon-position)","$custom-select-feedback-icon-size":"var(--pgn-form-custom-select-feedback-icon-size)","$custom-select-border-width":"var(--pgn-form-custom-select-border-width-base)","$custom-select-focus-width":"var(--pgn-form-custom-select-border-width-focus)","$custom-select-border-color":"var(--pgn-form-custom-select-border-color-base)","$custom-select-focus-border-color":"var(--pgn-form-custom-select-border-color-focus)","$custom-select-border-radius":"var(--pgn-form-custom-select-border-radius)","$custom-select-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-base)","$custom-select-focus-box-shadow":"var(--pgn-form-custom-select-border-box-shadow-focus)","$custom-select-height-sm":"var(--pgn-form-custom-select-height-sm)","$custom-range-track-width":"var(--pgn-form-custom-range-track-width)","$custom-range-track-height":"var(--pgn-form-custom-range-track-height)","$custom-range-track-cursor":"var(--pgn-form-custom-range-track-cursor)","$custom-range-track-bg":"var(--pgn-form-custom-range-track-bg)","$custom-range-track-border-radius":"var(--pgn-form-custom-range-track-border-radius)","$custom-range-track-box-shadow":"var(--pgn-form-custom-range-track-box-shadow)","$custom-range-thumb-width":"var(--pgn-form-custom-range-thumb-width)","$custom-range-thumb-height":"var(--pgn-form-custom-range-thumb-height)","$custom-range-thumb-bg":"var(--pgn-form-custom-range-thumb-bg-base)","$custom-range-thumb-disabled-bg":"var(--pgn-form-custom-range-thumb-bg-disabled)","$custom-range-thumb-active-bg":"var(--pgn-form-custom-range-thumb-bg-active)","$custom-range-thumb-border":"var(--pgn-form-custom-range-thumb-border-base)","$custom-range-thumb-border-radius":"var(--pgn-form-custom-range-thumb-border-radius)","$custom-range-thumb-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-base)","$custom-range-thumb-focus-box-shadow":"var(--pgn-form-custom-range-thumb-box-shadow-focus-base)","$custom-range-thumb-focus-box-shadow-width":"var(--pgn-form-custom-range-thumb-box-shadow-focus-width)","$custom-file-height":"var(--pgn-form-custom-file-height-base)","$custom-file-height-inner":"var(--pgn-form-custom-file-height-inner)","$custom-file-border-color":"var(--pgn-form-custom-file-border-color-base)","$custom-file-focus-border-color":"var(--pgn-form-custom-file-border-color-focus)","$custom-file-border-radius":"var(--pgn-form-custom-file-border-color-radius)","$custom-file-border-width":"var(--pgn-form-custom-file-border-width)","$custom-file-box-shadow":"var(--pgn-form-custom-file-box-shadow-base)","$custom-file-focus-box-shadow":"var(--pgn-form-custom-file-box-shadow-focus)","$custom-file-bg":"var(--pgn-form-custom-file-bg-base)","$custom-file-disabled-bg":"var(--pgn-form-custom-file-bg-disabled)","$custom-file-padding-y":"var(--pgn-form-custom-file-padding-y)","$custom-file-padding-x":"var(--pgn-form-custom-file-padding-x)","$custom-file-line-height":"var(--pgn-form-custom-file-line-height)","$custom-file-font-family":"var(--pgn-form-custom-file-font-family)","$custom-file-font-weight":"var(--pgn-form-custom-file-font-weight)","$custom-file-color":"var(--pgn-form-custom-file-color)","$custom-file-button-color":"var(--pgn-form-custom-file-button-color)","$custom-file-button-bg":"var(--pgn-form-custom-file-button-bg)","$form-feedback-margin-top":"var(--pgn-form-feedback-margin-top)","$form-feedback-font-size":"var(--pgn-form-feedback-font-size)","$form-feedback-tooltip-padding-y":"var(--pgn-form-feedback-tooltip-padding-y)","$form-feedback-tooltip-padding-x":"var(--pgn-form-feedback-tooltip-padding-x)","$form-feedback-tooltip-font-size":"var(--pgn-form-feedback-tooltip-font-size)","$form-feedback-tooltip-line-height":"var(--pgn-form-feedback-tooltip-line-height)","$form-feedback-tooltip-opacity":"var(--pgn-form-feedback-tooltip-opacity)","$form-feedback-tooltip-border-radius":"var(--pgn-form-feedback-tooltip-border-radius)","$form-control-icon-width":"var(--pgn-form-control-icon-width)","$select-icon-padding":"var(--pgn-form-select-icon-padding)","$icon-inline":"var(--pgn-icon-inline)","$icon-sm":"var(--pgn-icon-sm)","$icon-md":"var(--pgn-icon-md)","$icon-lg":"var(--pgn-icon-lg)","$btn-icon-diameter-md":"var(--pgn-icon-button-diameter-md)","$btn-icon-diameter-sm":"var(--pgn-icon-button-diameter-sm)","$btn-icon-diameter-inline":"var(--pgn-icon-button-diameter-inline)","$btn-icon-bg":"var(--pgn-icon-button-bg)","$btn-icon-accent-color":"var(--pgn-icon-button-accent-color)","$thumbnail-padding":"var(--pgn-image-thumbnail-padding)","$thumbnail-bg":"var(--pgn-image-thumbnail-bg)","$thumbnail-border-width":"var(--pgn-image-thumbnail-border-width)","$thumbnail-border-color":"var(--pgn-image-thumbnail-border-color)","$thumbnail-border-radius":"var(--pgn-image-thumbnail-border-radius)","$thumbnail-box-shadow":"var(--pgn-image-thumbnail-box-shadow)","$figure-caption-font-size":"var(--pgn-image-figure-caption-font-size)","$figure-caption-color":"var(--pgn-image-figure-caption-color)","$active-background":"var(--pgn-menu-background-active)","$border":"var(--pgn-menu-border-base)","$active-border":"var(--pgn-menu-border-active)","$hover-border":"var(--pgn-menu-border-hover)","$modal-inner-padding":"var(--pgn-modal-inner-padding-base)","$modal-inner-padding-bottom":"var(--pgn-modal-inner-padding-bottom)","$modal-footer-border-color":"var(--pgn-modal-footer-border-color)","$modal-footer-border-width":"var(--pgn-modal-footer-border-width)","$modal-footer-padding":"var(--pgn-modal-footer-padding-base)","$modal-footer-padding-x":"var(--pgn-modal-footer-padding-x)","$modal-footer-padding-y":"var(--pgn-modal-footer-padding-y)","$modal-title-line-height":"var(--pgn-modal-title-line-height)","$modal-content-color":"var(--pgn-modal-content-color)","$modal-content-bg":"var(--pgn-modal-content-bg)","$modal-content-border-color":"var(--pgn-modal-content-border-color)","$modal-content-border-width":"var(--pgn-modal-content-border-width)","$modal-content-border-radius":"var(--pgn-modal-content-border-radius)","$modal-content-box-shadow-xs":"var(--pgn-modal-content-box-shadow-xs)","$modal-content-box-shadow-sm-up":"var(--pgn-modal-content-box-shadow-sm-up)","$modal-backdrop-bg":"var(--pgn-modal-backdrop-bg)","$modal-backdrop-opacity":"var(--pgn-modal-backdrop-opacity)","$zindex-modal-backdrop":"var(--pgn-modal-backdrop-zindex)","$modal-header-border-color":"var(--pgn-modal-header-border-color)","$modal-header-border-width":"var(--pgn-modal-header-border-width)","$modal-header-padding":"var(--pgn-modal-header-padding-base)","$modal-header-padding-y":"var(--pgn-modal-header-padding-y)","$modal-header-padding-x":"var(--pgn-modal-header-padding-x)","$modal-xl":"var(--pgn-modal-xl)","$modal-lg":"var(--pgn-modal-lg)","$modal-md":"var(--pgn-modal-md)","$modal-sm":"var(--pgn-modal-sm)","$modal-transition":"var(--pgn-modal-transform-base)","$modal-fade-transform":"var(--pgn-modal-transform-fade)","$modal-show-transform":"var(--pgn-modal-transform-show)","$modal-scale-transform":"var(--pgn-modal-transform-scale)","$zindex-modal":"var(--pgn-modal-zindex)","$nav-link-padding-y":"var(--pgn-nav-link-padding-y)","$nav-link-padding-x":"var(--pgn-nav-link-padding-x)","$nav-link-color":"var(--pgn-nav-link-color-base)","$nav-link-disabled-color":"var(--pgn-nav-link-color-disabled)","$nav-link-font-weight":"var(--pgn-nav-link-font-weight)","$nav-tabs-border-color":"var(--pgn-nav-tabs-border-color)","$nav-tabs-border-width":"var(--pgn-nav-tabs-border-width)","$nav-tabs-border-radius":"var(--pgn-nav-tabs-border-radius)","$nav-tabs-link-hover-border-color":"var(--pgn-nav-tabs-link-hover-border-color)","$nav-tabs-link-hover-bg":"var(--pgn-nav-tabs-link-hover-bg)","$nav-tabs-link-active-color":"var(--pgn-nav-tabs-link-active-color-base)","$nav-tabs-link-active-border-color":"var(--pgn-nav-tabs-link-active-color-border)","$nav-tabs-link-active-bg":"var(--pgn-nav-tabs-link-active-bg)","$nav-pills-border-radius":"var(--pgn-nav-pills-border-radius)","$nav-pills-link-active-color":"var(--pgn-nav-pills-link-link-active-color)","$nav-pills-link-active-bg":"var(--pgn-nav-pills-link-link-active-bg)","$nav-divider-color":"var(--pgn-nav-divider-color)","$nav-divider-margin-y":"var(--pgn-nav-divider-margin-y)","$navbar-dark-color":"var(--pgn-nav-color-dark)","$navbar-light-color":"var(--pgn-nav-color-light)","$navbar-padding-y":"var(--pgn-navbar-padding-y)","$navbar-padding-x":"var(--pgn-navbar-padding-x-base)","$navbar-nav-link-padding-x":"var(--pgn-navbar-padding-x-nav-link)","$nav-link-height":"var(--pgn-navbar-nav-link-height)","$navbar-nav-scroll-max-height":"var(--pgn-navbar-nav-scroll-max-height)","$navbar-brand-font-size":"var(--pgn-navbar-brand-font-size)","$navbar-brand-height":"var(--pgn-navbar-brand-height)","$navbar-brand-padding-y":"var(--pgn-navbar-brand-padding-y)","$navbar-toggler-padding-y":"var(--pgn-navbar-toggler-padding-y)","$navbar-toggler-padding-x":"var(--pgn-navbar-toggler-padding-x)","$navbar-toggler-font-size":"var(--pgn-navbar-toggler-font-size)","$navbar-toggler-border-radius":"var(--pgn-navbar-toggler-border-radius)","$navbar-dark-hover-color":"var(--pgn-navbar-dark-color-hover)","$navbar-dark-active-color":"var(--pgn-navbar-dark-color-active)","$navbar-dark-disabled-color":"var(--pgn-navbar-dark-color-disabled)","$navbar-dark-toggler-border-color":"var(--pgn-navbar-dark-toggler-border-color)","$navbar-dark-brand-color":"var(--pgn-navbar-dark-brand-color-base)","$navbar-dark-brand-hover-color":"var(--pgn-navbar-dark-brand-color-hover)","$navbar-light-hover-color":"var(--pgn-navbar-light-color-hover)","$navbar-light-active-color":"var(--pgn-navbar-light-color-active)","$navbar-light-disabled-color":"var(--pgn-navbar-light-color-disabled)","$navbar-light-toggler-border-color":"var(--pgn-navbar-light-toggler-border-color)","$navbar-light-brand-color":"var(--pgn-navbar-light-brand-color-base)","$navbar-light-brand-hover-color":"var(--pgn-navbar-light-brand-color-hover)","$pagination-padding-y":"var(--pgn-pagination-padding-y-base)","$pagination-padding-y-sm":"var(--pgn-pagination-padding-y-sm)","$pagination-padding-y-lg":"var(--pgn-pagination-padding-y-lg)","$pagination-padding-x":"var(--pgn-pagination-padding-x-base)","$pagination-padding-x-sm":"var(--pgn-pagination-padding-x-sm)","$pagination-padding-x-lg":"var(--pgn-pagination-padding-x-lg)","$pagination-padding-icon":"var(--pgn-pagination-padding-icon)","$pagination-margin-x":"var(--pgn-pagination-margin-x)","$pagination-margin-y":"var(--pgn-pagination-margin-y)","$pagination-line-height":"var(--pgn-pagination-line-height)","$pagination-font-size-sm":"var(--pgn-pagination-font-size-sm)","$pagination-icon-size":"var(--pgn-pagination-icon-size-base)","$pagination-icon-size-sm":"var(--pgn-pagination-icon-size-sm)","$pagination-icon-width":"var(--pgn-pagination-icon-width)","$pagination-icon-height":"var(--pgn-pagination-icon-height)","$pagination-toggle-border":"var(--pgn-pagination-toggle-border-base)","$pagination-toggle-border-sm":"var(--pgn-pagination-toggle-border-sm)","$pagination-secondary-height":"var(--pgn-pagination-secondary-height-base)","$pagination-secondary-height-sm":"var(--pgn-pagination-secondary-height-sm)","$pagination-color":"var(--pgn-pagination-color-base)","$pagination-color-inverse":"var(--pgn-pagination-color-inverse)","$pagination-hover-color":"var(--pgn-pagination-color-hover)","$pagination-active-color":"var(--pgn-pagination-color-active)","$pagination-disabled-color":"var(--pgn-pagination-color-disabled)","$pagination-bg":"var(--pgn-pagination-bg-base)","$pagination-hover-bg":"var(--pgn-pagination-bg-hover)","$pagination-active-bg":"var(--pgn-pagination-bg-active)","$pagination-disabled-bg":"var(--pgn-pagination-bg-disabled)","$pagination-border-width":"var(--pgn-pagination-border-width)","$pagination-border-color":"var(--pgn-pagination-border-color-base)","$pagination-hover-border-color":"var(--pgn-pagination-border-color-hover)","$pagination-active-border-color":"var(--pgn-pagination-border-color-active)","$pagination-disabled-border-color":"var(--pgn-pagination-border-color-disabled)","$pagination-border-radius-sm":"var(--pgn-pagination-border-radius-sm)","$pagination-border-radius-lg":"var(--pgn-pagination-border-radius-lg)","$pagination-focus-box-shadow":"var(--pgn-pagination-focus-box-shadow)","$pagination-focus-outline":"var(--pgn-pagination-focus-outline)","$pagination-focus-border-width":"var(--pgn-pagination-focus-border-width)","$pagination-focus-color":"var(--pgn-pagination-focus-color-base)","$pagination-focus-color-text":"var(--pgn-pagination-focus-color-text)","$pagination-reduced-dropdown-max-height":"var(--pgn-reduced-dropdown-height-max)","$pagination-reduced-dropdown-min-width":"var(--pgn-reduced-dropdown-width-min)","$popover-font-size":"var(--pgn-popover-font-size)","$popover-bg":"var(--pgn-popover-bg)","$popover-max-width":"var(--pgn-popover-max-width)","$popover-border-radius":"var(--pgn-popover-border-radius)","$popover-border-width":"var(--pgn-popover-border-width)","$popover-box-shadow":"var(--pgn-popover-box-shadow)","$popover-header-color":"var(--pgn-popover-header-color)","$popover-header-padding-y":"var(--pgn-popover-header-padding-y)","$popover-header-padding-x":"var(--pgn-popover-header-padding-x)","$popover-header-bg-dark":"var(--pgn-popover-header-bg-darken)","$popover-header-border-bottom-darken":"var(--pgn-popover-header-border-darken)","$popover-body-color":"var(--pgn-popover-body-color)","$popover-body-padding-y":"var(--pgn-popover-body-padding-y)","$popover-body-padding-x":"var(--pgn-popover-body-padding-x)","$popover-icon-margin-right":"var(--pgn-popover-icon-margin-right)","$popover-icon-height":"var(--pgn-popover-icon-height)","$popover-icon-width":"var(--pgn-popover-icon-width)","$popover-arrow-width":"var(--pgn-popover-arrow-width)","$popover-arrow-height":"var(--pgn-popover-arrow-height)","$popover-arrow-color":"var(--pgn-popover-arrow-color)","$popover-success-bg":"var(--pgn-popover-success-bg)","$popover-success-icon-color":"var(--pgn-popover-success-icon-color)","$popover-warning-bg":"var(--pgn-popover-warning-bg)","$popover-warning-icon-color":"var(--pgn-popover-warning-icon-color)","$popover-danger-bg":"var(--pgn-popover-danger-bg)","$popover-danger-icon-color":"var(--pgn-popover-danger-icon-color)","$zindex-popover":"var(--pgn-popover-zindex)","$checkpoint-background-color":"var(--pgn-product-tour-checkpoint-color-background)","$checkpoint-body-color":"var(--pgn-product-tour-checkpoint-color-body)","$checkpoint-border-color":"var(--pgn-product-tour-checkpoint-color-border)","$checkpoint-breadcrumb-color":"var(--pgn-product-tour-checkpoint-color-breadcrumb)","$checkpoint-box-shadow-color":"var(--pgn-product-tour-checkpoint-color-box-shadow)","$checkpoint-border-width":"var(--pgn-product-tour-checkpoint-width-border)","$checkpoint-arrow-width":"var(--pgn-product-tour-checkpoint-width-arrow)","$checkpoint-max-width":"var(--pgn-product-tour-checkpoint-width-max)","$checkpoint-arrow-top-color":"var(--pgn-product-tour-checkpoint-arrow-color-top)","$checkpoint-arrow-default-color":"var(--pgn-product-tour-checkpoint-arrow-color-default)","$checkpoint-arrow-transparent":"var(--pgn-product-tour-checkpoint-arrow-transparent)","$checkpoint-z-index":"var(--pgn-product-tour-checkpoint-zindex)","$progress-height":"var(--pgn-progress-bar-height-base)","$annotated-progress-height":"var(--pgn-progress-bar-height-annotated)","$progress-font-size":"var(--pgn-progress-bar-font-size)","$progress-bg":"var(--pgn-progress-bar-bg)","$progress-border-radius":"var(--pgn-progress-bar-border-radius)","$progress-bar-border-width":"var(--pgn-progress-bar-border-width)","$progress-bar-border-color":"var(--pgn-progress-bar-border-color)","$progress-box-shadow":"var(--pgn-progress-bar-box-shadow)","$progress-bar-color":"var(--pgn-progress-bar-bar-color)","$progress-bar-bg":"var(--pgn-progress-bar-bar-bg-base)","$annotated-progress-bar-bg":"var(--pgn-progress-bar-bar-bg-annotated)","$progress-bar-animation-timing":"var(--pgn-progress-bar-bar-animation-timing)","$progress-bar-transition":"var(--pgn-progress-bar-bar-transition)","$progress-threshold-circle":"var(--pgn-progress-bar-threshold-circle)","$progress-hint-annotation-gap":"var(--pgn-progress-bar-hint-annotation-gap)","$scrollable-body-box-shadow":"var(--pgn-scrollable-body-box-shadow)","$search-border-radius":"var(--pgn-search-field-border-radius)","$search-border-color":"var(--pgn-search-field-border-color-base)","$search-border-color-interaction":"var(--pgn-search-field-border-color-interaction)","$search-border-focus-color":"var(--pgn-search-field-border-color-focus)","$search-border-width":"var(--pgn-search-field-border-width-base)","$search-border-width-interaction":"var(--pgn-search-field-border-width-interaction)","$search-border-focus-width":"var(--pgn-search-field-border-width-focus)","$search-line-height":"var(--pgn-search-field-line-height)","$search-disabled-opacity":"var(--pgn-search-field-disabled-opacity)","$search-button-margin":"var(--pgn-search-field-button-margin)","$input-height-search":"var(--pgn-search-field-input-height-search)","$selectable-box-padding":"var(--pgn-selectable-box-padding)","$selectable-box-border-radius":"var(--pgn-selectable-box-border-radius)","$selectable-box-space":"var(--pgn-selectable-box-box-space)","$zindex-sheet-backdrop":"var(--pgn-sheet-zindex-backdrop)","$zindex-sheet":"var(--pgn-sheet-zindex-main)","$sheet-skrim-bg":"var(--pgn-sheet-skrim-bg)","$sheet-skrim-component-box-shadow":"var(--pgn-sheet-skrim-component-box-shadow)","$spinner-width":"var(--pgn-spinner-width)","$spinner-height":"var(--pgn-spinner-height)","$spinner-border-width":"var(--pgn-spinner-border-width)","$spinner-width-sm":"var(--pgn-spinner-sm-width)","$spinner-height-sm":"var(--pgn-spinner-sm-height)","$spinner-border-width-sm":"var(--pgn-spinner-sm-border-width)","$stack-gap":"var(--pgn-stack-gap)","$sticky-offset":"var(--pgn-sticky-offset)","$sticky-shadow-top":"var(--pgn-sticky-shadow-top)","$sticky-shadow-bottom":"var(--pgn-sticky-shadow-bottom)","$tab-notification-height":"var(--pgn-tabs-notification-height)","$tab-notification-width":"var(--pgn-tabs-notification-width)","$tab-notification-font-size":"var(--pgn-tabs-notification-font-size)","$toast-max-width":"var(--pgn-toast-max-width)","$toast-padding-x":"var(--pgn-toast-padding-x)","$toast-padding-y":"var(--pgn-toast-padding-y)","$toast-font-size":"var(--pgn-toast-font-size)","$toast-color":"var(--pgn-toast-color-base)","$toast-background-color":"var(--pgn-toast-color-background)","$toast-border-width":"var(--pgn-toast-border-width)","$toast-border-color":"var(--pgn-toast-border-color)","$toast-border-radius":"var(--pgn-toast-border-radius)","$toast-box-shadow":"var(--pgn-toast-box-shadow)","$toast-header-color":"var(--pgn-toast-header-color-base)","$toast-header-background-color":"var(--pgn-toast-header-color-background)","$toast-header-border-color":"var(--pgn-toast-header-color-border)","$toast-container-gutter-lg":"var(--pgn-toast-container-gutter-lg)","$toast-container-gutter-sm":"var(--pgn-toast-container-gutter-sm)","$tooltip-font-size":"var(--pgn-tooltip-font-size)","$tooltip-max-width":"var(--pgn-tooltip-max-width)","$tooltip-color":"var(--pgn-tooltip-color-base)","$tooltip-color-light":"var(--pgn-tooltip-color-light)","$tooltip-bg":"var(--pgn-tooltip-bg-base)","$tooltip-bg-light":"var(--pgn-tooltip-bg-light)","$tooltip-border-radius":"var(--pgn-tooltip-border-radius)","$tooltip-opacity":"var(--pgn-tooltip-opacity)","$tooltip-padding-y":"var(--pgn-tooltip-padding-y)","$tooltip-padding-x":"var(--pgn-tooltip-padding-x)","$tooltip-margin":"var(--pgn-tooltip-margin)","$tooltip-box-shadow":"var(--pgn-tooltip-box-shadow)","$tooltip-arrow-height":"var(--pgn-tooltip-arrow-height)","$tooltip-arrow-color":"var(--pgn-tooltip-arrow-color-base)","$tooltip-arrow-color-light":"var(--pgn-tooltip-arrow-color-light)","$zindex-tooltip":"var(--pgn-tooltip-zindex)","$body-bg":"var(--pgn-body-bg)","$body-color":"var(--pgn-body-color)","$caret-width":"var(--pgn-caret-width)","$caret-vertical-align":"var(--pgn-caret-vertical-align)","$caret-spacing":"var(--pgn-caret-spacing)","$headings-margin-bottom":"var(--pgn-headings-margin-bottom)","$headings-font-family":"var(--pgn-headings-font-family)","$headings-font-weight":"var(--pgn-headings-font-weight)","$headings-line-height":"var(--pgn-headings-line-height)","$headings-color":"var(--pgn-headings-color)","$hr-border-color":"var(--pgn-hr-border-color)","$hr-border-width":"var(--pgn-hr-border-width)","$hr-margin-y":"var(--pgn-hr-border-margin-y)","$input-btn-padding-y":"var(--pgn-input-btn-padding-y)","$input-btn-padding-x":"var(--pgn-input-btn-padding-x)","$input-btn-padding-y-sm":"var(--pgn-input-btn-padding-sm-y)","$input-btn-padding-x-sm":"var(--pgn-input-btn-padding-sm-x)","$input-btn-padding-y-lg":"var(--pgn-input-btn-padding-lg-y)","$input-btn-padding-x-lg":"var(--pgn-input-btn-padding-lg-x)","$input-btn-font-family":"var(--pgn-input-btn-font-family)","$input-btn-font-size":"var(--pgn-input-btn-font-size-base)","$input-btn-font-size-sm":"var(--pgn-input-btn-font-size-sm)","$input-btn-font-size-lg":"var(--pgn-input-btn-font-size-lg)","$input-btn-line-height":"var(--pgn-input-btn-line-height-base)","$input-btn-line-height-sm":"var(--pgn-input-btn-line-height-sm)","$input-btn-line-height-lg":"var(--pgn-input-btn-line-height-lg)","$input-btn-focus-width":"var(--pgn-input-btn-focus-width)","$input-btn-focus-color":"var(--pgn-input-btn-focus-color)","$input-btn-focus-box-shadow":"var(--pgn-input-btn-focus-box-shadow)","$input-btn-border-width":"var(--pgn-input-btn-border-width)","$link-color":"var(--pgn-link-color)","$link-decoration":"var(--pgn-link-decoration)","$link-hover-color":"var(--pgn-link-hover-color)","$link-hover-decoration":"var(--pgn-link-hover-decoration)","$inline-link-color":"var(--pgn-link-brand-inline-color)","$inline-link-decoration":"var(--pgn-link-brand-inline-decoration)","$inline-link-decoration-color":"var(--pgn-link-inline-decoration-color)","$inline-link-hover-color":"var(--pgn-link-inline-hover-color)","$inline-link-hover-decoration":"var(--pgn-link-inline-hover-decoration)","$inline-link-hover-decoration-color":"var(--pgn-link-inline-hover-decoration-color)","$muted-link-color":"var(--pgn-link-muted-color)","$muted-link-decoration":"var(--pgn-link-muted-decoration)","$muted-link-hover-color":"var(--pgn-link-muted-hover-color)","$muted-link-hover-decoration":"var(--pgn-link-muted-hover-decoration)","$muted-inline-link-color":"var(--pgn-link-muted-inline-color)","$muted-inline-link-decoration":"var(--pgn-link-muted-inline-decoration)","$muted-inline-link-decoration-color":"var(--pgn-link-muted-inline-decoration-color)","$muted-inline-link-hover-color":"var(--pgn-link-muted-inline-hover-color)","$muted-inline-link-hover-decoration":"var(--pgn-link-muted-inline-hover-decoration)","$muted-inline-link-hover-decoration-color":"var(--pgn-link-muted-inline-hover-decoration-color)","$brand-link-color":"var(--pgn-link-brand-color)","$brand-link-decoration":"var(--pgn-link-brand-decoration)","$brand-link-hover-color":"var(--pgn-link-brand-hover-color)","$brand-link-hover-decoration":"var(--pgn-link-brand-hover-decoration)","$brand-inline-link-decoration-color":"var(--pgn-link-brand-inline-decoration-color)","$brand-inline-link-hover-color":"var(--pgn-link-brand-inline-hover-color)","$brand-inline-link-hover-decoration":"var(--pgn-link-brand-inline-hover-decoration)","$brand-inline-link-hover-decoration-color":"var(--pgn-link-brand-inline-hover-decoration-color)","$emphasized-link-hover-darken-percentage":"var(--pgn-link-emphasized-hover-darken-percentage)","$dt-font-weight":"var(--pgn-dt-font-weight)","$list-inline-padding":"var(--pgn-list-inline-padding)","$list-group-color":"var(--pgn-list-group-color)","$list-group-bg":"var(--pgn-list-group-bg-base)","$list-group-hover-bg":"var(--pgn-list-group-bg-hover)","$list-group-border-color":"var(--pgn-list-group-border-color)","$list-group-border-width":"var(--pgn-list-group-border-width)","$list-group-border-radius":"var(--pgn-list-group-border-radius)","$list-group-item-padding-y":"var(--pgn-list-group-item-padding-y)","$list-group-item-padding-x":"var(--pgn-list-group-item-padding-x)","$list-group-active-color":"var(--pgn-list-group-active-color-base)","$list-group-active-border-color":"var(--pgn-list-group-active-color-border)","$list-group-active-bg":"var(--pgn-list-group-active-bg)","$list-group-disabled-color":"var(--pgn-list-group-disabled-color)","$list-group-disabled-bg":"var(--pgn-list-group-disabled-bg)","$list-group-action-color":"var(--pgn-list-group-action-color-base)","$list-group-action-hover-color":"var(--pgn-list-group-action-color-hover)","$list-group-action-active-color":"var(--pgn-list-group-action-active-color)","$list-group-action-active-bg":"var(--pgn-list-group-action-active-bg)","$text-muted":"var(--pgn-text-muted)","$paragraph-margin-bottom":"var(--pgn-paragraph-margin-bottom)","$blockquote-small-font-size":"var(--pgn-blockquote-small-font-size)","$blockquote-font-size":"var(--pgn-blockquote-font-size)","$mark-padding":"var(--pgn-mark-padding)","$mark-bg":"var(--pgn-mark-bg)","$border-width":"var(--pgn-border-width)","$border-color":"var(--pgn-border-color)","$border-radius":"var(--pgn-border-radius-base)","$border-radius-lg":"var(--pgn-border-radius-lg)","$border-radius-sm":"var(--pgn-border-radius-sm)","$white":"var(--pgn-color-white)","$black":"var(--pgn-color-black)","$blue":"var(--pgn-color-blue)","$red":"var(--pgn-color-red)","$green":"var(--pgn-color-green)","$yellow":"var(--pgn-color-yellow)","$teal":"var(--pgn-color-teal)","$accent-a":"var(--pgn-color-accent-a)","$accent-b":"var(--pgn-color-accent-b)","$theme-color-interval":"var(--pgn-color-theme-interval)","$gray-100":"var(--pgn-color-gray-100)","$gray-200":"var(--pgn-color-gray-200)","$gray-300":"var(--pgn-color-gray-300)","$gray-400":"var(--pgn-color-gray-400)","$gray-500":"var(--pgn-color-gray-500)","$gray-600":"var(--pgn-color-gray-600)","$gray-700":"var(--pgn-color-gray-700)","$gray-800":"var(--pgn-color-gray-800)","$gray-900":"var(--pgn-color-gray-900)","$gray":"var(--pgn-color-gray-base)","$primary-100":"var(--pgn-color-primary-100)","$primary-200":"var(--pgn-color-primary-200)","$primary-300":"var(--pgn-color-primary-300)","$primary-400":"var(--pgn-color-primary-400)","$primary-500":"var(--pgn-color-primary-500)","$primary-600":"var(--pgn-color-primary-600)","$primary-700":"var(--pgn-color-primary-700)","$primary-800":"var(--pgn-color-primary-800)","$primary-900":"var(--pgn-color-primary-900)","$primary":"var(--pgn-color-primary-base)","$secondary-100":"var(--pgn-color-secondary-100)","$secondary-200":"var(--pgn-color-secondary-200)","$secondary-300":"var(--pgn-color-secondary-300)","$secondary-400":"var(--pgn-color-secondary-400)","$secondary-500":"var(--pgn-color-secondary-500)","$secondary-600":"var(--pgn-color-secondary-600)","$secondary-700":"var(--pgn-color-secondary-700)","$secondary-800":"var(--pgn-color-secondary-800)","$secondary-900":"var(--pgn-color-secondary-900)","$secondary":"var(--pgn-color-secondary-base)","$brand-100":"var(--pgn-color-brand-100)","$brand-200":"var(--pgn-color-brand-200)","$brand-300":"var(--pgn-color-brand-300)","$brand-400":"var(--pgn-color-brand-400)","$brand-500":"var(--pgn-color-brand-500)","$brand-600":"var(--pgn-color-brand-600)","$brand-700":"var(--pgn-color-brand-700)","$brand-800":"var(--pgn-color-brand-800)","$brand-900":"var(--pgn-color-brand-900)","$brand":"var(--pgn-color-brand-base)","$success-100":"var(--pgn-color-success-100)","$success-200":"var(--pgn-color-success-200)","$success-300":"var(--pgn-color-success-300)","$success-400":"var(--pgn-color-success-400)","$success-500":"var(--pgn-color-success-500)","$success-600":"var(--pgn-color-success-600)","$success-700":"var(--pgn-color-success-700)","$success-800":"var(--pgn-color-success-800)","$success-900":"var(--pgn-color-success-900)","$success":"var(--pgn-color-success-base)","$info-100":"var(--pgn-color-info-100)","$info-200":"var(--pgn-color-info-200)","$info-300":"var(--pgn-color-info-300)","$info-400":"var(--pgn-color-info-400)","$info-500":"var(--pgn-color-info-500)","$info-600":"var(--pgn-color-info-600)","$info-700":"var(--pgn-color-info-700)","$info-800":"var(--pgn-color-info-800)","$info-900":"var(--pgn-color-info-900)","$info":"var(--pgn-color-info-base)","$warning-100":"var(--pgn-color-warning-100)","$warning-200":"var(--pgn-color-warning-200)","$warning-300":"var(--pgn-color-warning-300)","$warning-400":"var(--pgn-color-warning-400)","$warning-500":"var(--pgn-color-warning-500)","$warning-600":"var(--pgn-color-warning-600)","$warning-700":"var(--pgn-color-warning-700)","$warning-800":"var(--pgn-color-warning-800)","$warning-900":"var(--pgn-color-warning-900)","$warning":"var(--pgn-color-warning-base)","$danger-100":"var(--pgn-color-danger-100)","$danger-200":"var(--pgn-color-danger-200)","$danger-300":"var(--pgn-color-danger-300)","$danger-400":"var(--pgn-color-danger-400)","$danger-500":"var(--pgn-color-danger-500)","$danger-600":"var(--pgn-color-danger-600)","$danger-700":"var(--pgn-color-danger-700)","$danger-800":"var(--pgn-color-danger-800)","$danger-900":"var(--pgn-color-danger-900)","$danger":"var(--pgn-color-danger-base)","$light-100":"var(--pgn-color-light-100)","$light-200":"var(--pgn-color-light-200)","$light-300":"var(--pgn-color-light-300)","$light-400":"var(--pgn-color-light-400)","$light-500":"var(--pgn-color-light-500)","$light-600":"var(--pgn-color-light-600)","$light-700":"var(--pgn-color-light-700)","$light-800":"var(--pgn-color-light-800)","$light-900":"var(--pgn-color-light-900)","$light":"var(--pgn-color-light-base)","$dark-100":"var(--pgn-color-dark-100)","$dark-200":"var(--pgn-color-dark-200)","$dark-300":"var(--pgn-color-dark-300)","$dark-400":"var(--pgn-color-dark-400)","$dark-500":"var(--pgn-color-dark-500)","$dark-600":"var(--pgn-color-dark-600)","$dark-700":"var(--pgn-color-dark-700)","$dark-800":"var(--pgn-color-dark-800)","$dark-900":"var(--pgn-color-dark-900)","$dark":"var(--pgn-color-dark-base)","$display1-size":"var(--pgn-display-size-1)","$display2-size":"var(--pgn-display-size-2)","$display3-size":"var(--pgn-display-size-3)","$display4-size":"var(--pgn-display-size-4)","$display-mobile-size":"var(--pgn-display-size-mobile)","$display1-weight":"var(--pgn-display-weight-1)","$display2-weight":"var(--pgn-display-weight-2)","$display3-weight":"var(--pgn-display-weight-3)","$display4-weight":"var(--pgn-display-weight-4)","$display-line-height":"var(--pgn-display-line-height-base)","$display-mobile-line-height":"var(--pgn-display-line-height-mobile)","$level-1-box-shadow":"var(--pgn-box-shadow-level-1)","$level-2-box-shadow":"var(--pgn-box-shadow-level-2)","$level-3-box-shadow":"var(--pgn-box-shadow-level-3)","$level-4-box-shadow":"var(--pgn-box-shadow-level-4)","$level-5-box-shadow":"var(--pgn-box-shadow-level-5)","$box-shadow":"var(--pgn-box-shadow-base)","$box-shadow-sm":"var(--pgn-box-shadow-sm)","$box-shadow-lg":"var(--pgn-box-shadow-lg)","$box-shadow-down-1":"var(--pgn-box-shadow-down-1)","$box-shadow-down-2":"var(--pgn-box-shadow-down-2)","$box-shadow-down-3":"var(--pgn-box-shadow-down-3)","$box-shadow-down-4":"var(--pgn-box-shadow-down-4)","$box-shadow-down-5":"var(--pgn-box-shadow-down-5)","$box-shadow-left-1":"var(--pgn-box-shadow-left-1)","$box-shadow-left-2":"var(--pgn-box-shadow-left-2)","$box-shadow-left-3":"var(--pgn-box-shadow-left-3)","$box-shadow-left-4":"var(--pgn-box-shadow-left-4)","$box-shadow-left-5":"var(--pgn-box-shadow-left-5)","$box-shadow-up-1":"var(--pgn-box-shadow-up-1)","$box-shadow-up-2":"var(--pgn-box-shadow-up-2)","$box-shadow-up-3":"var(--pgn-box-shadow-up-3)","$box-shadow-up-4":"var(--pgn-box-shadow-up-4)","$box-shadow-up-5":"var(--pgn-box-shadow-up-5)","$box-shadow-right-1":"var(--pgn-box-shadow-right-1)","$box-shadow-right-2":"var(--pgn-box-shadow-right-2)","$box-shadow-right-3":"var(--pgn-box-shadow-right-3)","$box-shadow-right-4":"var(--pgn-box-shadow-right-4)","$box-shadow-right-5":"var(--pgn-box-shadow-right-5)","$box-shadow-centered-1":"var(--pgn-box-shadow-centered-1)","$box-shadow-centered-2":"var(--pgn-box-shadow-centered-2)","$box-shadow-centered-3":"var(--pgn-box-shadow-centered-3)","$box-shadow-centered-4":"var(--pgn-box-shadow-centered-4)","$box-shadow-centered-5":"var(--pgn-box-shadow-centered-5)","$zindex-sticky":"var(--pgn-zindex-sticky)","$zindex-fixed":"var(--pgn-zindex-fixed)","$grid-columns":"var(--pgn-grid-columns)","$grid-gutter-width":"var(--pgn-grid-gutter-width)","$grid-row-columns":"var(--pgn-grid-row-columns)","$spacer":"var(--pgn-spacer-base)","$transition-base":"var(--pgn-transition-base)","$transition-fade":"var(--pgn-transition-fade)","$transition-collapse":"var(--pgn-transition-collapse)","$font-family-base":"var(--pgn-font-family-base)","$font-family-sans-serif":"var(--pgn-font-family-sans-serif)","$font-family-serif":"var(--pgn-font-family-serif)","$font-family-monospace":"var(--pgn-font-family-monospace)","$font-size-base":"var(--pgn-font-size-base)","$font-size-lg":"var(--pgn-font-size-lg)","$font-size-sm":"var(--pgn-font-size-sm)","$font-size-xs":"var(--pgn-font-size-xs)","$small-font-size":"var(--pgn-font-size-small-base)","$x-small-font-size":"var(--pgn-font-size-small-x)","$h1-font-size":"var(--pgn-font-size-h1)","$h2-font-size":"var(--pgn-font-size-h2)","$h3-font-size":"var(--pgn-font-size-h3)","$h4-font-size":"var(--pgn-font-size-h4)","$h5-font-size":"var(--pgn-font-size-h5)","$h6-font-size":"var(--pgn-font-size-h6)","$h1-mobile-font-size":"var(--pgn-font-size-mobile-h1)","$h2-mobile-font-size":"var(--pgn-font-size-mobile-h2)","$h3-mobile-font-size":"var(--pgn-font-size-mobile-h3)","$h4-mobile-font-size":"var(--pgn-font-size-mobile-h4)","$h5-mobile-font-size":"var(--pgn-font-size-mobile-h5)","$h6-mobile-font-size":"var(--pgn-font-size-mobile-h6)","$lead-font-size":"var(--pgn-font-size-lead)","$font-weight-lighter":"var(--pgn-font-weight-lighter)","$font-weight-light":"var(--pgn-font-weight-light)","$font-weight-normal":"var(--pgn-font-weight-normal)","$font-weight-semi-bold":"var(--pgn-font-weight-semi-bold)","$font-weight-bold":"var(--pgn-font-weight-bold)","$font-weight-bolder":"var(--pgn-font-weight-bolder)","$font-weight-base":"var(--pgn-font-weight-base)","$lead-font-weight":"var(--pgn-font-weight-lead)","$line-height-base":"var(--pgn-line-height-base)","$line-height-lg":"var(--pgn-line-height-lg)","$line-height-sm":"var(--pgn-line-height-sm)"}
\ No newline at end of file
diff --git a/tokens/build/variables.css b/tokens/build/variables.css
new file mode 100644
index 00000000000..36ef0763868
--- /dev/null
+++ b/tokens/build/variables.css
@@ -0,0 +1,980 @@
+:root {
+  --pgn-line-height-sm: 1.5;
+  --pgn-line-height-lg: 1.5;
+  --pgn-line-height-base: 1.5556;
+  --pgn-font-weight-lead: null;
+  --pgn-font-weight-bolder: bolder;
+  --pgn-font-weight-bold: 700;
+  --pgn-font-weight-semi-bold: 500;
+  --pgn-font-weight-normal: 400;
+  --pgn-font-weight-light: 300;
+  --pgn-font-weight-lighter: lighter;
+  --pgn-font-size-mobile-h1: 2.25rem;
+  --pgn-font-size-h6: .75rem;
+  --pgn-font-size-h5: .875rem;
+  --pgn-font-size-h4: 1.125rem;
+  --pgn-font-size-h3: 1.375rem;
+  --pgn-font-size-h2: 2rem;
+  --pgn-font-size-h1: 2.5rem;
+  --pgn-font-size-small-x: 75%;
+  --pgn-font-size-small-base: 87.5%;
+  --pgn-font-size-xs: .75rem;
+  --pgn-font-size-sm: .875rem;
+  --pgn-font-size-lg: 1.4063rem;
+  --pgn-font-size-base: 1.125rem;
+  --pgn-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  "Courier New", monospace;
+  --pgn-font-family-serif: serif;
+  --pgn-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pgn-transition-collapse: height .35s ease;
+  --pgn-transition-fade: opacity .15s linear;
+  --pgn-transition-base: all .2s ease-in-out;
+  --pgn-spacer-base: 1rem;
+  --pgn-spacer-0: 0;
+  --pgn-grid-row-columns: 6;
+  --pgn-grid-gutter-width: 24px;
+  --pgn-grid-columns: 12;
+  --pgn-zindex-fixed: 1030;
+  --pgn-zindex-sticky: 1020;
+  --pgn-zindex-2000: 2000;
+  --pgn-zindex-1800: 1800;
+  --pgn-zindex-1600: 1600;
+  --pgn-zindex-1400: 1400;
+  --pgn-zindex-1200: 1200;
+  --pgn-zindex-1000: 1000;
+  --pgn-zindex-800: 800;
+  --pgn-zindex-600: 600;
+  --pgn-zindex-400: 400;
+  --pgn-zindex-200: 200;
+  --pgn-zindex-0: 0;
+  --pgn-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-2: 0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-centered-1: 0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-5: 1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-4: .625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-3: .5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-2: .125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-right-1: .0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-5: 0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-4: 0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-3: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-2: 0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-up-1: 0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-5: -1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-4: -.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-3: -.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-2: -.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-left-1: -.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
+  --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-display-line-height-mobile: 3.5rem;
+  --pgn-display-line-height-base: 1;
+  --pgn-display-size-mobile: 3.25rem;
+  --pgn-display-size-4: 7.5rem;
+  --pgn-display-size-3: 5.625rem;
+  --pgn-display-size-2: 4.875rem;
+  --pgn-display-size-1: 3.75rem;
+  --pgn-breakpoint-xxl: 1400px;
+  --pgn-breakpoint-xl: 1200px;
+  --pgn-breakpoint-lg: 992px;
+  --pgn-breakpoint-md: 768px;
+  --pgn-breakpoint-sm: 576px;
+  --pgn-breakpoint-xs: 0;
+  --pgn-border-radius-sm: .25rem;
+  --pgn-border-radius-lg: .425rem;
+  --pgn-border-radius-base: .375rem;
+  --pgn-border-width: 1px;
+  --pgn-tooltip-zindex: 1070;
+  --pgn-tooltip-arrow-height: .4rem;
+  --pgn-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-tooltip-margin: 0;
+  --pgn-tooltip-padding-x: .5rem;
+  --pgn-tooltip-padding-y: .5rem;
+  --pgn-tooltip-opacity: 1;
+  --pgn-tooltip-max-width: 200px;
+  --pgn-toast-container-gutter-sm: .625rem;
+  --pgn-toast-container-gutter-lg: 1.25rem;
+  --pgn-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
+  --pgn-toast-border-radius: .25rem;
+  --pgn-toast-border-width: 1px;
+  --pgn-toast-color-base: null;
+  --pgn-toast-font-size: .875rem;
+  --pgn-toast-padding-y: .25rem;
+  --pgn-toast-padding-x: .75rem;
+  --pgn-toast-max-width: 400px;
+  --pgn-tabs-notification-width: 1rem;
+  --pgn-tabs-notification-height: 1rem;
+  --pgn-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-sticky-offset: 0;
+  --pgn-stack-gap: 0;
+  --pgn-spinner-sm-border-width: .2em;
+  --pgn-spinner-sm-width: 1rem;
+  --pgn-spinner-border-width: .25em;
+  --pgn-spinner-width: 2rem;
+  --pgn-sheet-zindex-main: 1032;
+  --pgn-sheet-zindex-backdrop: 1031;
+  --pgn-selectable-box-box-space: .75rem;
+  --pgn-selectable-box-border-radius: .25rem;
+  --pgn-selectable-box-padding: 1rem;
+  --pgn-search-field-button-margin: .5rem;
+  --pgn-search-field-disabled-opacity: .3;
+  --pgn-search-field-line-height: 1.5rem;
+  --pgn-search-field-border-width-focus: .3125rem;
+  --pgn-search-field-border-width-interaction: .125rem;
+  --pgn-search-field-border-width-base: .0625rem;
+  --pgn-search-field-border-radius: 0;
+  --pgn-progress-bar-hint-annotation-gap: .5rem;
+  --pgn-progress-bar-threshold-circle: .5625rem;
+  --pgn-progress-bar-bar-transition: width .6s ease;
+  --pgn-progress-bar-bar-animation-timing: 1s linear infinite;
+  --pgn-progress-bar-box-shadow: none;
+  --pgn-progress-bar-border-width: 1px;
+  --pgn-progress-bar-border-radius: 0;
+  --pgn-progress-bar-bg: transparent;
+  --pgn-progress-bar-height-annotated: .3125rem;
+  --pgn-progress-bar-height-base: 1rem;
+  --pgn-product-tour-checkpoint-zindex: 1060;
+  --pgn-product-tour-checkpoint-width-max: 480px;
+  --pgn-product-tour-checkpoint-width-arrow: 15px;
+  --pgn-product-tour-checkpoint-width-border: 8px;
+  --pgn-popover-zindex: 1060;
+  --pgn-popover-arrow-height: .5rem;
+  --pgn-popover-arrow-width: 1rem;
+  --pgn-popover-icon-width: 1rem;
+  --pgn-popover-icon-height: 1rem;
+  --pgn-popover-icon-margin-right: .5rem;
+  --pgn-popover-header-padding-x: 1rem;
+  --pgn-popover-header-padding-y: .5rem;
+  --pgn-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-popover-max-width: 480px;
+  --pgn-reduced-dropdown-width-min: 6rem;
+  --pgn-reduced-dropdown-height-max: 60vh;
+  --pgn-pagination-focus-border-width: .125rem;
+  --pgn-pagination-focus-outline: 0;
+  --pgn-pagination-secondary-height-sm: 2.25rem;
+  --pgn-pagination-secondary-height-base: 2.75rem;
+  --pgn-pagination-toggle-border-sm: .25rem;
+  --pgn-pagination-toggle-border-base: .3125rem;
+  --pgn-pagination-icon-height: 2.25rem;
+  --pgn-pagination-icon-width: 2.25rem;
+  --pgn-pagination-icon-size-sm: 1rem;
+  --pgn-pagination-icon-size-base: 1.375rem;
+  --pgn-pagination-font-size-sm: .875rem;
+  --pgn-pagination-line-height: 1.5rem;
+  --pgn-pagination-margin-y: .5rem;
+  --pgn-pagination-margin-x: .5rem;
+  --pgn-pagination-padding-icon: .5rem;
+  --pgn-pagination-padding-x-lg: 1.5rem;
+  --pgn-pagination-padding-x-sm: .6rem;
+  --pgn-pagination-padding-x-base: 1rem;
+  --pgn-pagination-padding-y-lg: .75rem;
+  --pgn-pagination-padding-y-sm: .8rem;
+  --pgn-pagination-padding-y-base: .625rem;
+  --pgn-navbar-toggler-padding-x: .75rem;
+  --pgn-navbar-toggler-padding-y: .25rem;
+  --pgn-navbar-nav-scroll-max-height: 75vh;
+  --pgn-navbar-padding-x-nav-link: .5rem;
+  --pgn-nav-tabs-border-radius: 0;
+  --pgn-nav-tabs-border-width: 2px;
+  --pgn-nav-link-font-weight: 500;
+  --pgn-nav-link-padding-x: 1rem;
+  --pgn-nav-link-padding-y: .5rem;
+  --pgn-modal-zindex: 1050;
+  --pgn-modal-transform-scale: scale(1.02);
+  --pgn-modal-transform-show: none;
+  --pgn-modal-transform-fade: translate(0, -50px);
+  --pgn-modal-transform-base: transform .3s ease-out;
+  --pgn-modal-sm: 500px;
+  --pgn-modal-md: 500px;
+  --pgn-modal-lg: 800px;
+  --pgn-modal-xl: 1140px;
+  --pgn-modal-header-padding-x: 1.5rem;
+  --pgn-modal-header-padding-y: 1rem;
+  --pgn-modal-backdrop-zindex: 1040;
+  --pgn-modal-backdrop-opacity: .5;
+  --pgn-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
+  --pgn-modal-content-box-shadow-xs: 0 .25rem .5rem rgba(0, 0, 0, .5);
+  --pgn-modal-content-border-width: 0rem;
+  --pgn-modal-content-color: null;
+  --pgn-modal-footer-padding-y: 1.5rem;
+  --pgn-modal-footer-padding-x: 1rem;
+  --pgn-modal-inner-padding-bottom: .7rem;
+  --pgn-modal-inner-padding-base: 1.5rem;
+  --pgn-menu-border-hover: transparent;
+  --pgn-menu-border-active: transparent;
+  --pgn-menu-border-base: transparent;
+  --pgn-image-figure-caption-font-size: 90%;
+  --pgn-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-image-thumbnail-padding: .25rem;
+  --pgn-icon-button-bg: transparent;
+  --pgn-icon-button-diameter-sm: 2.25rem;
+  --pgn-icon-button-diameter-md: 2.75rem;
+  --pgn-icon-lg: 1.75rem;
+  --pgn-icon-md: 1.5rem;
+  --pgn-icon-sm: 1.25rem;
+  --pgn-icon-inline: .8em;
+  --pgn-mark-bg: #FFF243FF;
+  --pgn-mark-padding: .2em;
+  --pgn-paragraph-margin-bottom: 1rem;
+  --pgn-list-group-item-padding-x: 1.25rem;
+  --pgn-list-group-item-padding-y: .75rem;
+  --pgn-list-group-color: null;
+  --pgn-list-inline-padding: .5rem;
+  --pgn-link-emphasized-hover-darken-percentage: 15%;
+  --pgn-link-brand-inline-hover-decoration: underline;
+  --pgn-link-brand-inline-decoration: underline;
+  --pgn-link-brand-hover-decoration: underline;
+  --pgn-link-brand-decoration: none;
+  --pgn-link-muted-inline-hover-decoration: underline;
+  --pgn-link-muted-inline-decoration: underline;
+  --pgn-link-muted-hover-decoration: underline;
+  --pgn-link-muted-decoration: none;
+  --pgn-link-inline-hover-decoration: underline;
+  --pgn-link-inline-decoration: underline;
+  --pgn-link-hover-decoration: underline;
+  --pgn-link-decoration: none;
+  --pgn-input-btn-focus-width: 1px;
+  --pgn-input-btn-line-height-sm: 1.4286;
+  --pgn-input-btn-line-height-base: 1.3333;
+  --pgn-input-btn-font-size-lg: 1.325rem;
+  --pgn-input-btn-font-size-sm: .875rem;
+  --pgn-input-btn-font-size-base: 1.125rem;
+  --pgn-input-btn-font-family: inherit;
+  --pgn-input-btn-padding-lg-x: 1.25rem;
+  --pgn-input-btn-padding-lg-y: .6875rem;
+  --pgn-input-btn-padding-sm-x: .75rem;
+  --pgn-input-btn-padding-sm-y: .4375rem;
+  --pgn-input-btn-padding-x: 1rem;
+  --pgn-input-btn-padding-y: .5625rem;
+  --pgn-headings-line-height: 1.25;
+  --pgn-headings-font-family: null;
+  --pgn-headings-margin-bottom: .5rem;
+  --pgn-caret-spacing: .255em;
+  --pgn-caret-vertical-align: .255em;
+  --pgn-caret-width: .3em;
+  --pgn-form-select-icon-padding: .5625rem;
+  --pgn-form-control-icon-width: 32px;
+  --pgn-form-feedback-tooltip-opacity: .9;
+  --pgn-form-feedback-tooltip-padding-x: .5rem;
+  --pgn-form-feedback-tooltip-padding-y: .25rem;
+  --pgn-form-custom-range-thumb-box-shadow-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
+  --pgn-form-custom-range-thumb-border-radius: 1rem;
+  --pgn-form-custom-range-thumb-border-base: 0;
+  --pgn-form-custom-range-thumb-width: 1rem;
+  --pgn-form-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
+  --pgn-form-custom-range-track-border-radius: 1rem;
+  --pgn-form-custom-range-track-cursor: pointer;
+  --pgn-form-custom-range-track-height: .5rem;
+  --pgn-form-custom-range-track-width: 100%;
+  --pgn-form-custom-select-border-box-shadow-base: inset 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-form-custom-select-bg-size: 24px 24px;
+  --pgn-form-custom-select-indicator-padding: 1rem;
+  --pgn-form-custom-radio-indicator-border-radius: 50%;
+  --pgn-form-custom-checkbox-indicator-indeterminate-box-shadow: none;
+  --pgn-form-custom-checkbox-indicator-border-radius: 0;
+  --pgn-form-custom-control-label-color-base: null;
+  --pgn-form-custom-control-indicator-active-bg: #0A3055FF;
+  --pgn-form-custom-control-indicator-active-box-shadow: none;
+  --pgn-form-custom-control-indicator-checked-box-shadow-focus: 0 0 0 4px rgba(0, 0, 0, .1);
+  --pgn-form-custom-control-indicator-checked-box-shadow-base: none;
+  --pgn-form-custom-control-indicator-border-width: 2px;
+  --pgn-form-custom-control-indicator-bg-size: 100%;
+  --pgn-form-custom-control-indicator-size: 1.25rem;
+  --pgn-form-custom-control-cursor: null;
+  --pgn-form-custom-control-spacer-x: 1rem;
+  --pgn-form-custom-control-gutter: .5rem;
+  --pgn-form-custom-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  --pgn-form-group-margin-bottom: 1rem;
+  --pgn-form-check-border-width: .125rem;
+  --pgn-form-check-border-radius-focus: .0625rem;
+  --pgn-form-check-position-axis: .375rem;
+  --pgn-form-check-inline-margin-x: .75rem;
+  --pgn-form-text-margin-top: .25rem;
+  --pgn-form-input-check-margin-y: .3rem;
+  --pgn-form-input-check-margin-x-inline: .3125rem;
+  --pgn-form-input-check-margin-x-base: .25rem;
+  --pgn-form-input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  --pgn-form-input-width-hover: 1px;
+  --pgn-form-input-focus-width: 1px;
+  --pgn-form-input-box-shadow-base: inset 0 1px 1px rgba(0, 0, 0, .075);
+  --pgn-dropzone-padding: 1.5rem;
+  --pgn-dropdown-zindex: 1000;
+  --pgn-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+  --pgn-dropdown-spacer: .125rem;
+  --pgn-dropdown-padding-y-item: .5rem;
+  --pgn-dropdown-padding-y-base: .25rem;
+  --pgn-dropdown-padding-x-item: 1rem;
+  --pgn-dropdown-padding-x-base: 0;
+  --pgn-dropdown-min-width: 18rem;
+  --pgn-data-table-pagination-dropdown-min-width: 6rem;
+  --pgn-data-table-pagination-dropdown-max-height: 60vh;
+  --pgn-data-table-footer-position: center;
+  --pgn-data-table-padding-head-cell: .5rem .75rem;
+  --pgn-data-table-padding-cell: .75rem;
+  --pgn-data-table-padding-small: .5rem;
+  --pgn-data-table-padding-y: .75rem;
+  --pgn-data-table-padding-x: .75rem;
+  --pgn-container-max-width-xl: 1440px;
+  --pgn-container-max-width-lg: 1192px;
+  --pgn-container-max-width-md: 952px;
+  --pgn-container-max-width-sm: 708px;
+  --pgn-container-max-width-xs: 464px;
+  --pgn-collapsible-card-spacer-basic-icon: .625rem;
+  --pgn-collapsible-card-spacer-basic-x: .5rem;
+  --pgn-collapsible-card-spacer-basic-y: .5rem;
+  --pgn-collapsible-card-spacer-icon: 2.5rem;
+  --pgn-collapsible-card-spacer-left-body: .75rem;
+  --pgn-collapsible-card-spacer-x-base: .5rem;
+  --pgn-collapsible-card-spacer-y-base: .5rem;
+  --pgn-code-pre-scrollable-max-height: 340px;
+  --pgn-code-kbd-padding-x: .4rem;
+  --pgn-code-kbd-padding-y: .2rem;
+  --pgn-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25);
+  --pgn-code-color: #E83E8CFF;
+  --pgn-code-font-size: 87.5%;
+  --pgn-chip-icon-size: 1.25rem;
+  --pgn-chip-disabled-opacity: .3;
+  --pgn-chip-line-height: 1.5rem;
+  --pgn-chip-font-weight: 400;
+  --pgn-chip-font-size: .75rem;
+  --pgn-chip-position-axis: .125rem;
+  --pgn-chip-border-width: .0625rem;
+  --pgn-chip-border-radius-focus: .5rem;
+  --pgn-chip-border-radius-base: .4375rem;
+  --pgn-chip-margin-inline: .5rem;
+  --pgn-chip-margin-base: .125rem;
+  --pgn-chip-padding-icon-to: 3px;
+  --pgn-chip-padding-icon-base: .25rem;
+  --pgn-chip-padding-x: .5rem;
+  --pgn-chip-padding-y: .125rem;
+  --pgn-carousel-transition-duration: .6s;
+  --pgn-carousel-caption-width: 70%;
+  --pgn-carousel-indicator-transition: opacity .6s ease;
+  --pgn-carousel-indicator-spacer: 3px;
+  --pgn-carousel-indicator-height-area-hit: 3px;
+  --pgn-carousel-indicator-height-base: 3px;
+  --pgn-carousel-indicator-width: 30px;
+  --pgn-carousel-control-transition: opacity .15s ease;
+  --pgn-carousel-control-opacity-hover: .9;
+  --pgn-carousel-control-opacity-base: .5;
+  --pgn-carousel-control-width-icon: 20px;
+  --pgn-carousel-control-width-base: 15%;
+  --pgn-card-loading-skeleton-spacer: .313rem;
+  --pgn-card-logo-height: 4.125rem;
+  --pgn-card-logo-width: 7.25rem;
+  --pgn-card-logo-bottom-offset-horizontal: .4375rem;
+  --pgn-card-logo-bottom-offset-base: 1rem;
+  --pgn-card-logo-left-offset-horizontal: .4375rem;
+  --pgn-card-logo-left-offset-base: 1.5rem;
+  --pgn-card-footer-action-gap: .5rem;
+  --pgn-card-columns-gap: 1.25rem;
+  --pgn-card-columns-count: 3;
+  --pgn-card-margin-group: 12px;
+  --pgn-card-image-vertical-height-max: 140px;
+  --pgn-card-image-horizontal-width-max: 240px;
+  --pgn-card-image-overlay-padding: 1.25rem;
+  --pgn-card-color: null;
+  --pgn-card-height-base: null;
+  --pgn-card-cap-color: null;
+  --pgn-card-border-radius-logo: .25rem;
+  --pgn-card-border-radius-image: .3125rem;
+  --pgn-card-spacer-y: .75rem;
+  --pgn-card-spacer-x: 1.25rem;
+  --pgn-btn-transition: null;
+  --pgn-btn-block-spacing-y: .5rem;
+  --pgn-btn-tertiary-inverse-bg-base: transparent;
+  --pgn-btn-disabled-opacity: .65;
+  --pgn-btn-focus-gap: 1px;
+  --pgn-btn-focus-width: 2px;
+  --pgn-btn-box-shadow-active: none;
+  --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
+  --pgn-bubble-expandable-padding-x: .25rem;
+  --pgn-bubble-expandable-padding-y: 0;
+  --pgn-breadcrumb-border-radius-focus: .125rem;
+  --pgn-breadcrumb-border-focus-width: .0625rem;
+  --pgn-breadcrumb-border-focus-axis-x: .25rem;
+  --pgn-breadcrumb-border-focus-axis-y: .5rem;
+  --pgn-breadcrumb-margin-left: .5rem;
+  --pgn-breadcrumb-margin-bottom: 1rem;
+  --pgn-breadcrumb-padding-item: .5rem;
+  --pgn-breadcrumb-padding-x: 1rem;
+  --pgn-breadcrumb-padding-y: .75rem;
+  --pgn-breadcrumb-font-size: null;
+  --pgn-badge-transition: none;
+  --pgn-badge-border-radius-pill: 10rem;
+  --pgn-badge-border-radius-base: .25rem;
+  --pgn-badge-padding-y: .125rem;
+  --pgn-badge-padding-x-pill: .6em;
+  --pgn-badge-padding-x-base: .5rem;
+  --pgn-badge-font-size: 75%;
+  --pgn-avatar-button-padding-left-lg: .25em;
+  --pgn-avatar-button-padding-left-sm: .25em;
+  --pgn-avatar-button-padding-left-base: .25em;
+  --pgn-avatar-size-huge: 18.75rem;
+  --pgn-avatar-size-xxl: 11.5rem;
+  --pgn-avatar-size-xl: 6rem;
+  --pgn-avatar-size-lg: 4rem;
+  --pgn-avatar-size-sm: 2.25rem;
+  --pgn-avatar-size-xs: 1.5rem;
+  --pgn-avatar-size-base: 3rem;
+  --pgn-avatar-border-radius: 100%;
+  --pgn-annotation-arrow-border-width: .5rem;
+  --pgn-annotation-arrow-side-margin: .25rem;
+  --pgn-annotation-max-width: 18.75rem;
+  --pgn-annotation-border-radius: .25rem;
+  --pgn-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
+  --pgn-annotation-padding: .5rem;
+  --pgn-alert-line-height: 1.5rem;
+  --pgn-alert-icon-space: .8rem;
+  --pgn-alert-level-color: 6;
+  --pgn-alert-level-border: -9;
+  --pgn-alert-level-bg: -10;
+  --pgn-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
+  --pgn-alert-font-size: .875rem;
+  --pgn-alert-border-width: 0;
+  --pgn-alert-margin-bottom: 1rem;
+  --pgn-alert-padding-x: 1.5rem;
+  --pgn-alert-padding-y: 1.5rem;
+  --pgn-action-row-gap-y: .5rem;
+  --pgn-action-row-gap-x: .5rem;
+  --pgn-color-dark-base: #273F2FFF;
+  --pgn-color-light-base: #E1DDDBFF;
+  --pgn-color-brand-base: #9D0054FF;
+  --pgn-color-primary-base: #0A3055FF;
+  --pgn-color-gray-base: #707070FF;
+  --pgn-color-gray-900: #212529FF;
+  --pgn-color-gray-800: #333333FF;
+  --pgn-color-gray-700: #454545FF;
+  --pgn-color-gray-600: #5C5C5CFF;
+  --pgn-color-gray-400: #8F8F8FFF;
+  --pgn-color-gray-300: #ADADADFF;
+  --pgn-color-gray-200: #CCCCCCFF;
+  --pgn-color-gray-100: #EBEBEBFF;
+  --pgn-color-theme-interval: 8%;
+  --pgn-color-accent-b: #FFEE88FF;
+  --pgn-color-accent-a: #00BBF9FF;
+  --pgn-color-teal: #006DAAFF;
+  --pgn-color-yellow: #FFD900FF;
+  --pgn-color-green: #178253FF;
+  --pgn-color-red: #C32D3AFF;
+  --pgn-color-blue: #23419FFF;
+  --pgn-color-black: #000000FF;
+  --pgn-color-white: #FFFFFFFF;
+  --pgn-font-weight-base: var(--pgn-font-weight-normal);
+  --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-font-size-mobile-h6: var(--pgn-font-size-h6);
+  --pgn-font-size-mobile-h5: var(--pgn-font-size-h5);
+  --pgn-font-size-mobile-h4: var(--pgn-font-size-h4);
+  --pgn-font-size-mobile-h3: var(--pgn-font-size-h3);
+  --pgn-font-size-mobile-h2: var(--pgn-font-size-h2);
+  --pgn-font-family-base: var(--pgn-font-family-sans-serif);
+  --pgn-spacer-5-5: calc(var(--pgn-spacer-base) * 4rem);
+  --pgn-spacer-4-5: calc(var(--pgn-spacer-base) * 2rem);
+  --pgn-spacer-3-5: calc(var(--pgn-spacer-base) * 1.25rem);
+  --pgn-spacer-2-5: calc(var(--pgn-spacer-base) * .75rem);
+  --pgn-spacer-1-5: calc(var(--pgn-spacer-base) * .375rem);
+  --pgn-spacer-6: calc(var(--pgn-spacer-base) * 5rem);
+  --pgn-spacer-5: calc(var(--pgn-spacer-base) * 3rem);
+  --pgn-spacer-4: calc(var(--pgn-spacer-base) * 1.5rem);
+  --pgn-spacer-3: var(--pgn-spacer-base);
+  --pgn-spacer-2: calc(var(--pgn-spacer-base) * .5rem);
+  --pgn-spacer-1: calc(var(--pgn-spacer-base) * .25rem);
+  --pgn-display-weight-4: var(--pgn-font-weight-bold);
+  --pgn-display-weight-3: var(--pgn-font-weight-bold);
+  --pgn-display-weight-2: var(--pgn-font-weight-bold);
+  --pgn-display-weight-1: var(--pgn-font-weight-bold);
+  --pgn-border-color: var(--pgn-color-gray-200);
+  --pgn-tooltip-arrow-color-light: var(--pgn-color-white);
+  --pgn-tooltip-border-radius: var(--pgn-border-radius-base);
+  --pgn-tooltip-bg-light: var(--pgn-color-white);
+  --pgn-tooltip-bg-base: var(--pgn-color-black);
+  --pgn-tooltip-color-light: var(--pgn-color-black);
+  --pgn-tooltip-color-base: var(--pgn-color-white);
+  --pgn-tooltip-font-size: var(--pgn-font-size-sm);
+  --pgn-toast-header-color-border: #00000080;
+  --pgn-toast-header-color-background: var(--pgn-color-gray-700);
+  --pgn-toast-header-color-base: var(--pgn-color-white);
+  --pgn-toast-border-color: #0000001A;
+  --pgn-toast-color-background: var(--pgn-color-gray-700);
+  --pgn-tabs-notification-font-size: var(--pgn-font-size-xs);
+  --pgn-spinner-sm-height: var(--pgn-spinner-sm-width);
+  --pgn-spinner-height: var(--pgn-spinner-width);
+  --pgn-sheet-skrim-component-box-shadow: #00000026;
+  --pgn-sheet-skrim-bg: #ADADAD80;
+  --pgn-search-field-border-color-focus: var(--pgn-color-black);
+  --pgn-search-field-border-color-interaction: var(--pgn-color-black);
+  --pgn-scrollable-body-box-shadow: #0000008C;
+  --pgn-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
+  --pgn-progress-bar-bar-color: var(--pgn-color-white);
+  --pgn-progress-bar-font-size: calc(var(--pgn-font-size-base) * .75);
+  --pgn-product-tour-checkpoint-arrow-transparent: solid var(--pgn-product-tour-checkpoint-width-arrow) transparent;
+  --pgn-product-tour-checkpoint-arrow-color-default: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-color-background);
+  --pgn-product-tour-checkpoint-arrow-color-top: solid var(--pgn-product-tour-checkpoint-width-arrow) var(--pgn-product-tour-checkpoint-width-border);
+  --pgn-product-tour-checkpoint-color-box-shadow: #0000004D;
+  --pgn-product-tour-checkpoint-color-body: var(--pgn-color-gray-700);
+  --pgn-popover-body-padding-x: var(--pgn-popover-header-padding-x);
+  --pgn-popover-body-padding-y: var(--pgn-popover-header-padding-y);
+  --pgn-popover-header-border-darken: #E5E5E5FF;
+  --pgn-popover-header-bg-darken: #E5E5E5FF;
+  --pgn-popover-border-width: var(--pgn-border-width);
+  --pgn-popover-border-radius: var(--pgn-border-radius-sm);
+  --pgn-popover-font-size: var(--pgn-font-size-sm);
+  --pgn-pagination-focus-color-text: var(--pgn-color-black);
+  --pgn-pagination-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-pagination-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-pagination-border-color-disabled: var(--pgn-color-gray-100);
+  --pgn-pagination-border-color-hover: var(--pgn-color-gray-200);
+  --pgn-pagination-border-color-base: var(--pgn-color-gray-200);
+  --pgn-pagination-border-width: var(--pgn-border-width);
+  --pgn-pagination-bg-disabled: var(--pgn-color-white);
+  --pgn-pagination-bg-hover: var(--pgn-color-gray-100);
+  --pgn-pagination-color-inverse: var(--pgn-color-white);
+  --pgn-navbar-light-toggler-border-color: #0000001A;
+  --pgn-navbar-light-color-disabled: #0000004D;
+  --pgn-navbar-light-color-active: #000000E6;
+  --pgn-navbar-light-color-hover: #000000B3;
+  --pgn-navbar-dark-toggler-border-color: #FFFFFF1A;
+  --pgn-navbar-dark-color-disabled: #FFFFFF40;
+  --pgn-navbar-dark-color-hover: #FFFFFFBF;
+  --pgn-navbar-toggler-font-size: var(--pgn-font-size-lg);
+  --pgn-navbar-brand-font-size: var(--pgn-font-size-lg);
+  --pgn-navbar-nav-link-height: calc(var(--pgn-font-size-base) * var(--pgn-line-height-base) + .5rem * 2);
+  --pgn-navbar-padding-x-base: var(--pgn-spacer-base);
+  --pgn-navbar-padding-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-nav-color-light: #00000080;
+  --pgn-nav-color-dark: #FFFFFF80;
+  --pgn-nav-divider-margin-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-nav-divider-color: var(--pgn-color-gray-100);
+  --pgn-nav-pills-border-radius: var(--pgn-border-radius-base);
+  --pgn-nav-link-color-disabled: var(--pgn-color-gray-300);
+  --pgn-nav-link-color-base: var(--pgn-color-gray-700);
+  --pgn-modal-header-padding-base: var(--pgn-modal-header-padding-y) var(--pgn-modal-header-padding-x);
+  --pgn-modal-header-border-width: var(--pgn-modal-content-border-width);
+  --pgn-modal-backdrop-bg: var(--pgn-color-black);
+  --pgn-modal-content-border-radius: var(--pgn-border-radius-lg);
+  --pgn-modal-content-border-color: #00000033;
+  --pgn-modal-title-line-height: var(--pgn-line-height-base);
+  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y);
+  --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base);
+  --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200);
+  --pgn-image-thumbnail-border-width: var(--pgn-border-width);
+  --pgn-icon-button-accent-color: var(--pgn-color-white);
+  --pgn-icon-button-diameter-inline: calc(var(--pgn-line-height-base) + .1em);
+  --pgn-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-blockquote-small-font-size: var(--pgn-font-size-small-base);
+  --pgn-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-list-group-action-color-base: var(--pgn-color-gray-700);
+  --pgn-list-group-disabled-color: var(--pgn-color-gray-600);
+  --pgn-list-group-border-radius: var(--pgn-border-radius-base);
+  --pgn-list-group-border-width: var(--pgn-border-width);
+  --pgn-list-group-border-color: #00000020;
+  --pgn-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-dt-font-weight: var(--pgn-font-weight-bold);
+  --pgn-input-btn-border-width: var(--pgn-border-width);
+  --pgn-input-btn-focus-box-shadow: 0 0 0 var(--pgn-input-btn-focus-width) var(--pgn-input-btn-focus-color);
+  --pgn-input-btn-line-height-lg: var(--pgn-line-height-lg);
+  --pgn-hr-border-margin-y: var(--pgn-spacer-base);
+  --pgn-hr-border-width: var(--pgn-border-width);
+  --pgn-hr-border-color: #0000001A;
+  --pgn-headings-color: var(--pgn-color-black);
+  --pgn-headings-font-weight: var(--pgn-font-weight-bold);
+  --pgn-body-color: var(--pgn-color-gray-700);
+  --pgn-form-feedback-tooltip-border-radius: var(--pgn-border-radius-base);
+  --pgn-form-feedback-tooltip-line-height: var(--pgn-line-height-base);
+  --pgn-form-feedback-tooltip-font-size: var(--pgn-font-size-sm);
+  --pgn-form-feedback-font-size: var(--pgn-font-size-small-base);
+  --pgn-form-feedback-margin-top: var(--pgn-form-text-margin-top);
+  --pgn-form-custom-file-box-shadow-base: var(--pgn-form-input-box-shadow-base);
+  --pgn-form-custom-range-thumb-box-shadow-focus-width: var(--pgn-form-input-focus-width);
+  --pgn-form-custom-range-thumb-height: var(--pgn-form-custom-range-thumb-width);
+  --pgn-form-custom-range-track-bg: var(--pgn-color-gray-300);
+  --pgn-form-custom-select-border-radius: var(--pgn-border-radius-base);
+  --pgn-form-custom-select-border-width-focus: var(--pgn-form-input-focus-width);
+  --pgn-form-custom-select-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-form-custom-switch-indicator-size: calc(var(--pgn-form-custom-control-indicator-size) - var(--pgn-form-custom-control-indicator-border-width) * 4);
+  --pgn-form-custom-switch-indicator-border-radius: calc(var(--pgn-form-custom-control-indicator-size) / 2);
+  --pgn-form-custom-switch-width: calc(var(--pgn-form-custom-control-indicator-size) * 1.75);
+  --pgn-form-custom-control-indicator-border-color: var(--pgn-color-gray-700);
+  --pgn-form-custom-control-indicator-box-shadow: var(--pgn-form-input-box-shadow-base);
+  --pgn-form-input-group-addon-bg: var(--pgn-color-gray-100);
+  --pgn-form-input-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-form-input-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-form-input-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-form-input-color-base: var(--pgn-color-gray-700);
+  --pgn-form-input-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-form-input-line-height-sm: var(--pgn-input-btn-line-height-sm);
+  --pgn-form-input-line-height-base: var(--pgn-input-btn-line-height-base);
+  --pgn-form-input-font-size-lg: var(--pgn-input-btn-font-size-lg);
+  --pgn-form-input-font-size-sm: var(--pgn-input-btn-font-size-sm);
+  --pgn-form-input-font-size-base: var(--pgn-input-btn-font-size-base);
+  --pgn-form-input-font-family: var(--pgn-input-btn-font-family);
+  --pgn-form-input-padding-x-lg: var(--pgn-input-btn-padding-lg-x);
+  --pgn-form-input-padding-x-sm: var(--pgn-input-btn-padding-sm-x);
+  --pgn-form-input-padding-x-base: var(--pgn-input-btn-padding-x);
+  --pgn-form-input-padding-y-lg: var(--pgn-input-btn-padding-lg-y);
+  --pgn-form-input-padding-y-sm: var(--pgn-input-btn-padding-sm-y);
+  --pgn-form-input-padding-y-base: var(--pgn-input-btn-padding-y);
+  --pgn-dropzone-restriction-msg-font-size: var(--pgn-font-size-small-x);
+  --pgn-dropdown-link-hover-color: var(--pgn-color-gray-900);
+  --pgn-dropdown-link-color: var(--pgn-color-gray-900);
+  --pgn-dropdown-divider-margin-y: calc(var(--pgn-spacer-base) / 2);
+  --pgn-dropdown-divider-bg: var(--pgn-color-gray-100);
+  --pgn-dropdown-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-dropdown-border-width: var(--pgn-border-width);
+  --pgn-dropdown-border-color: #00000026;
+  --pgn-dropdown-font-size: var(--pgn-font-size-base);
+  --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item);
+  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
+  --pgn-data-table-border: 1px solid var(--pgn-color-gray-200);
+  --pgn-data-table-background-is-loading: #FFFFFFB3;
+  --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x);
+  --pgn-collapsible-card-spacer-y-lg: var(--pgn-card-spacer-y);
+  --pgn-code-pre-color: var(--pgn-color-gray-900);
+  --pgn-code-kbd-bg: var(--pgn-color-gray-700);
+  --pgn-code-kbd-color: var(--pgn-color-white);
+  --pgn-code-kbd-nested-font-weight: var(--pgn-font-weight-bold);
+  --pgn-code-kbd-font-size: var(--pgn-code-font-size);
+  --pgn-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
+  --pgn-close-button-color: var(--pgn-color-black);
+  --pgn-close-button-font-weight: var(--pgn-font-weight-bold);
+  --pgn-close-button-font-size: calc(var(--pgn-font-size-base) * 1.5);
+  --pgn-carousel-caption-color: var(--pgn-color-white);
+  --pgn-carousel-indicator-active-bg: var(--pgn-color-white);
+  --pgn-card-footer-text-font-size: var(--pgn-font-size-small-x);
+  --pgn-card-divider-margin-y: var(--pgn-card-spacer-y);
+  --pgn-card-columns-margin: var(--pgn-card-spacer-y);
+  --pgn-card-margin-grid: var(--pgn-card-margin-group);
+  --pgn-card-margin-deck: var(--pgn-card-margin-group);
+  --pgn-card-image-horizontal-width-min: var(--pgn-card-image-horizontal-width-max);
+  --pgn-card-cap-bg: #00000008;
+  --pgn-card-border-color-focus: #00000080;
+  --pgn-card-border-color-base: #00000020;
+  --pgn-card-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-card-border-width: var(--pgn-border-width);
+  --pgn-btn-tertiary-inverse-bg-hover: #FFFFFF1A;
+  --pgn-btn-tertiary-inverse-color: var(--pgn-color-white);
+  --pgn-btn-tertiary-color: var(--pgn-color-gray-700);
+  --pgn-btn-border-radius-sm: var(--pgn-border-radius-sm);
+  --pgn-btn-border-radius-lg: var(--pgn-border-radius-lg);
+  --pgn-btn-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-btn-line-height-sm: var(--pgn-input-btn-line-height-sm);
+  --pgn-btn-line-height-base: var(--pgn-input-btn-line-height-base);
+  --pgn-btn-font-weight: var(--pgn-font-weight-normal);
+  --pgn-btn-font-size-lg: var(--pgn-input-btn-font-size-lg);
+  --pgn-btn-font-size-sm: var(--pgn-input-btn-font-size-sm);
+  --pgn-btn-font-size-base: var(--pgn-input-btn-font-size-base);
+  --pgn-btn-font-family: var(--pgn-input-btn-font-family);
+  --pgn-btn-padding-x-sm: var(--pgn-input-btn-padding-sm-x);
+  --pgn-btn-padding-x-lg: var(--pgn-input-btn-padding-lg-x);
+  --pgn-btn-padding-x-base: var(--pgn-input-btn-padding-x);
+  --pgn-btn-padding-y-sm: var(--pgn-input-btn-padding-sm-y);
+  --pgn-btn-padding-y-lg: var(--pgn-input-btn-padding-lg-y);
+  --pgn-btn-padding-y-base: var(--pgn-input-btn-padding-y);
+  --pgn-breadcrumb-inverse-color: var(--pgn-color-white);
+  --pgn-breadcrumb-color-divider: var(--pgn-color-gray-600);
+  --pgn-breadcrumb-bg: var(--pgn-color-gray-200);
+  --pgn-breadcrumb-border-radius-base: var(--pgn-border-radius-base);
+  --pgn-badge-focus-width: var(--pgn-input-btn-focus-width);
+  --pgn-badge-font-weight: var(--pgn-font-weight-bold);
+  --pgn-annotation-line-height: var(--pgn-line-height-sm);
+  --pgn-annotation-font-size: var(--pgn-font-size-sm);
+  --pgn-alert-color-content: var(--pgn-color-gray-700);
+  --pgn-alert-color-title: var(--pgn-color-black);
+  --pgn-alert-font-weight-link: var(--pgn-font-weight-normal);
+  --pgn-alert-border-radius: var(--pgn-border-radius-base);
+  --pgn-color-dark-900: #1B2C21FF;
+  --pgn-color-dark-800: #1D2F23FF;
+  --pgn-color-dark-700: #1F3226FF;
+  --pgn-color-dark-600: #23392AFF;
+  --pgn-color-dark-500: var(--pgn-color-dark-base);
+  --pgn-color-dark-400: #5D6F63FF;
+  --pgn-color-dark-300: #939F97FF;
+  --pgn-color-dark-200: #C9CFCBFF;
+  --pgn-color-dark-100: #F2F3F3FF;
+  --pgn-color-light-900: #9E9B99FF;
+  --pgn-color-light-800: #A9A6A4FF;
+  --pgn-color-light-700: #B4B1AFFF;
+  --pgn-color-light-600: #CBC7C5FF;
+  --pgn-color-light-500: var(--pgn-color-light-base);
+  --pgn-color-light-400: #E9E6E4FF;
+  --pgn-color-light-300: #F0EEEDFF;
+  --pgn-color-light-200: #F8F7F6FF;
+  --pgn-color-light-100: #FDFDFDFF;
+  --pgn-color-danger-base: var(--pgn-color-red);
+  --pgn-color-warning-base: var(--pgn-color-yellow);
+  --pgn-color-info-base: var(--pgn-color-teal);
+  --pgn-color-success-base: var(--pgn-color-green);
+  --pgn-color-brand-900: #6E003BFF;
+  --pgn-color-brand-800: #76003FFF;
+  --pgn-color-brand-700: #7E0043FF;
+  --pgn-color-brand-600: #8D004CFF;
+  --pgn-color-brand-500: var(--pgn-color-brand-base);
+  --pgn-color-brand-400: #B6407FFF;
+  --pgn-color-brand-300: #CE80AAFF;
+  --pgn-color-brand-200: #E7BFD4FF;
+  --pgn-color-brand-100: #F9F0F5FF;
+  --pgn-color-secondary-base: var(--pgn-color-gray-700);
+  --pgn-color-primary-900: #07223CFF;
+  --pgn-color-primary-800: #082440FF;
+  --pgn-color-primary-700: #082644FF;
+  --pgn-color-primary-600: #092B4DFF;
+  --pgn-color-primary-500: var(--pgn-color-primary-base);
+  --pgn-color-primary-400: #476480FF;
+  --pgn-color-primary-300: #8598AAFF;
+  --pgn-color-primary-200: #C2CBD5FF;
+  --pgn-color-primary-100: #F0F3F5FF;
+  --pgn-color-gray-500: var(--pgn-color-gray-base);
+  --pgn-color-active: var(--pgn-color-white);
+  --pgn-color-background-base: var(--pgn-color-white);
+  --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base);
+  --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
+  --pgn-search-field-button-variants-dark: var(--pgn-color-brand-500);
+  --pgn-search-field-button-variants-light: var(--pgn-color-primary-500);
+  --pgn-search-field-border-color-base: var(--pgn-color-gray-500);
+  --pgn-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
+  --pgn-progress-bar-border-color: var(--pgn-color-gray-500);
+  --pgn-product-tour-checkpoint-color-breadcrumb: var(--pgn-color-primary-500);
+  --pgn-product-tour-checkpoint-color-border: var(--pgn-color-brand-500);
+  --pgn-product-tour-checkpoint-color-background: var(--pgn-color-light-300);
+  --pgn-popover-body-color: var(--pgn-body-color);
+  --pgn-popover-header-color: var(--pgn-headings-color);
+  --pgn-popover-bg: var(--pgn-color-background-base);
+  --pgn-pagination-focus-color-base: var(--pgn-color-primary-500);
+  --pgn-pagination-focus-box-shadow: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-pagination-bg-base: var(--pgn-color-background-base);
+  --pgn-pagination-color-active: var(--pgn-color-active);
+  --pgn-navbar-light-brand-color-hover: var(--pgn-navbar-light-color-active);
+  --pgn-navbar-light-brand-color-base: var(--pgn-navbar-light-color-active);
+  --pgn-navbar-dark-color-active: var(--pgn-color-active);
+  --pgn-navbar-toggler-border-radius: var(--pgn-btn-border-radius-base);
+  --pgn-navbar-brand-padding-y: calc((var(--pgn-navbar-nav-link-height) - var(--pgn-navbar-brand-height)) / 2);
+  --pgn-navbar-brand-height: calc(var(--pgn-navbar-brand-font-size) * var(--pgn-line-height-base));
+  --pgn-nav-pills-link-link-active-color: var(--pgn-color-active);
+  --pgn-nav-tabs-link-active-color-border: transparent transparent var(--pgn-color-primary-500);
+  --pgn-nav-tabs-link-active-color-base: var(--pgn-color-primary-500);
+  --pgn-nav-tabs-link-hover-bg: var(--pgn-color-light-400);
+  --pgn-nav-tabs-border-color: var(--pgn-color-light-400);
+  --pgn-modal-header-border-color: var(--pgn-border-color);
+  --pgn-modal-content-bg: var(--pgn-color-background-base);
+  --pgn-modal-footer-border-width: var(--pgn-modal-header-border-width);
+  --pgn-image-figure-caption-color: var(--pgn-color-gray-500);
+  --pgn-text-muted: var(--pgn-color-gray-500);
+  --pgn-list-group-action-active-color: var(--pgn-body-color);
+  --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base);
+  --pgn-list-group-active-color-base: var(--pgn-color-active);
+  --pgn-list-group-bg-base: var(--pgn-color-background-base);
+  --pgn-link-brand-inline-color: var(--pgn-color-brand-500);
+  --pgn-link-brand-color: var(--pgn-color-brand-500);
+  --pgn-link-muted-inline-color: var(--pgn-color-primary-500);
+  --pgn-link-muted-color: var(--pgn-color-primary-500);
+  --pgn-body-bg: var(--pgn-color-background-base);
+  --pgn-form-custom-file-button-bg: var(--pgn-form-input-group-addon-bg);
+  --pgn-form-custom-file-color: var(--pgn-form-input-color-base);
+  --pgn-form-custom-file-font-family: var(--pgn-form-input-font-family);
+  --pgn-form-custom-file-line-height: var(--pgn-form-input-line-height-base);
+  --pgn-form-custom-file-padding-x: var(--pgn-form-input-padding-x-base);
+  --pgn-form-custom-file-padding-y: var(--pgn-form-input-padding-y-base);
+  --pgn-form-custom-file-bg-disabled: var(--pgn-form-input-bg-disabled);
+  --pgn-form-custom-file-border-color-radius: var(--pgn-form-input-border-radius-base);
+  --pgn-form-custom-select-border-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-form-custom-select-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-custom-select-line-height: var(--pgn-form-input-line-height-base);
+  --pgn-form-custom-select-font-size-lg: var(--pgn-form-input-font-size-lg);
+  --pgn-form-custom-select-font-size-sm: var(--pgn-form-input-font-size-sm);
+  --pgn-form-custom-select-font-size-base: var(--pgn-form-input-font-size-base);
+  --pgn-form-custom-select-font-family: var(--pgn-form-input-font-family);
+  --pgn-form-custom-select-padding-x-lg: var(--pgn-form-input-padding-x-lg);
+  --pgn-form-custom-select-padding-x-sm: var(--pgn-form-input-padding-x-sm);
+  --pgn-form-custom-select-padding-x-base: var(--pgn-form-input-padding-x-base);
+  --pgn-form-custom-select-padding-y-lg: var(--pgn-form-input-padding-y-lg);
+  --pgn-form-custom-select-padding-y-sm: var(--pgn-form-input-padding-y-sm);
+  --pgn-form-custom-select-padding-y-base: var(--pgn-form-input-padding-y-base);
+  --pgn-form-custom-control-indicator-checked-border-color-base: var(--pgn-color-primary-500);
+  --pgn-form-custom-control-indicator-checked-bg-disabled: #0A305580;
+  --pgn-form-custom-control-indicator-disabled-bg: var(--pgn-form-input-bg-disabled);
+  --pgn-form-input-group-addon-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-input-height-inner-quarter: calc(var(--pgn-form-input-line-height-base) * .25em + calc(var(--pgn-form-input-padding-y-base) / 2));
+  --pgn-form-input-height-inner-half: calc(var(--pgn-form-input-line-height-base) * .5em + var(--pgn-form-input-padding-y-base));
+  --pgn-form-input-height-inner-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
+  --pgn-form-input-height-sm: calc(var(--pgn-form-input-line-height-sm) * 1em + var(--pgn-input-btn-padding-sm-y) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-height-base: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-focus-color-base: var(--pgn-form-input-color-base);
+  --pgn-form-input-box-shadow-focus: var(--pgn-input-btn-focus-box-shadow);
+  --pgn-form-input-border-width: var(--pgn-input-btn-border-width);
+  --pgn-form-input-border-color: var(--pgn-color-gray-500);
+  --pgn-form-input-color-plaintext: var(--pgn-body-color);
+  --pgn-form-input-color-placeholder: var(--pgn-color-gray-500);
+  --pgn-form-input-bg-base: var(--pgn-color-background-base);
+  --pgn-form-input-line-height-lg: var(--pgn-input-btn-line-height-lg);
+  --pgn-form-input-font-weight: var(--pgn-font-weight-base);
+  --pgn-dropzone-restriction-msg-color: var(--pgn-color-gray-500);
+  --pgn-dropzone-border-active: 2px solid var(--pgn-color-primary-500);
+  --pgn-dropzone-border-default: 1px dashed var(--pgn-color-gray-500);
+  --pgn-dropdown-link-active-color: var(--pgn-color-active);
+  --pgn-dropdown-link-hover-bg: var(--pgn-color-light-300);
+  --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width));
+  --pgn-dropdown-bg: var(--pgn-color-background-base);
+  --pgn-dropdown-color-header: var(--pgn-color-gray-500);
+  --pgn-dropdown-color-base: var(--pgn-body-color);
+  --pgn-data-table-background-color: var(--pgn-color-background-base);
+  --pgn-card-divider-bg: var(--pgn-color-light-400);
+  --pgn-card-bg: var(--pgn-color-background-base);
+  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
+  --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500);
+  --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500);
+  --pgn-btn-border-width: var(--pgn-input-btn-border-width);
+  --pgn-btn-line-height-lg: var(--pgn-input-btn-line-height-lg);
+  --pgn-breadcrumb-inverse-spacer: var(--pgn-color-light-700);
+  --pgn-breadcrumb-inverse-active: var(--pgn-color-light-500);
+  --pgn-breadcrumb-color-active: var(--pgn-color-gray-500);
+  --pgn-breadcrumb-color-base: var(--pgn-color-primary-500);
+  --pgn-avatar-border-base: solid 1px var(--pgn-color-light-300);
+  --pgn-alert-actions-gap: var(--pgn-spacer-3);
+  --pgn-color-danger-900: #892029FF;
+  --pgn-color-danger-800: #92222CFF;
+  --pgn-color-danger-700: #9C242EFF;
+  --pgn-color-danger-600: #B02934FF;
+  --pgn-color-danger-500: var(--pgn-color-danger-base);
+  --pgn-color-danger-400: #D2626BFF;
+  --pgn-color-danger-300: #E1969DFF;
+  --pgn-color-danger-200: #F0CBCEFF;
+  --pgn-color-danger-100: #FBF2F3FF;
+  --pgn-color-warning-900: #B39800FF;
+  --pgn-color-warning-800: #BFA300FF;
+  --pgn-color-warning-700: #CCAE00FF;
+  --pgn-color-warning-600: #E6C300FF;
+  --pgn-color-warning-500: var(--pgn-color-warning-base);
+  --pgn-color-warning-400: #FFE340FF;
+  --pgn-color-warning-300: #FFEC80FF;
+  --pgn-color-warning-200: #FFF6BFFF;
+  --pgn-color-warning-100: #FFFDF0FF;
+  --pgn-color-info-900: #004C77FF;
+  --pgn-color-info-800: #005280FF;
+  --pgn-color-info-700: #005788FF;
+  --pgn-color-info-600: #006299FF;
+  --pgn-color-info-500: var(--pgn-color-info-base);
+  --pgn-color-info-400: #4092BFFF;
+  --pgn-color-info-300: #80B6D5FF;
+  --pgn-color-info-200: #BFDBEAFF;
+  --pgn-color-info-100: #F0F6FAFF;
+  --pgn-color-success-900: #105B3AFF;
+  --pgn-color-success-800: #11623EFF;
+  --pgn-color-success-700: #126842FF;
+  --pgn-color-success-600: #15754BFF;
+  --pgn-color-success-500: var(--pgn-color-success-base);
+  --pgn-color-success-400: #51A17EFF;
+  --pgn-color-success-300: #8BC1A9FF;
+  --pgn-color-success-200: #C5E0D4FF;
+  --pgn-color-success-100: #F1F8F5FF;
+  --pgn-color-secondary-900: #303030FF;
+  --pgn-color-secondary-800: #343434FF;
+  --pgn-color-secondary-700: #373737FF;
+  --pgn-color-secondary-600: #3E3E3EFF;
+  --pgn-color-secondary-500: var(--pgn-color-secondary-base);
+  --pgn-color-secondary-400: #747474FF;
+  --pgn-color-secondary-300: #A2A2A2FF;
+  --pgn-color-secondary-200: #D1D1D1FF;
+  --pgn-color-secondary-100: #F4F4F4FF;
+  --pgn-color-input-focus: var(--pgn-color-primary-500);
+  --pgn-color-disabled: var(--pgn-color-gray-500);
+  --pgn-color-background-active: var(--pgn-color-primary-500);
+  --pgn-popover-danger-icon-color: var(--pgn-color-warning-500);
+  --pgn-popover-danger-bg: var(--pgn-color-danger-100);
+  --pgn-popover-warning-icon-color: var(--pgn-color-warning-500);
+  --pgn-popover-warning-bg: var(--pgn-color-warning-100);
+  --pgn-popover-success-icon-color: var(--pgn-color-success-500);
+  --pgn-popover-success-bg: var(--pgn-color-success-100);
+  --pgn-popover-arrow-color: var(--pgn-popover-bg);
+  --pgn-pagination-bg-active: var(--pgn-color-background-active);
+  --pgn-pagination-color-disabled: var(--pgn-color-disabled);
+  --pgn-navbar-dark-brand-color-hover: var(--pgn-navbar-dark-color-active);
+  --pgn-navbar-dark-brand-color-base: var(--pgn-navbar-dark-color-active);
+  --pgn-nav-pills-link-link-active-bg: var(--pgn-color-background-active);
+  --pgn-nav-tabs-link-active-bg: var(--pgn-body-bg);
+  --pgn-nav-tabs-link-hover-border-color: transparent transparent var(--pgn-nav-tabs-border-color);
+  --pgn-modal-footer-border-color: var(--pgn-modal-header-border-color);
+  --pgn-menu-background-active: var(--pgn-btn-tertiary-bg-active);
+  --pgn-image-thumbnail-bg: var(--pgn-body-bg);
+  --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base);
+  --pgn-list-group-active-bg: var(--pgn-color-background-active);
+  --pgn-link-brand-inline-hover-color: #95004EFF;
+  --pgn-link-brand-inline-decoration-color: #9D00544D;
+  --pgn-link-brand-hover-color: #95004EFF;
+  --pgn-link-muted-inline-hover-color: #002A4FFF;
+  --pgn-link-muted-inline-decoration-color: #0A30554D;
+  --pgn-link-muted-hover-color: #002A4FFF;
+  --pgn-input-btn-focus-color: var(--pgn-color-input-focus);
+  --pgn-form-custom-file-button-color: var(--pgn-form-custom-file-color);
+  --pgn-form-custom-file-font-weight: var(--pgn-form-input-font-weight);
+  --pgn-form-custom-file-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-custom-file-box-shadow-focus: var(--pgn-form-input-box-shadow-focus);
+  --pgn-form-custom-file-border-width: var(--pgn-form-input-border-width);
+  --pgn-form-custom-file-border-color-base: var(--pgn-form-input-border-color);
+  --pgn-form-custom-file-height-inner: var(--pgn-form-input-height-inner-base);
+  --pgn-form-custom-file-height-base: var(--pgn-form-input-height-base);
+  --pgn-form-custom-range-thumb-box-shadow-focus-base: 0 0 0 1px var(--pgn-body-bg), var(--pgn-form-input-box-shadow-focus);
+  --pgn-form-custom-range-thumb-bg-active: #1F3E64FF;
+  --pgn-form-custom-range-thumb-bg-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-range-thumb-bg-base: var(--pgn-color-background-active);
+  --pgn-form-custom-select-height-sm: var(--pgn-form-input-height-sm);
+  --pgn-form-custom-select-border-color-base: var(--pgn-form-input-border-color);
+  --pgn-form-custom-select-border-width-base: var(--pgn-form-input-border-width);
+  --pgn-form-custom-select-feedback-icon-size: var(--pgn-form-input-height-inner-half) var(--pgn-form-input-height-inner-half);
+  --pgn-form-custom-select-feedback-icon-position: center right calc(var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding));
+  --pgn-form-custom-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-form-custom-select-padding-y-base)) * 3 / 4 + var(--pgn-form-custom-select-padding-x-base) + var(--pgn-form-custom-select-indicator-padding));
+  --pgn-form-custom-select-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-custom-select-color-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-select-font-weight: var(--pgn-form-input-font-weight);
+  --pgn-form-custom-select-font-height-base: var(--pgn-form-input-height-base);
+  --pgn-form-custom-checkbox-indicator-indeterminate-bg: var(--pgn-color-background-active);
+  --pgn-form-custom-control-label-floating-text: #FFFFFF1A;
+  --pgn-form-custom-control-label-color-disabled: var(--pgn-color-disabled);
+  --pgn-form-custom-control-indicator-bg-base: var(--pgn-form-input-bg-base);
+  --pgn-form-input-group-addon-color-border: var(--pgn-form-input-border-color);
+  --pgn-form-input-height-lg: calc(var(--pgn-form-input-line-height-lg) * 1em + var(--pgn-input-btn-padding-lg-y) * 2 + var(--pgn-form-input-border-height));
+  --pgn-form-input-focus-color-border: var(--pgn-color-input-focus);
+  --pgn-form-input-focus-bg: var(--pgn-form-input-bg-base);
+  --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2);
+  --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500);
+  --pgn-dropzone-border-error: 2px solid var(--pgn-color-danger-300);
+  --pgn-dropzone-border-focus: 2px solid var(--pgn-color-info-300);
+  --pgn-dropzone-border-hover: 2px solid var(--pgn-color-info-300);
+  --pgn-dropdown-link-disabled-color: var(--pgn-color-disabled);
+  --pgn-dropdown-link-active-bg: var(--pgn-color-background-active);
+  --pgn-btn-disabled-link-color: var(--pgn-color-disabled);
+  --pgn-color-link: var(--pgn-color-info-500);
+  --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active);
+  --pgn-pagination-color-base: var(--pgn-color-link);
+  --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg);
+  --pgn-link-brand-inline-hover-decoration-color: var(--pgn-link-brand-inline-hover-color);
+  --pgn-link-muted-inline-hover-decoration-color: var(--pgn-link-muted-inline-hover-color);
+  --pgn-link-inline-color: var(--pgn-color-link);
+  --pgn-link-hover-color: #0066A3FF;
+  --pgn-link-color: var(--pgn-color-link);
+  --pgn-form-custom-file-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-form-custom-select-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-form-custom-select-font-height-lg: var(--pgn-form-input-height-lg);
+  --pgn-form-custom-checkbox-indicator-indeterminate-border-color: var(--pgn-form-custom-checkbox-indicator-indeterminate-bg);
+  --pgn-form-custom-control-indicator-checked-border-color-focus: var(--pgn-form-input-focus-color-border);
+  --pgn-pagination-color-hover: var(--pgn-link-hover-color);
+  --pgn-link-inline-hover-color: #0066A3FF;
+  --pgn-link-inline-decoration-color: #006DAA4D;
+  --pgn-link-inline-hover-decoration-color: var(--pgn-link-inline-hover-color);
+}
diff --git a/tokens/map-scss-to-css.js b/tokens/map-scss-to-css.js
new file mode 100644
index 00000000000..e8346e7f68c
--- /dev/null
+++ b/tokens/map-scss-to-css.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+const { getSCSStoCSSMap, getFilesWithExtension } = require('./utils');
+
+const BASE_PATH = path.resolve(__dirname, './source');
+const BASE_PREFIX = '--pgn';
+
+const SCSStoCSSMap = {};
+const CSStoSCSSMap = {};
+const tokenPaths = getFilesWithExtension(BASE_PATH, '.json');
+
+tokenPaths.forEach(tokenFile => {
+  const tokenContent = fs.readFileSync(tokenFile, 'utf-8');
+  const parsed = JSON.parse(tokenContent);
+  getSCSStoCSSMap(BASE_PREFIX, parsed, SCSStoCSSMap);
+});
+
+Object.entries(SCSStoCSSMap).forEach(([key, value]) => {
+  CSStoSCSSMap[value] = key;
+});
+
+fs.writeFileSync(path.resolve(__dirname, './build/scss-to-css.json'), JSON.stringify(SCSStoCSSMap));
+fs.writeFileSync(path.resolve(__dirname, './build/css-to-scss.json'), JSON.stringify(CSStoSCSSMap));
diff --git a/tokens/package-lock.json b/tokens/package-lock.json
new file mode 100644
index 00000000000..c4688a97d83
--- /dev/null
+++ b/tokens/package-lock.json
@@ -0,0 +1,784 @@
+{
+  "name": "paragon-design-tokens",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "paragon-design-tokens",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "chroma-js": "^2.4.2",
+        "commander": "^7.1.0",
+        "style-dictionary": "^3.7.1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dependencies": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/style-dictionary": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz",
+      "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "bin": {
+        "style-dictionary": "bin/style-dictionary"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/style-dictionary/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    }
+  },
+  "dependencies": {
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "requires": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+    },
+    "header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "requires": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "json5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+    },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
+    },
+    "sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "style-dictionary": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-3.7.1.tgz",
+      "integrity": "sha512-yYU9Z/J8Znj9T9oJVjo8VOYamrOxv0UbBKPjhSt+PharxrhyQCM4RWb71fgEfv2pK9KO8G83/0ChDNQZ1mn0wQ==",
+      "requires": {
+        "chalk": "^4.0.0",
+        "change-case": "^4.1.2",
+        "commander": "^8.3.0",
+        "fs-extra": "^10.0.0",
+        "glob": "^7.2.0",
+        "json5": "^2.2.0",
+        "jsonc-parser": "^3.0.0",
+        "lodash": "^4.17.15",
+        "tinycolor2": "^1.4.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "8.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+        }
+      }
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
+    "tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    },
+    "upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    }
+  }
+}
diff --git a/tokens/package.json b/tokens/package.json
new file mode 100644
index 00000000000..68deb57dfa0
--- /dev/null
+++ b/tokens/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "paragon-design-tokens",
+  "version": "1.0.0",
+  "description": "Paragon's design system based on Style Dictionary approach.",
+  "main": "build-tokens.js",
+  "scripts": {
+    "build-tokens": "node build-tokens.js",
+    "replace-variables-usage": "node replace-variables.js -p ../src/ -t usage",
+    "replace-variables-definition": "node replace-variables.js -p ../src -t definition",
+    "build-scss-to-css-map": "node map-scss-to-css.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "chroma-js": "^2.4.2",
+    "commander": "^7.1.0",
+    "style-dictionary": "^3.7.1"
+  }
+}
diff --git a/tokens/replace-variables.js b/tokens/replace-variables.js
new file mode 100644
index 00000000000..3ce952e30f9
--- /dev/null
+++ b/tokens/replace-variables.js
@@ -0,0 +1,28 @@
+const fs = require('fs');
+const path = require('path');
+const { program, Option } = require('commander');
+const { transformInPath } = require('./utils');
+
+program
+  .description('CLI to replace SCSS variables usages or definitions to CSS variables and vice versa in .scss files.')
+  .requiredOption('-p, --filePath <filePath>', 'Path to the file or directory where to replace variables.')
+  .addOption(new Option('-t, --replacementType <replacementType>', 'Type of replacement: usage or definition. If set to "definition" the command will only update SCSS variables definitions with CSS variables, if set to "usage" - all occurrences of SCSS variables will we replaced')
+    .choices(['usage', 'definition'])
+    .default('definition'))
+  .addOption(new Option('-d, --direction <name>', 'Map direction: css-to-scss or scss-to-css, if replacement type parameter is set to "definition" this has no effect.')
+    .choices(['scss-to-css', 'css-to-scss'])
+    .default('scss-to-css'))
+  .action(async (options) => {
+    const { direction, filePath, replacementType } = options;
+    if (replacementType === 'usage') {
+      const mapFile = fs.readFileSync(path.resolve(__dirname, `./build/${direction}.json`), 'utf-8');
+      const variablesMap = JSON.parse(mapFile);
+      await transformInPath(filePath, variablesMap, 'usage', ['Table'], direction);
+    } else {
+      const mapFile = fs.readFileSync(path.resolve(__dirname, './build/scss-to-css.json'), 'utf-8');
+      const variablesMap = JSON.parse(mapFile);
+      await transformInPath(filePath, variablesMap);
+    }
+  });
+
+program.parse(process.argv);
diff --git a/tokens/source/alias/color.json b/tokens/source/alias/color.json
new file mode 100644
index 00000000000..654217fe156
--- /dev/null
+++ b/tokens/source/alias/color.json
@@ -0,0 +1,14 @@
+{
+  "color": {
+    "background": {
+      "base": { "value": "{color.white.value}", "themeable": true } ,
+      "active": { "value": "{color.primary.500.value}", "themeable": true, "source": "$component-active-bg" }
+    },
+    "active": { "value": "{color.white.value}", "themeable": true, "source": "$component-active-color" },
+    "disabled": { "value": "{color.gray.500.value}", "themeable": true },
+    "link": { "value": "{color.info.500.value}", "themeable": true },
+    "input": {
+      "focus": { "value": "{color.primary.500.value}", "themeable": true }
+    }
+  }
+}
diff --git a/tokens/source/components/ActionRow.json b/tokens/source/components/ActionRow.json
new file mode 100644
index 00000000000..0233a8839ec
--- /dev/null
+++ b/tokens/source/components/ActionRow.json
@@ -0,0 +1,8 @@
+{
+  "action-row": {
+    "gap": {
+      "x": { "value": ".5rem", "themeable": true, "source": "$action-row-gap-x" },
+      "y": { "value": ".5rem", "themeable": true, "source": "$action-row-gap-y" }
+    }
+  }
+}
diff --git a/tokens/source/components/Alert.json b/tokens/source/components/Alert.json
new file mode 100644
index 00000000000..1a48f652438
--- /dev/null
+++ b/tokens/source/components/Alert.json
@@ -0,0 +1,40 @@
+{
+  "alert": {
+    "padding": {
+      "y": { "value": "1.5rem", "themeable": true, "source": "$alert-padding-y" },
+      "x": { "value": "1.5rem", "themeable": true, "source": "$alert-padding-x" }
+    },
+    "margin": {
+      "bottom": { "value": "1rem", "themeable": true, "source": "$alert-margin-bottom" }
+    },
+    "border": {
+      "radius": { "value": "{border.radius.base}", "themeable": true, "source": "$alert-border-radius" },
+      "width": { "value": "0", "themeable": true, "source": "$alert-border-width" }
+    },
+    "font": {
+      "weight": {
+        "link": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$alert-link-font-weight" }
+      },
+      "size": { "value": ".875rem", "themeable": true, "source": "$alert-font-size" }
+    },
+    "color": {
+      "title": { "value": "{color.black.value}", "themeable": true, "source": "$alert-title-color" },
+      "content": { "value": "{color.gray.700.value}", "themeable": true, "source": "$alert-content-color" }
+    },
+    "box-shadow": {
+      "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)", 
+      "themeable": true, 
+      "source": "$alert-box-shadow"
+    },
+    "level": {
+      "bg": { "value": "-10", "themeable": true, "source": "$alert-bg-level" },
+      "border": { "value": "-9", "themeable": true, "source": "$alert-border-level" },
+      "color": { "value": "6", "themeable": true, "source": "$alert-color-level" }
+    },
+    "icon": {
+      "space": { "value": ".8rem", "themeable": true, "source": "$alert-icon-space" }
+    },
+    "line-height": { "value": "1.5rem", "themeable": true, "source": "$alert-line-height" },
+    "actions-gap": { "value": "{spacer.3.value}", "themeable": true, "source": "$alert-actions-gap" }
+  }
+}
diff --git a/tokens/source/components/Annotation.json b/tokens/source/components/Annotation.json
new file mode 100644
index 00000000000..c5e558fe2a1
--- /dev/null
+++ b/tokens/source/components/Annotation.json
@@ -0,0 +1,30 @@
+{
+  "annotation": {
+    "padding": { "value": ".5rem", "themeable": true, "source": "$annotation-padding" },
+    "box-shadow": {
+      "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15))\n  drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+      "themeable": true,
+      "source": "$annotation-box-shadow"
+    },
+    "border": {
+      "radius": { "value": ".25rem", "themeable": true, "source": "$annotation-border-radius" }
+    },
+    "max": {
+      "width": { "value": "18.75rem", "themeable": true, "source": "$annotation-max-width" }
+    },
+    "font": {
+      "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$annotation-font-size" }
+    },
+    "line": {
+      "height": { "value": "{line-height.sm.value}", "themeable": true, "source": "$annotation-line-height" }
+    },
+    "arrow": {
+      "side": {
+        "margin": { "value": ".25rem", "themeable": true, "source": "$annotation-arrow-side-margin" }
+      },
+      "border": {
+        "width": { "value": ".5rem", "themeable": true, "source": "$annotation-arrow-border-width" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Avatar.json b/tokens/source/components/Avatar.json
new file mode 100644
index 00000000000..5678109373a
--- /dev/null
+++ b/tokens/source/components/Avatar.json
@@ -0,0 +1,17 @@
+{
+  "avatar": {
+    "border": {
+      "base": { "value": "solid 1px {color.light.300.value}", "themeable": true, "source": "$avatar-border" },
+      "radius": { "value": "100%", "themeable": true, "source": "$avatar-border-radius" }
+    },
+    "size": {
+      "base": { "value": "3rem", "themeable": true, "source": "$avatar-size" },
+      "xs": { "value": "1.5rem", "themeable": true, "source": "$avatar-size-xs" },
+      "sm": { "value": "2.25rem", "themeable": true, "source": "$avatar-size-sm" },
+      "lg": { "value": "4rem", "themeable": true, "source": "$avatar-size-lg" },
+      "xl": { "value": "6rem", "themeable": true, "source": "$avatar-size-xl" },
+      "xxl": { "value": "11.5rem", "themeable": true, "source": "$avatar-size-xxl" },
+      "huge": { "value": "18.75rem", "themeable": true, "source": "$avatar-size-huge" }
+    }
+  }
+}
diff --git a/tokens/source/components/AvatarButton.json b/tokens/source/components/AvatarButton.json
new file mode 100644
index 00000000000..eda276db625
--- /dev/null
+++ b/tokens/source/components/AvatarButton.json
@@ -0,0 +1,11 @@
+{
+  "avatar-button": {
+    "padding": {
+      "left": {
+        "base": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left" },
+        "sm": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left-sm" },
+        "lg": { "value": ".25em", "themeable": true, "source": "$avatar-button-padding-left-lg" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Badge.json b/tokens/source/components/Badge.json
new file mode 100644
index 00000000000..98cbb60b99e
--- /dev/null
+++ b/tokens/source/components/Badge.json
@@ -0,0 +1,25 @@
+{
+  "badge": {
+    "font": {
+      "size": { "value": "75%", "themeable": true, "source": "$badge-font-size" },
+      "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$badge-font-weight" }
+    },
+    "padding": {
+      "x": {
+        "base": { "value": ".5rem", "themeable": true, "source": "$badge-padding-x" },
+        "pill": { "value": ".6em", "themeable": true, "source": "$badge-pill-padding-x" }
+      },
+      "y": { "value": ".125rem", "themeable": true, "source": "$badge-padding-y" }
+    },
+    "border": {
+      "radius": {
+        "base": { "value": ".25rem", "themeable": true, "source": "$badge-border-radius" },
+        "pill": { "value": "10rem", "themeable": true, "source": "$badge-pill-border-radius" }
+      }
+    },
+    "transition": { "value": "none", "themeable": true, "source": "$badge-transition" },
+    "focus": {
+      "width": { "value": "{input.btn.focus.width.value}", "themeable": true, "source": "$badge-focus-width" }
+    }
+  }
+}
diff --git a/tokens/source/components/Breadcrumb.json b/tokens/source/components/Breadcrumb.json
new file mode 100644
index 00000000000..99356c306bf
--- /dev/null
+++ b/tokens/source/components/Breadcrumb.json
@@ -0,0 +1,40 @@
+{
+  "breadcrumb": {
+    "font": {
+      "size": { "value": "null", "themeable": true, "source": "$breadcrumb-font-size" }
+    },
+    "padding": {
+      "y": { "value": ".75rem", "themeable": true, "source": "$breadcrumb-padding-y" },
+      "x": { "value": "1rem", "themeable": true, "source": "$breadcrumb-padding-x" },
+      "item": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-item-padding" }
+    },
+    "margin": {
+      "bottom": { "value": "1rem", "themeable": true, "source": "$breadcrumb-margin-bottom" },
+      "left": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-margin-left" }
+    },
+    "border": {
+      "focus": {
+        "axis": {
+          "y": { "value": ".5rem", "themeable": true, "source": "$breadcrumb-border-focus-axis-y" },
+          "x": { "value": ".25rem", "themeable": true, "source": "$breadcrumb-border-focus-axis-x" }
+        },
+        "width": { "value": ".0625rem", "themeable": true, "source": "$breadcrumb-border-focus-width" }
+      },
+      "radius": {
+        "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$breadcrumb-border-radius" },
+        "focus": { "value": ".125rem", "themeable": true, "source": "$breadcrumb-focus-border-radius" }
+      }
+    },
+    "bg": { "value": "{color.gray.200.value}", "themeable": true, "source": "$breadcrumb-bg" },
+    "color": {
+      "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$breadcrumb-color" },
+      "divider": { "value": "{color.gray.600.value}", "themeable": true, "source": "$breadcrumb-divider-color" },
+      "active": { "value": "{color.gray.500.value}", "themeable": true, "source": "$breadcrumb-active-color" }
+    },
+    "inverse": {
+      "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$breadcrumb-inverse-active" },
+      "spacer": { "value": "{color.light.700.value}", "themeable": true, "source": "$breadcrumb-inverse-spacer" },
+      "color": { "value": "{color.white.value}", "themeable": true, "source": "$breadcrumb-inverse-color" }
+    }
+  }
+}
diff --git a/tokens/source/components/Bubble.json b/tokens/source/components/Bubble.json
new file mode 100644
index 00000000000..c27b8e2489c
--- /dev/null
+++ b/tokens/source/components/Bubble.json
@@ -0,0 +1,10 @@
+{
+  "bubble": {
+    "expandable": {
+      "padding": {
+        "y": { "value": "0", "themeable": true, "source": "$bubble-expandable-padding-y" },
+        "x": { "value": ".25rem", "themeable": true, "source": "$bubble-expandable-padding-x" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Button.json b/tokens/source/components/Button.json
new file mode 100644
index 00000000000..a27f98e1970
--- /dev/null
+++ b/tokens/source/components/Button.json
@@ -0,0 +1,91 @@
+{
+  "btn": {
+    "padding": {
+      "y": {
+        "base": { "value": "{input.btn.padding.y.value}", "themeable": true, "source": "$btn-padding-y" },
+        "lg": { "value": "{input.btn.padding.lg.y.value}", "themeable": true, "source": "$btn-padding-y-lg" },
+        "sm": { "value": "{input.btn.padding.sm.y.value}", "themeable": true, "source": "$btn-padding-y-sm" }
+      },
+      "x": {
+        "base": { "value": "{input.btn.padding.x.value}", "themeable": true, "source": "$btn-padding-x" },
+        "lg": { "value": "{input.btn.padding.lg.x.value}", "themeable": true, "source": "$btn-padding-x-lg" },
+        "sm": { "value": "{input.btn.padding.sm.x.value}", "themeable": true, "source": "$btn-padding-x-sm" }
+      }
+    },
+    "font": {
+      "family": { "value": "{input.btn.font.family.value}", "themeable": true, "source": "$btn-font-family" },
+      "size": {
+        "base": { "value": "{input.btn.font.size.base.value}", "themeable": true, "source": "$btn-font-size" },
+        "sm": { "value": "{input.btn.font.size.sm.value}", "themeable": true, "source": "$btn-font-size-sm" },
+        "lg": { "value": "{input.btn.font.size.lg.value}", "themeable": true, "source": "$btn-font-size-lg" }
+      },
+      "weight": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$btn-font-weight" }
+    },
+    "line": {
+      "height": {
+        "base": { "value": "{input.btn.line.height.base.value}", "themeable": true, "source": "$btn-line-height" },
+        "sm": { "value": "{input.btn.line.height.sm.value}", "themeable": true, "source": "$btn-line-height-sm" },
+        "lg": { "value": "{input.btn.line.height.lg.value}", "themeable": true, "source": "$btn-line-height-lg" }
+      }
+    },
+    "border": {
+      "width": { "value": "{input.btn.border.width.value}", "themeable": true, "source": "$btn-border-width" },
+      "radius": {
+        "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$btn-border-radius" },
+        "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$btn-border-radius-lg" },
+        "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$btn-border-radius-sm" }
+      }
+    },
+    "box-shadow": {
+      "base": {
+        "value": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)",
+        "themeable": true,
+        "source": "$btn-box-shadow"
+      },
+      "active": { "value": "none", "themeable": true, "source": "$btn-active-box-shadow" }
+    },
+    "focus": {
+      "width": { "value": "2px", "themeable": true, "source": "$btn-focus-width" },
+      "gap": { "value": "1px", "themeable": true, "source": "$btn-focus-gap" }
+    },
+    "disabled": {
+      "opacity": { "value": ".65", "themeable": true, "source": "$btn-disabled-opacity" },
+      "link": {
+        "color": { "value": "{color.disabled.value}", "themeable": true, "source": "$btn-link-disabled-color" }
+      }
+    },
+    "tertiary": {
+      "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$btn-tertiary-color" },
+      "bg": {
+        "hover": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-hover-bg" },
+        "active": { "value": "{color.light.500.value}", "themeable": true, "source": "$btn-tertiary-active-bg" }
+      },
+      "inverse": {
+        "color": { "value": "{color.white.value}", "themeable": true, "source": "$btn-inverse-tertiary-color" },
+        "bg": {
+          "base": { "value": "transparent", "themeable": true, "source": "$btn-inverse-tertiary-bg" },
+          "hover": {
+            "value": "{color.white.value}",
+            "themeable": true,
+            "source": "$btn-inverse-tertiary-hover-bg",
+            "modify": [{
+              "type": "alpha",
+              "amount": 0.1
+            }]
+          },
+          "active": {
+            "value": "{btn.tertiary.inverse.bg.hover.value}",
+            "themeable": true,
+            "source": "$btn-inverse-tertiary-active-bg"
+          }
+        }
+      }
+    },
+    "block": {
+      "spacing": {
+        "y": { "value": ".5rem", "themeable": true, "source": "$btn-block-spacing-y" }
+      }
+    },
+    "transition": { "value": "null", "themeable": true, "source": "$btn-transition" }
+  }
+}
diff --git a/tokens/source/components/Card.json b/tokens/source/components/Card.json
new file mode 100644
index 00000000000..38b30ff4018
--- /dev/null
+++ b/tokens/source/components/Card.json
@@ -0,0 +1,120 @@
+{
+  "card": {
+    "spacer": {
+      "x": { "value": "1.25rem", "themeable": true, "source": "$card-spacer-x" },
+      "y": { "value": ".75rem", "themeable": true, "source": "$card-spacer-y" }
+    },
+    "border": {
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$card-border-width" },
+      "radius": {
+        "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$card-border-radius" },
+        "image": { "value": ".3125rem", "themeable": true, "source": "$card-image-border-radius" },
+        "logo": { "value": ".25rem", "themeable": true, "source": "$card-logo-border-radius" }
+      },
+      "color": {
+        "base": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$card-border-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.125
+          }]
+        },
+        "focus": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$card-border-focus-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.5
+          }] 
+        }
+      }
+    },
+    "cap": {
+      "bg": { 
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$card-cap-bg",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.03
+        }] 
+      },
+      "color": { "value": "null", "themeable": true, "source": "$card-cap-color" }
+    },
+    "height": {
+      "base": { "value": "null", "themeable": true, "source": "$card-height" }
+    },
+    "color": { "value": "null", "themeable": true, "source": "$card-color" },
+    "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$card-bg" },
+    "image": {
+      "overlay": {
+        "padding": { "value": "1.25rem", "themeable": true, "source": "$card-img-overlay-padding" }
+      },
+      "horizontal": {
+        "width": {
+          "max": { "value": "240px", "themeable": true, "source": "$card-image-horizontal-max-width" },
+          "min": {
+            "value": "{card.image.horizontal.width.max.value}",
+            "themeable": true,
+            "source": "$card-image-horizontal-min-width"
+          }
+        }
+      },
+      "vertical": {
+        "height": {
+          "max": { "value": "140px", "themeable": true, "source": "$card-image-vertical-max-height" }
+        }
+      }
+    },
+    "margin": {
+      "group": { "value": "12px", "themeable": true, "source": "$card-group-margin" },
+      "deck": { "value": "{card.margin.group.value}", "themeable": true, "source": "$card-deck-margin" },
+      "grid": { "value": "{card.margin.group.value}", "themeable": true, "source": "$card-grid-margin" }
+    },
+    "columns": {
+      "count": { "value": "3", "themeable": true, "source": "$card-columns-count" },
+      "gap": { "value": "1.25rem", "themeable": true, "source": "$card-columns-gap" },
+      "margin": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$card-columns-margin" }
+    },
+    "divider": {
+      "bg": { "value": "{color.light.400.value}", "themeable": true, "source": "$card-divider-bg" },
+      "margin": {
+        "y": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$card-divider-margin-y" }
+      }
+    },
+    "footer": {
+      "action": {
+        "gap": { "value": ".5rem", "themeable": true, "source": "$card-footer-actions-gap" }
+      },
+      "text": {
+        "font": {
+          "size": { "value": "{font.size.small.x.value}", "themeable": true, "source": "$card-footer-text-font-size" }
+        }
+      }
+    },
+    "logo": {
+      "left": {
+        "offset": {
+          "base": { "value": "1.5rem", "themeable": true, "source": "$card-logo-left-offset" },
+          "horizontal": { "value": ".4375rem", "themeable": true, "source": "$card-logo-left-offset-horizontal" }
+        }
+      },
+      "bottom": {
+        "offset": {
+          "base": { "value": "1rem", "themeable": true, "source": "$card-logo-bottom-offset" },
+          "horizontal": { "value": ".4375rem", "themeable": true, "source": "$card-logo-bottom-offset-horizontal" }
+        }
+      },
+      "width": { "value": "7.25rem", "themeable": true, "source": "$card-logo-width" },
+      "height": { "value": "4.125rem", "themeable": true, "source": "$card-logo-height" }
+    },
+    "loading": {
+      "skeleton": {
+        "spacer": { "value": ".313rem", "themeable": true, "source": "$loading-skeleton-spacer" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Carousel.json b/tokens/source/components/Carousel.json
new file mode 100644
index 00000000000..edef5e15cf9
--- /dev/null
+++ b/tokens/source/components/Carousel.json
@@ -0,0 +1,36 @@
+{
+  "carousel": {
+    "control": {
+      "width": {
+        "base": { "value": "15%", "themeable": true, "source": "$carousel-control-width" },
+        "icon": { "value": "20px", "themeable": true, "source": "$carousel-control-icon-width" }
+      },
+      "opacity": {
+        "base": { "value": ".5", "themeable": true, "source": "$carousel-control-opacity" },
+        "hover": { "value": ".9", "themeable": true, "source": "$carousel-control-hover-opacity" }
+      },
+      "transition": { "value": "opacity .15s ease", "themeable": true, "source": "$carousel-control-transition" }
+    },
+    "indicator": {
+      "width": { "value": "30px", "themeable": true, "source": "$carousel-indicator-width" },
+      "height": {
+        "base": { "value": "3px", "themeable": true, "source": "$carousel-indicator-height" },
+        "area": {
+          "hit": { "value": "3px", "themeable": true, "source": "$carousel-indicator-hit-area-height" }
+        }
+      },
+      "spacer": { "value": "3px", "themeable": true, "source": "$carousel-indicator-spacer" },
+      "active": {
+        "bg": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-indicator-active-bg" }
+      },
+      "transition": { "value": "opacity .6s ease", "themeable": true, "source": "$carousel-indicator-transition" }
+    },
+    "caption": {
+      "width": { "value": "70%", "themeable": true, "source": "$carousel-caption-width" },
+      "color": { "value": "{color.white.value}", "themeable": true, "source": "$carousel-caption-color" }
+    },
+    "transition": {
+      "duration": { "value": ".6s", "themeable": true, "source": "$carousel-transition-duration" }
+    }
+  }
+}
diff --git a/tokens/source/components/Chip.json b/tokens/source/components/Chip.json
new file mode 100644
index 00000000000..fe09b0ddee1
--- /dev/null
+++ b/tokens/source/components/Chip.json
@@ -0,0 +1,43 @@
+{
+  "chip": {
+    "padding": {
+      "y": { "value": ".125rem", "themeable": true, "source": "$chip-padding-y" },
+      "x": { "value": ".5rem", "themeable": true, "source": "$chip-padding-x" },
+      "icon": { 
+        "base": {
+          "value": ".25rem", "themeable": true, "source": "$chip-icon-padding" 
+        },
+        "to": {
+          "value": "3px", "themeable": true, "source": "$chip-padding-to-icon"
+        }
+      }
+    },
+    "margin": {
+      "base": { "value": ".125rem", "themeable": true, "source": "$chip-margin" },
+      "inline": { "value": ".5rem", "themeable": true, "source": "$chip-margin-inline" }
+    },
+    "border": {
+      "radius": {
+        "base": { "value": ".4375rem", "themeable": true, "source": "$chip-border-radius" },
+        "focus": { "value": ".5rem", "themeable": true, "source": "$chip-focus-border-radius" }
+      },
+      "width": { "value": ".0625rem", "themeable": true, "source": "$chip-border-width" }
+    },
+    "position": {
+      "axis": { "value": ".125rem", "themeable": true, "source": "$chip-position-axis" }
+    },
+    "font": {
+      "size": { "value": ".75rem", "themeable": true, "source": "$chip-font-size" },
+      "weight": { "value": "400", "themeable": true, "source": "$chip-font-weight" }
+    },
+    "line": {
+      "height": { "value": "1.5rem", "themeable": true, "source": "$chip-line-height" }
+    },
+    "disabled": {
+      "opacity": { "value": ".3", "themeable": true, "source": "$chip-disable-opacity" }
+    },
+    "icon": {
+      "size": { "value": "1.25rem", "themeable": true, "source": "$chip-icon-size" }
+    }
+  }
+}
diff --git a/tokens/source/components/CloseButton.json b/tokens/source/components/CloseButton.json
new file mode 100644
index 00000000000..099798c5b57
--- /dev/null
+++ b/tokens/source/components/CloseButton.json
@@ -0,0 +1,12 @@
+{
+    "close-button": {
+        "font": {
+            "size": { "value": "calc({font.size.base.value} * 1.5)", "themeable": true, "source": "$close-font-size" },
+            "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$close-font-weight" }
+        },
+        "color": { "value": "{color.black.value}", "themeable": true, "source": "$close-color" },
+        "text": {
+            "shadow": { "value": "0 1px 0 {color.white.value}", "themeable": true, "source": "$close-text-shadow" }
+        }
+    }
+}
diff --git a/tokens/source/components/Code.json b/tokens/source/components/Code.json
new file mode 100644
index 00000000000..22dc2214f54
--- /dev/null
+++ b/tokens/source/components/Code.json
@@ -0,0 +1,37 @@
+{
+  "code": {
+    "font": {
+      "size": { "value": "87.5%", "themeable": true, "source": "$code-font-size" }
+    },
+    "color": { "value": "#E83E8C", "themeable": true, "source": "$code-color" },
+    "kbd": {
+      "font": {
+        "size": { "value": "{code.font.size.value}", "themeable": true, "source": "$kbd-font-size" }
+      },
+      "box-shadow": {
+        "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)",
+        "themeable": true,
+        "source": "$kbd-box-shadow"
+      },
+      "nested": {
+        "font": {
+          "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$nested-kbd-font-weight" }
+        }
+      },
+      "padding": {
+        "y": { "value": ".2rem", "themeable": true, "source": "$kbd-padding-y" },
+        "x": { "value": ".4rem", "themeable": true, "source": "$kbd-padding-x" }
+      },
+      "color": { "value": "{color.white.value}", "themeable": true, "source": "$kbd-color" },
+      "bg": { "value": "{color.gray.700.value}", "themeable": true, "source": "$kbd-bg" }
+    },
+    "pre": {
+      "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$pre-color" },
+      "scrollable": {
+        "max": {
+          "height": { "value": "340px", "themeable": true, "source": "$pre-scrollable-max-height" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Collapsible.json b/tokens/source/components/Collapsible.json
new file mode 100644
index 00000000000..e90dae816a4
--- /dev/null
+++ b/tokens/source/components/Collapsible.json
@@ -0,0 +1,25 @@
+{
+  "collapsible": {
+    "card": {
+      "spacer": {
+        "y": {
+          "base": { "value": ".5rem", "themeable": true, "source": "$collapsible-card-spacer-y" },
+          "lg": { "value": "{card.spacer.y.value}", "themeable": true, "source": "$collapsible-card-spacer-y-lg" }
+        },
+        "x": {
+          "base": { "value": ".5rem", "themeable": true, "source": "$collapsible-card-spacer-x" },
+          "lg": { "value": "{card.spacer.x.value}", "themeable": true, "source": "$collapsible-card-spacer-x-lg" }
+        },
+        "left": {
+          "body": { "value": ".75rem", "themeable": true, "source": "$collapsible-card-body-spacer-left" }
+        },
+        "icon": { "value": "2.5rem", "themeable": true, "source": "$collapsible-card-spacer-icon" },
+        "basic": {
+          "y": { "value": ".5rem", "themeable": true, "source": "$collapsible-basic-spacer-y" },
+          "x": { "value": ".5rem", "themeable": true, "source": "$collapsible-basic-spacer-x" },
+          "icon": { "value": ".625rem", "themeable": true, "source": "$collapsible-basic-spacer-icon" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Container.json b/tokens/source/components/Container.json
new file mode 100644
index 00000000000..f116e5aefa4
--- /dev/null
+++ b/tokens/source/components/Container.json
@@ -0,0 +1,13 @@
+{
+  "container": {
+    "max": {
+      "width": {
+        "xs": { "value": "464px", "themeable": true, "source": "$max-width-xs" },
+        "sm": { "value": "708px", "themeable": true, "source": "$max-width-sm" },
+        "md": { "value": "952px", "themeable": true, "source": "$max-width-md" },
+        "lg": { "value": "1192px", "themeable": true, "source": "$max-width-lg" },
+        "xl": { "value": "1440px", "themeable": true, "source": "$max-width-xl" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/DataTable.json b/tokens/source/components/DataTable.json
new file mode 100644
index 00000000000..276798d6f9a
--- /dev/null
+++ b/tokens/source/components/DataTable.json
@@ -0,0 +1,80 @@
+{
+  "data-table": {
+    "background": {
+      "color": { "value": "{color.background.base.value}", "themeable": true, "source": "$data-table-background-color" },
+      "is-loading": {
+        "value": "{color.white.value}",
+        "themeable": true,
+        "source": "$data-table-is-loading-bg",
+        "modify": [
+          {
+            "type": "alpha",
+            "amount": 0.7
+          }
+        ]
+      }
+    },
+    "border": {
+      "value": "1px solid {color.gray.200.value}",
+      "themeable": true,
+      "source": "$data-table-border"
+    },
+    "box-shadow": {
+      "value": "{box-shadow.sm.value}",
+      "themeable": true,
+      "source": "$data-table-box-shadow"
+    },
+    "padding": {
+      "x": {
+        "value": ".75rem",
+        "themeable": true,
+        "source": "$data-table-padding-x"
+      },
+      "y": {
+        "value": ".75rem",
+        "themeable": true,
+        "source": "$data-table-padding-y"
+      },
+      "small": {
+        "value": ".5rem",
+        "themeable": true,
+        "source": "$data-table-padding-small"
+      },
+      "cell": {
+        "value": ".75rem",
+        "themeable": true,
+        "source": "$data-table-cell-padding"
+      },
+      "head-cell": {
+        "value": ".5rem .75rem",
+        "themeable": true,
+        "source": "$data-table-head-cell-padding"
+      }
+    },
+    "footer": {
+      "position": {
+        "value": "center",
+        "themeable": true,
+        "source": "$data-table-footer-position"
+      }
+    },
+    "pagination": {
+      "dropdown": {
+        "max": {
+          "height": {
+            "value": "60vh",
+            "themeable": true,
+            "source": "$data-table-pagination-dropdown-max-height"
+          }
+        },
+        "min": {
+          "width": {
+            "value": "6rem",
+            "themeable": true,
+            "source": "$data-table-pagination-dropdown-min-width"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Dropdown.json b/tokens/source/components/Dropdown.json
new file mode 100644
index 00000000000..2743b329065
--- /dev/null
+++ b/tokens/source/components/Dropdown.json
@@ -0,0 +1,73 @@
+{
+  "dropdown": {
+    "min": {
+      "width": { "value": "18rem", "themeable": true, "source": "$dropdown-min-width" }
+    },
+    "padding": {
+      "x": {
+        "base": { "value": "0", "themeable": true, "source": "$dropdown-padding-x" },
+        "item": { "value": "1rem", "themeable": true, "source": "$dropdown-item-padding-x" }
+      },
+      "y": {
+        "base": { "value": ".25rem", "themeable": true, "source": "$dropdown-padding-y" },
+        "item": { "value": ".5rem", "themeable": true, "source": "$dropdown-item-padding-y" }
+      },
+      "header": {
+        "value": "{dropdown.padding.y.base.value} {dropdown.padding.x.item.value}",
+        "themeable": true,
+        "source": "$dropdown-header-padding"
+      }
+    },
+    "spacer": { "value": ".125rem", "themeable": true, "source": "$dropdown-spacer" },
+    "font": {
+      "size": { "value": "{font.size.base.value}", "themeable": true, "source": "$dropdown-font-size" }
+    },
+    "color": {
+      "base": { "value": "{body.color.value}", "themeable": true, "source": "$dropdown-color" },
+      "header": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropdown-header-color" }
+    },
+    "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$dropdown-bg" },
+    "border": {
+      "color": { 
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$dropdown-border-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.15
+        }]
+      },
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$dropdown-border-width" },
+      "radius": {
+        "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$dropdown-border-radius" },
+        "inner": {
+          "value": "calc({dropdown.border.radius.base.value} - {dropdown.border.width.value})",
+          "themeable": true,
+          "source": "$dropdown-inner-border-radius"
+        }
+      }
+    },
+    "divider": {
+      "bg": { "value": "{color.gray.100.value}", "themeable": true, "source": "$dropdown-divider-bg" },
+      "margin": {
+        "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$dropdown-divider-margin-y" }
+      }
+    },
+    "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "themeable": true, "source": "$dropdown-box-shadow" },
+    "link": {
+      "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$dropdown-link-color" },
+      "hover": {
+        "color": { "value": "{color.gray.900.value}", "themeable": true, "source": "$dropdown-link-hover-color" },
+        "bg": { "value": "{color.light.300.value}", "themeable": true, "source": "$dropdown-link-hover-bg" }
+      },
+      "active": {
+        "color": { "value": "{color.active.value}", "themeable": true, "source": "$dropdown-link-active-color" },
+        "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$dropdown-link-active-bg" }
+      },
+      "disabled": {
+        "color": { "value": "{color.disabled.value}", "themeable": true, "source": "$dropdown-link-disabled-color" }
+      }
+    },
+    "zindex": { "value": "1000", "themeable": true, "source": "$zindex-dropdown" }
+  }
+}
diff --git a/tokens/source/components/Dropzone.json b/tokens/source/components/Dropzone.json
new file mode 100644
index 00000000000..6089e2eb66a
--- /dev/null
+++ b/tokens/source/components/Dropzone.json
@@ -0,0 +1,25 @@
+{
+  "dropzone": {
+    "padding": { "value": "1.5rem", "themeable": true, "source": "$dropzone-padding" },
+    "border": {
+      "default": { "value": "1px dashed {color.gray.500.value}", "themeable": true, "source": "$dropzone-border-default" },
+      "hover": { "value": "2px solid {color.info.300.value}", "themeable": true, "source": "$dropzone-border-hover" },
+      "focus": { "value": "2px solid {color.info.300.value}", "themeable": true, "source": "$dropzone-border-focus" },
+      "active": { "value": "2px solid {color.primary.500.value}", "themeable": true, "source": "$dropzone-border-active" },
+      "error": { "value": "2px solid {color.danger.300.value}", "themeable": true, "source": "$dropzone-border-error" }
+    },
+    "error": {
+      "wrapper": {
+        "color": { "value": "{color.danger.500.value}", "themeable": true, "source": "$dropzone-error-wrapper-color" }
+      }
+    },
+    "restriction": {
+      "msg": {
+        "font": {
+          "size": { "value": "{font.size.small.x.value}", "themeable": true, "source": "$dropzone-restriction-msg-font-size" }
+        },
+        "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$dropzone-restriction-msg-color" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Form.json b/tokens/source/components/Form.json
new file mode 100644
index 00000000000..1859be51de5
--- /dev/null
+++ b/tokens/source/components/Form.json
@@ -0,0 +1,723 @@
+{
+  "form": {
+    "input": {
+      "padding": {
+        "y": {
+          "base": { "value": "{input.btn.padding.y.value}", "themeable": true, "source": "$input-padding-y" },
+          "sm": { "value": "{input.btn.padding.sm.y.value}", "themeable": true, "source": "$input-padding-y-sm" },
+          "lg": { "value": "{input.btn.padding.lg.y.value}", "themeable": true, "source": "$input-padding-y-lg" }
+        },
+        "x": {
+          "base": { "value": "{input.btn.padding.x.value}", "themeable": true, "source": "$input-padding-x" },
+          "sm": { "value": "{input.btn.padding.sm.x.value}", "themeable": true, "source": "$input-padding-x-sm" },
+          "lg": { "value": "{input.btn.padding.lg.x.value}", "themeable": true, "source": "$input-padding-x-lg" }
+        }
+      },
+      "font": {
+        "family": { "value": "{input.btn.font.family.value}", "themeable": true, "source": "$input-font-family" },
+        "size": {
+          "base": { "value": "{input.btn.font.size.base.value}", "themeable": true, "source": "$input-font-size" },
+          "sm": { "value": "{input.btn.font.size.sm.value}", "themeable": true, "source": "$input-font-size-sm" },
+          "lg": { "value": "{input.btn.font.size.lg.value}", "themeable": true, "source": "$input-font-size-lg" }
+        },
+        "weight": { "value": "{font.weight.base.value}", "themeable": true, "source": "$input-font-weight" }
+      },
+      "line": {
+        "height": {
+          "base": { "value": "{input.btn.line.height.base.value}", "themeable": true, "source": "$input-line-height" },
+          "sm": { "value": "{input.btn.line.height.sm.value}", "themeable": true, "source": "$input-line-height-sm" },
+          "lg": { "value": "{input.btn.line.height.lg.value}", "themeable": true, "source": "$input-line-height-lg" }
+        }
+      },
+      "bg": {
+        "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$input-bg" },
+        "disabled": { "value": "{color.gray.100.value}", "themeable": true, "source": "$input-disabled-bg" }
+      },
+      "color": {
+        "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$input-color" },
+        "placeholder": { "value": "{color.gray.500.value}", "themeable": true, "source": "$input-placeholder-color" },
+        "plaintext": { "value": "{body.color.value}", "themeable": true, "source": "$input-placeholder-color" }
+      },
+      "border": {
+        "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$input-border-color" },
+        "width": { "value": "{input.btn.border.width.value}", "themeable": true, "source": "$input-border-width" },
+        "height": {
+          "value": "calc({form.input.border.width.value} * 2)",
+          "themeable": true,
+          "source": "$input-height-border"
+        },
+        "radius": {
+          "base": { "value": "{border.radius.base.value}", "themeable": true, "source": "$input-border-radius" },
+          "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$input-border-radius-lg" },
+          "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$input-border-radius-sm" }
+        }
+      },
+      "box-shadow": {
+          "base": { "value": "inset 0 1px 1px rgba(0, 0, 0, .075)", "themeable": true, "source": "$input-box-shadow" },
+          "focus": {
+            "value": "{input.btn.focus.box-shadow.value}",
+            "themeable": true,
+            "source": "$input-focus-box-shadow"
+          }
+      },
+      "focus": {
+        "bg": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$input-focus-bg" },
+        "color": {
+          "base": { "value": "{form.input.color.base.value}", "themeable": true, "source": "$input-focus-color" },
+          "border": { "value": "{color.input.focus.value}", "themeable": true, "source": "$input-focus-border-color" }
+        },
+        "width": { "value": "1px", "themeable": true, "source": "$input-focus-width" }
+      },
+      "height": {
+        "base": {
+          "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2 + {form.input.border.height.value})",
+          "themeable": true,
+          "source": "$input-height"
+        },
+        "sm": {
+          "value": "calc({form.input.line.height.sm.value} * 1em + {input.btn.padding.sm.y.value} * 2 + {form.input.border.height.value})",
+          "themeable": true,
+          "source": "$input-height-sm"
+        },
+        "lg": {
+          "value": "calc({form.input.line.height.lg.value} * 1em + {input.btn.padding.lg.y.value} * 2 + {form.input.border.height.value})",
+          "themeable": true,
+          "source": "$input-height-lg"
+        },
+        "inner": {
+          "base": {
+            "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2)",
+            "themeable": true,
+            "source": "$input-height-inner"
+          },
+          "half": {
+            "value": "calc({form.input.line.height.base.value} * .5em + {form.input.padding.y.base.value})",
+            "themeable": true,
+            "source": "$input-height-inner-half"
+          },
+          "quarter": {
+            "value": "calc({form.input.line.height.base.value} * .25em + calc({form.input.padding.y.base.value} / 2))",
+            "themeable": true,
+            "source": "$input-height-inner-quarter"
+          }
+        }
+      },
+      "width": {
+        "hover": { "value": "1px", "themeable": true, "source": "$input-hover-width" }
+      },
+      "transition": {
+        "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
+        "themeable": true,
+        "source": "$input-transition"
+      },
+      "check": {
+        "margin": {
+          "x": {
+            "base": { "value": ".25rem", "themeable": true, "source": "$form-check-input-margin-x" },
+            "inline": { "value": ".3125rem", "themeable": true, "source": "$form-check-inline-input-margin-x" }
+          },
+          "y": { "value": ".3rem", "themeable": true, "source": "$form-check-input-margin-y" }
+        }
+      },
+      "group": {
+        "addon": {
+          "color": {
+            "base": { "value": "{form.input.color.base.value}", "themeable": true, "source": "$input-group-addon-color" },
+            "border": {
+              "value": "{form.input.border.color.value}",
+              "themeable": true,
+              "source": "$input-group-addon-border-color"
+            }
+          },
+          "bg": { "value": "{color.gray.100.value}", "themeable": true, "source": "$input-group-addon-bg" }
+        }
+      }
+    },
+    "text": {
+      "margin": {
+        "top": { "value": ".25rem", "themeable": true, "source": "$form-text-margin-top" }
+      }
+    },
+    "check": {
+      "inline": {
+        "margin": {
+          "x": { "value": ".75rem", "themeable": true, "source": "$form-check-inline-margin-x" }
+        }
+      },
+      "position": {
+        "axis": { "value": ".375rem", "themeable": true, "source": "$form-check-position-axis" }
+      },
+      "border": {
+        "radius": {
+          "focus": { "value": ".0625rem", "themeable": true, "source": "$form-check-focus-border-radius" }
+        },
+        "width": { "value": ".125rem", "themeable": true, "source": "$form-check-border-width" }
+      }
+    },
+    "group": {
+      "margin": {
+        "bottom": { "value": "1rem", "themeable": true, "source": "$form-group-margin-bottom" }
+      }
+    },
+    "custom": {
+      "transition": {
+        "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out",
+        "themeable": true,
+        "source": "$custom-forms-transition"
+      },
+      "control": {
+        "gutter": { "value": ".5rem", "themeable": true, "source": "$custom-control-gutter" },
+        "spacer": {
+          "x": { "value": "1rem", "themeable": true, "source": "$custom-control-spacer-x" }
+        },
+        "cursor": { "value": "null", "themeable": true, "source": "$custom-control-cursor" },
+        "indicator": {
+          "size": { "value": "1.25rem", "themeable": true, "source": "$custom-control-indicator-size" },
+          "bg": {
+            "base": { "value": "{form.input.bg.base.value}", "themeable": true, "source": "$custom-control-indicator-bg" },
+            "size": { "value": "100%", "themeable": true, "source": "$custom-control-indicator-bg-size" }
+          },
+          "box-shadow": {
+              "value": "{form.input.box-shadow.base.value}",
+              "themeable": true,
+              "source": "$custom-control-indicator-box-shadow"
+          },
+          "border": {
+            "color": {
+              "value": "{color.gray.700.value}",
+              "themeable": true,
+              "source": "$custom-control-indicator-border-color"
+            },
+            "width": { "value": "2px", "themeable": true, "source": "$custom-control-indicator-border-width" }
+          },
+          "disabled": {
+            "bg": {
+              "value": "{form.input.bg.disabled.value}",
+              "themeable": true,
+              "source": "$custom-control-indicator-disabled-bg"
+            }
+          },
+          "checked": {
+            "bg": {
+              "disabled": {
+                "value": "{color.primary.500.value}",
+                "themeable": true,
+                "source": "$custom-control-indicator-checked-disabled-bg",
+                "modify": [{
+                  "type": "alpha",
+                  "amount": 0.5
+                }]
+              }
+            },
+            "box-shadow": {
+              "base": { "value": "none", "themeable": true, "source": "$custom-control-indicator-checked-box-shadow" },
+              "focus": {
+                "value": "0 0 0 4px rgba(0, 0, 0, .1)",
+                "themeable": true,
+                "source": "$custom-control-indicator-focus-box-shadow"
+              }
+            },
+            "border": {
+              "color": {
+                "base": {
+                  "value": "{color.primary.500.value}",
+                  "themeable": true,
+                  "source": "$custom-control-indicator-checked-border-color"
+                },
+                "focus": {
+                  "value": "{form.input.focus.color.border.value}",
+                  "themeable": true,
+                  "source": "$custom-control-indicator-focus-border-color"
+                }
+              }
+            }
+          },
+          "active": {
+            "box-shadow": {"value": "none", "themeable": true, "source": "$custom-control-indicator-active-box-shadow" },
+            "bg": { "value": "#0A3055", "themeable": true, "source": "$custom-control-indicator-active-bg" }
+          }
+        },
+        "label": {
+          "color": {
+            "base": { "value": "null", "themeable": true, "source": "$custom-control-label-color" },
+            "disabled": {
+              "value": "{color.disabled.value}",
+              "themeable": true,
+              "source": "$custom-control-label-disabled-color"
+            }
+          },
+          "floating": {
+            "text": { 
+              "value": "{form.input.bg.base.value}", 
+              "themeable": true, 
+              "source": "$form-control-floating-label-text-bg",
+              "modify": [{
+                "type": "alpha",
+                "amount": 0.1
+              }]
+            }
+          }
+        }
+      },
+      "checkbox": {
+        "indicator": {
+          "border": {
+            "radius": { "value": "0", "themeable": true, "source": "$custom-checkbox-indicator-border-radius" }
+          },
+          "indeterminate": {
+            "bg": {
+              "value": "{color.background.active.value}",
+              "themeable": true,
+              "source": "$custom-checkbox-indicator-indeterminate-bg"
+            },
+            "box-shadow": {
+              "value": "none",
+              "themeable": true,
+              "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
+            },
+            "border": {
+              "color": {
+                "value": "{form.custom.checkbox.indicator.indeterminate.bg.value}",
+                "themeable": true,
+                "source": "$custom-checkbox-indicator-indeterminate-border-color"
+              }
+            }
+          }
+        }
+      },
+      "radio": {
+        "indicator": {
+          "border": {
+            "radius": {
+              "value": "50%",
+              "themeable": true,
+              "source": "$custom-radio-indicator-border-radius"
+            }
+          }
+        }
+      },
+      "switch": {
+        "width": {
+          "value": "calc({form.custom.control.indicator.size.value} * 1.75)",
+          "themeable": true,
+          "source": "$custom-switch-width"
+        },
+        "indicator": {
+          "border": {
+            "radius": {
+              "value": "calc({form.custom.control.indicator.size.value} / 2)",
+              "themeable": true,
+              "source": "$custom-switch-indicator-border-radius"
+            }
+          },
+          "size": {
+            "value": "calc({form.custom.control.indicator.size.value} - {form.custom.control.indicator.border.width.value} * 4)",
+            "themeable": true,
+            "source": "$custom-switch-indicator-size"
+          }
+        }
+      },
+      "select": {
+        "padding": {
+          "y": {
+            "base": { "value": "{form.input.padding.y.base.value}", "themeable": true, "source": "$custom-select-padding-y" },
+            "sm": { "value": "{form.input.padding.y.sm.value}", "themeable": true, "source": "$custom-select-padding-y-sm" },
+            "lg": { "value": "{form.input.padding.y.lg.value}", "themeable": true, "source": "$custom-select-padding-y-lg" }
+          },
+          "x": {
+            "base": {
+              "value": "{form.input.padding.x.base.value}",
+              "themeable": true,
+              "source": "$custom-select-padding-x"
+            },
+            "sm": {
+              "value": "{form.input.padding.x.sm.value}",
+              "themeable": true,
+              "source": "$custom-select-padding-x-sm"
+            },
+            "lg": {
+              "value": "{form.input.padding.x.lg.value}",
+              "themeable": true,
+              "source": "$custom-select-padding-x-lg"
+            }
+          }
+        },
+        "font": {
+          "family": {
+            "value": "{form.input.font.family.value}",
+            "themeable": true,
+            "source": "$custom-select-font-family"
+          },
+          "size": {
+            "base": {
+              "value": "{form.input.font.size.base.value}",
+              "themeable": true,
+              "source": "$custom-select-font-size"
+            },
+            "sm": {
+              "value": "{form.input.font.size.sm.value}",
+              "themeable": true,
+              "source": "$custom-select-font-size-sm"
+            },
+            "lg": {
+              "value": "{form.input.font.size.lg.value}",
+              "themeable": true,
+              "source": "$custom-select-font-size-lg"
+            }
+          },
+          "height": {
+            "base": {
+              "value": "{form.input.height.base.value}",
+              "themeable": true,
+              "source": "$custom-select-height"
+            },
+            "lg": {
+              "value": "{form.input.height.lg.value}",
+              "themeable": true,
+              "source": "$custom-select-height-lg"
+            }
+          },
+          "weight": {
+            "value": "{form.input.font.weight.value}",
+            "themeable": true,
+            "source": "$custom-select-font-weight"
+          }
+        },
+        "line": {
+          "height": {
+            "value": "{form.input.line.height.base.value}",
+            "themeable": true,
+            "source": "$custom-select-line-height"
+          }
+        },
+        "indicator": {
+          "padding": { "value": "1rem", "themeable": true, "source": "$custom-select-indicator-padding" }
+        },
+        "color": {
+          "base": {
+            "value": "{form.input.color.base.value}",
+            "themeable": true,
+            "source": "$custom-select-color"
+          },
+          "disabled": {
+            "value": "{color.disabled.value}",
+            "themeable": true,
+            "source": "$custom-select-disabled-color"
+          }
+        },
+        "bg": {
+          "base": {
+            "value": "{form.input.bg.base.value}",
+            "themeable": true,
+            "source": "$custom-select-bg"
+          },
+          "disabled": {
+            "value": "{color.gray.100.value}",
+            "themeable": true,
+            "source": "$custom-select-disabled-bg"
+          },
+          "size": { "value": "24px 24px", "themeable": true, "source": "$custom-select-bg-size" }
+        },
+        "feedback": {
+          "icon": {
+            "padding": {
+              "right": {
+                "value": "calc((1em + 2 * {form.custom.select.padding.y.base.value}) * 3 / 4 + {form.custom.select.padding.x.base.value} + {form.custom.select.indicator.padding.value})",
+                "themeable": true,
+                "source": "$custom-select-feedback-icon-padding-right"
+              }
+            },
+            "position": {
+              "value": "center right calc({form.custom.select.padding.x.base.value} + {form.custom.select.indicator.padding.value})",
+              "themeable": true,
+              "source": "$custom-select-feedback-icon-position"
+            },
+            "size": {
+              "value": "{form.input.height.inner.half.value} {form.input.height.inner.half.value}",
+              "themeable": true,
+              "source": "$custom-select-feedback-icon-size"
+            }
+          }
+        },
+        "border": {
+          "width": {
+            "base": {
+              "value": "{form.input.border.width.value}",
+              "themeable": true,
+              "source": "$custom-select-border-width"
+            },
+            "focus": {
+              "value": "{form.input.focus.width.value}",
+              "themeable": true,
+              "source": "$custom-select-focus-width"
+            }
+          },
+          "color": {
+            "base": {
+              "value": "{form.input.border.color.value}",
+              "themeable": true,
+              "source": "$custom-select-border-color"
+            },
+            "focus": {
+              "value": "{form.input.focus.color.border.value}",
+              "themeable": true,
+              "source": "$custom-select-focus-border-color"
+            }
+          },
+          "radius": {
+            "value": "{border.radius.base.value}",
+            "themeable": true,
+            "source": "$custom-select-border-radius"
+          },
+          "box-shadow": {
+            "base": {
+              "value": "inset 0 1px 2px rgba(0, 0, 0, .075)",
+              "themeable": true,
+              "source": "$custom-select-box-shadow"
+            },
+            "focus": {
+              "value": "{input.btn.focus.box-shadow.value}",
+              "themeable": true,
+              "source": "$custom-select-focus-box-shadow"
+            }
+          }
+        },
+        "height": {
+          "sm": {
+            "value": "{form.input.height.sm.value}",
+            "themeable": true,
+            "source": "$custom-select-height-sm"
+          }
+        }
+      },
+      "range": {
+        "track": {
+          "width": { "value": "100%", "themeable": true, "source": "$custom-range-track-width" },
+          "height": { "value": ".5rem", "themeable": true, "source": "$custom-range-track-height" },
+          "cursor": { "value": "pointer", "themeable": true, "source": "$custom-range-track-cursor" },
+          "bg": { "value": "{color.gray.300.value}", "themeable": true, "source": "$custom-range-track-bg" },
+          "border": {
+            "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-track-border-radius" }
+          },
+          "box-shadow": {
+            "value": "inset 0 .25rem .25rem rgba(0, 0, 0, .1)",
+            "themeable": true,
+            "source": "$custom-range-track-box-shadow"
+          }
+        },
+        "thumb": {
+          "width": { "value": "1rem", "themeable": true, "source": "$custom-range-thumb-width" },
+          "height": {
+            "value": "{form.custom.range.thumb.width.value}",
+            "themeable": true,
+            "source": "$custom-range-thumb-height"
+          },
+          "bg": {
+            "base": {
+              "value": "{color.background.active.value}",
+              "themeable": true,
+              "source": "$custom-range-thumb-bg"
+            },
+            "disabled": {
+              "value": "{color.disabled.value}",
+              "themeable": true,
+              "source": "$custom-range-thumb-disabled-bg"
+            },
+            "active": {
+              "value": "{color.background.active.value}",
+              "themeable": true,
+              "source": "$custom-range-thumb-active-bg",
+              "modify": [{
+                "type": "brighten",
+                "amount": "0.35"
+              }]
+            }
+          },
+          "border": {
+            "base": { "value": "0", "themeable": true, "source": "$custom-range-thumb-border" },
+            "radius": { "value": "1rem", "themeable": true, "source": "$custom-range-thumb-border-radius" }
+          },
+          "box-shadow": {
+            "base": {
+              "value": "0 .1rem .25rem rgba(0, 0, 0, .1)",
+              "themeable": true,
+              "source": "$custom-range-thumb-box-shadow"
+            },
+            "focus": {
+              "base": {
+                "value": "0 0 0 1px {body.bg.value}, {form.input.box-shadow.focus.value}",
+                "themeable": true,
+                "source": "$custom-range-thumb-focus-box-shadow"
+              },
+              "width": {
+                "value": "{form.input.focus.width.value}",
+                "themeable": true,
+                "source": "$custom-range-thumb-focus-box-shadow-width"
+              }
+            }
+          }
+        }
+      },
+      "file": {
+        "height": {
+          "base": {
+            "value": "{form.input.height.base.value}",
+            "themeable": true,
+            "source": "$custom-file-height"
+          },
+          "inner": {
+            "value": "{form.input.height.inner.base.value}",
+            "themeable": true,
+            "source": "$custom-file-height-inner"
+          }
+        },
+        "border": {
+          "color": {
+            "base": {
+              "value": "{form.input.border.color.value}",
+              "themeable": true,
+              "source": "$custom-file-border-color"
+            },
+            "focus": {
+              "value": "{form.input.focus.color.border.value}",
+              "themeable": true,
+              "source": "$custom-file-focus-border-color"
+            },
+            "radius": {
+              "value": "{form.input.border.radius.base.value}",
+              "themeable": true,
+              "source": "$custom-file-border-radius"
+            }
+          },
+          "width": {
+            "value": "{form.input.border.width.value}",
+            "themeable": true,
+            "source": "$custom-file-border-width"
+          }
+        },
+        "box-shadow": {
+          "base": {
+            "value": "{form.input.box-shadow.base.value}",
+            "themeable": true,
+            "source": "$custom-file-box-shadow"
+          },
+          "focus": {
+            "value": "{form.input.box-shadow.focus.value}",
+            "themeable": true,
+            "source": "$custom-file-focus-box-shadow"
+          }
+        },
+        "bg": {
+          "base": {
+            "value": "{form.input.bg.base.value}",
+            "themeable": true,
+            "source": "$custom-file-bg"
+          },
+          "disabled": {
+            "value": "{form.input.bg.disabled.value}",
+            "themeable": true,
+            "source": "$custom-file-disabled-bg"
+          }
+        },
+        "padding": {
+          "y": {
+            "value": "{form.input.padding.y.base.value}",
+            "themeable": true,
+            "source": "$custom-file-padding-y"
+          },
+          "x": {
+            "value": "{form.input.padding.x.base.value}",
+            "themeable": true,
+            "source": "$custom-file-padding-x"
+          }
+        },
+        "line": {
+          "height": {
+            "value": "{form.input.line.height.base.value}",
+            "themeable": true,
+            "source": "$custom-file-line-height"
+          }
+        },
+        "font": {
+          "family": {
+            "value": "{form.input.font.family.value}",
+            "themeable": true,
+            "source": "$custom-file-font-family"
+          },
+          "weight": {
+            "value": "{form.input.font.weight.value}",
+            "themeable": true,
+            "source": "$custom-file-font-weight"
+          }
+        },
+        "color": {
+          "value": "{form.input.color.base.value}",
+          "themeable": true,
+          "source": "$custom-file-color"
+        },
+        "button": {
+          "color": {
+            "value": "{form.custom.file.color.value}",
+            "themeable": true,
+            "source": "$custom-file-button-color"
+          },
+          "bg": {
+            "value": "{form.input.group.addon.bg.value}",
+            "themeable": true,
+            "source": "$custom-file-button-bg"
+          }
+        }
+      }
+    },
+    "feedback": {
+      "margin": {
+        "top": {
+          "value": "{form.text.margin.top.value}",
+          "themeable": true,
+          "source": "$form-feedback-margin-top"
+        }
+      },
+      "font": {
+        "size": {
+          "value": "{font.size.small.base.value}",
+          "themeable": true,
+          "source": "$form-feedback-font-size"
+        }
+      },
+      "tooltip": {
+        "padding": {
+          "y": { "value": ".25rem", "themeable": true, "source": "$form-feedback-tooltip-padding-y" },
+          "x": { "value": ".5rem", "themeable": true, "source": "$form-feedback-tooltip-padding-x" }
+        },
+        "font": {
+          "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$form-feedback-tooltip-font-size" }
+        },
+        "line": {
+          "height": {
+            "value": "{line-height.base.value}",
+            "themeable": true,
+            "source": "$form-feedback-tooltip-line-height"
+          }
+        },
+        "opacity": { "value": ".9", "themeable": true, "source": "$form-feedback-tooltip-opacity" },
+        "border": {
+          "radius": {
+            "value": "{border.radius.base.value}",
+            "themeable": true,
+            "source": "$form-feedback-tooltip-border-radius"
+          }
+        }
+      }
+    },
+    "control": {
+      "icon": {
+        "width": { "value": "32px", "themeable": true, "source": "$form-control-icon-width" }
+      }
+    },
+    "select": {
+      "icon": {
+        "padding": { "value": ".5625rem", "themeable": true, "source": "$select-icon-padding" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Icon.json b/tokens/source/components/Icon.json
new file mode 100644
index 00000000000..9ddbc88dd18
--- /dev/null
+++ b/tokens/source/components/Icon.json
@@ -0,0 +1,8 @@
+{
+  "icon": {
+    "inline": { "value": ".8em", "themeable": true, "source": "$icon-inline" },
+    "sm": { "value": "1.25rem", "themeable": true, "source": "$icon-sm" },
+    "md": { "value": "1.5rem", "themeable": true, "source": "$icon-md" },
+    "lg": { "value": "1.75rem", "themeable": true, "source": "$icon-lg" }
+  }
+}
diff --git a/tokens/source/components/IconButton.json b/tokens/source/components/IconButton.json
new file mode 100644
index 00000000000..771e506d8bc
--- /dev/null
+++ b/tokens/source/components/IconButton.json
@@ -0,0 +1,17 @@
+{
+  "icon-button": {
+    "diameter": {
+      "md": { "value": "2.75rem", "themeable": true, "source": "$btn-icon-diameter-md" },
+      "sm": { "value": "2.25rem", "themeable": true, "source": "$btn-icon-diameter-sm" },
+      "inline": {
+        "value": "calc({line-height.base.value} + .1em)",
+        "themeable": true,
+        "source": "$btn-icon-diameter-inline"
+      }
+    },
+    "bg": { "value": "transparent", "themeable": true, "source": "$btn-icon-bg" },
+    "accent": {
+      "color": { "value": "{color.white.value}", "themeable": true, "source": "$btn-icon-accent-color" }
+    }
+  }
+}
diff --git a/tokens/source/components/Image.json b/tokens/source/components/Image.json
new file mode 100644
index 00000000000..46abd45c8dd
--- /dev/null
+++ b/tokens/source/components/Image.json
@@ -0,0 +1,22 @@
+{
+  "image": {
+    "thumbnail": {
+      "padding": { "value": ".25rem", "themeable": true, "source": "$thumbnail-padding" },
+      "bg": { "value": "{body.bg.value}", "themeable": true, "source": "$thumbnail-bg" },
+      "border": {
+        "width": { "value": "{border.width.value}", "themeable": true, "source": "$thumbnail-border-width" },
+        "color": { "value": "{color.gray.200.value}", "themeable": true, "source": "$thumbnail-border-color" },
+        "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$thumbnail-border-radius"}
+      },
+      "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "themeable": true, "source": "$thumbnail-box-shadow" }
+    },
+    "figure": {
+      "caption": {
+        "font": {
+          "size": { "value": "90%", "themeable": true, "source": "$figure-caption-font-size" }
+        },
+        "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$figure-caption-color" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Menu.json b/tokens/source/components/Menu.json
new file mode 100644
index 00000000000..a414aa71ce0
--- /dev/null
+++ b/tokens/source/components/Menu.json
@@ -0,0 +1,12 @@
+{
+  "menu": {
+    "background": {
+      "active": { "value": "{btn.tertiary.bg.active.value}", "themeable": true, "source": "$active-background" }
+    },
+    "border": {
+      "base": { "value": "transparent", "themeable": true, "source": "$border" },
+      "active": { "value": "transparent", "themeable": true, "source": "$active-border" },
+      "hover": { "value": "transparent", "themeable": true, "source": "$hover-border" }
+    }
+  }
+}
diff --git a/tokens/source/components/Modal.json b/tokens/source/components/Modal.json
new file mode 100644
index 00000000000..71d26b31f1e
--- /dev/null
+++ b/tokens/source/components/Modal.json
@@ -0,0 +1,92 @@
+{
+  "modal": {
+    "inner": {
+      "padding": {
+        "base": { "value": "1.5rem", "themeable": true, "source": "$modal-inner-padding" },
+        "bottom": { "value": ".7rem", "themeable": true, "source": "$modal-inner-padding-bottom" }
+      }
+    },
+    "footer": {
+      "border": {
+        "color": {
+          "value": "{modal.header.border.color.value}", "themeable": true, "source": "$modal-footer-border-color"
+        },
+        "width": {
+          "value": "{modal.header.border.width.value}", "themeable": true, "source": "$modal-footer-border-width"
+        }
+      },
+      "padding": {
+        "base": {
+          "value": "{modal.footer.padding.x.value} {modal.footer.padding.y.value}",
+          "themeable": true,
+          "source": "$modal-footer-padding"
+        },
+        "x": { "value": "1rem", "themeable": true, "source": "$modal-footer-padding-x" },
+        "y": { "value": "1.5rem", "themeable": true, "source": "$modal-footer-padding-y" }
+      }
+    },
+    "title": {
+      "line": {
+        "height": { "value": "{line-height.base.value}", "themeable": true, "source": "$modal-title-line-height" }
+      }
+    },
+    "content": {
+      "color": { "value": "null", "themeable": true, "source": "$modal-content-color" },
+      "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$modal-content-bg" },
+      "border": {
+        "color": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$modal-content-border-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.2
+          }]
+        },
+        "width": { "value": "0rem", "themeable": true, "source": "$modal-content-border-width" },
+        "radius": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$modal-content-border-radius" }
+      },
+      "box-shadow": {
+        "xs": { "value": "0 .25rem .5rem rgba(0, 0, 0, .5)", "themeable": true, "source": "$modal-content-box-shadow-xs" },
+        "sm": {
+          "up": {
+            "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
+            "themeable": true,
+            "source": "$modal-content-box-shadow-sm-up"
+          }
+        }
+      }
+    },
+    "backdrop": {
+      "bg": { "value": "{color.black.value}", "themeable": true, "source": "$modal-backdrop-bg" },
+      "opacity": { "value": ".5", "themeable": true, "source": "$modal-backdrop-opacity" },
+      "zindex": { "value": "1040", "themeable": true, "source": "$zindex-modal-backdrop" }
+    },
+    "header": {
+      "border": {
+        "color": { "value": "{border.color.value}", "themeable": true, "source": "$modal-header-border-color" },
+        "width": { "value": "{modal.content.border.width.value}", "themeable": true, "source": "$modal-header-border-width" }
+      },
+      "padding": {
+        "base": {
+          "value": "{modal.header.padding.y.value} {modal.header.padding.x.value}",
+          "themeable": true,
+          "source": "$modal-header-padding"
+        },
+        "y": { "value": "1rem", "themeable": true, "source": "$modal-header-padding-y" },
+        "x": { "value": "1.5rem", "themeable": true, "source": "$modal-header-padding-x" }
+      }
+    },
+    "xl": { "value": "1140px", "themeable": true, "source": "$modal-xl" },
+    "lg": { "value": "800px", "themeable": true, "source": "$modal-lg" },
+    "md": { "value": "500px", "themeable": true, "source": "$modal-md" },
+    "sm": { "value": "500px", "themeable": true, "source": "$modal-sm" },
+    "transform": {
+      "base": { "value": "transform .3s ease-out", "themeable": true, "source": "$modal-transition" },
+      "fade": { "value": "translate(0, -50px)", "themeable": true, "source": "$modal-fade-transform" },
+      "show": { "value": "none", "themeable": true, "source": "$modal-show-transform" },
+      "scale": { "value": "scale(1.02)", "themeable": true, "source": "$modal-scale-transform" }
+    },
+    "zindex": { "value": "1050", "themeable": true, "source": "$zindex-modal" }
+  }
+}
diff --git a/tokens/source/components/Nav.json b/tokens/source/components/Nav.json
new file mode 100644
index 00000000000..d6bbe589721
--- /dev/null
+++ b/tokens/source/components/Nav.json
@@ -0,0 +1,90 @@
+{
+  "nav": {
+    "link": {
+      "padding": {
+        "y": { "value": ".5rem", "themeable": true, "source": "$nav-link-padding-y" },
+        "x": { "value": "1rem", "themeable": true, "source": "$nav-link-padding-x" }
+      },
+      "color": {
+        "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$nav-link-color" },
+        "disabled": { "value": "{color.gray.300.value}", "themeable": true, "source": "$nav-link-disabled-color" }
+      },
+      "font": {
+        "weight": { "value": "500", "themeable": true, "source": "$nav-link-font-weight" }
+      }
+    },
+    "tabs": {
+      "border": {
+        "color": { "value": "{color.light.400.value}", "themeable": true, "source": "$nav-tabs-border-color" },
+        "width": { "value": "2px", "themeable": true, "source": "$nav-tabs-border-width" },
+        "radius": { "value": "0", "themeable": true, "source": "$nav-tabs-border-radius" }
+      },
+      "link": {
+        "hover": {
+          "border": {
+            "color": {
+              "value": "transparent transparent {nav.tabs.border.color.value}",
+              "themeable": true,
+              "source": "$nav-tabs-link-hover-border-color"
+            }
+          },
+          "bg": { "value": "{color.light.400.value}", "themeable": true, "source": "$nav-tabs-link-hover-bg" }
+        },
+        "active": {
+          "color": {
+            "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$nav-tabs-link-active-color" },
+            "border": {
+              "value": "transparent transparent {color.primary.500.value}",
+              "themeable": true,
+              "source": "$nav-tabs-link-active-border-color"
+            }
+          },
+          "bg": { "value": "{body.bg.value}", "themeable": true, "source": "$nav-tabs-link-active-bg" }
+        }
+      }
+    },
+    "pills": {
+      "border": {
+        "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$nav-pills-border-radius" }
+      },
+      "link": {
+        "link": {
+          "active": {
+            "color": {
+              "value": "{color.active.value}",
+              "themeable": true,
+              "source": "$nav-pills-link-active-color"
+            },
+            "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$nav-pills-link-active-bg" }
+          }
+        }
+      }
+    },
+    "divider": {
+      "color": { "value": "{color.gray.100.value}", "themeable": true, "source": "$nav-divider-color" },
+      "margin": {
+        "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$nav-divider-margin-y" }
+      }
+    },
+    "color": {
+      "dark": {
+        "value": "{color.white.value}",
+        "themeable": true,
+        "source": "$navbar-dark-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.5
+        }]
+      },
+      "light": {
+        "value": "{color.black.value}",
+        "themeable": true,
+        "source": "$navbar-light-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.5
+        }]
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Navbar.json b/tokens/source/components/Navbar.json
new file mode 100644
index 00000000000..670c8e8c2a4
--- /dev/null
+++ b/tokens/source/components/Navbar.json
@@ -0,0 +1,162 @@
+{
+  "navbar": {
+    "padding": {
+      "y": { "value": "calc({spacer.base.value} / 2)", "themeable": true, "source": "$navbar-padding-y" },
+      "x": {
+        "base": { "value": "{spacer.base.value}", "themeable": true, "source": "$navbar-padding-x" },
+        "nav": {
+          "link": { "value": ".5rem", "themeable": true, "source": "$navbar-nav-link-padding-x" }
+        }
+      }
+    },
+    "nav": {
+      "link": {
+        "height": {
+          "value": "calc({font.size.base.value} * {line-height.base.value} + .5rem * 2)",
+          "themeable": true,
+          "source": "$nav-link-height"
+        }
+      },
+      "scroll": {
+        "max": {
+          "height": { "value": "75vh", "themeable": true, "source": "$navbar-nav-scroll-max-height" }
+        }
+      }
+    },
+    "brand": {
+      "font": {
+        "size": {
+          "value": "{font.size.lg.value}", "themeable": true, "source": "$navbar-brand-font-size"
+        }
+      },
+      "height": {
+        "value": "calc({navbar.brand.font.size.value} * {line-height.base.value})",
+        "themeable": true,
+        "source": "$navbar-brand-height"
+      },
+      "padding": {
+        "y": {
+          "value": "calc(({navbar.nav.link.height.value} - {navbar.brand.height.value}) / 2)",
+          "themeable": true,
+          "source": "$navbar-brand-padding-y"
+        }
+      }
+    },
+    "toggler": {
+      "padding": {
+        "y": { "value": ".25rem", "themeable": true, "source": "$navbar-toggler-padding-y" },
+        "x": { "value": ".75rem", "themeable": true, "source": "$navbar-toggler-padding-x" }
+      },
+      "font": {
+        "size": { "value": "{font.size.lg.value}", "themeable": true, "source": "$navbar-toggler-font-size" }
+      },
+      "border": {
+        "radius": {
+          "value": "{btn.border.radius.base.value}", "themeable": true, "source": "$navbar-toggler-border-radius"
+        }
+      }
+    },
+    "dark": {
+      "color": {
+        "hover": {
+          "value": "{color.white.value}", 
+          "themeable": true, 
+          "source": "$navbar-dark-hover-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.75
+          }]
+        },
+        "active": {
+          "value": "{color.active.value}", "themeable": true, "source": "$navbar-dark-active-color"
+        },
+        "disabled": {
+          "value": "{color.white.value}", 
+          "themeable": true, 
+          "source": "$navbar-dark-disabled-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.25
+          }]
+        }
+      },
+      "toggler": {
+        "border": {
+          "color": {
+            "value": "{color.white.value}", 
+            "themeable": true, 
+            "source": "$navbar-dark-toggler-border-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 0.1
+            }]
+          }
+        }
+      },
+      "brand": {
+        "color": {
+          "base": {
+            "value": "{navbar.dark.color.active.value}", "themeable": true, "source": "$navbar-dark-brand-color"
+          },
+          "hover": {
+            "value": "{navbar.dark.color.active.value}", "themeable": true, "source": "$navbar-dark-brand-hover-color"
+          }
+        }
+      }
+    },
+    "light": {
+      "color": {
+        "hover": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$navbar-light-hover-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.7
+          }]
+        },
+        "active": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$navbar-light-active-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.9
+          }]
+        },
+        "disabled": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$navbar-light-disabled-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        }
+      },
+      "toggler": {
+        "border": {
+          "color": { 
+            "value": "{color.black.value}", 
+            "themeable": true, 
+            "source": "$navbar-light-toggler-border-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 0.1
+            }]
+          }
+        }
+      },
+      "brand": {
+        "color": {
+          "base": { "value": "{navbar.light.color.active.value}", "themeable": true, "source": "$navbar-light-brand-color" },
+          "hover": {
+            "value": "{navbar.light.color.active.value}",
+            "themeable": true,
+            "source": "$navbar-light-brand-hover-color"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Pagination.json b/tokens/source/components/Pagination.json
new file mode 100644
index 00000000000..004099fcd9f
--- /dev/null
+++ b/tokens/source/components/Pagination.json
@@ -0,0 +1,100 @@
+{
+  "pagination": {
+    "padding": {
+      "y": {
+        "base": { "value": ".625rem", "themeable": true, "source": "$pagination-padding-y" },
+        "sm": { "value": ".8rem", "themeable": true, "source": "$pagination-padding-y-sm" },
+        "lg": { "value": ".75rem", "themeable": true, "source": "$pagination-padding-y-lg" }
+      },
+      "x": {
+        "base": { "value": "1rem", "themeable": true, "source": "$pagination-padding-x" },
+        "sm": { "value": ".6rem", "themeable": true, "source": "$pagination-padding-x-sm" },
+        "lg": { "value": "1.5rem", "themeable": true, "source": "$pagination-padding-x-lg" }
+      },
+      "icon": { "value": ".5rem", "themeable": true, "source": "$pagination-padding-icon" }
+    },
+    "margin": {
+      "x": { "value": ".5rem", "themeable": true, "source": "$pagination-margin-x" },
+      "y": { "value": ".5rem", "themeable": true, "source": "$pagination-margin-y" }
+    },
+    "line": {
+      "height": {
+        "value": "1.5rem", "themeable": true, "source": "$pagination-line-height"
+      }
+    },
+    "font": {
+      "size": {
+        "sm": { "value": ".875rem", "themeable": true, "source": "$pagination-font-size-sm" }
+      }
+    },
+    "icon": {
+      "size": {
+        "base": { "value": "1.375rem", "themeable": true, "source": "$pagination-icon-size" },
+        "sm": { "value": "1rem", "themeable": true, "source": "$pagination-icon-size-sm" }
+      },
+      "width": { "value": "2.25rem", "themeable": true, "source": "$pagination-icon-width" },
+      "height": { "value": "2.25rem", "themeable": true, "source": "$pagination-icon-height" }
+    },
+    "toggle": {
+      "border": {
+        "base": { "value": ".3125rem", "themeable": true, "source": "$pagination-toggle-border" },
+        "sm": { "value": ".25rem", "themeable": true, "source": "$pagination-toggle-border-sm" }
+      }
+    },
+    "secondary": {
+      "height": {
+        "base": { "value": "2.75rem", "themeable": true, "source": "$pagination-secondary-height" },
+        "sm": { "value": "2.25rem", "themeable": true, "source": "$pagination-secondary-height-sm" }
+      }
+    },
+    "color": {
+      "base": { "value": "{color.link.value}", "themeable": true, "source": "$pagination-color" },
+      "inverse": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-color-inverse" },
+      "hover": { "value": "{link.hover.color.value}", "themeable": true, "source": "$pagination-hover-color" },
+      "active": { "value": "{color.active.value}", "themeable": true, "source": "$pagination-active-color" },
+      "disabled": { "value": "{color.disabled.value}", "themeable": true, "source": "$pagination-disabled-color" }
+    },
+    "bg": {
+      "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$pagination-bg" },
+      "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$pagination-hover-bg" },
+      "active": { "value": "{color.background.active.value}", "themeable": true, "source": "$pagination-active-bg" },
+      "disabled": { "value": "{color.white.value}", "themeable": true, "source": "$pagination-disabled-bg" }
+    },
+    "border": {
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$pagination-border-width" },
+      "color": {
+        "base": { "value": "{color.gray.200.value}", "themeable": true, "source": "$pagination-border-color" },
+        "hover": { "value": "{color.gray.200.value}", "themeable": true, "source": "$pagination-hover-border-color" },
+        "active": { "value": "{pagination.bg.active.value}", "themeable": true, "source": "$pagination-active-border-color" },
+        "disabled": { "value": "{color.gray.100.value}", "themeable": true, "source": "$pagination-disabled-border-color" }
+      },
+      "radius": {
+        "sm": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$pagination-border-radius-sm" },
+        "lg": { "value": "{border.radius.lg.value}", "themeable": true, "source": "$pagination-border-radius-lg" }
+      }
+    },
+    "focus": {
+      "box-shadow": {
+        "value": "{input.btn.focus.box-shadow.value}", "themeable": true, "source": "$pagination-focus-box-shadow"
+      },
+      "outline": { "value": "0", "themeable": true, "source": "$pagination-focus-outline" },
+      "border": {
+        "width": { "value": ".125rem", "themeable": true, "source": "$pagination-focus-border-width" }
+      },
+      "color": {
+        "base": { "value": "{color.primary.500.value}", "themeable": true, "source": "$pagination-focus-color" },
+        "text": { "value": "{color.black.value}", "themeable": true, "source": "$pagination-focus-color-text" }
+      }
+    }
+  },
+  "reduced": {
+    "dropdown": {
+      "height": {
+        "max": { "value": "60vh", "themeable": true, "source": "$pagination-reduced-dropdown-max-height" }
+      },
+      "width": {
+        "min": { "value": "6rem", "themeable": true, "source": "$pagination-reduced-dropdown-min-width" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Popover.json b/tokens/source/components/Popover.json
new file mode 100644
index 00000000000..775804ddd5f
--- /dev/null
+++ b/tokens/source/components/Popover.json
@@ -0,0 +1,87 @@
+{
+  "popover": {
+    "font": {
+      "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$popover-font-size" }
+    },
+    "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$popover-bg" },
+    "max": {
+      "width": { "value": "480px", "themeable": true, "source": "$popover-max-width" }
+    },
+    "border": {
+      "radius": { "value": "{border.radius.sm.value}", "themeable": true, "source": "$popover-border-radius" },
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$popover-border-width" }
+    },
+    "box-shadow": {
+      "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+      "themeable": true,
+      "source": "$popover-box-shadow"
+    },
+    "header": {
+      "color": { "value": "{headings.color.value}", "themeable": true, "source": "$popover-header-color" },
+      "padding": {
+        "y": { "value": ".5rem", "themeable": true, "source": "$popover-header-padding-y" },
+        "x": { "value": "1rem", "themeable": true, "source": "$popover-header-padding-x" }
+      },
+      "bg": {
+        "darken": {
+          "value": "{color.white.value}", 
+          "themeable": true, 
+          "source": "$popover-header-bg-dark",
+          "modify": [{
+            "type": "darken",
+            "amount": 0.5
+          }]
+        }
+      },
+      "border": {
+        "darken": {
+          "value": "{color.white.value}", 
+          "themeable": true, 
+          "source": "$popover-header-border-bottom-darken",
+          "modify": [{
+            "type": "darken",
+            "amount": 0.5
+          }]
+        }
+      }
+    },
+    "body": {
+      "color": { "value": "{body.color.value}", "themeable": true, "source": "$popover-body-color" },
+      "padding": {
+        "y": { "value": "{popover.header.padding.y.value}", "themeable": true, "source": "$popover-body-padding-y" },
+        "x": { "value": "{popover.header.padding.x.value}", "themeable": true, "source": "$popover-body-padding-x" }
+      }
+    },
+    "icon": {
+      "margin": {
+        "right": { "value": ".5rem", "themeable": true, "source": "$popover-icon-margin-right" }
+      },
+      "height": { "value": "1rem", "themeable": true, "source": "$popover-icon-height" },
+      "width": { "value": "1rem", "themeable": true, "source": "$popover-icon-width" }
+    },
+    "arrow": {
+      "width": { "value": "1rem", "themeable": true, "source": "$popover-arrow-width" },
+      "height": { "value": ".5rem", "themeable": true, "source": "$popover-arrow-height" },
+      "color": { "value": "{popover.bg.value}", "themeable": true, "source": "$popover-arrow-color" }
+    },
+    "success": {
+      "bg": { "value": "{color.success.100.value}", "themeable": true, "source": "$popover-success-bg" },
+      "icon": {
+        "color": { "value": "{color.success.500.value}", "themeable": true, "source": "$popover-success-icon-color" }
+      }
+    },
+    "warning": {
+      "bg": { "value": "{color.warning.100.value}", "themeable": true, "source": "$popover-warning-bg" },
+      "icon": {
+        "color": { "value": "{color.warning.500.value}", "themeable": true, "source": "$popover-warning-icon-color" }
+      }
+    },
+    "danger": {
+      "bg": { "value": "{color.danger.100.value}", "themeable": true, "source": "$popover-danger-bg" },
+      "icon": {
+        "color": { "value": "{color.warning.500.value}", "themeable": true, "source": "$popover-danger-icon-color" }
+      }
+    },
+    "zindex": { "value": "1060", "themeable": true, "source": "$zindex-popover" }
+  }
+}
diff --git a/tokens/source/components/ProductTour.json b/tokens/source/components/ProductTour.json
new file mode 100644
index 00000000000..42506825424
--- /dev/null
+++ b/tokens/source/components/ProductTour.json
@@ -0,0 +1,46 @@
+{
+  "product-tour": {
+    "checkpoint": {
+      "color": {
+        "background": { "value": "{color.light.300.value}", "themeable": true, "source": "$checkpoint-background-color" },
+        "body": { "value": "{color.gray.700.value}", "themeable": true, "source": "$checkpoint-body-color" },
+        "border": { "value": "{color.brand.500.value}", "themeable": true, "source": "$checkpoint-border-color" },
+        "breadcrumb": { "value": "{color.primary.500.value}", "themeable": true, "source": "$checkpoint-breadcrumb-color" },
+        "box-shadow": {
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$checkpoint-box-shadow-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        }
+      },
+      "width": {
+        "border": { "value": "8px", "themeable": true, "source": "$checkpoint-border-width" },
+        "arrow": { "value": "15px", "themeable": true, "source": "$checkpoint-arrow-width" },
+        "max": { "value": "480px", "themeable": true, "source": "$checkpoint-max-width" }
+      },
+      "arrow": {
+        "color": {
+          "top": {
+            "value": "solid {product-tour.checkpoint.width.arrow.value} {product-tour.checkpoint.width.border.value}",
+            "themeable": true,
+            "source": "$checkpoint-arrow-top-color"
+          },
+          "default": {
+            "value": "solid {product-tour.checkpoint.width.arrow.value} {product-tour.checkpoint.color.background.value}",
+            "themeable": true,
+            "source": "$checkpoint-arrow-default-color"
+          }
+        },
+        "transparent": {
+          "value": "solid {product-tour.checkpoint.width.arrow.value} transparent",
+          "themeable": true,
+          "source": "$checkpoint-arrow-transparent"
+        }
+      },
+      "zindex": { "value": "1060", "themeable": true, "source": "$checkpoint-z-index" }
+    }
+  }
+}
diff --git a/tokens/source/components/ProgressBar.json b/tokens/source/components/ProgressBar.json
new file mode 100644
index 00000000000..7d5a7b7752d
--- /dev/null
+++ b/tokens/source/components/ProgressBar.json
@@ -0,0 +1,39 @@
+{
+  "progress-bar": {
+    "height": {
+      "base": { "value": "1rem", "themeable": true, "source": "$progress-height" },
+      "annotated": { "value": ".3125rem", "themeable": true, "source": "$annotated-progress-height" }
+    },
+    "font": {
+      "size": {
+        "value": "calc({font.size.base.value} * .75)", "themeable": true, "source": "$progress-font-size"
+      }
+    },
+    "bg": { "value": "transparent", "themeable": true, "source": "$progress-bg" },
+    "border": {
+      "radius": { "value": "0", "themeable": true, "source": "$progress-border-radius" },
+      "width": { "value": "1px", "themeable": true, "source": "$progress-bar-border-width" },
+      "color": { "value": "{color.gray.500.value}", "themeable": true, "source": "$progress-bar-border-color" }
+    },
+    "box-shadow": { "value": "none", "themeable": true, "source": "$progress-box-shadow" },
+    "bar": {
+      "color": { "value": "{color.white.value}", "themeable": true, "source": "$progress-bar-color" },
+      "bg": {
+        "base": { "value": "{color.accent.a.value}", "themeable": true, "source": "$progress-bar-bg" },
+        "annotated": { "value": "{color.dark.500.value}", "themeable": true, "source": "$annotated-progress-bar-bg" }
+      },
+      "animation": {
+        "timing": { "value": "1s linear infinite", "themeable": true, "source": "$progress-bar-animation-timing" }
+      },
+      "transition": { "value": "width .6s ease", "themeable": true, "source": "$progress-bar-transition" }
+    },
+    "threshold": {
+      "circle": { "value": ".5625rem", "themeable": true, "source": "$progress-threshold-circle" }
+    },
+    "hint": {
+      "annotation": {
+        "gap": { "value": ".5rem", "themeable": true, "source": "$progress-hint-annotation-gap" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Scrollable.json b/tokens/source/components/Scrollable.json
new file mode 100644
index 00000000000..a70c7d7bcd6
--- /dev/null
+++ b/tokens/source/components/Scrollable.json
@@ -0,0 +1,15 @@
+{
+  "scrollable": {
+    "body": {
+      "box-shadow": {
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$scrollable-body-box-shadow",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.55
+        }]
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/SearchField.json b/tokens/source/components/SearchField.json
new file mode 100644
index 00000000000..8b5cddd9d0e
--- /dev/null
+++ b/tokens/source/components/SearchField.json
@@ -0,0 +1,39 @@
+{
+  "search-field": {
+    "border": {
+      "radius": { "value": "0", "themeable": true, "source": "$search-border-radius" },
+      "color": {
+        "base": { "value": "{color.gray.500.value}", "themeable": true, "source": "$search-border-color" },
+        "interaction": { "value": "{color.black.value}", "themeable": true, "source": "$search-border-color-interaction" },
+        "focus": { "value": "{color.black.value}", "themeable": true, "source": "$search-border-focus-color" }
+      },
+      "width": {
+        "base": { "value": ".0625rem", "themeable": true, "source": "$search-border-width" },
+        "interaction": { "value": ".125rem", "themeable": true, "source": "$search-border-width-interaction" },
+        "focus": { "value": ".3125rem", "themeable": true, "source": "$search-border-focus-width" }
+      }
+    },
+    "line": {
+      "height": { "value": "1.5rem", "themeable": true, "source": "$search-line-height" }
+    },
+    "disabled": {
+      "opacity": { "value": ".3", "themeable": true, "source": "$search-disabled-opacity" }
+    },
+    "button": {
+      "margin": { "value": ".5rem", "themeable": true, "source": "$search-button-margin" },
+      "variants": {
+        "light": { "value": "{color.primary.500.value}", "themeable": true },
+        "dark": { "value": "{color.brand.500.value}", "themeable": true }
+      }
+    },
+    "input": {
+      "height": {
+        "search": {
+          "value": "calc({form.input.line.height.base.value} * 1em + {form.input.padding.y.base.value} * 2)",
+          "themeable": true,
+          "source": "$input-height-search"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/SelectableBox.json b/tokens/source/components/SelectableBox.json
new file mode 100644
index 00000000000..b5261a656e9
--- /dev/null
+++ b/tokens/source/components/SelectableBox.json
@@ -0,0 +1,11 @@
+{
+  "selectable-box": {
+    "padding": { "value": "1rem", "themeable": true, "source": "$selectable-box-padding" },
+    "border": {
+      "radius": { "value": ".25rem", "themeable": true, "source": "$selectable-box-border-radius" }
+    },
+    "box": {
+      "space": { "value": ".75rem", "themeable": true, "source": "$selectable-box-space" }
+    }
+  }
+}
diff --git a/tokens/source/components/Sheet.json b/tokens/source/components/Sheet.json
new file mode 100644
index 00000000000..e1ebbc7791a
--- /dev/null
+++ b/tokens/source/components/Sheet.json
@@ -0,0 +1,30 @@
+{
+  "sheet": {
+    "zindex": {
+      "backdrop": { "value": "1031", "themeable": true, "source": "$zindex-sheet-backdrop" },
+      "main": { "value": "1032", "themeable": true, "source": "$zindex-sheet" }
+    },
+    "skrim": {
+      "bg": { 
+        "value": "{color.gray.300.value}", 
+        "themeable": true, 
+        "source": "$sheet-skrim-bg",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.5
+        }]
+      },
+      "component": {
+        "box-shadow": {
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$sheet-skrim-component-box-shadow",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.15
+          }]
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Spinner.json b/tokens/source/components/Spinner.json
new file mode 100644
index 00000000000..93d57b85cb7
--- /dev/null
+++ b/tokens/source/components/Spinner.json
@@ -0,0 +1,12 @@
+{
+  "spinner": {
+    "width": { "value": "2rem", "themeable": true, "source": "$spinner-width" },
+    "height": { "value": "{spinner.width.value}", "themeable": true, "source": "$spinner-height" },
+    "border-width": { "value": ".25em", "themeable": true, "source": "$spinner-border-width" },
+    "sm": {
+      "width": { "value": "1rem", "themeable": true, "source": "$spinner-width-sm" },
+      "height": { "value": "{spinner.sm.width}", "themeable": true, "source": "$spinner-height-sm" },
+      "border-width": { "value": ".2em", "themeable": true, "source": "$spinner-border-width-sm" }
+    }
+  }
+}
diff --git a/tokens/source/components/Stack.json b/tokens/source/components/Stack.json
new file mode 100644
index 00000000000..1fee307558c
--- /dev/null
+++ b/tokens/source/components/Stack.json
@@ -0,0 +1,5 @@
+{
+  "stack": {
+    "gap": { "value": "0", "themeable": true, "source": "$stack-gap" }
+  }
+}
diff --git a/tokens/source/components/Sticky.json b/tokens/source/components/Sticky.json
new file mode 100644
index 00000000000..79fb90f3c2a
--- /dev/null
+++ b/tokens/source/components/Sticky.json
@@ -0,0 +1,17 @@
+{
+  "sticky": {
+    "offset": { "value": "0", "themeable": true, "source": "$sticky-offset" },
+    "shadow": {
+      "top": {
+        "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$sticky-shadow-top"
+      },
+      "bottom": {
+        "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$sticky-shadow-bottom"
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Tabs.json b/tokens/source/components/Tabs.json
new file mode 100644
index 00000000000..c62b56ce9f6
--- /dev/null
+++ b/tokens/source/components/Tabs.json
@@ -0,0 +1,13 @@
+{
+  "tabs": {
+    "notification": {
+      "height": { "value": "1rem", "themeable": true, "source": "$tab-notification-height" },
+      "width": { "value": "1rem", "themeable": true, "source": "$tab-notification-width" },
+      "font": {
+        "size": {
+          "value": "{font.size.xs.value}", "themeable": true, "source": "$tab-notification-font-size"
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Toast.json b/tokens/source/components/Toast.json
new file mode 100644
index 00000000000..e604a8aeb2d
--- /dev/null
+++ b/tokens/source/components/Toast.json
@@ -0,0 +1,57 @@
+{
+  "toast": {
+    "max": {
+      "width": { "value": "400px", "themeable": true, "source": "$toast-max-width" }
+    },
+    "padding": {
+      "x": { "value": ".75rem", "themeable": true, "source": "$toast-padding-x" },
+      "y": { "value": ".25rem", "themeable": true, "source": "$toast-padding-y" }
+    },
+    "font": {
+      "size": { "value": ".875rem", "themeable": true, "source": "$toast-font-size" }
+    },
+    "color": {
+      "base": { "value": "null", "themeable": true, "source": "$toast-color" },
+      "background": { "value": "{color.gray.700.value}", "themeable": true, "source": "$toast-background-color" }
+    },
+    "border": {
+      "width": { "value": "1px", "themeable": true, "source": "$toast-border-width" },
+      "color": { 
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$toast-border-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.1
+        }]
+      },
+      "radius": { "value": ".25rem", "themeable": true, "source": "$toast-border-radius" }
+    },
+    "box-shadow": {
+      "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)",
+      "themeable": true,
+      "source": "$toast-box-shadow"
+    },
+    "header": {
+      "color": {
+        "base": { "value": "{color.white.value}", "themeable": true, "source": "$toast-header-color" },
+        "background": { "value": "{color.gray.700.value}", "themeable": true, "source": "$toast-header-background-color" },
+        "border": { 
+          "value": "{color.black.value}", 
+          "themeable": true, 
+          "source": "$toast-header-border-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.5
+          }]
+        }
+      }
+    },
+    "container": {
+      "gutter": {
+        "lg": { "value": "1.25rem", "themeable": true, "source": "$toast-container-gutter-lg" },
+        "sm": { "value": ".625rem", "themeable": true, "source": "$toast-container-gutter-sm" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/Tooltip.json b/tokens/source/components/Tooltip.json
new file mode 100644
index 00000000000..9a9b51199ff
--- /dev/null
+++ b/tokens/source/components/Tooltip.json
@@ -0,0 +1,40 @@
+{
+  "tooltip": {
+    "font": {
+      "size": { "value": "{font.size.sm.value}", "themeable": true, "source": "$tooltip-font-size" }
+    },
+    "max": {
+      "width": { "value": "200px", "themeable": true, "source": "$tooltip-max-width" }
+    },
+    "color": {
+      "base": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-color" },
+      "light": { "value": "{color.black.value}", "themeable": true, "source": "$tooltip-color-light" }
+    },
+    "bg": {
+      "base": { "value": "{color.black.value}", "themeable": true, "source": "$tooltip-bg" },
+      "light": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-bg-light" }
+    },
+    "border": {
+      "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$tooltip-border-radius" }
+    },
+    "opacity": { "value": "1", "themeable": true, "source": "$tooltip-opacity" },
+    "padding": {
+      "y": { "value": ".5rem", "themeable": true, "source": "$tooltip-padding-y" },
+      "x": { "value": ".5rem", "themeable": true, "source": "$tooltip-padding-x" }
+    },
+    "margin": { "value": "0", "themeable": true, "source": "$tooltip-margin" },
+    "box-shadow": {
+      "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+      "themeable": true,
+      "source": "$tooltip-box-shadow"
+    },
+    "arrow": {
+      "height": { "value": ".4rem", "themeable": true, "source": "$tooltip-arrow-height" },
+      "color": {
+        "base": { "value": "{tooltip.bg.base.value}", "themeable": true, "source": "$tooltip-arrow-color" },
+        "light": { "value": "{color.white.value}", "themeable": true, "source": "$tooltip-arrow-color-light" }
+      }
+    },
+    "zindex": { "value": 1070, "themeable": true, "source": "$zindex-tooltip" }
+  }
+}
diff --git a/tokens/source/components/general/body.json b/tokens/source/components/general/body.json
new file mode 100644
index 00000000000..5d16794e530
--- /dev/null
+++ b/tokens/source/components/general/body.json
@@ -0,0 +1,6 @@
+{
+  "body": {
+    "bg": { "value": "{color.background.base.value}", "themeable": true, "source": "$body-bg" },
+    "color": { "value": "{color.gray.700.value}", "themeable": true, "source": "$body-color" }
+  }
+}
diff --git a/tokens/source/components/general/caret.json b/tokens/source/components/general/caret.json
new file mode 100644
index 00000000000..d28f860c388
--- /dev/null
+++ b/tokens/source/components/general/caret.json
@@ -0,0 +1,9 @@
+{
+  "caret": {
+    "width": { "value": ".3em", "themeable": true, "source": "$caret-width" },
+    "vertical": {
+      "align": { "value": ".255em",  "themeable": true, "source": "$caret-vertical-align" }
+    },
+    "spacing": { "value": ".255em", "themeable": true, "source": "$caret-spacing" }
+  }
+}
diff --git a/tokens/source/components/general/headings.json b/tokens/source/components/general/headings.json
new file mode 100644
index 00000000000..04cec04a713
--- /dev/null
+++ b/tokens/source/components/general/headings.json
@@ -0,0 +1,15 @@
+{
+  "headings": {
+    "margin": {
+      "bottom": { "value": ".5rem", "themeable": true, "source": "$headings-margin-bottom" }
+    },
+    "font": {
+      "family": { "value": "null", "themeable": true, "source": "$headings-font-family" },
+      "weight": { "value": "{font.weight.bold}", "themeable": true, "source": "$headings-font-weight" }
+    },
+    "line": {
+      "height": { "value": "1.25", "themeable": true, "source": "$headings-line-height" }
+    },
+    "color": { "value": "{color.black}", "themeable": true, "source": "$headings-color" }
+  }
+}
diff --git a/tokens/source/components/general/hr.json b/tokens/source/components/general/hr.json
new file mode 100644
index 00000000000..948eebe6569
--- /dev/null
+++ b/tokens/source/components/general/hr.json
@@ -0,0 +1,19 @@
+{
+  "hr": {
+    "border": {
+      "color": { 
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$hr-border-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.1
+        }]
+      },
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$hr-border-width" },
+      "margin": {
+        "y": { "value": "{spacer.base.value}", "themeable": true, "source": "$hr-margin-y" }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/general/input.json b/tokens/source/components/general/input.json
new file mode 100644
index 00000000000..1f2f6394d16
--- /dev/null
+++ b/tokens/source/components/general/input.json
@@ -0,0 +1,45 @@
+{
+  "input": {
+    "btn": {
+      "padding": {
+        "y": { "value": ".5625rem", "themeable": true, "source": "$input-btn-padding-y" },
+        "x": { "value": "1rem", "themeable": true, "source": "$input-btn-padding-x" },
+        "sm": {
+          "y": { "value": ".4375rem", "themeable": true, "source": "$input-btn-padding-y-sm" },
+          "x": { "value": ".75rem", "themeable": true, "source": "$input-btn-padding-x-sm" }
+        },
+        "lg": {
+          "y": { "value": ".6875rem", "themeable": true, "source": "$input-btn-padding-y-lg" },
+          "x": { "value": "1.25rem", "themeable": true, "source": "$input-btn-padding-x-lg" }
+        }
+      },
+      "font": {
+        "family": { "value": "inherit", "themeable": true, "source": "$input-btn-font-family" },
+        "size": {
+          "base": { "value": "1.125rem", "themeable": true, "source": "$input-btn-font-size" },
+          "sm": { "value": ".875rem", "themeable": true, "source": "$input-btn-font-size-sm" },
+          "lg": { "value": "1.325rem", "themeable": true, "source": "$input-btn-font-size-lg" }
+        }
+      },
+      "line": {
+        "height": {
+          "base": { "value": "1.3333", "themeable": true, "source": "$input-btn-line-height" },
+          "sm": { "value": "1.4286", "themeable": true, "source": "$input-btn-line-height-sm" },
+          "lg": { "value": "{line-height.lg.value}", "themeable": true, "source": "$input-btn-line-height-lg" }
+        }
+      },
+      "focus": {
+        "width": { "value": "1px", "themeable": true, "source": "$input-btn-focus-width" },
+        "color": { "value": "{color.input.focus.value}", "themeable": true, "source": "$input-btn-focus-color" },
+        "box-shadow": {
+          "value": "0 0 0 {input.btn.focus.width.value} {input.btn.focus.color.value}",
+          "themeable": true,
+          "source": "$input-btn-focus-box-shadow"
+        }
+      },
+      "border": {
+        "width": { "value": "{border.width.value}", "themeable": true, "source": "$input-btn-border-width" }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/tokens/source/components/general/link.json b/tokens/source/components/general/link.json
new file mode 100644
index 00000000000..142e712f462
--- /dev/null
+++ b/tokens/source/components/general/link.json
@@ -0,0 +1,159 @@
+{
+  "link": {
+    "color": { "value": "{color.link.value}", "themeable": true, "source": "$link-color" },
+    "decoration": { "value": "none", "themeable": true, "source": "$link-decoration" },
+    "hover": {
+      "color": {
+        "value": "{color.link.value}",
+        "themeable": true,
+        "source": "$link-hover-color",
+        "modify": [{
+          "type": "darken",
+          "amount": 0.15
+        }]
+      },
+      "decoration": { "value": "underline", "themeable": true, "source": "$link-hover-decoration" }
+    },
+    "inline": {
+      "color": { "value": "{color.link.value}", "themeable": true, "source": "$inline-link-color" },
+      "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" },
+      "decoration-color": {
+        "value": "{link.inline.color.value}",
+        "themeable": true,
+        "source": "$inline-link-decoration-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.3
+        }]
+      },
+      "hover": {
+        "color": {
+          "value": "{link.inline.color.value}",
+          "themeable": true,
+          "source": "$inline-link-hover-color",
+          "modify": [{
+            "type": "darken",
+            "amount": 0.15
+          }]
+        },
+        "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-hover-decoration" },
+        "decoration-color": {
+          "value": "{link.inline.hover.color.value}",
+          "themeable": true,
+          "source": "$inline-link-hover-decoration-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 1
+          }]
+        }
+      }
+    },
+    "muted": {
+      "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-link-color" },
+      "decoration": { "value": "none", "themeable": true, "source": "$muted-link-decoration" },
+      "hover": {
+        "color": {
+          "value": "{link.muted.color.value}",
+          "themeable": true,
+          "source": "$muted-link-hover-color",
+          "modify": [{
+            "type": "darken",
+            "amount": 0.15
+          }]
+        },
+        "decoration": { "value": "underline", "themeable": true, "source": "$muted-link-hover-decoration" }
+      },
+      "inline": {
+        "color": { "value": "{color.primary.500.value}", "themeable": true, "source": "$muted-inline-link-color" },
+        "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-decoration" },
+        "decoration-color": {
+          "value": "{link.muted.inline.color.value}",
+          "themeable": true,
+          "source": "$muted-inline-link-decoration-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        },
+        "hover": {
+          "color": {
+            "value": "{link.muted.inline.color.value}",
+            "themeable": true,
+            "source": "$muted-inline-link-hover-color",
+            "modify": [{
+              "type": "darken",
+              "amount": 0.15
+            }]
+          },
+          "decoration": { "value": "underline", "themeable": true, "source": "$muted-inline-link-hover-decoration" },
+          "decoration-color": {
+            "value": "{link.muted.inline.hover.color.value}",
+            "themeable": true,
+            "source": "$muted-inline-link-hover-decoration-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 1
+            }]
+          }
+        }
+      }
+    },
+    "brand": {
+      "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$brand-link-color" },
+      "decoration": { "value": "none", "themeable": true, "source": "$brand-link-decoration" },
+      "hover": {
+        "color": {
+          "value": "{link.brand.color.value}",
+          "themeable": true,
+          "source": "$brand-link-hover-color",
+          "modify": [{
+            "type": "darken",
+            "amount": 0.15
+          }]
+        },
+        "decoration": { "value": "underline", "themeable": true, "source": "$brand-link-hover-decoration" }
+      },
+      "inline": {
+        "color": { "value": "{color.brand.500.value}", "themeable": true, "source": "$inline-link-color" },
+        "decoration": { "value": "underline", "themeable": true, "source": "$inline-link-decoration" },
+        "decoration-color": {
+          "value": "{link.brand.inline.color.value}",
+          "themeable": true,
+          "source": "$brand-inline-link-decoration-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        },
+        "hover": {
+          "color": {
+            "value": "{link.brand.inline.color.value}",
+            "themeable": true,
+            "source": "$brand-inline-link-hover-color",
+            "modify": [{
+              "type": "darken",
+              "amount": 0.15
+            }]
+          },
+          "decoration": { "value": "underline", "themeable": true, "source": "$brand-inline-link-hover-decoration" },
+          "decoration-color": {
+            "value": "{link.brand.inline.hover.color.value}",
+            "themeable": true,
+            "source": "$brand-inline-link-hover-decoration-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 1
+            }]
+          }
+        }
+      }
+    },
+    "emphasized": {
+      "hover": {
+        "darken": {
+          "percentage": { "value": "15%", "themeable": true, "source": "$emphasized-link-hover-darken-percentage" }
+        }
+      }
+    }
+  }
+}
diff --git a/tokens/source/components/general/list.json b/tokens/source/components/general/list.json
new file mode 100644
index 00000000000..530100bea6d
--- /dev/null
+++ b/tokens/source/components/general/list.json
@@ -0,0 +1,69 @@
+{
+  "dt": {
+    "font": {
+      "weight": { "value": "{font.weight.bold.value}", "themeable": true, "source": "$dt-font-weight" }
+    }
+  },
+  "list": {
+    "inline": {
+      "padding": { "value": ".5rem", "themeable": true, "source": "$list-inline-padding" }
+    }
+  },
+  "list-group": {
+    "color": { "value": "null", "themeable": true, "source": "$list-group-color" },
+    "bg": {
+      "base": { "value": "{color.background.base.value}", "themeable": true, "source": "$list-group-bg" },
+      "hover": { "value": "{color.gray.100.value}", "themeable": true, "source": "$list-group-hover-bg" }
+    },
+    "border": {
+      "color": { 
+        "value": "{color.black.value}", 
+        "themeable": true, 
+        "source": "$list-group-border-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.125
+        }]
+      },
+      "width": { "value": "{border.width.value}", "themeable": true, "source": "$list-group-border-width" },
+      "radius": { "value": "{border.radius.base.value}", "themeable": true, "source": "$list-group-border-radius" }
+    },
+    "item": {
+      "padding": {
+        "y": { "value": ".75rem", "themeable": true, "source": "$list-group-item-padding-y" },
+        "x": { "value": "1.25rem", "themeable": true, "source": "$list-group-item-padding-x" }
+      }
+    },
+    "active": {
+      "color": {
+        "base": {
+          "value": "{color.active.value}", "themeable": true, "source": "$list-group-active-color"
+        },
+        "border": {
+          "value": "{list-group.active.bg.value}",
+          "themeable": true,
+          "source": "$list-group-active-border-color"
+        }
+      },
+      "bg": { "value": "{color.background.active.value}", "themeable": true, "source": "$list-group-active-bg" }
+    },
+    "disabled": {
+      "color": { "value": "{color.gray.600.value}", "themeable": true, "source": "$list-group-disabled-color" },
+      "bg": { "value": "{list-group.bg.base.value}", "themeable": true, "source": "$list-group-disabled-bg" }
+    },
+    "action": {
+      "color": {
+        "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$list-group-action-color" },
+        "hover": {
+          "value": "{list-group.action.color.base.value}",
+          "themeable": true,
+          "source": "$list-group-action-hover-color"
+        }
+      },
+      "active": {
+        "color": { "value": "{body.color.value}", "themeable": true, "source": "$list-group-action-active-color" },
+        "bg": { "value": "{color.gray.200.value}", "themeable": true, "source": "$list-group-action-active-bg" }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/tokens/source/components/general/text.json b/tokens/source/components/general/text.json
new file mode 100644
index 00000000000..ab170be5542
--- /dev/null
+++ b/tokens/source/components/general/text.json
@@ -0,0 +1,28 @@
+{
+  "text": {
+    "muted": { "value": "{color.gray.500.value}", "themeable": true, "source": "$text-muted" }
+  },
+  "paragraph": {
+    "margin": {
+      "bottom": { "value": "1rem", "themeable": true, "source": "$paragraph-margin-bottom" }
+    }
+  },
+  "blockquote": {
+    "small": {
+      "font": {
+        "size": {
+          "value": "{font.size.small.base.value}", "themeable": true, "source": "$blockquote-small-font-size"
+        }
+      }
+    },
+    "font": {
+      "size": {
+        "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$blockquote-font-size"
+      }
+    }
+  },
+  "mark": {
+    "padding": { "value": ".2em", "themeable": true, "source": "$mark-padding" },
+    "bg": { "value": "#FFF243", "themeable": true, "source": "$mark-bg" }
+  }
+}
diff --git a/tokens/source/global/border.json b/tokens/source/global/border.json
new file mode 100644
index 00000000000..153e7c39592
--- /dev/null
+++ b/tokens/source/global/border.json
@@ -0,0 +1,11 @@
+{
+  "border": {
+    "width": { "value": "1px", "themeable": true, "source": "$border-width" },
+    "color": { "value": "{color.gray.200.value}", "themeable": true, "source": "$border-color" },
+    "radius": {
+      "base": { "value": ".375rem", "themeable": true, "source": "$border-radius" },
+      "lg": { "value": ".425rem", "themeable": true, "source": "$border-radius-lg" },
+      "sm": { "value": ".25rem", "themeable": true, "source": "$border-radius-sm" }
+    }
+  }
+}
diff --git a/tokens/source/global/breakpoints.json b/tokens/source/global/breakpoints.json
new file mode 100644
index 00000000000..a5d02b63f21
--- /dev/null
+++ b/tokens/source/global/breakpoints.json
@@ -0,0 +1,10 @@
+{
+  "breakpoint": {
+    "xs": { "value": "0", "themeable": true },
+    "sm": { "value": "576px", "themeable": true },
+    "md": { "value": "768px", "themeable": true },
+    "lg": { "value": "992px", "themeable": true },
+    "xl": { "value": "1200px", "themeable": true },
+    "xxl": { "value": "1400px", "themeable": true }
+  }
+}
diff --git a/tokens/source/global/color.json b/tokens/source/global/color.json
new file mode 100644
index 00000000000..316bf61b6e2
--- /dev/null
+++ b/tokens/source/global/color.json
@@ -0,0 +1,930 @@
+{
+  "color": {
+    "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" },
+    "black": { "value": "#000000", "themeable": true, "source": "$black" },
+    "blue": { "value": "#23419F", "themeable": true, "source": "$blue" },
+    "red": { "value": "#C32D3A", "themeable": true, "source": "$red" },
+    "green": { "value": "#178253", "themeable": true, "source": "$green" },
+    "yellow": { "value": "#FFD900", "themeable": true, "source": "$yellow" },
+    "teal": { "value": "#006DAA", "themeable": true, "source": "$teal" },
+    "accent": {
+      "a": { "value": "#00BBF9", "themeable": true, "source": "$accent-a" },
+      "b": { "value": "#FFEE88", "themeable": true, "source": "$accent-b" }
+    },
+    "theme": {
+      "interval": { "value": "8%", "themeable": true, "source": "$theme-color-interval" }
+    },
+    "gray": {
+      "base": { "value": "#707070", "themeable": true, "source": "$gray" },
+      "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" },
+      "200": { "value": "#CCCCCC", "themeable": true, "source": "$gray-200" },
+      "300": { "value": "#ADADAD", "themeable": true, "source": "$gray-300" },
+      "400": { "value": "#8F8F8F", "themeable": true, "source": "$gray-400" },
+      "500": { "value": "{color.gray.base.value}", "themeable": true, "source": "$gray-500" },
+      "600": { "value": "#5C5C5C", "themeable": true, "source": "$gray-600" },
+      "700": { "value": "#454545", "themeable": true, "source": "$gray-700" },
+      "800": { "value": "#333333", "themeable": true, "source": "$gray-800" },
+      "900": { "value": "#212529", "themeable": true, "source": "$gray-900" }
+    },
+    "primary": {
+      "base": { "value": "#0A3055", "themeable": true, "source": "$primary" },
+      "100": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.primary.base.value}", "themeable": true, "source": "$primary-500" },
+      "600": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": {
+        "value": "{color.primary.base.value}",
+        "themeable": true,
+        "source": "$primary-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "secondary": {
+      "base": { "value": "{color.gray.700.value}", "themeable": true, "source": "$secondary" },
+      "100": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.secondary.base.value}", "themeable": true, "source": "$secondary-500"},
+      "600": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.secondary.base.value}", 
+        "themeable": true, 
+        "source": "$secondary-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "brand": {
+      "base": { "value": "#9D0054", "themeable": true, "source": "$brand" },
+      "100": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.brand.base.value}", "themeable": true, "source": "$brand-500" },
+      "600": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.brand.base.value}", 
+        "themeable": true, 
+        "source": "$brand-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "success": {
+      "base": { "value": "{color.green.value}", "themeable": true, "source": "$success" },
+      "100": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.success.base.value}", "themeable": true, "source": "$success-500" },
+      "600": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.success.base.value}", 
+        "themeable": true, 
+        "source": "$success-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "info": {
+      "base": { "value": "{color.teal.value}", "themeable": true, "source": "$info" },
+      "100": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.info.base.value}", "themeable": true, "source": "$info-500" },
+      "600": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.info.base.value}", 
+        "themeable": true, 
+        "source": "$info-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "warning": {
+      "base": { "value": "{color.yellow.value}", "themeable": true, "source": "$warning" },
+      "100": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.warning.base.value}", "themeable": true, "source": "$warning-500" },
+      "600": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.warning.base.value}", 
+        "themeable": true, 
+        "source": "$warning-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "danger": {
+      "base": { "value": "{color.red.value}", "themeable": true, "source": "$danger" },
+      "100": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.danger.base.value}", "themeable": true, "source": "$danger-500" },
+      "600": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.danger.base.value}", 
+        "themeable": true, 
+        "source": "$danger-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "light": {
+      "base": { "value": "#E1DDDB", "themeable": true, "source": "$light" },
+      "100": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.light.base.value}", "themeable": true, "source": "$light-500" },
+      "600": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.light.base.value}", 
+        "themeable": true, 
+        "source": "$light-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    },
+    "dark": {
+      "base": { "value": "#273F2F", "themeable": true, "source": "$dark" },
+      "100": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-100",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.94"
+          }
+        ]
+      },
+      "200": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-200",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.75"
+          }
+        ]
+      },
+      "300": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-300",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.50"
+          }
+        ]
+      },
+      "400": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-400",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "white",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "500": { "value": "{color.dark.base.value}", "themeable": true, "source": "$dark-500" },
+      "600": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-600",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.10"
+          }
+        ]
+      },
+      "700": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-700",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.20"
+          }
+        ]
+      },
+      "800": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-800",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.25"
+          }
+        ]
+      },
+      "900": { 
+        "value": "{color.dark.base.value}", 
+        "themeable": true, 
+        "source": "$dark-900",
+        "modify": [
+          {
+            "type": "mix",
+            "otherColor": "black",
+            "amount": "0.30"
+          }
+        ]
+      }
+    }
+  }
+}
diff --git a/tokens/source/global/display.json b/tokens/source/global/display.json
new file mode 100644
index 00000000000..7941218fbfd
--- /dev/null
+++ b/tokens/source/global/display.json
@@ -0,0 +1,21 @@
+{
+  "display": {
+    "size": {
+      "1": { "value": "3.75rem", "themeable": true, "source": "$display1-size" },
+      "2": { "value": "4.875rem", "themeable": true, "source": "$display2-size" },
+      "3": { "value": "5.625rem", "themeable": true, "source": "$display3-size" },
+      "4": { "value": "7.5rem", "themeable": true, "source": "$display4-size" },
+      "mobile": { "value": "3.25rem", "themeable": true, "source": "$display-mobile-size" }
+    },
+    "weight": {
+      "1": { "value": "{font.weight.bold}", "themeable": true, "source": "$display1-weight" },
+      "2": { "value": "{font.weight.bold}", "themeable": true, "source": "$display2-weight" },
+      "3": { "value": "{font.weight.bold}", "themeable": true, "source": "$display3-weight" },
+      "4": { "value": "{font.weight.bold}", "themeable": true, "source": "$display4-weight" }
+    },
+    "line-height": {
+      "base": { "value": "1", "themeable": true, "source": "$display-line-height" },
+      "mobile": { "value": "3.5rem", "themeable": true, "source": "$display-mobile-line-height" }
+    }
+  }
+}
diff --git a/tokens/source/global/elevation.json b/tokens/source/global/elevation.json
new file mode 100644
index 00000000000..2fbd569130d
--- /dev/null
+++ b/tokens/source/global/elevation.json
@@ -0,0 +1,184 @@
+{
+  "box-shadow": {
+    "level": {
+      "1": {
+        "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$level-1-box-shadow"
+      },
+      "2": {
+        "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$level-2-box-shadow"
+      },
+      "3": {
+        "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$level-3-box-shadow"
+      },
+      "4": {
+        "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$level-4-box-shadow"
+      },
+      "5": {
+        "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$level-5-box-shadow"
+      }
+    },
+    "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow" },
+    "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "themeable": true, "source": "$box-shadow-sm" },
+    "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "themeable": true, "source": "$box-shadow-lg" },
+    "down": {
+      "1": {
+        "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-down-1"
+      },
+      "2": {
+        "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-down-2"
+      },
+      "3": {
+        "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-down-3"
+      },
+      "4": {
+        "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-down-4"
+      },
+      "5": {
+        "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-down-5"
+      }
+    },
+    "left": {
+      "1": {
+        "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-left-1"
+      },
+      "2": {
+        "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-left-2"
+      },
+      "3": {
+        "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-left-3"
+      },
+      "4": {
+        "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-left-4"
+      },
+      "5": {
+        "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-left-5"
+      }
+    },
+    "up": {
+      "1": {
+        "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-up-1"
+      },
+      "2": {
+        "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-up-2"
+      },
+      "3": {
+        "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-up-3"
+      },
+      "4": {
+        "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-up-4"
+      },
+      "5": {
+        "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-up-5"
+      }
+    },
+    "right": {
+      "1": {
+        "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-right-1"
+      },
+      "2": {
+        "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-right-2"
+      },
+      "3": {
+        "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-right-3"
+      },
+      "4": {
+        "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-right-4"
+      },
+      "5": {
+        "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-right-5"
+      }
+    },
+    "centered": {
+      "1": {
+        "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-centered-1"
+      },
+      "2": {
+        "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-centered-2"
+      },
+      "3": {
+        "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-centered-3"
+      },
+      "4": {
+        "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-centered-4"
+      },
+      "5": {
+        "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
+        "themeable": true,
+        "source": "$box-shadow-centered-5"
+      }
+    }
+  },
+  "zindex": {
+    "0": {"value": 0, "themeable":  true},
+    "200": {"value": 200, "themeable":  true},
+    "400": {"value": 400, "themeable":  true},
+    "600": {"value": 600, "themeable":  true},
+    "800": {"value": 800, "themeable":  true},
+    "1000": {"value": 1000, "themeable":  true},
+    "1200": {"value": 1200, "themeable":  true},
+    "1400": {"value": 1400, "themeable":  true},
+    "1600": {"value": 1600, "themeable":  true},
+    "1800": {"value": 1800, "themeable":  true},
+    "2000": {"value": 2000, "themeable":  true},
+    "sticky": {"value": 1020, "themeable":  true, "source": "$zindex-sticky"},
+    "fixed": {"value": 1030, "themeable":  true, "source": "$zindex-fixed"}
+  }
+}
diff --git a/tokens/source/global/grid.json b/tokens/source/global/grid.json
new file mode 100644
index 00000000000..7d74d2a0041
--- /dev/null
+++ b/tokens/source/global/grid.json
@@ -0,0 +1,11 @@
+{
+  "grid": {
+    "columns": { "value": "12", "themeable": true, "source": "$grid-columns" },
+    "gutter": {
+      "width": { "value": "24px", "themeable": true, "source": "$grid-gutter-width" }
+    },
+    "row": {
+      "columns": { "value": "6", "themeable": true, "source": "$grid-row-columns"}
+    }
+  }
+}
diff --git a/tokens/source/global/spacing.json b/tokens/source/global/spacing.json
new file mode 100644
index 00000000000..35b06de6ffc
--- /dev/null
+++ b/tokens/source/global/spacing.json
@@ -0,0 +1,17 @@
+{
+  "spacer": {
+    "base": { "value": "1rem", "themeable": true, "source": "$spacer" },
+    "0": { "value": "0", "themeable": true },
+    "1": { "value": "calc({spacer.base.value} * .25rem)", "themeable": true },
+    "1,5": { "value": "calc({spacer.base.value} * .375rem)", "themeable": true },
+    "2": { "value": "calc({spacer.base.value} * .5rem)", "themeable": true },
+    "2,5": { "value": "calc({spacer.base.value} * .75rem)", "themeable": true },
+    "3": { "value": "{spacer.base.value}", "themeable": true },
+    "3,5": { "value": "calc({spacer.base.value} * 1.25rem)", "themeable": true },
+    "4": { "value": "calc({spacer.base.value} * 1.5rem)", "themeable": true },
+    "4,5": { "value": "calc({spacer.base.value} * 2rem)", "themeable": true },
+    "5": { "value": "calc({spacer.base.value} * 3rem)", "themeable": true },
+    "5,5": { "value": "calc({spacer.base.value} * 4rem)", "themeable": true },
+    "6": { "value": "calc({spacer.base.value} * 5rem)", "themeable": true }
+  }
+}
diff --git a/tokens/source/global/transition.json b/tokens/source/global/transition.json
new file mode 100644
index 00000000000..a3ef9c6c23e
--- /dev/null
+++ b/tokens/source/global/transition.json
@@ -0,0 +1,7 @@
+{
+  "transition": {
+    "base": { "value": "all .2s ease-in-out", "themeable": true, "source": "$transition-base" },
+    "fade": { "value": "opacity .15s linear", "themeable": true, "source": "$transition-fade" },
+    "collapse": { "value": "height .35s ease", "themeable": true, "source": "$transition-collapse" }
+  }
+}
diff --git a/tokens/source/global/typography.json b/tokens/source/global/typography.json
new file mode 100644
index 00000000000..c858b84a7b8
--- /dev/null
+++ b/tokens/source/global/typography.json
@@ -0,0 +1,62 @@
+{
+  "font": {
+    "family": {
+      "base": { "value": "{font.family.sans.serif.value}", "themeable": true, "source": "$font-family-base" },
+      "sans": {
+        "serif": {
+          "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",\n  Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",\n  \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
+          "themeable": true,
+          "source": "$font-family-sans-serif"
+        }
+      },
+      "serif": { "value": "serif", "themeable": true, "source": "$font-family-serif" },
+      "monospace": {
+        "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n  \"Courier New\", monospace",
+        "themeable": true,
+        "source": "$font-family-monospace"
+      }
+    },
+    "size": {
+      "base": { "value": "1.125rem", "themeable": true, "source": "$font-size-base" },
+      "lg": { "value": "1.4063rem", "themeable": true, "source": "$font-size-lg" },
+      "sm": { "value": ".875rem", "themeable": true, "source": "$font-size-sm" },
+      "xs": { "value": ".75rem", "themeable": true, "source": "$font-size-xs" },
+      "small": { 
+        "base": { "value": "87.5%", "themeable": true, "source": "$small-font-size" },
+        "x": { "value": "75%", "themeable": true, "source": "$x-small-font-size" }
+      },
+      "h1": { "value": "2.5rem", "themeable": true, "source": "$h1-font-size" },
+      "h2": { "value": "2rem", "themeable": true, "source": "$h2-font-size" },
+      "h3": { "value": "1.375rem", "themeable": true, "source": "$h3-font-size" },
+      "h4": { "value": "1.125rem", "themeable": true, "source": "$h4-font-size" },
+      "h5": { "value": ".875rem", "themeable": true, "source": "$h5-font-size" },
+      "h6": { "value": ".75rem", "themeable": true, "source": "$h6-font-size" },
+      "mobile": {
+        "h1": { "value": "2.25rem", "themeable": true, "source": "$h1-mobile-font-size" },
+        "h2": { "value": "{font.size.h2.value}", "themeable": true, "source": "$h2-mobile-font-size" },
+        "h3": { "value": "{font.size.h3.value}", "themeable": true, "source": "$h3-mobile-font-size" },
+        "h4": { "value": "{font.size.h4.value}", "themeable": true, "source": "$h4-mobile-font-size" },
+        "h5": { "value": "{font.size.h5.value}", "themeable": true, "source": "$h5-mobile-font-size" },
+        "h6": { "value": "{font.size.h6.value}", "themeable": true, "source": "$h6-mobile-font-size" }
+      },
+      "lead": { "value": "calc({font.size.base.value} * 1.25)", "themeable": true, "source": "$lead-font-size" }
+    },
+    "weight": {
+      "lighter": { "value": "lighter", "themeable": true, "source": "$font-weight-lighter" },
+      "light": { "value": "300", "themeable": true, "source": "$font-weight-light" },
+      "normal": { "value": "400", "themeable": true, "source": "$font-weight-normal" },
+      "semi": {
+        "bold": { "value": "500", "themeable": true, "source": "$font-weight-semi-bold" }
+      },
+      "bold": { "value": "700", "themeable": true, "source": "$font-weight-bold" },
+      "bolder": { "value": "bolder", "themeable": true, "source": "$font-weight-bolder" },
+      "base": { "value": "{font.weight.normal.value}", "themeable": true, "source": "$font-weight-base" },
+      "lead": { "value": "null", "themeable": true, "source": "$lead-font-weight" }
+    }
+  },
+  "line-height": {
+    "base": { "value": "1.5556", "themeable": true, "source": "$line-height-base" },
+    "lg": { "value": "1.5", "themeable": true, "source": "$line-height-lg" },
+    "sm": { "value": "1.5", "themeable": true, "source": "$line-height-sm" }
+  }
+}
diff --git a/tokens/utils.js b/tokens/utils.js
new file mode 100644
index 00000000000..e6302eb1fbc
--- /dev/null
+++ b/tokens/utils.js
@@ -0,0 +1,158 @@
+const fs = require('fs');
+const readline = require('readline');
+const path = require('path');
+
+function getFilesWithExtension(location, extension, files = [], excludeDirectories = []) {
+  const content = fs.statSync(location);
+  if (content.isDirectory()) {
+    const contentPaths = fs.readdirSync(location);
+    contentPaths.forEach(contentPath => {
+      if (!excludeDirectories.includes(contentPath)) {
+        getFilesWithExtension(path.join(location, contentPath), extension, files, excludeDirectories);
+      }
+    });
+  } else if (location.endsWith(extension)) {
+    files.push(location);
+  }
+  return files;
+}
+
+function getSCSStoCSSMap(prefix, key, result) {
+  Object.keys(key).forEach(node => {
+    if (key[node].constructor.name === 'Object') {
+      const newPrefix = `${prefix}-${node}`;
+      getSCSStoCSSMap(newPrefix, key[node], result);
+    } else if (node === 'source') {
+      // eslint-disable-next-line no-param-reassign
+      result[key[node]] = `var(${prefix})`;
+    }
+  });
+  return result;
+}
+
+async function replaceVariablesUsage(filePath, variablesMap, direction = 'scss-to-css') {
+  let variableRegex;
+  let result = '';
+
+  if (direction === 'css-to-scss') {
+    variableRegex = /var\((\w|-|_)*\)/g;
+  } else if (direction === 'scss-to-css') {
+    variableRegex = /\$(\w|-|_)*(,|;|\)|\s|}|$)/g;
+  }
+
+  const fileStream = fs.createReadStream(path.resolve(__dirname, filePath));
+
+  const rl = readline.createInterface({
+    input: fileStream,
+    crlfDelay: Infinity,
+  });
+
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const line of rl) {
+    let parsedLine = line;
+    const variables = [...parsedLine.matchAll(variableRegex)];
+
+    variables.forEach(variableData => {
+      let variable = variableData[0];
+      if (direction === 'scss-to-css' && [',', ';', ')', ' ', '}'].includes(variable.slice(-1))) {
+        variable = variable.slice(0, -1);
+      }
+      if (variable in variablesMap) {
+        parsedLine = parsedLine.replaceAll(variable, variablesMap[variable]);
+      }
+    });
+
+    result += `${parsedLine}\n`;
+  }
+
+  fs.writeFileSync(filePath, result);
+}
+
+/**
+ * Replaces SCSS variables definition with value from design tokens
+ *
+ * @async
+ * @param {string} pathToStylesheet - full path to the stylesheet where to perform replacement
+ * @param {Object} variablesMap - object that contains variables definitions to use during replacement
+ */
+async function replaceVariablesDefinitions(pathToStylesheet, variablesMap) {
+  const fileStream = fs.createReadStream(pathToStylesheet);
+
+  const rl = readline.createInterface({
+    input: fileStream,
+    crlfDelay: Infinity,
+  });
+
+  let result = '';
+  let currentVar = '';
+  let currentValue = '';
+
+  function processVariable() {
+    if (currentVar) {
+      if (currentVar in variablesMap) {
+        result += `${currentVar}: ${variablesMap[currentVar]} !default;\n`;
+      } else {
+        result += `${currentVar}:${currentValue}`;
+      }
+    } else {
+      result += currentValue;
+    }
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const line of rl) {
+    if (line.startsWith('$')) {
+      processVariable();
+      [currentVar, ...currentValue] = line.split(':');
+      currentValue = `${currentValue.join(':')}\n`;
+    } else if (!line.trim() || line.startsWith('\\')) {
+      processVariable();
+      currentVar = '';
+      currentValue = `${line}\n`;
+    } else {
+      currentValue += `${line}\n`;
+    }
+  }
+
+  // last variable was not covered by the loop
+  processVariable();
+
+  fs.writeFileSync(pathToStylesheet, result);
+}
+
+/**
+ * Update SCSS variables definitions or usages in given path with CSS variables derived from design tokens
+ *
+ * @param {string} location - path where to update variables
+ * @param {Object} variablesMap - SCSS-to-CSS or CSS-to-SCSS mapping of the variables
+ * @param {string} transformType - type of operation, one of ['definition', 'usage'].
+ * 'definition' will replace SCSS variables definitions with CSS ones, while 'usage' will replace all occurrences
+ * of SCSS / CSS variables (depends on the direction parameter).
+ * @param {Array[string]} excludePaths - exclude paths from the search
+ * @param {string} direction - replacement direction of variables, takes effect only when transformType === 'usage'.
+ * Can be either 'scss-to-css' or 'css-to-scss'.
+ * @return {Promise<void>}
+ */
+async function transformInPath(location, variablesMap, transformType = 'definition', excludePaths = [], direction = 'scss-to-css') {
+  const content = fs.statSync(location);
+  if (content.isDirectory()) {
+    const contentPaths = fs.readdirSync(location);
+    contentPaths.forEach(contentPath => {
+      if (!excludePaths.includes(contentPath)) {
+        transformInPath(path.join(location, contentPath), variablesMap, transformType, excludePaths, direction);
+      }
+    });
+  } else if (location.endsWith('.scss')) {
+    if (transformType === 'usage') {
+      await replaceVariablesUsage(location, variablesMap, direction);
+    } else {
+      await replaceVariablesDefinitions(location, variablesMap);
+    }
+  }
+}
+
+module.exports = {
+  getFilesWithExtension,
+  getSCSStoCSSMap,
+  transformInPath,
+};
diff --git a/www/src/components/Header.scss b/www/src/components/Header.scss
index a4ff80fbfce..f240d076489 100644
--- a/www/src/components/Header.scss
+++ b/www/src/components/Header.scss
@@ -1,3 +1,3 @@
 .pgn-doc-header {
-  z-index: $zindex-header;
+  z-index: var(--pgn-www-zindex-header);
 }
diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx
index deb17ff321f..2e77ace3980 100644
--- a/www/src/components/Menu.tsx
+++ b/www/src/components/Menu.tsx
@@ -177,6 +177,9 @@ function Menu() {
             <li className="mr-3">
               <Link to="/foundations/colors">Colors</Link>
             </li>
+            <li className="mr-3">
+              <Link to="/foundations/design-tokens">Design Tokens</Link>
+            </li>
             <li className="mr-3">
               <Link to="/foundations/elevation">Elevation</Link>
             </li>
diff --git a/www/src/pages/foundations/design-tokens.mdx b/www/src/pages/foundations/design-tokens.mdx
new file mode 100644
index 00000000000..1f47260db4c
--- /dev/null
+++ b/www/src/pages/foundations/design-tokens.mdx
@@ -0,0 +1,124 @@
+---
+title: Design Tokens
+---
+
+# Design Tokens
+
+Design tokens are names used to express design decisions in your organisation's design language. Design decisions can be a color, a typeface, a border radius, an icon, a font size, a gradient or even an animation duration.
+
+## Description
+
+In Paragon Design Tokens are represented as variables in `JSON` format organized by the categories.
+
+Example:
+
+```
+# color.tokens.json
+{
+  "color": {
+    "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" },
+    "black": { "value": "#000000", "themeable": true, "source": "$black" },
+    "blue": { "value": "#23419F", "themeable": true, "source": "$blue" },
+    ...
+  },
+}
+# breakpoints.tokens.json
+{
+  "breakpoint": {
+    "xs": { "value": "0", "themeable": true },
+    "sm": { "value": "576px", "themeable": true },
+    "md": { "value": "768px", "themeable": true },
+    "lg": { "value": "992px", "themeable": true },
+    "xl": { "value": "1200px", "themeable": true },
+    "xxl": { "value": "1400px", "themeable": true }
+  },
+}
+```
+
+They can be transformed into required format like `css`, `scss` to use in the application code.
+
+Example:
+
+```
+# original json
+{
+  "color": {
+    "white": { "value": "#FFFFFF", "themeable": true, "source": "$white" },
+  ...
+  },
+}
+# scss
+$pgn-color-white: #FFFFFF !default;
+# css
+--pgn-color-white: #FFFFFF;
+```
+
+```
+# original json
+{
+  "breakpoint": {
+    ...
+    "md": { "value": "768px", "themeable": true },
+    "lg": { "value": "992px", "themeable": true },
+    ...
+  },
+}
+# scss
+$pgn-breakpoint-md: 768px !default;
+$pgn-breakpoint-lg: 992px !default;
+# css
+--pgn-breakpoint-md: 768px;
+--pgn-breakpoint-lg: 992px;
+```
+
+## Design token types
+
+All tokens can be of two types: general (global) and specific (component) tokens.
+
+### Global tokens
+
+Color palette, elevation levels, typography, and dimension values are all global tokens. These can be directly used, and are inherited by component-specific tokens.
+
+Example:
+
+```
+"color": {
+  ...
+  "black": { "value": "#000000", "themeable": true, "source": "$black" },
+  ...
+  "gray": {
+    "100": { "value": "#EBEBEB", "themeable": true, "source": "$gray-100" },
+    "200": { "value": "#CCCCCC", "themeable": true, "source": "$gray-200" },
+    "300": { "value": "#ADADAD", "themeable": true, "source": "$gray-300" },
+    "400": { "value": "#8F8F8F", "themeable": true, "source": "$gray-400" },
+    "500": { "value": "#707070", "themeable": true, "source": "$gray-500" },
+    "600": { "value": "#5C5C5C", "themeable": true, "source": "$gray-600" },
+    "700": { "value": "#454545", "themeable": true, "source": "$gray-700" },
+  },
+  ...
+}
+```
+
+### Component-specific tokens
+
+Component-specific tokens are a comprehensive representation of each value associated with a component. They are often inherited from global tokens, but are named so that engineering teams can apply the tokens as accurately as possible when developing components.
+
+Example:
+
+```
+"alert": {
+  "color": {
+    "title": {
+      "value": "{color.black.value}",
+      "themeable": true,
+      "source": "$alert-title-color"
+    },
+    "content": {
+      "value": "{color.gray.700.value}",
+      "themeable": true,
+      "source": "$alert-content-color"
+     }
+  },
+  ...
+},
+```
diff --git a/www/src/scss/_variables.scss b/www/src/scss/_variables.scss
deleted file mode 100644
index 70e92c2f399..00000000000
--- a/www/src/scss/_variables.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$zindex-header:                      2500;
-$zindex-sheet-backdrop:              2501;
-$zindex-sheet:                       2502;
-$zindex-modal:                       2503;
diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss
index a464dbc6072..b7ee26249c8 100644
--- a/www/src/scss/base.scss
+++ b/www/src/scss/base.scss
@@ -9,6 +9,13 @@
 @import "../components/IconsTable";
 @import "../components/exampleComponents/ExamplePropsForm";
 
+:root {
+  --pgn-modal-zindex: 2503;
+  --pgn-sheet-zindex-backdrop: 2501;
+  --pgn-sheet-zindex-main: 2502;
+  --pgn-www-zindex-header: 2500;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss
index c327b2b6cac..bf1287cdce7 100644
--- a/www/src/scss/edxorg-theme.scss
+++ b/www/src/scss/edxorg-theme.scss
@@ -1,6 +1,5 @@
 @import "~font-awesome/css/font-awesome.min.css";
 @import "~@edx/brand-edx.org/paragon/fonts";
-@import "variables";
 @import "~@edx/brand-edx.org/paragon/variables";
 @import "~paragon-style/core/core";
 @import "~@edx/brand-edx.org/paragon/overrides";
diff --git a/www/src/scss/openedx-theme.scss b/www/src/scss/openedx-theme.scss
index 8d49bb81cce..967ceaf021c 100644
--- a/www/src/scss/openedx-theme.scss
+++ b/www/src/scss/openedx-theme.scss
@@ -1,6 +1,5 @@
 @import "~font-awesome/css/font-awesome.min.css";
 @import "~@edx/brand-openedx/paragon/fonts";
-@import "variables";
 @import "~@edx/brand-openedx/paragon/variables";
 @import "~paragon-style/core/core";
 @import "~@edx/brand-openedx/paragon/overrides";