@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.4

package/dist/core.css

@@ -112,65 +112,130 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse-width: width .35s ease;
-  --pgn-transition-collapse-height: height .35s ease;
-  --pgn-transition-fade: opacity .15s linear;
-  --pgn-transition-base: all .2s ease-in-out;
-  --pgn-transition-progress-bar-bar-transition: width .6s ease;
-  --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite;
-  --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  --pgn-transition-carousel-control: opacity .15s ease;
-  --pgn-transition-carousel-indicator: opacity .6s ease;
-  --pgn-transition-carousel-duration: .6s;
+  --pgn-transition-collapse-width-behavior: normal;
+  --pgn-transition-collapse-width-delay: 0s;
+  --pgn-transition-collapse-width-timing-function: ease;
+  --pgn-transition-collapse-width-duration: 0.35s;
+  --pgn-transition-collapse-width-property: width;
+  --pgn-transition-collapse-height-behavior: normal;
+  --pgn-transition-collapse-height-delay: 0s;
+  --pgn-transition-collapse-height-timing-function: ease;
+  --pgn-transition-collapse-height-duration: 0.35s;
+  --pgn-transition-collapse-height-property: height;
+  --pgn-transition-fade-behavior: normal;
+  --pgn-transition-fade-delay: 0s;
+  --pgn-transition-fade-timing-function: linear;
+  --pgn-transition-fade-duration: 0.15s;
+  --pgn-transition-fade-property: opacity;
+  --pgn-transition-base-behavior: normal;
+  --pgn-transition-base-delay: 0s;
+  --pgn-transition-base-timing-function: ease-in-out;
+  --pgn-transition-base-duration: 0.2s;
+  --pgn-transition-base-property: all;
+  --pgn-transition-progress-bar-transition-behavior: normal;
+  --pgn-transition-progress-bar-transition-delay: 0s;
+  --pgn-transition-progress-bar-transition-timing-function: ease;
+  --pgn-transition-progress-bar-transition-duration: 0.6s;
+  --pgn-transition-progress-bar-transition-property: width;
+  --pgn-transition-progress-bar-animation-timing-iteration-count: infinite;
+  --pgn-transition-progress-bar-animation-timing-delay: 0s;
+  --pgn-transition-progress-bar-animation-timing-timing-function: linear;
+  --pgn-transition-progress-bar-animation-timing-duration: 1s;
+  --pgn-transition-form-control-3-behavior: normal;
+  --pgn-transition-form-control-3-delay: 0s;
+  --pgn-transition-form-control-3-timing-function: ease-in-out;
+  --pgn-transition-form-control-3-duration: 0.15s;
+  --pgn-transition-form-control-3-property: box-shadow;
+  --pgn-transition-form-control-2-behavior: normal;
+  --pgn-transition-form-control-2-delay: 0s;
+  --pgn-transition-form-control-2-timing-function: ease-in-out;
+  --pgn-transition-form-control-2-duration: 0.15s;
+  --pgn-transition-form-control-2-property: border-color;
+  --pgn-transition-form-control-1-behavior: normal;
+  --pgn-transition-form-control-1-delay: 0s;
+  --pgn-transition-form-control-1-timing-function: ease-in-out;
+  --pgn-transition-form-control-1-duration: 0.15s;
+  --pgn-transition-form-control-1-property: background-color;
+  --pgn-transition-form-input-2-behavior: normal;
+  --pgn-transition-form-input-2-delay: 0s;
+  --pgn-transition-form-input-2-timing-function: ease-in-out;
+  --pgn-transition-form-input-2-duration: 0.15s;
+  --pgn-transition-form-input-2-property: box-shadow;
+  --pgn-transition-form-input-1-behavior: normal;
+  --pgn-transition-form-input-1-delay: 0s;
+  --pgn-transition-form-input-1-timing-function: ease-in-out;
+  --pgn-transition-form-input-1-duration: 0.15s;
+  --pgn-transition-form-input-1-property: border-color;
+  --pgn-transition-carousel-control-behavior: normal;
+  --pgn-transition-carousel-control-delay: 0ms;
+  --pgn-transition-carousel-control-timing-function: ease;
+  --pgn-transition-carousel-control-duration: 0.15s;
+  --pgn-transition-carousel-control-property: opacity;
+  --pgn-transition-carousel-indicator-behavior: normal;
+  --pgn-transition-carousel-indicator-delay: 0ms;
+  --pgn-transition-carousel-indicator-timing-function: ease;
+  --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-indicator-property: opacity;
+  --pgn-transition-carousel-duration: 0.6s;
+  --pgn-transition-carousel-base-behavior: normal;
+  --pgn-transition-carousel-base-delay: 0ms;
+  --pgn-transition-carousel-base-timing-function: ease-in-out;
+  --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration);
+  --pgn-transition-carousel-base-property: transform;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
-  --pgn-typography-line-height-micro: .938rem;
+  --pgn-typography-print-page-size: a3;
+  --pgn-typography-line-height-display-mobile: 3.5rem;
+  --pgn-typography-line-height-display-base: 1;
+  --pgn-typography-line-height-micro: 0.938rem;
   --pgn-typography-line-height-sm: 1.5;
   --pgn-typography-line-height-lg: 1.5;
   --pgn-typography-line-height-base: 1.5556;
-  --pgn-typography-font-weight-table-th: normal;
+  --pgn-typography-font-weight-display-4: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-font-weight-display-3: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-font-weight-display-2: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-font-weight-display-1: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-font-weight-table-th: 700;
   --pgn-typography-font-weight-lead: inherit;
+  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
   --pgn-typography-font-weight-bolder: bolder;
   --pgn-typography-font-weight-bold: 700;
   --pgn-typography-font-weight-semi-bold: 500;
   --pgn-typography-font-weight-normal: 400;
   --pgn-typography-font-weight-light: 300;
   --pgn-typography-font-weight-lighter: lighter;
-  --pgn-typography-font-size-micro: .688rem;
-  --pgn-typography-font-size-mobile-h1: 2.25rem;
-  --pgn-typography-font-size-h6: .75rem;
-  --pgn-typography-font-size-h5: .875rem;
-  --pgn-typography-font-size-h4: 1.125rem;
-  --pgn-typography-font-size-h3: 1.375rem;
-  --pgn-typography-font-size-h2: 2rem;
-  --pgn-typography-font-size-h1: 2.5rem;
-  --pgn-typography-font-size-small-x: 75%;
-  --pgn-typography-font-size-small-base: 87.5%;
-  --pgn-typography-font-size-xs: .75rem;
-  --pgn-typography-font-size-sm: .875rem;
-  --pgn-typography-font-size-lg: 1.4063rem;
+  --pgn-typography-font-size-display-mobile-4: var(--pgn-typography-font-size-display-mobile-1);
+  --pgn-typography-font-size-display-mobile-3: var(--pgn-typography-font-size-display-mobile-1);
+  --pgn-typography-font-size-display-mobile-2: var(--pgn-typography-font-size-display-mobile-1);
+  --pgn-typography-font-size-display-mobile-1: 3.25rem;
+  --pgn-typography-font-size-display-4: 7.5rem;
+  --pgn-typography-font-size-display-3: 5.625rem;
+  --pgn-typography-font-size-display-2: 4.875rem;
+  --pgn-typography-font-size-display-1: 3.75rem;
+  --pgn-typography-font-size-h6-mobile: var(--pgn-typography-font-size-h6-base);
+  --pgn-typography-font-size-h6-base: 0.75rem;
+  --pgn-typography-font-size-h5-mobile: var(--pgn-typography-font-size-h5-base);
+  --pgn-typography-font-size-h5-base: 0.875rem;
+  --pgn-typography-font-size-h4-mobile: var(--pgn-typography-font-size-h4-base);
+  --pgn-typography-font-size-h4-base: 1.125rem;
+  --pgn-typography-font-size-h3-mobile: var(--pgn-typography-font-size-h3-base);
+  --pgn-typography-font-size-h3-base: 1.375rem;
+  --pgn-typography-font-size-h2-mobile: var(--pgn-typography-font-size-h2-base);
+  --pgn-typography-font-size-h2-base: 2rem;
+  --pgn-typography-font-size-h1-mobile: 2.25rem;
+  --pgn-typography-font-size-h1-base: 2.5rem;
+  --pgn-typography-font-size-micro: 0.688rem;
+  --pgn-typography-font-size-xs: 75%;
+  --pgn-typography-font-size-sm: 87.5%;
+  --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25);
   --pgn-typography-font-size-base: 1.125rem;
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --pgn-typography-font-family-serif: serif;
   --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --pgn-typography-print-page-size: a3;
