diff --git a/package-lock.json b/package-lock.json
index 4fc1dcb1904..1c7ad1c5195 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@edx/paragon",
-  "version": "21.0.0-alpha.22",
+  "version": "20.18.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@edx/paragon",
-      "version": "21.0.0-alpha.22",
+      "version": "20.18.1",
       "license": "Apache-2.0",
       "workspaces": [
         "example",
@@ -2464,11 +2464,6 @@
         }
       }
     },
-    "node_modules/@edx/brand-edx.org": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/brand-edx.org/-/brand-edx.org-2.1.1.tgz",
-      "integrity": "sha512-5W9aqss8NTGYUWuBDbxSGs4l6ysSv7ExPFFtNXVFten+Osh5gnGQ+KcvRbkEQhcqFuYNz3QUD72C9Q1axCs/MQ=="
-    },
     "node_modules/@edx/brand-openedx": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz",
@@ -44334,7 +44329,6 @@
       "license": "MIT",
       "dependencies": {
         "@docsearch/react": "^3.1.0",
-        "@edx/brand-edx.org": "^2.0.6",
         "@edx/brand-openedx": "^1.1.0",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@mdx-js/mdx": "^1.6.22",
@@ -44375,7 +44369,9 @@
         "@types/react-helmet": "^6.1.6",
         "css": "^3.0.0",
         "eslint": "8.18.0",
-        "eslint-import-resolver-webpack": "^0.13.2"
+        "eslint-import-resolver-webpack": "^0.13.2",
+        "postcss": "^8.4.21",
+        "postcss-custom-media": "^9.1.2"
       }
     }
   },
@@ -45943,11 +45939,6 @@
         "algoliasearch": "^4.0.0"
       }
     },
-    "@edx/brand-edx.org": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/brand-edx.org/-/brand-edx.org-2.1.1.tgz",
-      "integrity": "sha512-5W9aqss8NTGYUWuBDbxSGs4l6ysSv7ExPFFtNXVFten+Osh5gnGQ+KcvRbkEQhcqFuYNz3QUD72C9Q1axCs/MQ=="
-    },
     "@edx/brand-openedx": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.2.0.tgz",
@@ -70138,7 +70129,6 @@
       "version": "file:www",
       "requires": {
         "@docsearch/react": "^3.1.0",
-        "@edx/brand-edx.org": "^2.0.6",
         "@edx/brand-openedx": "^1.1.0",
         "@edx/eslint-config": "^3.1.0",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -70165,6 +70155,8 @@
         "gatsby-source-filesystem": "^4.17.0",
         "gatsby-transformer-react-docgen": "^7.17.0",
         "lodash.debounce": "^4.0.8",
+        "postcss": "^8.4.21",
+        "postcss-custom-media": "^9.1.2",
         "prism-react-renderer": "^1.3.3",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
index 824009c64d4..bcd6f0a1a86 100644
--- a/src/Card/Card.scss
+++ b/src/Card/Card.scss
@@ -467,7 +467,7 @@ a .pgn__card {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, "sm")) {
+@media (--max-pgn-size-breakpoint-xs) {
   .pgn__card-footer {
     &.horizontal > :not(:last-child) {
       margin-inline-end: 0;
diff --git a/src/ColorPicker/ColorPicker.scss b/src/ColorPicker/ColorPicker.scss
index a9139304b18..227d6e39d6b 100644
--- a/src/ColorPicker/ColorPicker.scss
+++ b/src/ColorPicker/ColorPicker.scss
@@ -1,7 +1,7 @@
 @import "variables";
 
 .pgn__color-picker {
-  box-shadow: 0 0 3px 1px $gray-300;
+  box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
   border: none;
   background:
     linear-gradient(to bottom right,
@@ -15,18 +15,18 @@
   );
 
   &.pgn__color-picker-sm {
-    height: $picker-size-sm;
-    width: $picker-size-sm;
+    height: var(--pgn-size-color-picker-sm);
+    width: var(--pgn-size-color-picker-sm);
   }
 
   &.pgn__color-picker-md {
-    height: $picker-size-md;
-    width: $picker-size-md;
+    height: var(--pgn-size-color-picker-md);
+    width: var(--pgn-size-color-picker-md);
   }
 }
 
 .pgn__color-modal {
-  background: $white;
+  background: var(--pgn-color-white);
   padding-bottom: .1rem;
   margin-bottom: 1rem;
 }
@@ -45,7 +45,7 @@
   }
 
   .form-field {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--min-pgn-size-breakpoint-sm) {
       margin-inline-end: 0;
     }
   }
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
index 70cba9c180f..3fa7d144740 100644
--- a/src/DataTable/DataTable.scss
+++ b/src/DataTable/DataTable.scss
@@ -86,7 +86,7 @@
   display: flex;
   align-items: flex-start;
 
-  @media (max-width: var(--pgn-size-container-max-width-xl)) {
+  @media (--max-pgn-size-breakpoint-xl) {
     overflow-x: scroll;
   }
 
@@ -96,7 +96,7 @@
     box-shadow: var(--pgn-elevation-data-table-box-shadow);
     padding: var(--pgn-spacing-data-table-padding-small);
     margin-right: map_get($spacers, 4);
-    flex: 0 0 $data-table-layout-sidebar-width;
+    flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
   }
 
   .pgn__data-table-side-filters {
diff --git a/src/Form/_Form.scss b/src/Form/_Form.scss
index 72446b4259c..e326a4d2ef5 100644
--- a/src/Form/_Form.scss
+++ b/src/Form/_Form.scss
@@ -43,7 +43,7 @@
   flex-grow: 1;
   align-items: flex-start;
 
-  @media (min-width: map-get($grid-breakpoints, "sm")) {
+  @media (--min-pgn-size-breakpoint-sm) {
     margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }
 
@@ -523,13 +523,13 @@ select.form-control {
 .pgn__form-checkbox {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-invalid-checked);
+      background-image: escape-svg(var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid));
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-checkbox-indicator-icon-valid-checked);
+      background-image: escape-svg(var(--pgn-other-content-form-control-checkbox-indicator-icon-checked-valid));
     }
   }
 }
@@ -537,13 +537,13 @@ select.form-control {
 .pgn__form-radio {
   &.pgn__form-control-invalid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-invalid-checked);
+      background-image: escape-svg(var(--pgn-other-content-form-control-radio-indicator-icon-checked-invalid));
     }
   }
 
   &.pgn__form-control-valid input {
     &:checked {
-      background-image: escape-svg($custom-radio-indicator-icon-valid-checked);
+      background-image: escape-svg(var(--pgn-other-content-form-control-radio-indicator-icon-checked-valid));
     }
   }
 }
