diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
index 3918a9f5..fc3d3303 100644
--- a/paragon/_overrides.scss
+++ b/paragon/_overrides.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 // This file is included after all of Bootstrap. Any customization that can't
 // be made using variable definitions should be done here.
 
@@ -7,7 +8,7 @@
   color: theme-color("gray");
   opacity: 1;
 
-  @include hover {
+  &:hover {
     color: theme-color("gray");
   }
 }
@@ -16,11 +17,11 @@
 // Badges
 
 .badge {
-  font-family: $font-family-sans-serif;
+  font-family: var(--pgn-typography-font-family-sans-serif);
   line-height: 1.25rem;
 
   .badge-info {
-    --pgn-badge-bg-color: #{$badge-info-bg};
+    --pgn-badge-bg-color: var(--pgn-color-badge-bg-info);
   }
 }
 
@@ -46,186 +47,9 @@
   }
 }
 
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    background: $white;
-    border-color: $light-300;
-
-    &:not(:disabled):not(.disabled) {
-      &:hover, &:active, &.hover, &.active {
-        background: $value;
-        border-color: $value;
-        color: $white;
-      }
-
-      &:focus, &.focus {
-        background: $white;
-        color: $value;
-        border-color: $light-300;
-
-        &:before {
-          border-color: $value;
-        }
-      }
-    }
-
-    &:disabled, &.disabled {
-      border-color: $light-300;
-      background-color: $white;
-    }
-  }
-
-  .btn-#{$color} {
-    &:hover {
-      border-color: transparent;
-    }
-
-    &.focus, &:focus {
-      background: $value;
-
-      &::before {
-        border-color: $value;
-      }
-    }
-  }
-}
-
-.btn-tertiary:not(:disabled):not(.disabled) {
-  &:focus, &.focus {
-    background: $btn-tertiary-bg;
-  }
-}
-
-.btn-primary:not(:disabled):not(.disabled) {
-  &:hover, &:active, &.hover, &.active {
-    background: $primary-300;
-    border-color: transparent;
-    color: $white;
-  }
-
-  &:focus, &.focus {
-    background: $primary-500;
-  }
-}
-
-.btn-inverse-outline-primary {
-  background: transparent;
-  color: $white;
-  border-color: $gray-500;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $white;
-      border-color: transparent;
-      color: $primary;
-    }
-
-    &:focus, &.focus {
-      background: transparent;
-      border-color: $gray-500;
-      color: $white;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-}
-
-.btn-inverse-outline-brand {
-  background: transparent;
-  color: $white;
-  border-color: $white;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $brand;
-      border-color: transparent;
-      color: $white;
-    }
-  }
-
-  &:not(:disabled):not(.disabled) {
-    &:focus, &.focus {
-      background: transparent;
-      border-color: $white;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-}
-
-.btn-inverse-brand {
-  background: $brand;
-  color: $white;
-  border-color: transparent;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $brand-700;
-      border-color: transparent;
-      color: white;
-    }
-
-    &:focus, &.focus {
-      background-color: $brand-500;
-
-      &:before {
-        border-color: $brand-500;
-      }
-    }
-  }
-
-  &:disabled, &.disabled {
-    background-color: $brand-500;
-    border-color: $brand-500;
-    color: $white;
-  }
-}
-
-.btn-inverse-tertiary:not(:disabled):not(.disabled) {
-  &:focus, &.focus {
-    background: transparent;
-
-    &:before {
-      border-color: $white;
-    }
-  }
-}
-
-.btn-inverse-primary {
-  background: $white;
-  color: $primary;
-  border-color: transparent;
-
-  &:not(:disabled):not(.disabled) {
-    &:hover, &:active, &.hover, &.active {
-      background: $primary-300;
-      border-color: transparent;
-      color: $white;
-    }
-
-    &:focus, &.focus {
-      background: $white;
-      color: $primary-500;
-
-      &:before {
-        border-color: $white;
-      }
-    }
-  }
-
-  &:disabled, &.disabled {
-    background-color: $white;
-    border-color: $white;
-  }
-}
-
 // Avatar buttons in tertiary style (the default) are darker than regular tertiary buttons
 .btn-avatar.btn-tertiary {
-  color: $primary-500;
+  color: var(--pgn-color-primary-500);
 }
 
 // Forms
@@ -261,7 +85,7 @@
     &.is-#{$state} {
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
       }
     }
   }
@@ -271,7 +95,7 @@
     &.is-#{$state} {
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
       }
     }
   }