-  --pgn-typography-display-mobile: 3.25rem;
-  --pgn-typography-display-line-height-mobile: 3.5rem;
-  --pgn-typography-display-line-height-base: 1;
-  --pgn-typography-display-4: 7.5rem;
-  --pgn-typography-display-3: 5.625rem;
-  --pgn-typography-display-2: 4.875rem;
-  --pgn-typography-display-1: 3.75rem;
-  --pgn-typography-toast-font-size: .875rem;
-  --pgn-typography-spacer-line-height: 1px;
-  --pgn-typography-pagination-line-height: 1.5rem;
-  --pgn-typography-pagination-font-size-sm: .875rem;
-  --pgn-typography-nav-link-text-decoration: none;
-  --pgn-typography-nav-link-font-weight: 500;
-  --pgn-typography-menu-select-btn-link-text-decoration-thickness: .125rem;
-  --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
-  --pgn-typography-image-figure-caption-font-size: 90%;
+  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
+  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
+  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-link-decoration-brand-inline-hover: underline;
   --pgn-typography-link-decoration-brand-inline-base: underline;
   --pgn-typography-link-decoration-brand-hover: underline;
@@ -183,254 +248,437 @@
   --pgn-typography-link-decoration-inline-base: underline;
   --pgn-typography-link-decoration-hover: underline;
   --pgn-typography-link-decoration-base: none;
+  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
   --pgn-typography-input-btn-line-height-sm: 1.4286;
   --pgn-typography-input-btn-line-height-base: 1.3333;
   --pgn-typography-input-btn-font-size-lg: 1.325rem;
-  --pgn-typography-input-btn-font-size-sm: .875rem;
+  --pgn-typography-input-btn-font-size-sm: 0.875rem;
   --pgn-typography-input-btn-font-size-base: 1.125rem;
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
+  --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-headings-font-family: inherit;
+  --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-toast-font-size: 0.875rem;
+  --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
+  --pgn-typography-spacer-line-height: 1px;
+  --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
+  --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-pagination-line-height: 1.5rem;
+  --pgn-typography-pagination-font-size-sm: 0.875rem;
+  --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
+  --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
+  --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
+  --pgn-typography-nav-link-text-decoration: none;
+  --pgn-typography-nav-link-font-weight: 500;
+  --pgn-typography-menu-select-btn-link-text-decoration-thickness: 0.125rem;
+  --pgn-typography-menu-select-btn-link-text-decoration-line: underline;
+  --pgn-typography-image-figure-caption-font-size: 90%;
+  --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
+  --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
+  --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
+  --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
+  --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
+  --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
+  --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
+  --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
+  --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
+  --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
+  --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+  --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+  --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+  --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
+  --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+  --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+  --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+  --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
+  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-xs);
   --pgn-typography-dropdown-item-text-decoration: none;
-  --pgn-typography-code-font-size: 87.5%;
+  --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
+  --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
+  --pgn-typography-code-font-size: var(--pgn-typography-font-size-sm);
+  --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
+  --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
+  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-xs);
+  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
+  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
+  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
+  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
+  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
+  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
+  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
+  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
+  --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
   --pgn-typography-badge-font-size: 75%;
+  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
+  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
   --pgn-typography-alert-line-height: 1.5rem;
-  --pgn-typography-alert-font-size: .875rem;
+  --pgn-typography-alert-font-size: 0.875rem;
+  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
   --pgn-spacing-grid-gutter-width: 24px;
-  --pgn-spacing-table-cell-padding-sm: .3rem;
-  --pgn-spacing-table-cell-padding-base: .75rem;
-  --pgn-spacing-label-margin-bottom: .5rem;
+  --pgn-spacing-table-cell-padding-sm: 0.3rem;
+  --pgn-spacing-table-cell-padding-base: 0.75rem;
+  --pgn-spacing-label-margin-bottom: 0.5rem;
+  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
+  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
+  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
+  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
+  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
   --pgn-spacing-spacer-base: 1rem;
-  --pgn-spacing-spacer-0: 0;
-  --pgn-spacing-tooltip-margin: 0;
-  --pgn-spacing-tooltip-padding-x: .5rem;
-  --pgn-spacing-tooltip-padding-y: .5rem;
-  --pgn-spacing-toast-container-gutter-sm: .625rem;
+  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
+  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
+  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
+  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
+  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
+  --pgn-spacing-spacer-0: 0rem;
+  --pgn-spacing-mark-padding: 0.2em;
+  --pgn-spacing-paragraph-margin-bottom: 1rem;
+  --pgn-spacing-list-group-item-padding-x: 1.25rem;
+  --pgn-spacing-list-group-item-padding-y: 0.75rem;
+  --pgn-spacing-list-inline-padding: 0.5rem;
+  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
+  --pgn-spacing-input-btn-padding-lg-y: 0.6875rem;
+  --pgn-spacing-input-btn-padding-sm-x: 0.75rem;
+  --pgn-spacing-input-btn-padding-sm-y: 0.4375rem;
+  --pgn-spacing-input-btn-padding-x: 1rem;
+  --pgn-spacing-input-btn-padding-y: 0.5625rem;
+  --pgn-spacing-headings-margin-bottom: 0.5rem;
+  --pgn-spacing-caret-vertical-align: 0.255em;
+  --pgn-spacing-caret-base: 0.255em;
+  --pgn-spacing-tooltip-margin: 0rem;
+  --pgn-spacing-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-tooltip-padding-y: 0.5rem;
+  --pgn-spacing-toast-container-gutter-sm: 0.625rem;
   --pgn-spacing-toast-container-gutter-lg: 1.25rem;
-  --pgn-spacing-toast-padding-y: .25rem;
-  --pgn-spacing-toast-padding-x: .75rem;
+  --pgn-spacing-toast-padding-y: 0.25rem;
+  --pgn-spacing-toast-padding-x: 0.75rem;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
-  --pgn-spacing-sticky-offset: 0;
-  --pgn-spacing-stepper-header-step-list-margin: 0;
-  --pgn-spacing-stepper-header-step-list-padding-x: 0;
-  --pgn-spacing-stepper-header-step-list-padding-y: .25rem;
-  --pgn-spacing-stepper-header-step-padding: .25rem;
-  --pgn-spacing-stepper-header-padding-y: .75rem;
-  --pgn-spacing-vertical-align: .125em;
-  --pgn-spacing-selectable-box-box-space: .75rem;
-  --pgn-spacing-selectable-box-border-radius: .25rem;
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: 0.625rem;
+  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: 0.625rem;
+  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: 0.7rem;
+  --pgn-spacing-sticky-offset: 0rem;
+  --pgn-spacing-stepper-header-step-list-margin: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-x: 0rem;
+  --pgn-spacing-stepper-header-step-list-padding-y: 0.25rem;
+  --pgn-spacing-stepper-header-step-padding: 0.25rem;
+  --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-stepper-header-padding-y: 0.75rem;
+  --pgn-spacing-vertical-align: 0.125em;
+  --pgn-spacing-selectable-box-box-space: 0.75rem;
+  --pgn-spacing-selectable-box-border-radius: 0.25rem;
   --pgn-spacing-selectable-box-padding: 1rem;
-  --pgn-spacing-search-field-margin-button: .5rem;
-  --pgn-spacing-progress-bar-hint-annotation-gap: .5rem;
-  --pgn-spacing-popover-icon-margin-right: .5rem;
+  --pgn-spacing-search-field-margin-button: 0.5rem;
+  --pgn-spacing-progress-bar-hint-annotation-gap: 0.5rem;
+  --pgn-spacing-popover-icon-margin-right: 0.5rem;
+  --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
+  --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-popover-header-padding-x: 1rem;
-  --pgn-spacing-popover-header-padding-y: .5rem;
+  --pgn-spacing-popover-header-padding-y: 0.5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
-  --pgn-spacing-pagination-padding-x-sm: .6rem;
+  --pgn-spacing-pagination-padding-x-sm: 0.6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
-  --pgn-spacing-pagination-padding-y-lg: .75rem;
-  --pgn-spacing-pagination-padding-y-sm: .8rem;
-  --pgn-spacing-pagination-padding-y-base: .625rem;
-  --pgn-spacing-navbar-toggler-padding-x: .75rem;
-  --pgn-spacing-navbar-toggler-padding-y: .25rem;
-  --pgn-spacing-navbar-padding-x-nav-link: .5rem;
+  --pgn-spacing-pagination-padding-y-lg: 0.75rem;
+  --pgn-spacing-pagination-padding-y-sm: 0.8rem;
+  --pgn-spacing-pagination-padding-y-base: 0.625rem;
+  --pgn-spacing-navbar-toggler-padding-x: 0.75rem;
+  --pgn-spacing-navbar-toggler-padding-y: 0.25rem;
+  --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
+  --pgn-spacing-navbar-padding-x-nav-link: 0.5rem;
+  --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
+  --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
-  --pgn-spacing-nav-link-padding-y: .5rem;
+  --pgn-spacing-nav-link-padding-y: 0.5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
   --pgn-spacing-modal-header-padding-y: 1rem;