@@ -597,7 +597,7 @@ select.form-control {
   .pgn__form-autosuggest__dropdown {
     @include pgn-box-shadow(1, "centered");
 
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--min-pgn-size-breakpoint-sm) {
       margin-inline-end: var(--pgn-spacing-form-control-gutter);
     }
 
diff --git a/src/Icon/Icon.scss b/src/Icon/Icon.scss
index e5ee8a930d1..af04a382bda 100644
--- a/src/Icon/Icon.scss
+++ b/src/Icon/Icon.scss
@@ -11,8 +11,8 @@
   }
 
   &.pgn__icon__xs {
-    width: $icon-xs;
-    height: $icon-xs;
+    width: var(--pgn-size-icon-xs);
+    height: var(--pgn-size-icon-xs);
   }
 
   &.pgn__icon__sm {
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index e3910d99129..426113bf679 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -287,19 +287,19 @@
 
   &.pgn__modal-warning {
     .pgn__alert-modal__title_icon {
-      color: $warning-500;
+      color: var(--pgn-color-warning-500);
     }
   }
 
   &.pgn__modal-success {
     .pgn__alert-modal__title_icon {
-      color: $success-500;
+      color: var(--pgn-color-success-500);
     }
   }
 
   &.pgn__modal-danger {
     .pgn__alert-modal__title_icon {
-      color: $danger-500;
+      color: var(--pgn-color-danger-500);
     }
   }
 
diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss
index 3c5aabf019f..93b754edb8b 100644
--- a/src/Popover/popover-bootstrap.scss
+++ b/src/Popover/popover-bootstrap.scss
@@ -39,7 +39,7 @@
   margin-bottom: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    bottom: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    bottom: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
 
     &::before {
       bottom: 0;
@@ -59,7 +59,7 @@
   margin-left: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    left: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    left: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
     width: var(--pgn-size-popover-arrow-height);
     height: var(--pgn-size-popover-arrow-width);
     margin: var(--pgn-size-popover-border-radius) 0;
@@ -88,7 +88,7 @@
   margin-top: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    top: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    top: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
 
     &::before {
       top: 0;
@@ -126,7 +126,7 @@
   margin-right: var(--pgn-size-popover-arrow-height);
 
   > .arrow {
-    right: calc(-1 * (var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    right: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
     width: var(--pgn-size-popover-arrow-height);
     height: var(--pgn-size-popover-arrow-width);
     margin: var(--pgn-size-popover-border-radius) 0;
@@ -185,7 +185,7 @@
   background-color: var(--pgn-color-popover-header-bg);
   border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-border-bottom-dark);
 
-  @include border-top-radius(calc(var(--pgn-popover-border-radius) - var(--pgn-popover-border-border)));
+  @include border-top-radius(calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)));
 
   &:empty {
     display: none;
diff --git a/src/ProductTour/Checkpoint.scss b/src/ProductTour/Checkpoint.scss
index 62ceaa25b30..4c80dc8f6fe 100644
--- a/src/ProductTour/Checkpoint.scss
+++ b/src/ProductTour/Checkpoint.scss
@@ -10,7 +10,7 @@
   z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
   max-width: var(--pgn-size-product-tour-checkpoint-width-max);
 
-  @media (max-width: map-get($grid-breakpoints, "md")) {
+  @media (--max-pgn-size-breakpoint-sm) {
     min-width: 90%;
     max-width: 90%;
   }
diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss
index dc9385e66cc..fa6775d30e9 100644
--- a/src/Toast/Toast.scss
+++ b/src/Toast/Toast.scss
@@ -41,11 +41,11 @@
     }
   }
 
-  @media only screen and (max-width: 768px) {
+  @media (--max-pgn-size-breakpoint-sm) {
     max-width: 100%;
   }
 
-  @media only screen and (min-width: 768px) {
+  @media (--min-pgn-size-breakpoint-md) {
     min-width: var(--pgn-size-toast-max-width);
     max-width: var(--pgn-size-toast-max-width);
   }
diff --git a/src/Toast/ToastContainer.scss b/src/Toast/ToastContainer.scss
index eb84d7b52d1..18b84d2030c 100644
--- a/src/Toast/ToastContainer.scss
+++ b/src/Toast/ToastContainer.scss
@@ -9,7 +9,7 @@
     left: 0;
   }
 
-  @media only screen and (max-width: 768px) {
+  @media (--max-pgn-size-breakpoint-sm) {
     bottom: var(--pgn-spacing-toast-container-gutter-sm);
     right: var(--pgn-spacing-toast-container-gutter-sm);
     left: var(--pgn-spacing-toast-container-gutter-sm);
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
index 710fd969928..33aede59d1a 100644
--- a/styles/css/core/custom-media-breakpoints.css
+++ b/styles/css/core/custom-media-breakpoints.css
@@ -1,12 +1,17 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 12:12:55 GMT
+ * Generated on Fri, 28 Apr 2023 06:59:15 GMT
  */
 
-@custom-media --pgn-size-breakpoint-xs (min-width: 0);
-@custom-media --pgn-size-breakpoint-sm (min-width: 576px);
-@custom-media --pgn-size-breakpoint-md (min-width: 768px);
-@custom-media --pgn-size-breakpoint-lg (min-width: 992px);
-@custom-media --pgn-size-breakpoint-xl (min-width: 1200px);
-@custom-media --pgn-size-breakpoint-xxl (min-width: 1400px);
+@custom-media --min-pgn-size-breakpoint-xs (min-width: 0);
+@custom-media --max-pgn-size-breakpoint-xs (max-width: 576px);
+@custom-media --min-pgn-size-breakpoint-sm (min-width: 576px);
+@custom-media --max-pgn-size-breakpoint-sm (max-width: 768px);
+@custom-media --min-pgn-size-breakpoint-md (min-width: 768px);
+@custom-media --max-pgn-size-breakpoint-md (max-width: 992px);
+@custom-media --min-pgn-size-breakpoint-lg (min-width: 992px);
+@custom-media --max-pgn-size-breakpoint-lg (max-width: 1200px);
+@custom-media --min-pgn-size-breakpoint-xl (min-width: 1200px);
+@custom-media --max-pgn-size-breakpoint-xl (max-width: 1400px);
+@custom-media --min-pgn-size-breakpoint-xxl (min-width: 1400px);
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 210ab76f752..97243d8e026 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,11 +1,13 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 12:12:55 GMT
+ * Generated on Fri, 28 Apr 2023 06:59:15 GMT
  */
 
 :root {
   --pgn-theme-interval: 8%;
+  --pgn-other-form-control-custom-file-content: Browse;
+  --pgn-other-form-control-custom-file-lang: en;
   --pgn-other-form-control-range-track-cursor: pointer;
   --pgn-other-form-control-cursor: auto;
   --pgn-elevation-zindex-fixed: 1030;
@@ -78,6 +80,7 @@
   --pgn-typography-toast-font-size: .875rem;
   --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-image-figure-caption-font-size: 90%;
   --pgn-typography-link-decoration-brand-inline-hover: underline;
@@ -100,6 +103,7 @@
   --pgn-typography-input-btn-font-family: inherit;
   --pgn-typography-headings-line-height: 1.25;
   --pgn-typography-headings-font-family: inherit;
+  --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-code-font-size: 87.5%;
   --pgn-typography-breadcrumb-font-size: inherit;
   --pgn-typography-badge-font-size: 75%;
@@ -176,8 +180,8 @@
   --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: .5rem;
-  --pgn-spacing-dropdown-padding-y-base: .25rem;
+  --pgn-spacing-dropdown-padding-y-item: .25rem;
+  --pgn-spacing-dropdown-padding-y-base: .5rem;
   --pgn-spacing-dropdown-padding-x-item: 1rem;
   --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
@@ -478,7 +482,7 @@
   --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);
+  --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);
diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
index c93af96b013..799d6bcf8f5 100644
--- a/styles/css/themes/light/utility-classes.css
+++ b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 12:12:55 GMT
+ * Generated on Fri, 28 Apr 2023 06:59:15 GMT
  */
 
 .bg-accent-a {
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index f0014156d05..88fcbd12604 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Apr 2023 12:12:55 GMT
+ * Generated on Fri, 28 Apr 2023 06:59:15 GMT
  */
 
 :root {
@@ -31,17 +31,17 @@
   --pgn-color-progress-bar-bg: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-popover-border: #00000033;
+  --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
   --pgn-color-menu-border-hover: #00000000;
   --pgn-color-menu-border-active: #00000000;
   --pgn-color-menu-border-base: #00000000;
-  --pgn-color-icon-button-bg: #00000000;
+  --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
+  --pgn-color-icon-button-bg-base: #00000000;
   --pgn-color-mark-bg: #FFF243FF;
   --pgn-color-list-group-base: inherit;
   --pgn-color-form-control-select-bg-size: #000000FF;
   --pgn-color-form-control-label-base: inherit;
   --pgn-color-code-base: #E83E8CFF;
-  --pgn-color-carousel-control-opacity-hover: #000000FF;
-  --pgn-color-carousel-control-opacity-base: #000000FF;
   --pgn-color-card-base: inherit;
   --pgn-color-btn-disabled-border-inverse-warning: #00000000;
   --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
@@ -181,6 +181,8 @@
   --pgn-other-modal-opacity: .5;
   --pgn-other-link-emphasized-hover-darken-percentage: 15%;
   --pgn-other-chip-opacity-disabled: .3;
+  --pgn-other-carousel-control-opacity-hover: .9;
+  --pgn-other-carousel-control-opacity-base: .5;
   --pgn-other-btn-disabled-opacity: .65;
   --pgn-other-form-feedback-tooltip-opacity: .9;
   --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15);
@@ -220,6 +222,24 @@
   --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
+  --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-black-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-dark-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-light-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-danger-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-warning-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-success-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-brand-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-secondary-active: none;
+  --pgn-elevation-icon-button-box-shadow-primary-inverse-active: none;
+  --pgn-elevation-icon-button-box-shadow-primary-active: none;
   --pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075);
   --pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1);
   --pgn-elevation-form-control-range-track: inset 0 .25rem .25rem rgba(0, 0, 0, .1);
@@ -324,6 +344,13 @@
   --pgn-color-pagination-bg-disabled: var(--pgn-color-white);
   --pgn-color-pagination-bg-hover: var(--pgn-color-gray-100);
   --pgn-color-pagination-text-inverse: var(--pgn-color-white);
+  --pgn-color-page-banner-text-warning: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-b: var(--pgn-color-black);
+  --pgn-color-page-banner-text-accent-a: var(--pgn-color-black);
+  --pgn-color-page-banner-text-light: var(--pgn-color-black);
+  --pgn-color-page-banner-text-dark: var(--pgn-color-white);
+  --pgn-color-page-banner-bg-accent-b: var(--pgn-color-accent-b);
+  --pgn-color-page-banner-bg-accent-a: var(--pgn-color-accent-a);
   --pgn-color-navbar-light-toggler-border: #0000001A;
   --pgn-color-navbar-light-disabled: #0000004D;
   --pgn-color-navbar-light-active: #000000E6;
@@ -342,11 +369,65 @@
   --pgn-color-modal-content-border: #00000033;
   --pgn-color-image-thumbnail-border: var(--pgn-color-gray-200);
   --pgn-color-icon-button-black: var(--pgn-color-black);
-  --pgn-color-icon-button-dark: var(--pgn-color-dark-base);
-  --pgn-color-icon-button-light: var(--pgn-color-light-base);
-  --pgn-color-icon-button-brand: var(--pgn-color-brand-base);
-  --pgn-color-icon-button-primary: var(--pgn-color-primary-base);
   --pgn-color-icon-button-accent: var(--pgn-color-white);
+  --pgn-color-icon-button-text-black-inverse-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-inverse-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-text-black-base: var(--pgn-color-black);
+  --pgn-color-icon-button-text-dark-inverse-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-dark-inverse-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-dark-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-text-light-inverse-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-inverse-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-light-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-text-brand-inverse-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-brand-inverse-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-brand-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-text-primary-base: var(--pgn-color-primary-base);
+  --pgn-color-icon-button-bg-black-active-base: var(--pgn-color-black);
+  --pgn-color-icon-button-bg-black-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-black-hover: var(--pgn-color-black);
+  --pgn-color-icon-button-bg-black-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-active-base: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-dark-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-dark-hover: var(--pgn-color-dark-base);
+  --pgn-color-icon-button-bg-dark-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-active-base: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-light-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-light-hover: var(--pgn-color-light-base);
+  --pgn-color-icon-button-bg-light-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-danger-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-warning-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-success-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-active-base: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-brand-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-brand-hover: var(--pgn-color-brand-base);
+  --pgn-color-icon-button-bg-brand-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-secondary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-active-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
   --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
   --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
@@ -485,6 +566,24 @@
   --pgn-color-text-50-black: #00000080;
   --pgn-color-bg-base: var(--pgn-color-white);
   --pgn-elevation-scrollable-body-box-shadow: #0000008C;
+  --pgn-elevation-icon-button-box-shadow-black-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-black-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-black-base);
+  --pgn-elevation-icon-button-box-shadow-dark-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-dark-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-dark-base);
+  --pgn-elevation-icon-button-box-shadow-light-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-light-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-light-base);
+  --pgn-elevation-icon-button-box-shadow-danger-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-danger-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-danger-base);
+  --pgn-elevation-icon-button-box-shadow-warning-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-warning-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-warning-base);
+  --pgn-elevation-icon-button-box-shadow-success-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-success-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-success-base);
+  --pgn-elevation-icon-button-box-shadow-brand-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-brand-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-brand-base);
+  --pgn-elevation-icon-button-box-shadow-secondary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-secondary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
+  --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
@@ -597,6 +696,8 @@
   --pgn-color-pagination-focus-base: var(--pgn-color-primary-500);
   --pgn-color-pagination-bg-base: var(--pgn-color-bg-base);
   --pgn-color-pagination-text-active: var(--pgn-color-active);