@@ -280,26 +104,25 @@
 select.form-control {
   background-repeat: no-repeat;
   background-position: right 1rem center;
-  background-image: str-replace($custom-select-indicator, "#", "%23");
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
 }
 
 .popover-header {
-  border-bottom: solid 1px $gray-100;
+  border-bottom: solid 1px var(--pgn-color-gray-100);
 }
 
 // Grid
 
 .container {
-  padding-left: $grid-gutter-width;
-  padding-right: $grid-gutter-width;
+  padding-left: var(--pgn-spacing-grid-gutter-width);
+  padding-right: var(--pgn-spacing-grid-gutter-width);
 }
 
 .container-fluid {
-  padding-left: $grid-gutter-width;
-  padding-right: $grid-gutter-width;
+  padding-left: var(--pgn-spacing-grid-gutter-width);
+  padding-right: var(--pgn-spacing-grid-gutter-width);
 }
 
 
@@ -314,9 +137,10 @@ h1, .h1 {
   line-height: calc((44 / 16) * 1rem);
   letter-spacing: -2%;
 
-  @media (max-width: map-get($grid-breakpoints, "sm")) {
+  @media (--max-pgn-size-breakpoint-xs) {
     line-height: calc((40 / 16) * 1rem);
   }
+
   .mobile-type & {
     line-height: calc((40 / 16) * 1rem);
   }
@@ -357,9 +181,10 @@ h6, .h6 {
 p > a[href]:not(.btn),
 a.inline-link {
   text-decoration-line: underline;
-  text-decoration-color: rgba($link-color, .3);
+  text-decoration-color: rgba(var(--pgn-color-link-base), .3);
+
   &:hover {
-    text-decoration-color: rgba($link-color, 1);
+    text-decoration-color: rgba(var(--pgn-color-link-base), 1);
   }
 }
 
@@ -367,22 +192,26 @@ a.inline-link {
 
 .pgn__searchfield {
   border-radius: 0 !important;
+
   .btn {
-    background: $input-bg;
+    background: var(--pgn-color-form-input-bg-base);
     display: flex;
   }
+
   &.has-focus {
+    border-color: var(--pgn-color-form-input-focus-border) !important;
+
     .btn {
-      background: $input-focus-bg;
+      background: var(--pgn-color-form-input-focus-bg);
     }
-    border-color: $input-focus-border-color !important;
   }
 }
 
 // Progress Bar
 .progress {
-  border: $progress-bar-border-width solid $progress-bar-border-color;
+  border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border);
 }
+
 .progress-bar {
-  background-color: $progress-bar-bg;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
 }
diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css
index d4c74fb6..f65afad1 100644
--- a/paragon/css/core/custom-media-breakpoints.css
+++ b/paragon/css/core/custom-media-breakpoints.css
@@ -1,6 +1,6 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Sun, 04 Jun 2023 20:23:54 GMT
+ * Generated on Thu, 27 Jul 2023 08:38:40 GMT
  */
 
diff --git a/paragon/css/core/index.css b/paragon/css/core/index.css
index 88b2bbb8..4a993a98 100644
--- a/paragon/css/core/index.css
+++ b/paragon/css/core/index.css
@@ -1,4 +1,2 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono&display=swap');
-
-@import "./variables.css";
-@import "./custom-media-breakpoints.css";
+@import "custom-media-breakpoints.css";
+@import "variables.css";
diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css
index 9c74d659..3c328ee6 100644
--- a/paragon/css/core/variables.css
+++ b/paragon/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 15 Jun 2023 15:32:46 GMT
+ * Generated on Thu, 27 Jul 2023 08:38:40 GMT
  */
 
 :root {
@@ -25,7 +25,7 @@
   --pgn-spacing-card-spacer-y: 1rem;
   --pgn-spacing-card-spacer-x: 1.5rem;
   --pgn-spacing-btn-focus-gap: 2px;
-  --pgn-size-popover-border-width: 0;
+  --pgn-size-popover-border-width: 0px;
   --pgn-size-nav-pills-border-radius: 0;
   --pgn-size-image-thumbnail-border-radius: 0;
   --pgn-size-input-btn-border-width: 1px;
diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css
index 9e3d16ad..0206044e 100644
--- a/paragon/css/themes/light/variables.css
+++ b/paragon/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 Sun, 04 Jun 2023 20:23:54 GMT
+ * Generated on Thu, 27 Jul 2023 08:38:40 GMT
  */
 
 :root {
@@ -52,6 +52,7 @@
   --pgn-color-btn-disabled-border-inverse-success: #00000000;
   --pgn-color-btn-disabled-border-inverse-light: #00000000;
   --pgn-color-btn-disabled-border-inverse-dark: #00000000;
+  --pgn-color-btn-focus-bg-inverse-outline-brand: #00000000;
   --pgn-color-btn-border-warning: #00000000;
   --pgn-color-btn-border-secondary: #00000000;
   --pgn-color-btn-border-info: #00000000;
@@ -68,6 +69,7 @@
   --pgn-color-tooltip-bg-base: #00262BFF;
   --pgn-color-tooltip-light: #00262BFF;
   --pgn-color-pagination-text-base: #00262BFF;
+  --pgn-color-icon-button-bg-primary-inverse-active-base: #FFFFFFFF;
   --pgn-color-link-hover: #004972FF;
   --pgn-color-body-bg: #FFFFFFFF;
   --pgn-color-form-input-focus-bg: #FFFFFFFF;
@@ -93,42 +95,30 @@
   --pgn-color-btn-disabled-text-inverse-danger: #AB0D02FF;
   --pgn-color-btn-disabled-text-outline-danger: #AB0D02FF;
   --pgn-color-btn-disabled-text-inverse-outline-brand: #F2F0EFFF;
-  --pgn-color-btn-disabled-text-outline-brand: #D23228FF;
+  --pgn-color-btn-disabled-text-inverse-brand: #FFFFFFFF;
   --pgn-color-btn-focus-outline-inverse-outline-primary: #FFFFFFFF;
   --pgn-color-btn-focus-outline-inverse-primary: #FFFFFFFF;
   --pgn-color-btn-focus-outline-inverse-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-focus-outline-inverse-brand: #FFFFFFFF;
+  --pgn-color-btn-focus-outline-inverse-brand: #D23228FF;
+  --pgn-color-btn-focus-outline-outline-brand: #D23228FF;
+  --pgn-color-btn-focus-outline-brand: #D23228FF;
+  --pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF;
   --pgn-color-btn-focus-bg-inverse-success: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-inverse-secondary: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-secondary: #454545FF;
-  --pgn-color-btn-focus-bg-inverse-primary: #2D494EFF;
-  --pgn-color-btn-focus-bg-outline-primary: #00262BFF;
+  --pgn-color-btn-focus-bg-outline-success: #FFFFFFFF;
   --pgn-color-btn-focus-bg-inverse-info: #FFFFFFFF;
+  --pgn-color-btn-focus-bg-outline-info: #FFFFFFFF;
   --pgn-color-btn-focus-bg-inverse-dark: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-dark: #00262BFF;
-  --pgn-color-btn-focus-bg-inverse-danger: #EBEBEBFF;
+  --pgn-color-btn-focus-bg-outline-dark: #FFFFFFFF;
+  --pgn-color-btn-focus-bg-outline-danger: #FFFFFFFF;
   --pgn-color-btn-focus-bg-danger: #AB0D02FF;
-  --pgn-color-btn-focus-bg-inverse-outline-brand: #D23228FF;
-  --pgn-color-btn-focus-bg-outline-brand: #D23228FF;
-  --pgn-color-btn-focus-bg-inverse-brand: #921108FF;
+  --pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-focus-bg-inverse-brand: #D23228FF;
   --pgn-color-btn-focus-bg-brand: #D23228FF;
-  --pgn-color-btn-focus-border-inverse-primary: #2D494EFF;
-  --pgn-color-btn-focus-border-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-text-outline-warning: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-success: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-secondary: #FFFFFFFF;
-  --pgn-color-btn-focus-text-inverse-secondary: #454545FF;
-  --pgn-color-btn-focus-text-inverse-outline-primary: #00262BFF;
-  --pgn-color-btn-focus-text-inverse-primary: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-light: #FFFFFFFF;
+  --pgn-color-btn-focus-border-inverse-outline-brand: #FFFFFFFF;
   --pgn-color-btn-focus-text-inverse-outline-info: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-info: #FFFFFFFF;
-  --pgn-color-btn-focus-text-outline-dark: #FFFFFFFF;
   --pgn-color-btn-focus-text-inverse-dark: #00262BFF;
-  --pgn-color-btn-focus-text-outline-danger: #FFFFFFFF;
   --pgn-color-btn-focus-text-inverse-danger: #AB0D02FF;
-  --pgn-color-btn-focus-text-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-focus-text-outline-brand: #D23228FF;
   --pgn-color-btn-focus-text-inverse-brand: #FFFFFFFF;
   --pgn-color-btn-active-border-outline-warning: #F0CC00FF;
   --pgn-color-btn-active-border-outline-info: #03C7E8FF;
@@ -143,25 +133,33 @@
   --pgn-color-btn-active-bg-inverse-outline-dark: #FFFFFFFF;
   --pgn-color-btn-active-bg-outline-danger: #AB0D02FF;
   --pgn-color-btn-active-bg-danger: #690E07FF;
-  --pgn-color-btn-active-bg-inverse-brand: #921108FF;
+  --pgn-color-btn-active-bg-inverse-brand: #D23228FF;
   --pgn-color-btn-active-text-inverse-outline-warning: #000000FF;
   --pgn-color-btn-active-text-outline-warning: #FFFFFFFF;
+  --pgn-color-btn-active-text-warning: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-success: #00262BFF;
+  --pgn-color-btn-active-text-outline-success: #FFFFFFFF;
   --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-primary: #00262BFF;
   --pgn-color-btn-active-text-inverse-primary: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-primary: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-light: #00262BFF;
   --pgn-color-btn-active-text-outline-light: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-info: #00262BFF;
+  --pgn-color-btn-active-text-outline-info: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-dark: #00262BFF;
+  --pgn-color-btn-active-text-outline-dark: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-danger: #00262BFF;
+  --pgn-color-btn-active-text-outline-danger: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-inverse-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-outline-brand: #FFFFFFFF;
   --pgn-color-btn-hover-border-outline-warning: #F0CC00FF;
   --pgn-color-btn-hover-border-outline-primary: #00262BFF;
   --pgn-color-btn-hover-border-primary: #2D494EFF;
   --pgn-color-btn-hover-border-outline-info: #03C7E8FF;
   --pgn-color-btn-hover-border-outline-danger: #AB0D02FF;
   --pgn-color-btn-hover-border-outline-brand: #D23228FF;
-  --pgn-color-btn-hover-border-brand: #921108FF;
   --pgn-color-btn-hover-bg-outline-warning: #F0CC00FF;
   --pgn-color-btn-hover-bg-inverse-tertiary: #2D494EFF;
   --pgn-color-btn-hover-bg-outline-secondary: #454545FF;
@@ -171,9 +169,9 @@
   --pgn-color-btn-hover-bg-outline-info: #03C7E8FF;
   --pgn-color-btn-hover-bg-outline-dark: #00262BFF;
   --pgn-color-btn-hover-bg-outline-danger: #AB0D02FF;
-  --pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF;
-  --pgn-color-btn-hover-bg-outline-brand: #D23228FF;
+  --pgn-color-btn-hover-bg-inverse-brand: #921108FF;
   --pgn-color-btn-hover-text-outline-warning: #FFFFFFFF;
+  --pgn-color-btn-hover-text-warning: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-success: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-primary: #FFFFFFFF;
@@ -183,10 +181,10 @@
   --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF;
   --pgn-color-btn-hover-text-inverse-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-hover-text-inverse-brand: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-brand: #FFFFFFFF;
   --pgn-color-btn-border-outline-warning: #F2F0EFFF;
   --pgn-color-btn-border-outline-success: #F2F0EFFF;
-  --pgn-color-btn-border-success: #F2F0EFFF;
   --pgn-color-btn-border-outline-secondary: #F2F0EFFF;
   --pgn-color-btn-border-outline-primary: #F2F0EFFF;
   --pgn-color-btn-border-outline-light: #F2F0EFFF;
@@ -203,7 +201,6 @@
   --pgn-color-btn-bg-inverse-light: #000000FF;
   --pgn-color-btn-bg-outline-info: #FFFFFFFF;
   --pgn-color-btn-bg-info: #03C7E8FF;
-  --pgn-color-btn-bg-inverse-brand: #D23228FF;
   --pgn-color-btn-text-warning: #000000FF;
   --pgn-color-btn-text-light: #000000FF;
   --pgn-color-btn-text-inverse-info: #03C7E8FF;
@@ -238,65 +235,49 @@
   --pgn-color-form-input-base: #454545FF;
   --pgn-color-btn-disabled-border-outline-primary: #F2F0EFFF;
   --pgn-color-btn-disabled-border-outline-light: #F2F0EFFF;
+  --pgn-color-btn-disabled-border-inverse-brand: #D23228FF;
   --pgn-color-btn-disabled-bg-light: #E1DDDBFF;
+  --pgn-color-btn-disabled-bg-inverse-brand: #D23228FF;
   --pgn-color-btn-disabled-text-outline-light: #E1DDDBFF;
   --pgn-color-btn-disabled-text-inverse-info: #03C7E8FF;
   --pgn-color-btn-disabled-text-outline-dark: #00262BFF;
-  --pgn-color-btn-focus-bg-inverse-warning: #000000FF;
-  --pgn-color-btn-focus-bg-outline-warning: #F0CC00FF;
-  --pgn-color-btn-focus-bg-warning: #F0CC00FF;
-  --pgn-color-btn-focus-bg-outline-secondary: #454545FF;
-  --pgn-color-btn-focus-bg-inverse-outline-primary: #FFFFFFFF;
-  --pgn-color-btn-focus-bg-primary: #2D494EFF;
+  --pgn-color-btn-disabled-text-outline-brand: #D23228FF;
+  --pgn-color-btn-focus-outline-outline-light: #E1DDDBFF;
   --pgn-color-btn-focus-bg-inverse-light: #000000FF;
-  --pgn-color-btn-focus-bg-outline-light: #E1DDDBFF;
-  --pgn-color-btn-focus-bg-light: #E1DDDBFF;
-  --pgn-color-btn-focus-bg-outline-info: #03C7E8FF;
-  --pgn-color-btn-focus-bg-info: #03C7E8FF;
-  --pgn-color-btn-focus-bg-outline-dark: #00262BFF;
-  --pgn-color-btn-focus-bg-outline-danger: #AB0D02FF;
-  --pgn-color-btn-focus-border-outline-secondary: #454545FF;
-  --pgn-color-btn-focus-border-inverse-outline-primary: #FFFFFFFF;
   --pgn-color-btn-focus-border-primary: #2D494EFF;
-  --pgn-color-btn-focus-border-inverse-outline-brand: #D23228FF;
-  --pgn-color-btn-focus-border-inverse-brand: #921108FF;
-  --pgn-color-btn-focus-border-outline-brand: #D23228FF;
-  --pgn-color-btn-focus-text-warning: #000000FF;
+  --pgn-color-btn-focus-border-inverse-brand: #D23228FF;
+  --pgn-color-btn-focus-border-outline-brand: #F2F0EFFF;
   --pgn-color-btn-focus-text-tertiary: #454545FF;
   --pgn-color-btn-focus-text-light: #000000FF;
   --pgn-color-btn-active-border-outline-success: #0D7D4DFF;
   --pgn-color-btn-active-border-outline-secondary: #454545FF;
   --pgn-color-btn-active-border-outline-light: #E1DDDBFF;
   --pgn-color-btn-active-border-danger: #690E07FF;
+  --pgn-color-btn-active-border-brand: #93231CFF;
   --pgn-color-btn-active-bg-outline-success: #0D7D4DFF;
   --pgn-color-btn-active-bg-inverse-outline-light: #FDFDFDFF;
+  --pgn-color-btn-active-bg-brand: #93231CFF;
   --pgn-color-btn-active-text-light: #000000FF;
   --pgn-color-btn-hover-border-outline-success: #0D7D4DFF;
   --pgn-color-btn-hover-border-outline-light: #E1DDDBFF;
   --pgn-color-btn-hover-bg-outline-success: #0D7D4DFF;
   --pgn-color-btn-hover-bg-inverse-outline-primary: #FFFFFFFF;
   --pgn-color-btn-hover-bg-outline-light: #E1DDDBFF;
+  --pgn-color-btn-hover-bg-inverse-outline-brand: #D23228FF;
+  --pgn-color-btn-hover-bg-outline-brand: #D23228FF;
   --pgn-color-btn-hover-text-light: #000000FF;
   --pgn-color-btn-border-inverse-outline-primary: #707070FF;
+  --pgn-color-btn-bg-inverse-brand: #D23228FF;
   --pgn-color-input-btn-focus: #00262BFF;
   --pgn-color-btn-disabled-border-inverse-outline-primary: #707070FF;
   --pgn-color-btn-disabled-text-inverse-warning: #D6B600FF;
   --pgn-color-btn-disabled-text-outline-warning: #D6B600FF;
   --pgn-color-btn-disabled-text-inverse-success: #0D7D4DFF;
   --pgn-color-btn-disabled-text-outline-success: #0D7D4DFF;
-  --pgn-color-btn-focus-outline-outline-light: #E1DDDBFF;
-  --pgn-color-btn-focus-bg-outline-success: #0D7D4DFF;
   --pgn-color-btn-focus-bg-success: #0D7D4DFF;
-  --pgn-color-btn-focus-border-outline-warning: #F0CC00FF;
-  --pgn-color-btn-focus-border-outline-light: #E1DDDBFF;
   --pgn-color-btn-focus-border-light: #E1DDDBFF;
-  --pgn-color-btn-focus-border-outline-info: #03C7E8FF;
-  --pgn-color-btn-focus-border-outline-dark: #00262BFF;
-  --pgn-color-btn-focus-border-outline-danger: #AB0D02FF;
-  --pgn-color-btn-focus-text-inverse-warning: #D6B600FF;
   --pgn-color-btn-focus-text-inverse-success: #0D7D4DFF;
   --pgn-color-theme-focus-secondary: #373737FF;
-  --pgn-color-btn-focus-border-outline-success: #0D7D4DFF;
   --pgn-color-btn-focus-border-success: #0D7D4DFF;
   --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23AB0D02FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E");
   --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='%230D7D4DFF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e");
diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
index a95f7bf2..c7918f6f 100644
--- a/tokens/src/core/components/Popover.json
+++ b/tokens/src/core/components/Popover.json
@@ -2,7 +2,7 @@
   "size": {
     "popover": {
       "border": {
-        "width": { "value": "0" }
+        "width": { "value": "0px" }
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
index 3532728c..b7df6667 100644
--- a/tokens/src/themes/light/components/Button/brand.json
+++ b/tokens/src/themes/light/components/Button/brand.json
@@ -5,7 +5,7 @@
         "inverse-brand": { "value": "{color.white}" }
       },
       "bg": {
-        "inverse-brand": { "value": "{color.brand.base}", "modify": null }
+        "inverse-brand": { "value": "{color.brand.500}", "modify": null }
       },
       "border": {
         "brand": { "value": "transparent" },
@@ -14,57 +14,69 @@
       },
       "hover": {
         "text": {
+          "inverse-brand": { "value": "{color.white}", "modify": null },
           "outline-brand": { "value": "{color.white}" },
           "inverse-outline-brand": { "value": "{color.white}" }
         },
         "bg": {
-          "outline-brand": { "value": "{color.brand.base}" },
-          "inverse-outline-brand": { "value": "{color.brand.base}" }
+          "inverse-brand": { "value": "{color.brand.700}", "modify": null },
+          "outline-brand": { "value": "{color.brand.500}" },
+          "inverse-outline-brand": { "value": "{color.brand.500}" }
         },
         "border": {
-          "brand": { "value": "{color.brand.700}" },
           "outline-brand": { "value": "{color.brand.base}" }
         }
       },
       "active": {
         "text": {
-          "inverse-brand": { "modify": null }
+          "outline-brand": { "value": "{color.white}", "modify": null },
+          "inverse-brand": { "value": "{color.white}", "modify": null },
+          "inverse-outline-brand": { "value": "{color.white}", "modify": null }
         },
         "border": {
+          "brand": { "value": "{color.brand.900}" },
           "outline-brand": { "value": "{color.brand.base}" }
         },
         "bg": {
-          "inverse-brand": { "value": "{color.brand.700}" }
+          "brand": { "value": "{color.brand.900}" },
+          "inverse-brand": { "value": "{color.brand.base}" }
         }
       },
       "focus": {
         "text": {
           "inverse-brand": { "value": "{color.white}" },
-          "outline-brand": { "value": "{color.white}" }
+          "outline-brand": { "value": "{color.brand.base}" }
         },
         "bg": {
           "brand": { "value": "{color.brand.base}" },
-          "inverse-brand": { "value": "{color.brand.700}" },
-          "outline-brand": { "value": "{color.brand.base}" },
-          "inverse-outline-brand": { "value": "{color.brand.base}" }
+          "inverse-brand": { "value": "{color.brand.base}" },
+          "outline-brand": { "value": "{color.white}" },
+          "inverse-outline-brand": { "value": "transparent" }
         },
         "border": {
-          "outline-brand": { "value": "{color.btn.focus.bg.outline-brand}" },
+          "outline-brand": { "value": "{color.btn.border.outline-brand}" },
           "inverse-brand": { "value": "{color.btn.focus.bg.inverse-brand}" },
-          "inverse-outline-brand": { "value": "{color.btn.focus.bg.inverse-outline-brand}" }
+          "inverse-outline-brand": { "value": "{color.white}" }
         },
         "outline": {
-          "inverse-brand": { "value": "{color.white}" },
+          "brand": { "value": "{color.brand.base}" },
+          "outline-brand": { "value": "{color.brand.base}" },
+          "inverse-brand": { "value": "{color.brand.base}" },
           "inverse-outline-brand": { "value": "{color.white}" }
         }
       },
       "disabled": {
         "text": {
-          "outline-brand": { "value": "{color.brand.base}" },
+          "outline-brand": { "value": "{color.brand.500}" },
+          "inverse-brand": { "value": "{color.white}" },
           "inverse-outline-brand": { "value": "{color.light.300}" }
         },
         "border": {
-          "outline-brand": { "value": "{color.light.300}" }
+          "outline-brand": { "value": "{color.light.300}" },
+          "inverse-brand": { "value": "{color.brand.500}" }
+        },
+        "bg": {
+          "inverse-brand": { "value": "{color.brand.500}" }
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
index 4c674362..a6456e15 100644
--- a/tokens/src/themes/light/components/Button/danger.json
+++ b/tokens/src/themes/light/components/Button/danger.json
@@ -18,6 +18,7 @@
       },
       "active": {
         "text": {
+          "outline-danger": { "value": "{color.white}", "modify": null },
           "inverse-outline-danger": { "value": "{color.primary.base}", "modify": null }
         },
         "bg": {
@@ -31,16 +32,11 @@
       },
       "focus": {
         "text": {
-          "inverse-danger": { "value": "{color.red}" },
-          "outline-danger": { "value": "{color.white}" }
+          "inverse-danger": { "value": "{color.red}" }
         },
         "bg": {
           "danger": { "value": "{color.red}" },
-          "outline-danger": { "value": "{color.btn.active.bg.outline-danger}" },
-          "inverse-danger": { "value": "{color.gray.100}" }
-        },
-        "border": {
-          "outline-danger": { "value": "{color.btn.focus.bg.outline-danger}" }
+          "outline-danger": { "value": "{color.white}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
index daf2e7b8..c3febce1 100644
--- a/tokens/src/themes/light/components/Button/dark.json
+++ b/tokens/src/themes/light/components/Button/dark.json
@@ -6,6 +6,7 @@
           "inverse-outline-dark": { "value": "{color.white}" }
         },
         "text": {
+          "outline-dark": { "value": "{color.white}", "modify": null },
           "inverse-outline-dark": { "value": "{color.primary.base}", "modify": null }
         }
       },
@@ -22,16 +23,11 @@
       },
       "focus": {
         "text": {
-          "inverse-dark": { "value": "{color.dark.base}" },
-          "outline-dark": { "value": "{color.white}" }
+          "inverse-dark": { "value": "{color.dark.base}" }
         },
         "bg": {
-          "dark": { "value": "{color.dark.base}" },
-          "outline-dark": { "value": "{color.btn.hover.bg.outline-dark}" },
+          "outline-dark": { "value": "{color.white}" },
           "inverse-dark": { "value": "{color.white}" }
-        },
-        "border": {
-          "outline-dark": { "value": "{color.btn.focus.bg.outline-dark}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json
index 0d1de29e..338b965b 100644
--- a/tokens/src/themes/light/components/Button/info.json
+++ b/tokens/src/themes/light/components/Button/info.json
@@ -26,6 +26,7 @@
       },
       "active": {
         "text": {
+          "outline-info": { "value": "{color.white}", "modify": null },
           "inverse-outline-info": { "value": "{color.primary.base}", "modify": null }
         },
         "bg": {
@@ -37,16 +38,11 @@
       },
       "focus": {
         "text": {
-          "inverse-outline-info": { "value": "{color.white}" },
-          "outline-info": { "value": "{color.white}" }
+          "inverse-outline-info": { "value": "{color.white}" }
         },
         "bg": {
-          "info": { "value": "{color.btn.bg.info}" },
-          "outline-info": { "value": "{color.btn.active.bg.outline-info}" },
+          "outline-info": { "value": "{color.white}" },
           "inverse-info": { "value": "{color.white}" }
-        },
-        "border": {
-          "outline-info": { "value": "{color.btn.focus.bg.outline-info}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json
index d91497e4..f115027a 100644
--- a/tokens/src/themes/light/components/Button/light.json
+++ b/tokens/src/themes/light/components/Button/light.json
@@ -38,20 +38,16 @@
       },
       "focus": {
         "text": {
-          "light": { "value": "{color.btn.text.light}", "modify": null },
-          "outline-light": { "value": "{color.white}" }
+          "light": { "value": "{color.btn.text.light}", "modify": null }
         },
         "border": {
-          "light": { "value": "{color.btn.focus.bg.light}" },
-          "outline-light": { "value": "{color.btn.focus.bg.outline-light}" }
+          "light": { "value": "{color.btn.focus.bg.light}" }
         },
         "bg": {
-          "light": { "value": "{color.theme.bg.light}" },
-          "outline-light": { "value": "{color.theme.bg.light}" },
           "inverse-light": { "value": "{color.btn.bg.inverse-light}" }
         },
         "outline": {
-          "outline-light": { "value": "{color.btn.focus.bg.outline-light}" }
+          "outline-light": { "value": "{color.theme.bg.light}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
index 484e8846..eb7cf6f4 100644
--- a/tokens/src/themes/light/components/Button/primary.json
+++ b/tokens/src/themes/light/components/Button/primary.json
@@ -26,6 +26,7 @@
       },
       "active": {
         "text": {
+          "outline-primary": { "value": "{color.white}", "modify": null },
           "inverse-primary": { "value": "{color.white}", "modify": null },
           "inverse-outline-primary": { "value": "{color.primary.base}", "modify": null }
         },
@@ -35,22 +36,8 @@
         }
       },
       "focus": {
-        "text": {
-          "outline-primary": { "value": "{color.white}" },
-          "inverse-primary": { "value": "{color.white}" },
-          "inverse-outline-primary": { "value": "{color.primary.base}" }
-        },
-        "bg": {
-          "primary": { "value": "{color.btn.hover.bg.primary}" },
-          "outline-primary": { "value": "{color.primary.base}" },
-          "inverse-primary": { "value": "{color.primary.300}" },
-          "inverse-outline-primary": { "value": "{color.btn.active.bg.inverse-outline-primary}" }
-        },
         "border": {
-          "primary": { "value": "{color.btn.hover.bg.primary}" },
-          "outline-primary": { "value": "{color.primary.base}" },
-          "inverse-primary": { "value": "{color.primary.300}" },
-          "inverse-outline-primary": { "value": "{color.btn.active.bg.inverse-outline-primary}" }
+          "primary": { "value": "{color.btn.hover.bg.primary}" }
         },
         "outline": {
           "inverse-primary": { "value": "{color.white}" },
diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
index b1d1c287..37cb1737 100644
--- a/tokens/src/themes/light/components/Button/secondary.json
+++ b/tokens/src/themes/light/components/Button/secondary.json
@@ -27,20 +27,6 @@
           "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" }
         }
       },
-      "focus": {
-        "text": {
-          "inverse-secondary": { "value": "{color.gray.700}" },
-          "outline-secondary": { "value": "{color.white}" }
-        },
-        "bg": {
-          "secondary": { "value": "{color.gray.700}" },
-          "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" },
-          "inverse-secondary": { "value": "{color.white}", "modify": null }
-        },
-        "border": {
-          "outline-secondary": { "value": "{color.btn.active.bg.outline-secondary}" }
-        }
-      },
       "disabled": {
         "text": {
           "outline-secondary": { "value": "{color.gray.700}" }
diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
index f6ca4539..2eeccdef 100644
--- a/tokens/src/themes/light/components/Button/success.json
+++ b/tokens/src/themes/light/components/Button/success.json
@@ -2,7 +2,6 @@
   "color": {
     "btn": {
       "border": {
-        "success": { "value": "{color.light.300}" },
         "outline-success": { "value": "{color.light.300}" }
       },
       "hover": {
@@ -24,22 +23,21 @@
           "outline-success": { "value": "{color.success.base}" }
         },
         "text": {
+          "outline-success": { "value": "{color.white}", "modify": null },
           "inverse-outline-success": { "value": "{color.primary.base}", "modify": null  }
         }
       },
       "focus": {
         "text": {
-          "outline-success": { "value": "{color.white}" },
           "inverse-success": { "value": "{color.btn.text.inverse-success}" }
         },
         "bg": {
           "success": { "value": "{color.btn.bg.success}" },
-          "outline-success": { "value": "{color.btn.bg.success}" },
+          "outline-success": { "value": "{color.white}" },
           "inverse-success": { "value": "{color.white}" }
         },
         "border": {
-          "success": { "value": "{color.btn.focus.bg.success}" },
-          "outline-success": { "value": "{color.btn.focus.bg.outline-success}" }
+          "success": { "value": "{color.btn.focus.bg.success}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json
index 4088382f..4bf37eba 100644
--- a/tokens/src/themes/light/components/Button/warning.json
+++ b/tokens/src/themes/light/components/Button/warning.json
@@ -14,6 +14,7 @@
       },
       "hover": {
         "text": {
+          "warning": { "value": "{color.white}", "modify": null },
           "outline-warning": { "value": "{color.white}" }
         },
         "bg": {
@@ -25,6 +26,7 @@
       },
       "active": {
         "text": {
+          "warning": { "value": "{color.white}", "modify": null },
           "outline-warning": { "value": "{color.white}", "modify": null },
           "inverse-outline-warning": { "value": "{color.black}", "modify": null }
         },
@@ -36,18 +38,8 @@
         }
       },
       "focus": {
-        "text": {
-          "warning": { "value": "{color.btn.text.warning}" },
-          "outline-warning": { "value": "{color.white}" },
-          "inverse-warning": { "value": "{color.btn.text.inverse-warning}" }
-        },
         "bg": {
-          "warning": { "value": "{color.btn.bg.warning}" },
-          "outline-warning": { "value": "{color.btn.hover.bg.outline-warning}" },
-          "inverse-warning": { "value": "{color.btn.bg.inverse-warning}" }
-        },
-        "border": {
-          "outline-warning": { "value": "{color.btn.focus.bg.outline-warning}" }
+          "outline-warning": { "value": "{color.white}" }
         }
       },
       "disabled": {
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
new file mode 100644
index 00000000..c3d189c8
--- /dev/null
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -0,0 +1,13 @@
+{
+  "color": {
+    "icon-button": {
+      "bg": { 
+        "primary": {
+          "inverse-active": {
+            "base": { "value": "{color.white}", "type": "color" }
+          }
+        }
+      }
+    }
+  }
+}