+  --pgn-spacing-modal-header-padding-base-y: var(--pgn-spacing-modal-header-padding-y);
+  --pgn-spacing-modal-header-padding-base-x: 1.5rem;
   --pgn-spacing-modal-footer-padding-y: 1rem;
-  --pgn-spacing-modal-inner-padding-bottom: .7rem;
+  --pgn-spacing-modal-footer-padding-base-y: var(--pgn-spacing-modal-footer-padding-y);
+  --pgn-spacing-modal-footer-padding-base-x: 1.5rem;
+  --pgn-spacing-modal-inner-padding-bottom: 0.7rem;
   --pgn-spacing-modal-inner-padding-base: 1.5rem;
-  --pgn-spacing-menu-item-icon-margin-left: .25em;
-  --pgn-spacing-image-thumbnail-padding: .25rem;
-  --pgn-spacing-mark-padding: .2em;
-  --pgn-spacing-paragraph-margin-bottom: 1rem;
-  --pgn-spacing-list-group-item-padding-x: 1.25rem;
-  --pgn-spacing-list-group-item-padding-y: .75rem;
-  --pgn-spacing-list-inline-padding: .5rem;
-  --pgn-spacing-input-btn-padding-lg-x: 1.25rem;
-  --pgn-spacing-input-btn-padding-lg-y: .6875rem;
-  --pgn-spacing-input-btn-padding-sm-x: .75rem;
-  --pgn-spacing-input-btn-padding-sm-y: .4375rem;
-  --pgn-spacing-input-btn-padding-x: 1rem;
-  --pgn-spacing-input-btn-padding-y: .5625rem;
-  --pgn-spacing-headings-margin-bottom: .5rem;
-  --pgn-spacing-caret-vertical-align: .255em;
-  --pgn-spacing-caret-base: .255em;
-  --pgn-spacing-form-control-select-icon-padding: .5625rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: .5rem;
-  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: .25rem;
+  --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
+  --pgn-spacing-menu-item-icon-margin-left: 0.25em;
+  --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
+  --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
+  --pgn-spacing-image-thumbnail-padding: 0.25rem;
+  --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
+  --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
+  --pgn-spacing-form-control-select-icon-padding: 0.5625rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-x: 0.5rem;
+  --pgn-spacing-form-control-select-feedback-tooltip-padding-y: 0.25rem;
+  --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-y: 0;
+  --pgn-spacing-form-control-select-feedback-icon-position-offset-x: calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
+  --pgn-spacing-form-control-select-feedback-icon-position-position-x: right;
+  --pgn-spacing-form-control-select-feedback-icon-position-position-y: center;
+  --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
   --pgn-spacing-form-control-select-indicator-padding: 1rem;
+  --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
+  --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
+  --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
+  --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
+  --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
+  --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
   --pgn-spacing-form-control-spacer-x: 1rem;
-  --pgn-spacing-form-control-gutter: .5rem;
+  --pgn-spacing-form-control-gutter: 0.5rem;
   --pgn-spacing-form-group-margin-bottom: 1rem;
-  --pgn-spacing-form-check-position-axis: .375rem;
-  --pgn-spacing-form-check-inline-margin-x: .75rem;
-  --pgn-spacing-form-text-margin-top: .25rem;
-  --pgn-spacing-form-input-check-margin-y: .3rem;
-  --pgn-spacing-form-input-check-margin-x-inline: .3125rem;
-  --pgn-spacing-form-input-check-margin-x-base: .25rem;
+  --pgn-spacing-form-check-position-axis: 0.375rem;
+  --pgn-spacing-form-check-inline-margin-x: 0.75rem;
+  --pgn-spacing-form-text-margin-top: 0.25rem;
+  --pgn-spacing-form-input-check-margin-y: 0.3rem;
+  --pgn-spacing-form-input-check-margin-x-inline: 0.3125rem;
+  --pgn-spacing-form-input-check-margin-x-base: 0.25rem;
   --pgn-spacing-form-input-check-gutter: 1.25rem;
+  --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
+  --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
+  --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
+  --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+  --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
   --pgn-spacing-dropzone-border-base: 1px;
   --pgn-spacing-dropzone-padding: 1.5rem;
-  --pgn-spacing-dropdown-close-container-top: .625rem;
-  --pgn-spacing-dropdown-padding-y-item: .25rem;
-  --pgn-spacing-dropdown-padding-y-base: .5rem;
+  --pgn-spacing-dropdown-close-container-top: 0.625rem;
+  --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
+  --pgn-spacing-dropdown-padding-header-y: 0.5rem;
+  --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item);
+  --pgn-spacing-dropdown-padding-y-item: 0.25rem;
+  --pgn-spacing-dropdown-padding-y-base: 0.5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
-  --pgn-spacing-dropdown-padding-x-base: 0;
-  --pgn-spacing-dropdown-spacer: .125rem;
+  --pgn-spacing-dropdown-padding-x-base: 0rem;
+  --pgn-spacing-dropdown-spacer: 0.125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
-  --pgn-spacing-data-table-padding-small: .5rem;
-  --pgn-spacing-data-table-padding-y: .75rem;
-  --pgn-spacing-data-table-padding-x: .75rem;
-  --pgn-spacing-collapsible-card-spacer-basic-icon: .625rem;
-  --pgn-spacing-collapsible-card-spacer-basic-x: .5rem;
-  --pgn-spacing-collapsible-card-spacer-basic-y: .5rem;
+  --pgn-spacing-data-table-padding-cell-y: 0.75rem;
+  --pgn-spacing-data-table-padding-cell-x: 0.5rem;
+  --pgn-spacing-data-table-padding-small: 0.5rem;
+  --pgn-spacing-data-table-padding-y: 0.75rem;
+  --pgn-spacing-data-table-padding-x: 0.75rem;
+  --pgn-spacing-collapsible-card-spacer-basic-icon: 0.625rem;
+  --pgn-spacing-collapsible-card-spacer-basic-x: 0.5rem;
+  --pgn-spacing-collapsible-card-spacer-basic-y: 0.5rem;
   --pgn-spacing-collapsible-card-spacer-icon: 2.5rem;
-  --pgn-spacing-collapsible-card-spacer-left-body: .75rem;
-  --pgn-spacing-collapsible-card-spacer-x-base: .5rem;
-  --pgn-spacing-collapsible-card-spacer-y-base: .5rem;
-  --pgn-spacing-code-kbd-padding-x: .4rem;
-  --pgn-spacing-code-kbd-padding-y: .2rem;
-  --pgn-spacing-chip-carousel-container-padding-y: .313rem;
-  --pgn-spacing-chip-carousel-container-padding-x: .625rem;
-  --pgn-spacing-chip-carousel-controls-top-offset: .375rem;
+  --pgn-spacing-collapsible-card-spacer-left-body: 0.75rem;
+  --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
+  --pgn-spacing-collapsible-card-spacer-x-base: 0.5rem;
+  --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
+  --pgn-spacing-collapsible-card-spacer-y-base: 0.5rem;
+  --pgn-spacing-code-kbd-padding-x: 0.4rem;
+  --pgn-spacing-code-kbd-padding-y: 0.2rem;
+  --pgn-spacing-chip-carousel-container-padding-y: 0.313rem;
+  --pgn-spacing-chip-carousel-container-padding-x: 0.625rem;
+  --pgn-spacing-chip-carousel-controls-top-offset: 0.375rem;
   --pgn-spacing-chip-outline-width: 3px;
-  --pgn-spacing-chip-outline-focus-distance-dark: .313rem;
-  --pgn-spacing-chip-outline-focus-distance-light: .313rem;
+  --pgn-spacing-chip-outline-focus-distance-dark: 0.313rem;
+  --pgn-spacing-chip-outline-focus-distance-light: 0.313rem;
   --pgn-spacing-chip-outline-selected-distance-dark: 3px;
   --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-x: .5rem;