+  --pgn-color-page-banner-bg-light: var(--pgn-color-light-400);
+  --pgn-color-page-banner-bg-dark: var(--pgn-color-dark-500);
   --pgn-color-navbar-light-brand-hover: var(--pgn-color-navbar-light-active);
   --pgn-color-navbar-light-brand-text: var(--pgn-color-navbar-light-active);
   --pgn-color-navbar-dark-active: var(--pgn-color-active);
@@ -606,10 +707,143 @@
   --pgn-color-nav-tabs-border: var(--pgn-color-light-400);
   --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
   --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
-  --pgn-color-icon-button-danger: var(--pgn-color-danger-base);
-  --pgn-color-icon-button-warning: var(--pgn-color-warning-base);
-  --pgn-color-icon-button-success: var(--pgn-color-success-base);
-  --pgn-color-icon-button-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-icon-button-text-black-inverse-active-hover: var(--pgn-color-icon-button-text-black-inverse-active-base);
+  --pgn-color-icon-button-text-black-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-black-focus: var(--pgn-color-icon-button-text-black-base);
+  --pgn-color-icon-button-text-black-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-active-focus: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-dark-inverse-active-hover: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+  --pgn-color-icon-button-text-dark-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-dark-focus: var(--pgn-color-icon-button-text-dark-base);
+  --pgn-color-icon-button-text-dark-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-active-focus: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-light-inverse-active-hover: var(--pgn-color-icon-button-text-light-inverse-active-base);
+  --pgn-color-icon-button-text-light-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-light-focus: var(--pgn-color-icon-button-text-light-base);
+  --pgn-color-icon-button-text-light-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-danger-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-inverse-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-danger-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-danger-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-text-warning-inverse-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-inverse-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-warning-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-warning-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-text-success-inverse-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-success-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-inverse-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-success-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-success-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-text-brand-inverse-active-focus: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-brand-inverse-active-hover: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+  --pgn-color-icon-button-text-brand-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-brand-focus: var(--pgn-color-icon-button-text-brand-base);
+  --pgn-color-icon-button-text-brand-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-inverse-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-secondary-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-secondary-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-inverse-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-inverse-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-text-primary-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-text-primary-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-black-active-focus: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-active-hover: var(--pgn-color-icon-button-bg-black-active-base);
+  --pgn-color-icon-button-bg-black-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-dark-active-focus: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-active-hover: var(--pgn-color-icon-button-bg-dark-active-base);
+  --pgn-color-icon-button-bg-dark-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-light-active-focus: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-active-hover: var(--pgn-color-icon-button-bg-light-active-base);
+  --pgn-color-icon-button-bg-light-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-active-base: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-danger-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-danger-hover: var(--pgn-color-danger-base);
+  --pgn-color-icon-button-bg-warning-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-active-base: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-warning-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-warning-hover: var(--pgn-color-warning-base);
+  --pgn-color-icon-button-bg-success-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-active-base: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-success-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-success-hover: var(--pgn-color-success-base);
+  --pgn-color-icon-button-bg-brand-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-brand-active-focus: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-active-hover: var(--pgn-color-icon-button-bg-brand-active-base);
+  --pgn-color-icon-button-bg-brand-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-inverse-active-base: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-active-base: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-secondary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-secondary-hover: var(--pgn-color-secondary-base);
+  --pgn-color-icon-button-bg-primary-inverse-active-focus: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-inverse-active-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-active-focus: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
+  --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-text-muted: var(--pgn-color-gray-500);
   --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
   --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