+  --pgn-spacing-chip-padding-x: 0.5rem;
   --pgn-spacing-chip-padding-y: 1px;
-  --pgn-spacing-chip-margin-icon: .25rem;
-  --pgn-spacing-chip-margin-base: .125rem;
+  --pgn-spacing-chip-margin-icon: 0.25rem;
+  --pgn-spacing-chip-margin-base: 0.125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
   --pgn-spacing-card-focus-border-offset: 5px;
-  --pgn-spacing-card-logo-bottom-offset-horizontal: .4375rem;
+  --pgn-spacing-card-logo-bottom-offset-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-bottom-offset-base: 1rem;
-  --pgn-spacing-card-logo-left-offset-horizontal: .4375rem;
+  --pgn-spacing-card-logo-left-offset-horizontal: 0.4375rem;
   --pgn-spacing-card-logo-left-offset-base: 1.5rem;
-  --pgn-spacing-card-loading-skeleton-spacer: .313rem;
-  --pgn-spacing-card-footer-action-gap: .5rem;
+  --pgn-spacing-card-loading-skeleton-spacer: 0.313rem;
+  --pgn-spacing-card-footer-action-gap: 0.5rem;
   --pgn-spacing-card-columns-gap: 1.25rem;
   --pgn-spacing-card-columns-count: 3;
+  --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
+  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
+  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
+  --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
   --pgn-spacing-card-margin-group: 12px;
-  --pgn-spacing-card-spacer-y: .75rem;
+  --pgn-spacing-card-spacer-y: 0.75rem;
   --pgn-spacing-card-spacer-x: 1.25rem;
-  --pgn-spacing-btn-block-spacing-y: .5rem;
-  --pgn-spacing-bubble-expandable-padding-x: .25rem;
-  --pgn-spacing-bubble-expandable-padding-y: 0;
-  --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-badge-padding-y: .125rem;
-  --pgn-spacing-badge-padding-x-pill: .6em;
-  --pgn-spacing-badge-padding-x-base: .5rem;
-  --pgn-spacing-avatar-button-padding-left-lg: .25em;
-  --pgn-spacing-avatar-button-padding-left-sm: .25em;
-  --pgn-spacing-avatar-button-padding-left-base: .25em;
-  --pgn-spacing-annotation-arrow-side-margin: .25rem;
-  --pgn-spacing-annotation-padding: .5rem;
-  --pgn-spacing-alert-icon-space: .8rem;
+  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
+  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
+  --pgn-spacing-btn-block-spacing-y: 0.5rem;
+  --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
+  --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
+  --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
+  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
+  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
+  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
+  --pgn-spacing-bubble-expandable-padding-x: 0.25rem;
+  --pgn-spacing-bubble-expandable-padding-y: 0rem;
+  --pgn-spacing-breadcrumb-margin-left: 0.5rem;
+  --pgn-spacing-badge-padding-y: 0.125rem;
+  --pgn-spacing-badge-padding-x-pill: 0.6em;
+  --pgn-spacing-badge-padding-x-base: 0.5rem;
+  --pgn-spacing-avatar-button-padding-left-lg: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-sm: 0.25em;
+  --pgn-spacing-avatar-button-padding-left-base: 0.25em;
+  --pgn-spacing-annotation-arrow-side-margin: 0.25rem;
+  --pgn-spacing-annotation-padding: 0.5rem;
+  --pgn-spacing-alert-icon-space: 0.8rem;
+  --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
   --pgn-spacing-alert-margin-bottom: 1rem;
   --pgn-spacing-alert-padding-x: 1.5rem;
   --pgn-spacing-alert-padding-y: 1.5rem;
-  --pgn-spacing-action-row-gap-y: .5rem;
-  --pgn-spacing-action-row-gap-x: .5rem;
+  --pgn-spacing-action-row-gap-y: 0.5rem;
+  --pgn-spacing-action-row-gap-x: 0.5rem;
   --pgn-size-breakpoint-xxl: 1400px;
   --pgn-size-breakpoint-xl: 1200px;
   --pgn-size-breakpoint-lg: 992px;
   --pgn-size-breakpoint-md: 768px;
   --pgn-size-breakpoint-sm: 576px;
-  --pgn-size-breakpoint-xs: 0;
-  --pgn-size-tooltip-arrow-width: .8rem;
-  --pgn-size-tooltip-arrow-height: .4rem;
+  --pgn-size-breakpoint-xs: 0px;
+  --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-list-group-border-width: var(--pgn-size-border-width);
+  --pgn-size-input-btn-focus-width: 1px;
+  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
+  --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
+  --pgn-size-hr-border-width: var(--pgn-size-border-width);
+  --pgn-size-caret-width: 0.3em;
+  --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-tooltip-arrow-width: 0.8rem;
+  --pgn-size-tooltip-arrow-height: 0.4rem;
   --pgn-size-tooltip-max-width: 200px;
-  --pgn-size-toast-border-radius: .25rem;
+  --pgn-size-toast-border-radius: 0.25rem;
   --pgn-size-toast-border-width: 1px;
   --pgn-size-toast-max-width: 400px;
   --pgn-size-tabs-notification-width: 1rem;
   --pgn-size-tabs-notification-height: 1rem;
   --pgn-size-stepper-step-bubble-error-shadow-width: 3px;
-  --pgn-size-stepper-step-width-min: 0;
+  --pgn-size-stepper-step-width-min: 0rem;
   --pgn-size-stepper-header-height-min: 5.13rem;
-  --pgn-size-stack-gap: 0;
-  --pgn-size-spinner-sm-border-width: .2em;
+  --pgn-size-stack-gap: 0rem;
+  --pgn-size-spinner-sm-border-width: 0.2em;
+  --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
   --pgn-size-spinner-sm-width: 1rem;
-  --pgn-size-spinner-base-border-width: .25em;
+  --pgn-size-spinner-base-border-width: 0.25em;
+  --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-spinner-base-width: 2rem;
-  --pgn-size-search-field-border-radius: 0;
-  --pgn-size-search-field-border-width-focus: .3125rem;
-  --pgn-size-search-field-border-width-base: .0625rem;
-  --pgn-size-progress-bar-threshold-circle: .5625rem;
-  --pgn-size-progress-bar-border-radius: 0;
+  --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
+  --pgn-size-search-field-border-radius: 0rem;
+  --pgn-size-search-field-border-width-focus: 0.3125rem;
+  --pgn-size-search-field-border-width-base: 0.0625rem;
+  --pgn-size-progress-bar-threshold-circle: 0.5625rem;
+  --pgn-size-progress-bar-border-radius: 0rem;
   --pgn-size-progress-bar-border-width: 1px;
-  --pgn-size-progress-bar-height-annotated: .3125rem;
+  --pgn-size-progress-bar-height-annotated: 0.3125rem;
   --pgn-size-progress-bar-height-base: 1rem;
+  --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
+  --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-width-max: 480px;
   --pgn-size-product-tour-checkpoint-width-arrow: 15px;
   --pgn-size-product-tour-checkpoint-width-border: 8px;
-  --pgn-size-popover-arrow-height: .5rem;
+  --pgn-size-popover-arrow-height: 0.5rem;
   --pgn-size-popover-arrow-width: 1rem;
   --pgn-size-popover-icon-width: 1rem;
   --pgn-size-popover-icon-height: 1rem;
+  --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
+  --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-popover-max-width: 480px;
-  --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-toggle-border-sm: .25rem;
-  --pgn-size-pagination-toggle-border-base: .3125rem;
+  --pgn-size-pagination-focus-outline: 0rem;
+  --pgn-size-pagination-toggle-border-sm: 0.25rem;
+  --pgn-size-pagination-toggle-border-base: 0.3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
   --pgn-size-pagination-reduced-dropdown-max-height: 60vh;
+  --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-pagination-border-width: var(--pgn-size-border-width);
   --pgn-size-pagination-secondary-height-sm: 2.25rem;
   --pgn-size-pagination-secondary-height-base: 2.75rem;
   --pgn-size-pagination-icon-height: 2.25rem;
   --pgn-size-pagination-icon-width: 2.25rem;
+  --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
   --pgn-size-navbar-nav-scroll-max-height: 75vh;
-  --pgn-size-nav-tabs-border-radius: 0;
+  --pgn-size-nav-tabs-border-radius: 0rem;
   --pgn-size-nav-tabs-border-width: 2px;
-  --pgn-size-nav-tabs-link-border-bottom-width: .188rem;
+  --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
+  --pgn-size-nav-tabs-link-border-bottom-width: 0.188rem;
+  --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
   --pgn-size-nav-pills-link-border-width: 1px;
+  --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
   --pgn-size-modal-content-border-width: 0px;
   --pgn-size-modal-sm: 400px;
   --pgn-size-modal-md: 500px;
   --pgn-size-modal-lg: 800px;
   --pgn-size-modal-xl: 1140px;
+  --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
   --pgn-size-menu-item-width-xs: 13.438rem;
   --pgn-size-menu-item-width-base: 19rem;
   --pgn-size-menu-item-height: 3rem;
   --pgn-size-menu-base-max-height: 16.813rem;
-  --pgn-size-menu-base-border-radius: .25em;
+  --pgn-size-menu-base-border-radius: 0.25em;
+  --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
+  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
   --pgn-size-icon-button-diameter-sm: 2.25rem;
   --pgn-size-icon-button-diameter-md: 2.75rem;
   --pgn-size-icon-lg: 1.75rem;
   --pgn-size-icon-md: 1.5rem;
   --pgn-size-icon-sm: 1.25rem;
   --pgn-size-icon-xs: 1rem;
-  --pgn-size-icon-inline: .8em;
-  --pgn-size-input-btn-focus-width: 1px;
-  --pgn-size-caret-width: .3em;
-  --pgn-size-form-border-radius-width: .125rem;
-  --pgn-size-form-border-radius-check-focus: .0625rem;
-  --pgn-size-form-autosuggest-border-width: .125rem;
+  --pgn-size-icon-inline: 0.8em;
+  --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-form-border-radius-width: 0.125rem;
+  --pgn-size-form-border-radius-check-focus: 0.0625rem;
+  --pgn-size-form-autosuggest-border-width: 0.125rem;
+  --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
   --pgn-size-form-autosuggest-spinner-width: 1.25rem;
+  --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
   --pgn-size-form-autosuggest-icon-width: 2.4rem;
   --pgn-size-form-grid-gutter-width: 0.625rem;
   --pgn-size-form-control-border-radio-indicator-radius: 50%;
-  --pgn-size-form-control-border-checkbox-indicator-radius: 0;
+  --pgn-size-form-control-border-checkbox-indicator-radius: 0rem;
   --pgn-size-form-control-icon-width: 2rem;
+  --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
+  --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
+  --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
+  --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
+  --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-border-radius: 1rem;
-  --pgn-size-form-control-range-thumb-border-base: 0;
+  --pgn-size-form-control-range-thumb-border-base: 0rem;
+  --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-range-thumb-width: 1rem;
   --pgn-size-form-control-range-track-border-radius: 1rem;
-  --pgn-size-form-control-range-track-height: .5rem;
+  --pgn-size-form-control-range-track-height: 0.5rem;
   --pgn-size-form-control-range-track-width: 100%;
+  --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
+  --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
+  --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
+  --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
+  --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
+  --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
+  --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
+  --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
+  --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
   --pgn-size-form-control-indicator-border-width: 0.125rem;
   --pgn-size-form-control-indicator-bg: 100%;
   --pgn-size-form-control-indicator-base: 1.25rem;
+  --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
+  --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
   --pgn-size-form-input-width-focus: 0.063rem;
   --pgn-size-form-input-width-hover: 0.063rem;
+  --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
+  --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
+  --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
+  --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
+  --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
+  --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
+  --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
   --pgn-size-dropdown-min-width: 18rem;
   --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
@@ -445,7 +693,7 @@
   --pgn-size-color-picker-sm: 2rem;
   --pgn-size-code-pre-scrollable-max-height: 340px;
   --pgn-size-chip-icon: 1.5rem;
-  --pgn-size-chip-border-radius: .375rem;
+  --pgn-size-chip-border-radius: 0.375rem;
   --pgn-size-carousel-caption-width: 70%;
   --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
@@ -454,17 +702,31 @@
   --pgn-size-carousel-control-width-base: 15%;
   --pgn-size-card-logo-height: 4.125rem;
   --pgn-size-card-logo-width: 7.25rem;
+  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
   --pgn-size-card-image-vertical-max-height: 140px;
+  --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
   --pgn-size-card-image-horizontal-width-max: 240px;
+  --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
   --pgn-size-card-focus-border-width: 2px;
-  --pgn-size-card-border-radius-logo: .25rem;
+  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+  --pgn-size-card-border-radius-logo: 0.25rem;
+  --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-card-border-width: var(--pgn-size-border-width);
+  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
+  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-focus-width: 2px;
-  --pgn-size-breadcrumb-border-width-focus: .0625rem;
-  --pgn-size-breadcrumb-border-axis-y-focus: .5rem;
-  --pgn-size-breadcrumb-border-axis-x-focus: .25rem;
-  --pgn-size-breadcrumb-border-radius-focus: .125rem;
+  --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
+  --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
+  --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
+  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
+  --pgn-size-breadcrumb-border-width-focus: 0.0625rem;
+  --pgn-size-breadcrumb-border-axis-y-focus: 0.5rem;
+  --pgn-size-breadcrumb-border-axis-x-focus: 0.25rem;
+  --pgn-size-breadcrumb-border-radius-focus: 0.125rem;
+  --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
   --pgn-size-badge-border-radius-pill: 10rem;
-  --pgn-size-badge-border-radius-base: .25rem;
+  --pgn-size-badge-border-radius-base: 0.25rem;
   --pgn-size-avatar-border-radius: 100%;
   --pgn-size-avatar-border-base: 1px;
   --pgn-size-avatar-huge: 18.75rem;
@@ -474,213 +736,373 @@
   --pgn-size-avatar-sm: 2.25rem;
   --pgn-size-avatar-xs: 1.5rem;
   --pgn-size-avatar-base: 3rem;
-  --pgn-size-annotation-border-radius: .25rem;
+  --pgn-size-annotation-border-radius: 0.25rem;
   --pgn-size-annotation-max-width: 18.75rem;
-  --pgn-size-annotation-arrow-border-width: .5rem;
-  --pgn-size-alert-border-width: 0;
+  --pgn-size-annotation-arrow-border-width: 0.5rem;
+  --pgn-size-alert-border-width: 0rem;
+  --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
   --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: .25rem;
-  --pgn-size-border-radius-lg: .425rem;
-  --pgn-size-border-radius-base: .375rem;
+  --pgn-size-border-radius-sm: 0.25rem;
+  --pgn-size-border-radius-lg: 0.425rem;
+  --pgn-size-border-radius-base: 0.375rem;
   --pgn-size-border-width: 1px;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