@@ -904,12 +1138,33 @@
   --pgn-color-popover-arrow-base: var(--pgn-color-popover-bg);
   --pgn-color-pagination-bg-active: var(--pgn-color-bg-active);
   --pgn-color-pagination-text-disabled: var(--pgn-color-disabled);
+  --pgn-color-page-banner-bg-warning: var(--pgn-color-warning-100);
   --pgn-color-navbar-dark-brand-hover: var(--pgn-color-navbar-dark-active);
   --pgn-color-navbar-dark-brand-text: var(--pgn-color-navbar-dark-active);
   --pgn-color-nav-pills-link-active-bg: var(--pgn-color-bg-active);
   --pgn-color-nav-tabs-link-active-bg: var(--pgn-color-body-bg);
   --pgn-color-menu-bg-active: var(--pgn-color-btn-active-bg-tertiary);
   --pgn-color-image-thumbnail-bg: var(--pgn-color-body-bg);
+  --pgn-color-icon-button-text-danger-inverse-active-focus: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+  --pgn-color-icon-button-text-danger-inverse-active-hover: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+  --pgn-color-icon-button-text-danger-focus: var(--pgn-color-icon-button-text-danger-base);
+  --pgn-color-icon-button-text-warning-inverse-active-focus: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+  --pgn-color-icon-button-text-warning-inverse-active-hover: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+  --pgn-color-icon-button-text-warning-focus: var(--pgn-color-icon-button-text-warning-base);
+  --pgn-color-icon-button-text-success-inverse-active-focus: var(--pgn-color-icon-button-text-success-inverse-active-base);
+  --pgn-color-icon-button-text-success-inverse-active-hover: var(--pgn-color-icon-button-text-success-inverse-active-base);
+  --pgn-color-icon-button-text-success-focus: var(--pgn-color-icon-button-text-success-base);
+  --pgn-color-icon-button-text-secondary-inverse-active-focus: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+  --pgn-color-icon-button-text-secondary-inverse-active-hover: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+  --pgn-color-icon-button-text-secondary-focus: var(--pgn-color-icon-button-text-secondary-base);
+  --pgn-color-icon-button-bg-danger-active-focus: var(--pgn-color-icon-button-bg-danger-active-base);
+  --pgn-color-icon-button-bg-danger-active-hover: var(--pgn-color-icon-button-bg-danger-active-base);
+  --pgn-color-icon-button-bg-warning-active-focus: var(--pgn-color-icon-button-bg-warning-active-base);
+  --pgn-color-icon-button-bg-warning-active-hover: var(--pgn-color-icon-button-bg-warning-active-base);
+  --pgn-color-icon-button-bg-success-active-focus: var(--pgn-color-icon-button-bg-success-active-base);
+  --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
+  --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
+  --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
   --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
   --pgn-color-link-brand-inline-hover-base: #51002BFF;
diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json
index f28db927a7f..6e66c1edd76 100644
--- a/tokens/src/core/components/DataTable.json
+++ b/tokens/src/core/components/DataTable.json
@@ -19,8 +19,7 @@
         "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
         "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
         "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