-  --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6);
-  --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5);
-  --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4);
-  --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3);
-  --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2);
-  --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif);
-  --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs);
-  --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75);
-  --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2);
-  --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg);
-  --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25);
-  --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg);
-  --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base);
-  --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base);
-  --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base);
-  --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size);
-  --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5);
-  --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x);
-  --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm);
-  --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base);
-  --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal);
-  --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg);
-  --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm);
-  --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base);
-  --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family);
-  --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold);
-  --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm);
-  --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm);
-  --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal);
-  --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4);
-  --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2);
-  --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25);
-  --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75);
-  --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375);
-  --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5);
-  --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3);
-  --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5);
-  --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5);
-  --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25);
-  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-tab-more-link-dropdown-toggle-padding-y: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-stepper-header-padding-x: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x);
-  --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
-  --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
-  --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
-  --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
-  --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
-  --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top);
-  --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
-  --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
-  --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
-  --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item);
-  --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x);
-  --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y);
-  --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y);
-  --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
-  --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
-  --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
-  --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
-  --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
-  --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
-  --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
-  --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y);
-  --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y);
-  --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y);
-  --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width);
-  --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
-  --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
-  --pgn-size-popover-border-width: var(--pgn-size-border-width);
-  --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-pagination-border-width: var(--pgn-size-border-width);
-  --pgn-size-nav-tabs-inverse-link-active-border-bottom-width: var(--pgn-size-nav-tabs-link-border-bottom-width);
-  --pgn-size-nav-pills-inverse-link-border-width: var(--pgn-size-nav-pills-link-border-width);
-  --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg);
-  --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width);
-  --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) * 1em + .1em);
-  --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-list-group-border-width: var(--pgn-size-border-width);
-  --pgn-size-input-btn-border-width: var(--pgn-size-border-width);
-  --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base);
-  --pgn-size-hr-border-width: var(--pgn-size-border-width);
-  --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width);
-  --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width);
-  --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
-  --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
-  --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
-  --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
-  --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
-  --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base);
-  --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-dropdown-border-width: var(--pgn-size-border-width);
-  --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max);
-  --pgn-size-card-focus-border-radius: calc(var(--pgn-spacing-card-focus-border-offset) + var(--pgn-size-card-border-radius-base));
-  --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-card-border-width: var(--pgn-size-border-width);
-  --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
-  --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
-  --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
-  --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base);
-  --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg);
-  --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm);
-  --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base);
-  --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family);
-  --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base);
-  --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg);
-  --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2);
-  --pgn-spacing-menu-item-padding-y: var(--pgn-spacing-btn-padding-y-base);
-  --pgn-spacing-menu-item-padding-x: var(--pgn-spacing-btn-padding-x-base);
-  --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base);
-  --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg);
-  --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm);
-  --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base);
-  --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg);
-  --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm);
-  --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base);
-  --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3);
-  --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3);
-  --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width));
-  --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3);
-  --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base);
-  --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base));
-  --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base);
-  --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width);
-  --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2));
-  --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base));
-  --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2);
-  --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
-  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
-  --pgn-size-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
-  --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
-  --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
-  --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
-  --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
-  --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding));
-  --pgn-size-menu-item-border-width: var(--pgn-size-btn-border-width);
-  --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base);
-  --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border);
-  --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
-  --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm);
-  --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
-  --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
-  --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
-  --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
-  --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
+  /**
+   * TRANSITION
+   */
+  --pgn-transition-base:
+    var(--pgn-transition-base-property)
+    var(--pgn-transition-base-duration)
+    var(--pgn-transition-base-timing-function)
+    var(--pgn-transition-base-delay)
+    var(--pgn-transition-base-behavior);
+  --pgn-transition-fade:
+    var(--pgn-transition-fade-property)
+    var(--pgn-transition-fade-duration)
+    var(--pgn-transition-fade-timing-function)
+    var(--pgn-transition-fade-delay)
+    var(--pgn-transition-fade-behavior);
+  --pgn-transition-collapse-height:
+    var(--pgn-transition-collapse-height-property)
+    var(--pgn-transition-collapse-height-duration)
+    var(--pgn-transition-collapse-height-timing-function)
+    var(--pgn-transition-collapse-height-delay)
+    var(--pgn-transition-collapse-height-behavior);
+  --pgn-transition-collapse-width:
+    var(--pgn-transition-collapse-width-property)
+    var(--pgn-transition-collapse-width-duration)
+    var(--pgn-transition-collapse-width-timing-function)
+    var(--pgn-transition-collapse-width-delay)
+    var(--pgn-transition-collapse-width-behavior);
+  --pgn-transition-form-input:
+    var(--pgn-transition-form-input-1-property)
+    var(--pgn-transition-form-input-1-duration)
+    var(--pgn-transition-form-input-1-timing-function)
+    var(--pgn-transition-form-input-1-delay)
+    var(--pgn-transition-form-input-1-behavior),
+    var(--pgn-transition-form-input-2-property)
+    var(--pgn-transition-form-input-2-duration)
+    var(--pgn-transition-form-input-2-timing-function)
+    var(--pgn-transition-form-input-2-delay)
+    var(--pgn-transition-form-input-2-behavior);
+  --pgn-elevation-annotation-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-1-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-1-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-2-blur)
+      var(--pgn-elevation-annotation-box-shadow-2-color)
+    );
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay)
+    var(--pgn-transition-carousel-base-behavior);
+  --pgn-transition-carousel-indicator:
+    var(--pgn-transition-carousel-indicator-property)
+    var(--pgn-transition-carousel-indicator-duration)
+    var(--pgn-transition-carousel-indicator-timing-function)
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
+  --pgn-transition-carousel-control:
+    var(--pgn-transition-carousel-control-property)
+    var(--pgn-transition-carousel-control-duration)
+    var(--pgn-transition-carousel-control-timing-function)
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+  --pgn-spacing-dropdown-padding-header:
+    var(--pgn-spacing-dropdown-padding-header-y)
+    var(--pgn-spacing-dropdown-padding-header-x);
+  --pgn-elevation-form-control-select-border-focus:
+    var(--pgn-elevation-form-control-select-border-focus-offset-x)
+    var(--pgn-elevation-form-control-select-border-focus-offset-y)
+    var(--pgn-elevation-form-control-select-border-focus-blur)
+    var(--pgn-elevation-form-control-select-border-focus-spread)
+    var(--pgn-elevation-form-control-select-border-focus-color);
+  --pgn-elevation-form-control-file-focus:
+    var(--pgn-elevation-form-control-file-focus-offset-x)
+    var(--pgn-elevation-form-control-file-focus-offset-y)
+    var(--pgn-elevation-form-control-file-focus-blur)
+    var(--pgn-elevation-form-control-file-focus-spread)
+    var(--pgn-elevation-form-control-file-focus-color);
+  --pgn-transition-form-control:
+    var(--pgn-transition-form-control-1-property)
+    var(--pgn-transition-form-control-1-duration)
+    var(--pgn-transition-form-control-1-timing-function)
+    var(--pgn-transition-form-control-1-delay)
+    var(--pgn-transition-form-control-1-behavior),
+    var(--pgn-transition-form-control-2-property)
+    var(--pgn-transition-form-control-2-duration)
+    var(--pgn-transition-form-control-2-timing-function)
+    var(--pgn-transition-form-control-2-delay)
+    var(--pgn-transition-form-control-2-behavior),
+    var(--pgn-transition-form-control-3-property)
+    var(--pgn-transition-form-control-3-duration)
+    var(--pgn-transition-form-control-3-timing-function)
+    var(--pgn-transition-form-control-3-delay)
+    var(--pgn-transition-form-control-3-behavior);
+  --pgn-elevation-form-input-focus:
+    var(--pgn-elevation-form-input-focus-offset-x)
+    var(--pgn-elevation-form-input-focus-offset-y)
+    var(--pgn-elevation-form-input-focus-blur)
+    var(--pgn-elevation-form-input-focus-spread)
+    var(--pgn-elevation-form-input-focus-color);
+  --pgn-spacing-form-control-select-feedback-icon-position:
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-y)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-position-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-x)
+    var(--pgn-spacing-form-control-select-feedback-icon-position-offset-y);
+  --pgn-other-content-form-control-select-bg:
+    var(--pgn-other-content-form-control-select-bg-image)
+    var(--pgn-other-content-form-control-select-bg-position-x)
+    var(--pgn-other-content-form-control-select-bg-offset-y)
+    var(--pgn-other-content-form-control-select-bg-position-y)
+    / var(--pgn-other-content-form-control-select-bg-color);
+  --pgn-elevation-form-control-indicator-checked-focus:
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-x)
+    var(--pgn-elevation-form-control-indicator-checked-focus-offset-y)
+    var(--pgn-elevation-form-control-indicator-checked-focus-blur)
+    var(--pgn-elevation-form-control-indicator-checked-focus-spread)
+    var(--pgn-elevation-form-control-indicator-checked-focus-color);
+  --pgn-elevation-menu-box-shadow:
+    var(--pgn-elevation-menu-box-shadow-offset-x)
+    var(--pgn-elevation-menu-box-shadow-offset-y)
+    var(--pgn-elevation-menu-box-shadow-blur)
+    var(--pgn-elevation-menu-box-shadow-color);
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+  --pgn-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+  --pgn-elevation-data-table-box-shadow:
+    var(--pgn-elevation-data-table-box-shadow-offset-x)
+    var(--pgn-elevation-data-table-box-shadow-offset-y)
+    var(--pgn-elevation-data-table-box-shadow-blur)
+    var(--pgn-elevation-data-table-box-shadow-color);
+  --pgn-spacing-data-table-padding-cell:
+    var(--pgn-spacing-data-table-padding-cell-x)
+    var(--pgn-spacing-data-table-padding-cell-y);
+  --pgn-elevation-icon-button-box-shadow-primary-base:
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-base-color);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-primary-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-secondary-base:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-base-color);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-brand-base:
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-base-color);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-brand-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-success-base:
+    var(--pgn-elevation-icon-button-box-shadow-success-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-base-color);
+  --pgn-elevation-icon-button-box-shadow-success-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-success-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-warning-base:
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-base-color);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-warning-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-danger-base:
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-base-color);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-danger-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-light-base:
+    var(--pgn-elevation-icon-button-box-shadow-light-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-base-color);
+  --pgn-elevation-icon-button-box-shadow-light-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-light-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-dark-base:
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-base-color);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-dark-inverse-color);
+  --pgn-elevation-icon-button-box-shadow-black-base:
+    var(--pgn-elevation-icon-button-box-shadow-black-base-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-base-color);
+  --pgn-elevation-icon-button-box-shadow-black-inverse:
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-inset)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-x)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-offset-y)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-blur)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-spread)
+    var(--pgn-elevation-icon-button-box-shadow-black-inverse-color);
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+  --pgn-elevation-dropzone-hover:
+    var(--pgn-elevation-dropzone-hover-inset)
+    var(--pgn-elevation-dropzone-hover-offset-x)
+    var(--pgn-elevation-dropzone-hover-offset-y)
+    var(--pgn-elevation-dropzone-hover-blur)
+    var(--pgn-elevation-dropzone-hover-spread)
+    var(--pgn-elevation-dropzone-hover-color);
+  --pgn-elevation-dropzone-focus:
+    var(--pgn-elevation-dropzone-focus-inset)
+    var(--pgn-elevation-dropzone-focus-offset-x)
+    var(--pgn-elevation-dropzone-focus-offset-y)
+    var(--pgn-elevation-dropzone-focus-blur)
+    var(--pgn-elevation-dropzone-focus-spread)
+    var(--pgn-elevation-dropzone-focus-color);
+  --pgn-elevation-dropzone-error:
+    var(--pgn-elevation-dropzone-error-inset)
+    var(--pgn-elevation-dropzone-error-offset-x)
+    var(--pgn-elevation-dropzone-error-offset-y)
+    var(--pgn-elevation-dropzone-error-blur)
+    var(--pgn-elevation-dropzone-error-spread)
+    var(--pgn-elevation-dropzone-error-color);
+  --pgn-elevation-dropzone-active:
+    var(--pgn-elevation-dropzone-active-inset)
+    var(--pgn-elevation-dropzone-active-offset-x)
+    var(--pgn-elevation-dropzone-active-offset-y)
+    var(--pgn-elevation-dropzone-active-blur)
+    var(--pgn-elevation-dropzone-active-spread)
+    var(--pgn-elevation-dropzone-active-color);
 }
 *,
 *::before,
@@ -957,50 +1379,50 @@ h1, h2, h3, h4, h5, h6,
   color: var(--pgn-color-headings-base);
 }
 h1, .h1 {
-  font-size: var(--pgn-typography-font-size-h1);
+  font-size: var(--pgn-typography-font-size-h1-base);
 }
 h2, .h2 {
-  font-size: var(--pgn-typography-font-size-h2);
+  font-size: var(--pgn-typography-font-size-h2-base);
 }
 h3, .h3 {
-  font-size: var(--pgn-typography-font-size-h3);
+  font-size: var(--pgn-typography-font-size-h3-base);
 }
 h4, .h4 {
-  font-size: var(--pgn-typography-font-size-h4);
+  font-size: var(--pgn-typography-font-size-h4-base);
 }
 h5, .h5 {
-  font-size: var(--pgn-typography-font-size-h5);
+  font-size: var(--pgn-typography-font-size-h5-base);
 }
 h6, .h6 {
-  font-size: var(--pgn-typography-font-size-h6);
+  font-size: var(--pgn-typography-font-size-h6-base);
 }
 .lead {
-  font-size: var(--pgn-typography-font-size-lead);
+  font-size: var(--pgn-typography-font-size-lg);
   font-weight: var(--pgn-typography-font-weight-lead);
 }
 .display-1 {
-  font-size: var(--pgn-typography-display-1);
-  font-weight: var(--pgn-typography-display-weight-1);
-  line-height: var(--pgn-typography-display-line-height-base);
+  font-size: var(--pgn-typography-font-size-display-1);
+  font-weight: var(--pgn-typography-font-weight-display-1);
+  line-height: var(--pgn-typography-line-height-display-base);
 }
 .display-2 {
-  font-size: var(--pgn-typography-display-2);
-  font-weight: var(--pgn-typography-display-weight-2);
-  line-height: var(--pgn-typography-display-line-height-base);
+  font-size: var(--pgn-typography-font-size-display-2);
+  font-weight: var(--pgn-typography-font-weight-display-2);
+  line-height: var(--pgn-typography-line-height-display-base);
 }
 .display-3 {
-  font-size: var(--pgn-typography-display-3);
-  font-weight: var(--pgn-typography-display-weight-3);
-  line-height: var(--pgn-typography-display-line-height-base);
+  font-size: var(--pgn-typography-font-size-display-3);
+  font-weight: var(--pgn-typography-font-weight-display-3);
+  line-height: var(--pgn-typography-line-height-display-base);
 }
 .display-4 {
-  font-size: var(--pgn-typography-display-4);
-  font-weight: var(--pgn-typography-display-weight-4);
-  line-height: var(--pgn-typography-display-line-height-base);
+  font-size: var(--pgn-typography-font-size-display-4);
+  font-weight: var(--pgn-typography-font-weight-display-4);
+  line-height: var(--pgn-typography-line-height-display-base);
 }
 small,
 .small {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   font-weight: var(--pgn-typography-font-weight-normal);
 }
 mark,
@@ -1039,68 +1461,86 @@ mark,
   content: "— ";
 }
 @media (max-width: 576px) {
-  .display-1,
-  .display-2,
-  .display-3,
+  .display-1 {
+    font-size: var(--pgn-typography-font-size-display-mobile-1);
+    line-height: var(--pgn-typography-line-height-display-mobile);
+  }
+  .display-2 {
+    font-size: var(--pgn-typography-font-size-display-mobile-2);
+    line-height: var(--pgn-typography-line-height-display-mobile);
+  }
+  .display-3 {
+    font-size: var(--pgn-typography-font-size-display-mobile-3);
+    line-height: var(--pgn-typography-line-height-display-mobile);
+  }
   .display-4 {
-    font-size: var(--pgn-typography-display-mobile);
-    line-height: var(--pgn-typography-display-line-height-mobile);
+    font-size: var(--pgn-typography-font-size-display-mobile-4);
+    line-height: var(--pgn-typography-line-height-display-mobile);
   }
   h1,
   .h1 {
-    font-size: var(--pgn-typography-font-size-mobile-h1);
+    font-size: var(--pgn-typography-font-size-h1-mobile);
   }
   h2,
   .h2 {
-    font-size: var(--pgn-typography-font-size-mobile-h2);
+    font-size: var(--pgn-typography-font-size-h2-mobile);
   }
   h3,
   .h3 {
-    font-size: var(--pgn-typography-font-size-mobile-h3);
+    font-size: var(--pgn-typography-font-size-h3-mobile);
   }
   h4,
   .h4 {
-    font-size: var(--pgn-typography-font-size-mobile-h4);
+    font-size: var(--pgn-typography-font-size-h4-mobile);
   }
   h5,
   .h5 {
-    font-size: var(--pgn-typography-font-size-mobile-h5);
+    font-size: var(--pgn-typography-font-size-h5-mobile);
   }
   h6,
   .h6 {
-    font-size: var(--pgn-typography-font-size-mobile-h6);
+    font-size: var(--pgn-typography-font-size-h6-mobile);
   }
 }