-        "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" },
-        "head-cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-head-cell-padding" }
+        "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" }
       },
       "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
     }
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 22dce9eb6dd..33e11bf020f 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -166,10 +166,15 @@ StyleDictionary.registerFormat({
     const { size: { breakpoint } } = dictionary.properties;
 
     let customMediaVariables = '';
+    const breakpoints = Object.values(breakpoint);
 
-    Object.values(breakpoint).forEach(item => {
-      customMediaVariables += `@custom-media --${item.name} (min-width: ${item.value});\n`;
-    });
+    for (let i = 0; i < breakpoints.length; i++) {
+      const [currentBreakpoint, nextBreakpoint] = [breakpoints[i], breakpoints[i + 1]];
+      customMediaVariables += `@custom-media --min-${currentBreakpoint.name} (min-width: ${currentBreakpoint.value});\n`;
+      if (nextBreakpoint) {
+        customMediaVariables += `@custom-media --max-${currentBreakpoint.name} (max-width: ${nextBreakpoint.value});\n`;
+      }
+    }
 
     return fileHeader({ file }) + customMediaVariables;
   },
diff --git a/www/build-themes.js b/www/build-themes.js
index fbf2c3d981c..7d37dbecbe3 100644
--- a/www/build-themes.js
+++ b/www/build-themes.js
@@ -1,6 +1,8 @@
 const path = require('path');
 const sass = require('sass');
 const fs = require('fs');
+const postCSS = require('postcss');
+const postCSSCustomMedia = require('postcss-custom-media');
 const { THEMES } = require('./theme-config');
 
 const importer = function importer(url) {
@@ -22,12 +24,14 @@ if (!fs.existsSync('./public/static')) {
 // compile SASS stylesheet to CSS for each theme in the config
 // complied CSS files will be stored in ./public/static/ directory
 THEMES.forEach(theme => {
-  const result = sass.renderSync({
+  const compiledStylesheet = sass.renderSync({
     file: `./src/scss/${theme.stylesheet}.scss`,
     outputStyle: 'compressed',
     importer,
     quietDeps: true,
   });
 
-  fs.writeFileSync(`./public/static/${theme.stylesheet}.css`, result.css);
+  postCSS([postCSSCustomMedia({ preserve: true })])
+    .process(compiledStylesheet.css, { from: `./src/scss/${theme.stylesheet}.scss`, map: { inline: false } })
+    .then(result => fs.writeFileSync(`./public/static/${theme.stylesheet}.css`, result.css));
 });
diff --git a/www/package.json b/www/package.json
index 63f96d32096..5fe44ba1127 100644
--- a/www/package.json
+++ b/www/package.json
@@ -4,7 +4,6 @@
   "version": "1.0.0",
   "dependencies": {
     "@docsearch/react": "^3.1.0",
-    "@edx/brand-edx.org": "^2.0.6",
     "@edx/brand-openedx": "^1.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@mdx-js/mdx": "^1.6.22",
@@ -63,7 +62,9 @@
     "@types/react-helmet": "^6.1.6",
     "css": "^3.0.0",
     "eslint": "8.18.0",
-    "eslint-import-resolver-webpack": "^0.13.2"
+    "eslint-import-resolver-webpack": "^0.13.2",
+    "postcss": "^8.4.21",
+    "postcss-custom-media": "^9.1.2"
   },
   "repository": {
     "type": "git",
diff --git a/www/src/components/ComponentVariablesTable.tsx b/www/src/components/ComponentVariablesTable.tsx
index 344590c32a6..02db2a37a5e 100644
--- a/www/src/components/ComponentVariablesTable.tsx
+++ b/www/src/components/ComponentVariablesTable.tsx
@@ -1,28 +1,31 @@
-import React, { useEffect, useState } from 'react';
-// @ts-ignore
-import { DataTable } from '~paragon-react'; // eslint-disable-line
+import React, { useContext, useEffect, useState } from 'react';
+import { DataTable } from '~paragon-react';
+import { SettingsContext } from '../context/SettingsContext';
 
 function ComponentVariablesTable({ rawStylesheet }: ComponentVariablesTableProps) {
   const [tableData, setTableData] = useState<Array<TableRowData>>([]);
+  const { settings: { theme } } = useContext(SettingsContext);
 
   useEffect(() => {
-    const bodyStyles = getComputedStyle(document.body);
-    const variablesList = rawStylesheet.filter((row) => row.match(/var\((\w|-|_)*\)/g));
+    setTimeout(() => {
+      const bodyStyles = getComputedStyle(document.body);
+      const variablesList = rawStylesheet.filter((row) => row.match(/var\((\w|-|_)*\)/g));
 
-    const tableRows = variablesList.map(variable => {
-      const variableName = variable.trim();
-      const extractedCSSVariables = variableName.match(/(?<=var?\()(.*)(?=\))/g);
+      const tableRows = variablesList.map(variable => {
+        const variableName = variable.trim();
+        const extractedCSSVariables = variableName.match(/(?<=var?\()(.*)(?=\))/g);
 
-      const computedValue = extractedCSSVariables ? bodyStyles.getPropertyValue(extractedCSSVariables[0]) : '';
+        const computedValue = extractedCSSVariables ? bodyStyles.getPropertyValue(extractedCSSVariables[0]) : '';
 
-      return {
-        variableName: <code>{variableName}</code>,
-        computedValue: <code>{computedValue}</code>,
-      };
-    });
+        return {
+          variableName: <code>{variableName}</code>,
+          computedValue: <code>{computedValue}</code>,
+        };
+      });
 
-    setTableData(tableRows);
-  }, [rawStylesheet]);
+      setTableData(tableRows);
+    }, 1000);
+  }, [rawStylesheet, theme]);
 
   return (
     <DataTable
diff --git a/www/src/components/Header.scss b/www/src/components/Header.scss
index e79e9c9ae4f..6f6fb8938a0 100644
--- a/www/src/components/Header.scss
+++ b/www/src/components/Header.scss
@@ -11,33 +11,32 @@
     }
 
     &-logo {
-      font-size: $h1-mobile-font-size;
-      line-height: $display-line-height;
+      font-size: var(--pgn-typography-font-size-mobile-h1);
+      line-height: var(--pgn-typography-display-line-height-base);
     }
 
     &-heading {
-      font-size: $h3-font-size;
-      line-height: $line-height-base;
+      font-size: var(--pgn-typography-font-size-h3);
+      line-height: var(--pgn-typography-line-height-base);
       margin: 0;
-      color: $white;
+      color: var(--pgn-color-white);
     }
 
     &-description {
-      font-family: $font-family-sans-serif;
-      font-size: $font-size-sm;
-      line-height: $line-height-base;
-      color: $light;
+      font-family: var(--pgn-typography-font-family-sans-serif);
+      font-size: var(--pgn-typography-font-size-sm);
+      line-height: var(--pgn-typography-line-height-base);
+      color: var(--pgn-color-light-base);
       margin: 0;
     }
   }
 
   &-home--menu {
     position: absolute;
-    background-color: $white;
+    background-color: var(--pgn-color-white);
     width: 28rem;
     left: -3rem;
-
-    @include pgn-box-shadow(2, "down");
+    box-shadow: var(--pgn-elevation-box-shadow-down-2);
 
     .pgn-doc__menu-items {
       max-height: 28rem;
@@ -52,11 +51,11 @@
 
     // stylelint-disable-next-line selector-class-pattern
     .DocSearch.DocSearch-Button {
-      margin: 0 0 0 $spacer;
+      margin: 0 0 0 var(--pgn-spacing-spacer-base);
       width: 13.25rem;
       height: 2.75rem;
 
-      @media (max-width: $max-width-md) {
+      @media (--max-pgn-size-breakpoint-md) {
         width: 2.75rem;
         height: 2.75rem;
         border-radius: 50%;
@@ -64,7 +63,7 @@
         padding: .625rem .75rem;
       }
 
-      @media (max-width: $max-width-xs) {
+      @media (--max-pgn-size-breakpoint-xs) {
         margin: 0 0 0 .5rem;
         width: 2rem;
         height: 2rem;
@@ -102,9 +101,9 @@
 
   // stylelint-disable-next-line selector-class-pattern
   &-settings-and-search .DocSearch.DocSearch-Button {
-    margin: 0 $spacer 0 0;
+    margin: 0 var(--pgn-spacing-spacer-base) 0 0;
 
-    @media (max-width: $max-width-xs) {
+    @media (--max-pgn-size-breakpoint-xs) {
       margin: 0 .5rem 0 0;
     }
   }
diff --git a/www/src/components/IconsTable.scss b/www/src/components/IconsTable.scss
index f5fe6064bab..d2257464839 100644
--- a/www/src/components/IconsTable.scss
+++ b/www/src/components/IconsTable.scss
@@ -33,7 +33,7 @@
 
   .pgn-doc__icons-table__cell-text {
     display: block;
-    font-size: $font-size-xs;
+    font-size: var(--pgn-typography-font-size-xs);
     padding: 0 5px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -43,7 +43,7 @@
   }
 
   &:hover {
-    outline: 1px inset $primary-500;
+    outline: 1px inset var(--pgn-color-primary-500);
     cursor: pointer;
   }
 }
@@ -60,7 +60,7 @@
   }
 
   code {
-    background: $danger-100;
+    background: var(--pgn-color-danger-100);
     padding: 0 .25rem;
   }
 
@@ -87,13 +87,13 @@
     cursor: pointer;
 
     h3 {
-      color: $white;
-      background: $info-300;
+      color: var(--pgn-color-white);
+      background: var(--pgn-color-info-300);
     }
 
     code {
-      color: $white;
-      background: $info-300;
+      color: var(--pgn-color-white);
+      background: var(--pgn-color-info-300);
     }
 
     .pgn__icon {
diff --git a/www/src/components/Menu.scss b/www/src/components/Menu.scss
index ec00dd83d65..22233b6b094 100644
--- a/www/src/components/Menu.scss
+++ b/www/src/components/Menu.scss
@@ -1,22 +1,22 @@
 .pgn__modal-popup__tooltip .pgn-doc__menu {
-  padding: $spacer 1.5rem 2rem;
+  padding: var(--pgn-spacing-spacer-base) 1.5rem 2rem;
 }
 
 .pgn-doc__menu {
-  padding: $spacer .625rem 2rem;
-  border-right: $border-width solid $light-400;
+  padding: var(--pgn-spacing-spacer-base) .625rem 2rem;
+  border-right: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
 
   &-title {
-    font-size: $h4-font-size;
-    line-height: $line-height-base;
-    font-weight: $font-weight-normal;
-    color: $gray-700;
+    font-size: var(--pgn-typography-font-size-h4);
+    line-height: var(--pgn-typography-line-height-base);
+    font-weight: var(--pgn-typography-font-weight-normal);
+    color: var(--pgn-color-gray-700);
   }
 
   &-btn--group {
-    padding-bottom: $spacer;
-    border-bottom: $border-width solid $light-400;
-    margin-bottom: $spacer;
+    padding-bottom: var(--pgn-spacing-spacer-base);
+    border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
+    margin-bottom: var(--pgn-spacing-spacer-base);
 
     .btn-group {
       width: 100%;
@@ -24,11 +24,8 @@
 
       .btn {
         width: 50%;
-
-        @media (max-width: map-get($grid-breakpoints, "xxl")) {
-          font-size: $font-size-xs;
-          line-height: $headings-line-height;
-        }
+        font-size: var(--pgn-typography-font-size-xs);
+        line-height: var(--pgn-typography-headings-line-height);
       }
     }
   }
@@ -43,10 +40,10 @@
     margin-bottom: 3.75rem;
 
     .pgn_collapsible {
-      font-size: $font-size-xs;
-      line-height: $headings-line-height;
-      font-weight: $font-weight-normal;
-      color: $gray-700;
+      font-size: var(--pgn-typography-font-size-xs);
+      line-height: var(--pgn-typography-headings-line-height);
+      font-weight: var(--pgn-typography-font-weight-normal);
+      color: var(--pgn-color-gray-700);
       text-decoration: none;
       margin-bottom: .25rem;
 
@@ -63,10 +60,10 @@
       }
 
       .collapsible-body ul li a {
-        font-size: $font-size-sm;
-        line-height: $line-height-lg;
-        font-weight: $font-weight-normal;
-        color: $gray-700;
+        font-size: var(--pgn-typography-font-size-sm);
+        line-height: var(--pgn-typography-line-height-lg);
+        font-weight: var(--pgn-typography-font-weight-normal);
+        color: var(--pgn-color-gray-700);
 
         &:hover {
           text-decoration: underline;
@@ -84,7 +81,7 @@
     }
 
     .collapsible-basic .collapsible-trigger {
-      font-size: $font-size-sm;
+      font-size: var(--pgn-typography-font-size-sm);
       text-decoration: none;
       justify-content: start;
       flex-direction: row-reverse;
@@ -96,30 +93,30 @@
     }
 
     .pgn_collapsible.collapsible-basic.is-open .collapsible-trigger {
-      font-weight: $font-weight-bold;
+      font-weight: var(--pgn-typography-font-weight-bold);
       text-decoration: none;
-      background-color: $light-300;
-      transition: $transition-base;
+      background-color: var(--pgn-color-light-300);
+      transition: var(--pgn-transition-base);
     }
   }
 
   &-playground {
     &--title {
-      font-size: $font-size-base;
-      line-height: $line-height-base;
-      font-weight: $font-weight-bold;
-      color: $gray-700;
+      font-size: var(--pgn-typography-font-size-base);
+      line-height: var(--pgn-typography-line-height-base);
+      font-weight: var(--pgn-typography-font-weight-bold);
+      color: var(--pgn-color-gray-700);
       margin-bottom: .5rem;
 
       .badge {
-        line-height: $line-height-lg;
+        line-height: var(--pgn-typography-line-height-lg);
         padding: .125rem .5rem;
         border-radius: .375rem;
       }
     }
 
     .pgn__hyperlink {
-      color: $info-500;
+      color: var(--pgn-color-info-500);
       text-decoration: underline;
       margin-left: .125rem;
     }
@@ -127,7 +124,7 @@
 }
 
 [dir="rtl"] .pgn-doc__menu {
-  border-left: $border-width solid $light-400;
+  border-left: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
   border-right: none;
 
   .list-unstyled {
@@ -136,17 +133,17 @@
 }
 
 .pgn-doc__menu-playground--popover {
-  z-index: $zindex-modal;
+  z-index: var(--pgn-elevation-modal-zindex);
 }
 
 .pgn-doc__menu-all-components .pgn-doc__menu-component-list {
   columns: 4;
 
-  @media (max-width: $max-width-sm) {
+  @media (--max-pgn-size-breakpoint-sm) {
     columns: 2;
   }
 
-  @media (max-width: $max-width-xs) {
+  @media (--max-pgn-size-breakpoint-xs) {
     columns: 1;
   }
 }
diff --git a/www/src/components/Search/Search.scss b/www/src/components/Search/Search.scss
index 1859c65c915..8468af4b864 100644
--- a/www/src/components/Search/Search.scss
+++ b/www/src/components/Search/Search.scss
@@ -1,18 +1,18 @@
 // stylelint-disable selector-class-pattern
 .DocSearch.DocSearch-Button {
   border-radius: 0;
-  background-color: $white;
-  border: $border-width solid $gray-500;
+  background-color: var(--pgn-color-white);
+  border: var(--pgn-size-border-width) solid var(--pgn-color-gray-500);
   width: 100%;
   height: 2.25rem;
   margin-left: 0;
   margin-bottom: .75rem;
-  padding: .625rem $spacer;
-  transition: $transition-base;
+  padding: .625rem var(--pgn-spacing-spacer-base);
+  transition: var(--pgn-transition-base);
 
   &:active,
   &:focus {
-    background: $white;
+    background: var(--pgn-color-white);
     box-shadow: none;
     border-radius: 0;
     outline: auto;
@@ -25,14 +25,14 @@
   .DocSearch {
     width: 1.125rem;
     height: 1.125rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
   }
 
   .DocSearch-Button-Placeholder {
-    font-weight: $font-weight-normal;
-    font-size: $font-size-sm;
-    line-height: $line-height-base;
-    color: $gray-500;
+    font-weight: var(--pgn-typography-font-weight-normal);
+    font-size: var(--pgn-typography-font-size-sm);
+    line-height: var(--pgn-typography-line-height-base);
+    color: var(--pgn-color-gray-500);
     padding-left: .6875rem;
   }
 
@@ -43,17 +43,17 @@
 
 .DocSearch {
   &.DocSearch-Container {
-    z-index: $zindex-modal;
+    z-index: var(--pgn-elevation-modal-zindex);
     background: rgba(125, 125, 125, .65);
   }
 
   .DocSearch-Modal {
     max-width: 31.25rem;
-    background-color: $white;
+    background-color: var(--pgn-color-white);
     margin: 6.875rem auto auto;
     cursor: auto;
 
-    @media (max-width: map-get($grid-breakpoints, "md")) {
+    @media (--max-pgn-size-breakpoint-sm) {
       max-width: 100%;
       margin: auto;
       border-radius: 0;
@@ -62,10 +62,10 @@
 
     .DocSearch-Footer {
       box-shadow: none;
-      border-top: $border-width solid $light-400;
+      border-top: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
       padding: 0 1.625rem;
 
-      @media (max-width: map-get($grid-breakpoints, "md")) {
+      @media (--max-pgn-size-breakpoint-sm) {
         position: absolute;
         border-radius: 0;
         bottom: 0;
@@ -74,8 +74,8 @@
       .DocSearch-Label {
         font-size: .5rem;
         line-height: 1.1875rem;
-        font-weight: $font-weight-normal;
-        color: $gray-500;
+        font-weight: var(--pgn-typography-font-weight-normal);
+        color: var(--pgn-color-gray-500);
       }
 
       .DocSearch-Logo svg {
@@ -88,11 +88,11 @@
     }
 
     .DocSearch-Dropdown {
-      background-color: $white;
+      background-color: var(--pgn-color-white);
       padding: 0 1.625rem;
       max-height: 20.9375rem;
 
-      @media (max-width: map-get($grid-breakpoints, "md")) {
+      @media (--max-pgn-size-breakpoint-sm) {
         height: 100%;
         // stylelint-disable-next-line max-line-length
         max-height: calc(var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
@@ -104,37 +104,37 @@
         .DocSearch-Help {
           font-size: .6875rem;
           line-height: .9375rem;
-          font-weight: $font-weight-normal;
-          color: $dark;
+          font-weight: var(--pgn-typography-font-weight-normal);
+          color: var(--pgn-color-dark-base);
           text-align: center;
         }
       }
 
       .DocSearch-Hit-source,
       .DocSearch-Title {
-        font-size: $font-size-base;
-        line-height: $line-height-base;
-        font-weight: $font-weight-bold;
-        background: $white;
-        color: $dark;
+        font-size: var(--pgn-typography-font-size-base);
+        line-height: var(--pgn-typography-line-height-base);
+        font-weight: var(--pgn-typography-font-weight-bold);
+        background: var(--pgn-color-white);
+        color: var(--pgn-color-dark-base);
         padding: 0 0 .5rem;
         overflow: hidden;
       }
 
       .DocSearch-Hits mark {
-        color: $red;
+        color: var(--pgn-color-red);
         padding: 0;
       }
 
       .DocSearch-Hit {
-        border: $border-width solid $light-400;
-        border-radius: $border-radius;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
+        border-radius: var(--pgn-size-border-radius-base);
         padding: 0;
         margin-bottom: .375rem;
       }
 
       .DocSearch-Hit a:focus {
-        border: $border-width solid $dark;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-dark-base);
         outline: none;
       }
 
@@ -143,17 +143,17 @@
       }
 
       .DocSearch-Hit[aria-selected="true"] a {
-        background: $dark;
+        background: var(--pgn-color-dark-base);
       }
 
       .DocSearch-Hit[aria-selected="true"] mark {
         text-decoration: none;
-        color: $red !important;
+        color: var(--pgn-color-red) !important;
         padding: 0;
       }
 
       .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-icon svg {
-        color: $white;
+        color: var(--pgn-color-white);
       }
 
       .DocSearch-Screen-Icon svg {
@@ -170,13 +170,12 @@
       }
 
       .DocSearch-Hit .DocSearch-Hit-icon svg {
-        //color: lighten($color: $dark, $amount: .5);
         position: absolute;
       }
 
       .DocSearch-Hit a {
-        background: $light-200;
-        padding: $spacer 1.625rem $spacer 1.875rem;
+        background: var(--pgn-color-light-200);
+        padding: var(--pgn-spacing-spacer-base) 1.625rem var(--pgn-spacing-spacer-base) 1.875rem;
         box-shadow: none;
       }
 
@@ -195,14 +194,14 @@
 
       .DocSearch-Hit-action-button:focus {
         background: transparent;
-        border: $border-width solid $dark;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-dark-base);
         outline: none;
-        color: $dark;
+        color: var(--pgn-color-dark-base);
       }
 
       .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action-button:focus {
-        border: $border-width solid $white;
-        color: $white;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-white);
+        color: var(--pgn-color-white);
       }
 
       .DocSearch-Hit-Container .DocSearch-Hit-action {
@@ -219,9 +218,9 @@
       }
 
       .DocSearch-Hit a .DocSearch-Hit-title {
-        font-size: $spacer;
-        line-height: $line-height-base;
-        font-weight: $font-weight-semi-bold;
+        font-size: var(--pgn-spacing-spacer-base);
+        line-height: var(--pgn-typography-line-height-base);
+        font-weight: var(--pgn-typography-font-weight-semi-bold);
       }
     }
   }
@@ -230,20 +229,20 @@
     padding: 1.625rem;
 
     .DocSearch-Form {
-      font-size: $font-size-sm;
-      line-height: $line-height-base;
-      font-weight: $font-weight-normal;
-      border: .125rem solid $black;
+      font-size: var(--pgn-typography-font-size-sm);
+      line-height: var(--pgn-typography-line-height-base);
+      font-weight: var(--pgn-typography-font-weight-normal);
+      border: .125rem solid var(--pgn-color-black);
       border-radius: 0;
       box-shadow: none;
-      color: $gray-500;
+      color: var(--pgn-color-gray-500);
       height: 3.0625rem;
       padding: .125rem;
       position: relative;
 
       .DocSearch-MagnifierLabel {
         position: absolute;
-        right: $spacer;
+        right: var(--pgn-spacing-spacer-base);
       }
 
       .DocSearch-LoadingIndicator {
@@ -254,16 +253,16 @@
       .DocSearch-MagnifierLabel .DocSearch-Search-Icon {
         width: 1.125rem;
         height: 1.125rem;
-        color: $gray-500;
+        color: var(--pgn-color-gray-500);
       }
 
       .DocSearch-Input {
-        font-size: $font-size-sm;
-        line-height: $line-height-base;
-        font-weight: $font-weight-normal;
+        font-size: var(--pgn-typography-font-size-sm);
+        line-height: var(--pgn-typography-line-height-base);
+        font-weight: var(--pgn-typography-font-weight-normal);
         padding: 0 2.8125rem 0 .625rem;
         z-index: 1;
-        border: $border-width solid $black;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-black);
       }
 
       .DocSearch-Reset {
@@ -272,16 +271,16 @@
         z-index: 1;
         width: 1.5625rem;
         height: 1.5625rem;
-        background-color: $white;
+        background-color: var(--pgn-color-white);
       }
 
       .DocSearch-Reset:focus {
-        border: $border-width solid $dark;
+        border: var(--pgn-size-border-width) solid var(--pgn-color-dark-base);
         border-radius: 50%;
       }
 
       .DocSearch-Reset svg {
-        color: $gray-500;
+        color: var(--pgn-color-gray-500);
       }
     }
   }
@@ -291,11 +290,11 @@
       text-decoration: underline;
     }
 
-    @media (max-width: map-get($grid-breakpoints, "md")) {
-      font-size: $font-size-base;
-      line-height: $line-height-base;
-      font-weight: $font-weight-semi-bold;
-      color: $gray-700;
+    @media (--max-pgn-size-breakpoint-sm) {
+      font-size: var(--pgn-typography-font-size-base);
+      line-height: var(--pgn-typography-line-height-base);
+      font-weight: var(--pgn-typography-font-weight-semi-bold);
+      color: var(--pgn-color-gray-700);
       margin-left: 1.1875rem;
       display: block;
       background: none;
@@ -319,7 +318,7 @@
   }
 
   .DocSearch-Cancel {
-    @media (max-width: map-get($grid-breakpoints, "md")) {
+    @media (--max-pgn-size-breakpoint-sm) {
       margin-right: 1.1875rem;
     }
   }
diff --git a/www/src/components/Settings.scss b/www/src/components/Settings.scss
index f8e86590777..0ff40b70490 100644
--- a/www/src/components/Settings.scss
+++ b/www/src/components/Settings.scss
@@ -2,7 +2,7 @@
   min-width: 13rem;
 
   &-title {
-    border-bottom: $border-width solid $light-400;
+    border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -11,11 +11,11 @@
   }
 
   &-label {
-    color: $black;
+    color: var(--pgn-color-black);
   }
 
   &-direction {
-    border-bottom: $border-width solid $light-400;
+    border-bottom: var(--pgn-size-border-width) solid var(--pgn-color-light-400);
     padding-bottom: .75rem;
     margin-bottom: 0;
   }
@@ -26,6 +26,6 @@
   }
 
   &-nav--items .nav-item .nav-link {
-    color: $info-500;
+    color: var(--pgn-color-info-500);
   }
 }
diff --git a/www/src/components/Toc.scss b/www/src/components/Toc.scss
index cefae88a55d..cdddea25516 100644
--- a/www/src/components/Toc.scss
+++ b/www/src/components/Toc.scss
@@ -12,7 +12,7 @@
 
   .pgn-doc__toc-list {
     padding-left: .75rem;
-    font-size: $font-size-sm;
+    font-size: var(--pgn-typography-font-size-sm);
   }
 
   & > .pgn-doc__toc-list {
@@ -27,12 +27,12 @@
 
   a {
     text-decoration: none;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
 
     &:hover,
     &:focus,
     &.active {
-      color: $primary-500;
+      color: var(--pgn-color-primary-500);
     }
   }
 }
diff --git a/www/src/components/_CodeBlock.scss b/www/src/components/_CodeBlock.scss
index 7f0f8687abb..bfff2bae46f 100644
--- a/www/src/components/_CodeBlock.scss
+++ b/www/src/components/_CodeBlock.scss
@@ -1,24 +1,24 @@
 .pgn-doc__code-block {
-  margin: $spacer 0 2rem;
-  background-color: $light-200;
-  border: solid 2px $light-300;
-  border-radius: $border-radius;
+  margin: var(--pgn-spacing-spacer-base) 0 2rem;
+  background-color: var(--pgn-color-light-200);
+  border: solid 2px var(--pgn-color-light-300);
+  border-radius: var(--pgn-size-border-radius-base);
 
   .pgn-doc__code-block-preview {
-    padding: $spacer;
+    padding: var(--pgn-spacing-spacer-base);
   }
 
   .pgn-doc__code-block-editor,
   .prism-code {
-    font-size: $font-size-base;
+    font-size: var(--pgn-typography-font-size-base);
     font-family: monospace;
     border-radius: var(--pgn-size-form-input-radius-border-base);
   }
 
   .pgn-doc__code-block-error {
-    background-color: $warning-200;
-    padding: $spacer;
-    font-size: $font-size-sm;
+    background-color: var(--pgn-color-warning-200);
+    padding: var(--pgn-spacing-spacer-base);
+    font-size: var(--pgn-typography-font-size-sm);
     margin: 0;
   }
 
@@ -27,8 +27,8 @@
 
     .pgn-doc__collapsible-live-editor-copy-btn {
       position: absolute;
-      top: map-get($spacers, 2);
-      right: map-get($spacers, 2);
+      top: var(--pgn-spacing-spacer-2);
+      right: var(--pgn-spacing-spacer-2);
     }
   }
 }
diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss
index bb7ef8e415c..ac52d11668b 100644
--- a/www/src/components/_doc-elements.scss
+++ b/www/src/components/_doc-elements.scss
@@ -145,7 +145,7 @@
     &:focus,
     &:hover,
     &:focus-visible {
-      border: $border-width solid $dark;
+      border: var(--pgn-size-border-width) solid var(--pgn-color-dark-base);
     }
   }
 }
@@ -183,8 +183,8 @@
 
   .pgn-doc__box-shadow-level-titles {
     .pgn-doc__box-shadow-level-title {
-      font-size: $font-size-base;
-      line-height: $line-height-base;
+      font-size: var(--pgn-typography-font-size-base);
+      line-height: var(--pgn-typography-line-height-base);
       width: 8.125rem;
       height: 6.25rem;
       text-align: left;
@@ -198,8 +198,8 @@
     min-width: 57rem;
 
     .pgn-doc__box-shadow-side-title {
-      font-size: $font-size-base;
-      line-height: $line-height-base;
+      font-size: var(--pgn-typography-font-size-base);
+      line-height: var(--pgn-typography-line-height-base);
       width: 6.25rem;
       height: 3rem;
 
@@ -229,13 +229,13 @@
     .pgn-doc__box-shadow-generator__preview-box {
       height: 9.375rem;
       width: 9.375rem;
-      background-color: $white;
-      border-radius: $border-radius-lg;
+      background-color: var(--pgn-color-white);
+      border-radius: var(--pgn-size-border-radius-lg);
     }
   }
 
   .pgn-doc__box-shadow-generator--toolkit {
-    padding: $spacer;
+    padding: var(--pgn-spacing-spacer-base);
 
     .pgn-doc__box-shadow-generator--toolkit-code {
       padding: 1rem;
@@ -244,9 +244,9 @@
       white-space: nowrap;
       display: flex;
       align-items: center;
-      background-color: $gray-100;
+      background-color: var(--pgn-color-gray-100);
 
-      @media (max-width: $max-width-sm) {
+      @media (--max-pgn-size-breakpoint-sm) {
         max-width: 100%;
       }
     }
@@ -255,21 +255,21 @@
   .pgn-doc__box-shadow-toolkit--controls-box {
     width: 100%;
     min-width: 15.625rem;
-    background-color: $dark;
-    padding: $spacer;
-    border-radius: $border-radius-lg;
-    color: $white;
-    margin-bottom: $spacer;
+    background-color: var(--pgn-color-dark-base);
+    padding: var(--pgn-spacing-spacer-base);
+    border-radius: var(--pgn-size-border-radius-lg);
+    color: var(--pgn-color-white);
+    margin-bottom: var(--pgn-spacing-spacer-base);
 
     &:not(:last-child) {
-      margin-right: $spacer;
+      margin-right: var(--pgn-spacing-spacer-base);
     }
 
     input[type="range"],
     input[type="color"] {
       width: 100%;
       display: block;
-      margin-bottom: $spacer;
+      margin-bottom: var(--pgn-spacing-spacer-base);
     }
 
     .form-control {
@@ -279,12 +279,12 @@
       height: auto;
 
       &:focus {
-        box-shadow: $level-4-box-shadow;
-        border-radius: $border-radius;
+        box-shadow: var(--pgn-elevation-box-shadow-level-4);
+        border-radius: var(--pgn-size-border-radius-base);
       }
 
       &[type="color"] {
-        height: calc(#{$spacer} * 1.5);
+        height: calc(var(--pgn-spacing-spacer-base) * 1.5);
       }
     }
   }
@@ -295,10 +295,10 @@
 }
 
 .pgn-doc__box-shadow--toast {
-  background-color: $dark;
+  background-color: var(--pgn-color-dark-base);
 
   .toast-header {
-    background-color: $dark;
+    background-color: var(--pgn-color-dark-base);
     box-shadow: none;
   }
 }
@@ -318,9 +318,9 @@
 }
 
 .pgn-doc__box-shadow-toolkit--controls-box--disable-btn svg {
-  fill: $white;
+  fill: var(--pgn-color-white);
 }
 
 .pgn-doc__box-shadow-toolkit--controls-box--remove-btn svg {
-  color: $white;
+  color: var(--pgn-color-white);
 }
diff --git a/www/src/components/exampleComponents/ExamplePropsForm.scss b/www/src/components/exampleComponents/ExamplePropsForm.scss
index 42dedf7f28f..b01cfcd932b 100644
--- a/www/src/components/exampleComponents/ExamplePropsForm.scss
+++ b/www/src/components/exampleComponents/ExamplePropsForm.scss
@@ -1,7 +1,7 @@
 .pgn-doc__example-props-form {
-  background: $warning-100;
-  padding: map-get($spacers, 3) map-get($spacers, 3) 0 map-get($spacers, 3);
+  background: var(--pgn-color-warning-100);
+  padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-23) 0 var(--pgn-spacing-spacer-3);
   border-radius: 10px;
   border: 2px dashed black;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: var(--pgn-spacing-spacer-3);
 }
diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss
index e515e5e8660..2d9186b421f 100644
--- a/www/src/scss/edxorg-theme.scss
+++ b/www/src/scss/edxorg-theme.scss
@@ -1,5 +1,3 @@
-@import "~@edx/brand-edx.org/paragon/fonts";
-@import "~@edx/brand-edx.org/paragon/variables";
-@import "~paragon-style/scss/core/core";
-@import "~@edx/brand-edx.org/paragon/overrides";
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/core.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@edx/brand-edx.org@alpha/dist/light.min.css");
 @import "base";