-.mobile-type .display-1,
-.mobile-type .display-2,
-.mobile-type .display-3,
+.mobile-type .display-1 {
+  font-size: var(--pgn-typography-font-size-display-mobile-1);
+  line-height: var(--pgn-typography-line-height-display-mobile);
+}
+.mobile-type .display-2 {
+  font-size: var(--pgn-typography-font-size-display-mobile-2);
+  line-height: var(--pgn-typography-line-height-display-mobile);
+}
+.mobile-type .display-3 {
+  font-size: var(--pgn-typography-font-size-display-mobile-3);
+  line-height: var(--pgn-typography-line-height-display-mobile);
+}
 .mobile-type .display-4 {
-  font-size: var(--pgn-typography-display-mobile);
-  line-height: var(--pgn-typography-display-line-height-mobile);
+  font-size: var(--pgn-typography-font-size-display-mobile-4);
+  line-height: var(--pgn-typography-line-height-display-mobile);
 }
 .mobile-type h1,
 .mobile-type .h1 {
-  font-size: var(--pgn-typography-font-size-mobile-h1);
+  font-size: var(--pgn-typography-font-size-h1-mobile);
 }
 .mobile-type h2,
 .mobile-type .h2 {
-  font-size: var(--pgn-typography-font-size-mobile-h2);
+  font-size: var(--pgn-typography-font-size-h2-mobile);
 }
 .mobile-type h3,
 .mobile-type .h3 {
-  font-size: var(--pgn-typography-font-size-mobile-h3);
+  font-size: var(--pgn-typography-font-size-h3-mobile);
 }
 .mobile-type h4,
 .mobile-type .h4 {
-  font-size: var(--pgn-typography-font-size-mobile-h4);
+  font-size: var(--pgn-typography-font-size-h4-mobile);
 }
 .mobile-type h5,
 .mobile-type .h5 {
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
 }
 .mobile-type h6,
 .mobile-type .h6 {
-  font-size: var(--pgn-typography-font-size-mobile-h6);
+  font-size: var(--pgn-typography-font-size-h6-mobile);
 }
 .heading-label {
   text-transform: uppercase;
@@ -3275,7 +3715,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
   box-shadow: var(--pgn-elevation-box-shadow-sm) !important;
 }
 .shadow {
-  box-shadow: var(--pgn-elevation-box-shadow-base) !important;
+  box-shadow: var(--pgn-elevation-box-shadow-base-offset-x) var(--pgn-elevation-box-shadow-base-offset-y) var(--pgn-elevation-box-shadow-base-blur) var(--pgn-elevation-box-shadow-base-color) !important;
 }
 .shadow-lg {
   box-shadow: var(--pgn-elevation-box-shadow-lg) !important;
@@ -7676,12 +8116,15 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
   border-radius: 0 !important;
 }
 .x-small {
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs) !important;
 }
 .micro {
-  font-size: var(--pgn-typography-font-size-micro);
+  font-size: var(--pgn-typography-font-size-micro) !important;
   font-weight: normal;
-  line-height: var(--pgn-typography-line-height-micro);
+  line-height: var(--pgn-typography-line-height-micro) !important;
+}
+.font-size-normal {
+  font-size: var(--pgn-typography-font-size-base) !important;
 }
 .mw-xs {
   max-width: var(--pgn-size-container-max-width-xs) !important;
@@ -8497,16 +8940,14 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
   }
 }
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Wed, 15 May 2024 12:30:36 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 22 Sep 2023 08:20:17 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
-@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px);
 @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
 @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
 @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);
@@ -10490,10 +10931,10 @@ a.pgn__card {
   text-align: start;
 }
 .pgn__card .pgn__card-header .pgn__card-header-title-sm {
-  font-size: var(--pgn-typography-font-size-h4);
+  font-size: var(--pgn-typography-font-size-h4-base);
 }
 .pgn__card .pgn__card-header .pgn__card-header-title-md {
-  font-size: var(--pgn-typography-font-size-h3);
+  font-size: var(--pgn-typography-font-size-h3-base);
 }
 .pgn__card .pgn__card-header .pgn__card-header-subtitle,
 .pgn__card .pgn__card-header .pgn__card-header-subtitle-sm,
@@ -10502,10 +10943,10 @@ a.pgn__card {
   margin-top: calc(var(--pgn-spacing-spacer-base) * .25);
 }
 .pgn__card .pgn__card-header .pgn__card-header-subtitle-sm {
-  font-size: var(--pgn-typography-font-size-h5);
+  font-size: var(--pgn-typography-font-size-h5-base);
 }
 .pgn__card .pgn__card-header .pgn__card-header-subtitle-md {
-  font-size: var(--pgn-typography-font-size-h4);
+  font-size: var(--pgn-typography-font-size-h4-base);
 }
 .pgn__card .pgn__card-header .pgn__card-header-actions {
   margin-top: var(--pgn-spacing-spacer-base);
@@ -10595,7 +11036,7 @@ a.pgn__card {
 .pgn__card .pgn__card-section .pgn__card-section-title {
   color: var(--pgn-color-black);
   font-weight: var(--pgn-typography-font-weight-bold);
-  font-size: var(--pgn-typography-font-size-h5);
+  font-size: var(--pgn-typography-font-size-h5-base);
   margin-bottom: var(--pgn-spacing-card-spacer-y);
 }
 .pgn__card .pgn__card-section .pgn__card-section-actions {
@@ -10691,7 +11132,7 @@ a.pgn__card {
   margin-top: var(--pgn-spacing-spacer-base);
 }
 .pgn__card .pgn__card-status .pgn__card-status__heading {
-  font-size: var(--pgn-typography-font-size-h4);
+  font-size: var(--pgn-typography-font-size-h4-base);
   color: var(--pgn-color-black);
   display: flex;
   font-weight: var(--pgn-typography-font-weight-bold);
@@ -10953,7 +11394,7 @@ a.pgn__card {
 .carousel-fade .active.carousel-item-right {
   z-index: 0;
   opacity: 0;
-  transition: opacity 0s var(--pgn-transition-carousel-base);
+  transition: var(--pgn-transition-carousel-base);
 }
 .carousel-control-prev,
 .carousel-control-next {
@@ -12587,7 +13028,7 @@ textarea.form-control {
   transition: var(--pgn-transition-form-control);
 }
 .pgn__form-text {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   display: flex;
   align-items: center;
 }
@@ -13359,7 +13800,7 @@ select.form-control {
   margin-top: 0;
 }
 .pgn__modal-header .pgn__modal-title {
-  font-size: var(--pgn-typography-font-size-h3);
+  font-size: var(--pgn-typography-font-size-h3-base);
   margin-inline-end: 3rem;
   text-align: start;
 }
@@ -13490,7 +13931,7 @@ select.form-control {
   color: var(--pgn-color-danger-500);
 }
 .pgn__alert-modal .pgn__modal-title {
-  font-size: var(--pgn-typography-font-size-h4);
+  font-size: var(--pgn-typography-font-size-h4-base);
   display: flex;
   flex-grow: 1;
   align-items: center;
@@ -14352,13 +14793,13 @@ select.form-control {
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 }
 @media (min-width: 768px) {
   .pgn__pageBanner-component {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 .pgn__pageBanner__dark {
@@ -14695,7 +15136,7 @@ select.form-control {
 .popover .popover-header {
   display: flex;
   align-items: center;
-  font-size: var(--pgn-typography-font-size-h5);
+  font-size: var(--pgn-typography-font-size-h5-base);
 }
 .popover .pgn__icon {
   margin-inline-end: var(--pgn-spacing-popover-icon-margin-right);
@@ -14787,7 +15228,7 @@ select.form-control {
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
   font-size: var(--pgn-typography-progress-bar-font-size);
   border-radius: var(--pgn-size-progress-bar-border-radius);
@@ -14798,11 +15239,11 @@ select.form-control {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  transition: var(--pgn-transition-progress-bar-bar-transition);
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  transition: var(--pgn-transition-progress-bar-transition);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 @media (prefers-reduced-motion: reduce) {
   .progress-bar {
@@ -14814,7 +15255,7 @@ select.form-control {
   background-size: var(--pgn-size-progress-bar-height-base) var(--pgn-size-progress-bar-height-base);
 }
 .progress-bar-animated {
-  animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+  animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 }
 @media (prefers-reduced-motion: reduce) {
   .progress-bar-animated {
@@ -14834,7 +15275,7 @@ select.form-control {
   border: none;
 }
 .pgn__progress-annotated .progress .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+  background-color: var(--pgn-color-progress-bar-bg-annotated);
   overflow: visible;
   position: relative;
 }
@@ -14950,7 +15391,7 @@ select.form-control {
 .pgn__progress-annotated .pgn__progress-hint {
   box-sizing: border-box;
   padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
 }
 .pgn__searchfield {
   transition: var(--pgn-transition-form-input);
@@ -15260,7 +15701,7 @@ select.form-control {
   text-overflow: ellipsis;
 }
 .pgn__stepper-header .pgn__stepper-header-step .pgn__stepper-header-step-description {
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
 }
 .pgn__stepper-header .pgn__stepper-header-step.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
   color: var(--pgn-color-stepper-header-step-bg-active);
@@ -16123,7 +16564,7 @@ select.form-control {
   padding: 0;
 }
 .toast .toast-header p {
-  font-size: var(--pgn-typography-font-size-small-base);
+  font-size: var(--pgn-typography-font-size-sm);
   margin: 0;
   padding-right: 0.75rem;
 }
@@ -16340,7 +16781,7 @@ select.form-control {
   margin-bottom: calc(var(--pgn-spacing-spacer-base) * .75);
 }
 .pgn__checkpoint #pgn__checkpoint-title {
-  font-size: var(--pgn-typography-font-size-h3);
+  font-size: var(--pgn-typography-font-size-h3-base);
   margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .75);
   margin-bottom: 0;
 }
@@ -16755,7 +17196,7 @@ select.form-control {
 }
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
   padding: 0.5rem;
   margin-bottom: 0 !important;
 }