diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
index e5168e5308..150036c262 100644
--- a/scss/core/css/utility-classes.css
+++ b/scss/core/css/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Tue, 31 Jan 2023 09:38:46 GMT
+ * Generated on Wed, 15 Feb 2023 14:44:39 GMT
  */
 
 .bg-dark {
diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
index a945b2aecb..c8e5f992da 100644
--- a/scss/core/css/variables.css
+++ b/scss/core/css/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Tue, 31 Jan 2023 09:38:46 GMT
+ * Generated on Wed, 15 Feb 2023 14:44:39 GMT
  */
 
 :root {
@@ -448,7 +448,7 @@
   --pgn-color-blue: #23419FFF;
   --pgn-color-black: #000000FF;
   --pgn-color-white: #FFFFFFFF;
-  --pgn-color-toast-base: #000000FF;
+  --pgn-color-toast-base: inherit;
   --pgn-color-progress-bar-bg: #00000000;
   --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000;
   --pgn-color-popover-border: #00000033;
@@ -457,39 +457,148 @@
   --pgn-color-menu-border-base: #00000000;
   --pgn-color-icon-button-bg: #00000000;
   --pgn-color-mark-bg: #FFF243FF;
-  --pgn-color-list-group-base: #000000FF;
+  --pgn-color-list-group-base: inherit;
   --pgn-color-form-control-select-bg-size: #000000FF;
-  --pgn-color-form-control-label-base: #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: #000000FF;
+  --pgn-color-card-base: inherit;
+  --pgn-color-btn-disabled-border-inverse-warning: #00000000;
+  --pgn-color-btn-disabled-border-inverse-outline-success: inherit;
+  --pgn-color-btn-disabled-border-inverse-success: #00000000;
+  --pgn-color-btn-disabled-border-secondary: inherit;
+  --pgn-color-btn-disabled-border-inverse-primary: #00000000;
+  --pgn-color-btn-disabled-border-inverse-light: #00000000;
+  --pgn-color-btn-disabled-border-inverse-info: #00000000;
+  --pgn-color-btn-disabled-border-inverse-dark: #00000000;
+  --pgn-color-btn-disabled-border-inverse-danger: #00000000;
+  --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-disabled-bg-inverse-warning: inherit;
+  --pgn-color-btn-disabled-bg-outline-warning: inherit;
+  --pgn-color-btn-disabled-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-tertiary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-disabled-bg-inverse-success: inherit;
+  --pgn-color-btn-disabled-bg-outline-success: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-bg-outline-secondary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-outline-primary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-primary: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-disabled-bg-inverse-light: inherit;
+  --pgn-color-btn-disabled-bg-outline-light: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-disabled-bg-inverse-info: inherit;
+  --pgn-color-btn-disabled-bg-outline-info: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-inverse-dark: inherit;
+  --pgn-color-btn-disabled-bg-outline-dark: inherit;
+  --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit;
+  --pgn-color-btn-disabled-bg-inverse-danger: #00000000;
+  --pgn-color-btn-disabled-bg-outline-danger: inherit;
+  --pgn-color-btn-disabled-bg-inverse-brand: #00000000;
+  --pgn-color-btn-disabled-bg-outline-brand: inherit;
+  --pgn-color-btn-disabled-text-inverse-secondary: inherit;
+  --pgn-color-btn-disabled-text-outline-secondary: inherit;
+  --pgn-color-btn-disabled-text-outline-dark: inherit;
+  --pgn-color-btn-focus-outline-inverse-outline-warning: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-focus-bg-outline-warning: inherit;
+  --pgn-color-btn-focus-bg-inverse-tertiary: inherit;
+  --pgn-color-btn-focus-bg-tertiary: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-focus-bg-outline-success: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-focus-bg-outline-secondary: #00000000;
+  --pgn-color-btn-focus-bg-inverse-outline-primary: inherit;
+  --pgn-color-btn-focus-bg-outline-primary: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-focus-bg-outline-light: #00000000;
+  --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-focus-bg-outline-info: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-outline-dark: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
+  --pgn-color-btn-focus-bg-outline-danger: inherit;
+  --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
+  --pgn-color-btn-focus-bg-outline-brand: inherit;
+  --pgn-color-btn-focus-border-inverse-tertiary: #00000000;
+  --pgn-color-btn-focus-text-inverse-secondary: inherit;
+  --pgn-color-btn-focus-text-outline-dark: inherit;
   --pgn-color-btn-active-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-active-border-inverse-warning: inherit;
   --pgn-color-btn-active-border-inverse-tertiary: #00000000;
   --pgn-color-btn-active-border-tertiary: #00000000;
   --pgn-color-btn-active-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-active-border-inverse-success: inherit;
+  --pgn-color-btn-active-border-inverse-secondary: #00000000;
   --pgn-color-btn-active-border-inverse-outline-secondary: #00000000;
+  --pgn-color-btn-active-border-inverse-primary: #00000000;
   --pgn-color-btn-active-border-inverse-outline-primary: #00000000;
   --pgn-color-btn-active-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-active-border-inverse-light: inherit;
   --pgn-color-btn-active-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-active-border-inverse-info: #00000000;
   --pgn-color-btn-active-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-active-border-inverse-dark: #00000000;
   --pgn-color-btn-active-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-active-border-inverse-danger: #00000000;
   --pgn-color-btn-active-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-active-border-inverse-brand: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-warning: #00000000;
+  --pgn-color-btn-hover-border-inverse-warning: #00000000;
   --pgn-color-btn-hover-border-inverse-tertiary: #00000000;
   --pgn-color-btn-hover-border-tertiary: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-success: #00000000;
+  --pgn-color-btn-hover-border-inverse-success: #00000000;
+  --pgn-color-btn-hover-border-inverse-secondary: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000;
+  --pgn-color-btn-hover-border-inverse-primary: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-primary: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-light: #00000000;
+  --pgn-color-btn-hover-border-inverse-light: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-info: #00000000;
+  --pgn-color-btn-hover-border-inverse-info: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-dark: #00000000;
+  --pgn-color-btn-hover-border-inverse-dark: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-danger: #00000000;
+  --pgn-color-btn-hover-border-inverse-danger: #00000000;
+  --pgn-color-btn-hover-border-inverse-brand: #00000000;
   --pgn-color-btn-hover-border-inverse-outline-brand: #00000000;
+  --pgn-color-btn-border-inverse-warning: #00000000;
   --pgn-color-btn-border-inverse-tertiary: #00000000;
   --pgn-color-btn-border-tertiary: #00000000;
+  --pgn-color-btn-border-inverse-success: #00000000;
+  --pgn-color-btn-border-inverse-secondary: #00000000;
+  --pgn-color-btn-border-inverse-primary: #00000000;
+  --pgn-color-btn-border-inverse-light: #00000000;
+  --pgn-color-btn-border-inverse-info: #00000000;
+  --pgn-color-btn-border-inverse-dark: #00000000;
+  --pgn-color-btn-border-inverse-danger: #00000000;
+  --pgn-color-btn-border-inverse-brand: #00000000;
+  --pgn-color-btn-bg-inverse-outline-warning: inherit;
+  --pgn-color-btn-bg-outline-warning: inherit;
   --pgn-color-btn-bg-inverse-tertiary: #00000000;
   --pgn-color-btn-bg-tertiary: #00000000;
+  --pgn-color-btn-bg-inverse-outline-success: inherit;
+  --pgn-color-btn-bg-outline-success: inherit;
+  --pgn-color-btn-bg-inverse-outline-secondary: inherit;
+  --pgn-color-btn-bg-outline-secondary: inherit;
+  --pgn-color-btn-bg-inverse-outline-primary: #00000000;
+  --pgn-color-btn-bg-outline-primary: #00000000;
+  --pgn-color-btn-bg-inverse-outline-light: inherit;
+  --pgn-color-btn-bg-outline-light: inherit;
+  --pgn-color-btn-bg-inverse-outline-info: inherit;
+  --pgn-color-btn-bg-outline-info: inherit;
+  --pgn-color-btn-bg-inverse-outline-dark: #00000000;
+  --pgn-color-btn-bg-outline-dark: inherit;
+  --pgn-color-btn-bg-inverse-outline-danger: #00000000;
+  --pgn-color-btn-bg-outline-danger: inherit;
+  --pgn-color-btn-bg-inverse-outline-brand: #00000000;
+  --pgn-color-btn-bg-outline-brand: inherit;
   --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
   --pgn-elevation-scrollable-body-box-shadow: #0000008C;
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
@@ -756,25 +865,37 @@
   --pgn-color-carousel-control-base: var(--pgn-color-white);
   --pgn-color-card-border-focus: #00000080;
   --pgn-color-card-border-base: #00000020;
-  --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-tertiary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-white);
+  --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary);
+  --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary);
+  --pgn-color-btn-disabled-border-inverse-secondary: var(--pgn-color-btn-border-inverse-secondary);
+  --pgn-color-btn-disabled-border-inverse-brand: var(--pgn-color-btn-disabled-bg-inverse-brand);
+  --pgn-color-btn-disabled-bg-inverse-outline-brand: var(--pgn-color-btn-bg-inverse-outline-brand);
+  --pgn-color-btn-focus-outline-inverse-warning: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-tertiary: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-secondary: var(--pgn-color-white);
+  --pgn-color-btn-focus-outline-inverse-light: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-warning: var(--pgn-color-btn-border-inverse-warning);
+  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-btn-border-tertiary);
   --pgn-color-btn-focus-border-inverse-success: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-outline-secondary: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-secondary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-primary: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-white);
+  --pgn-color-btn-focus-border-inverse-light: var(--pgn-color-btn-border-inverse-light);
   --pgn-color-btn-focus-border-inverse-info: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-outline-dark: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-dark: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-outline-danger: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-danger: var(--pgn-color-white);
-  --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-white);
   --pgn-color-btn-focus-border-inverse-brand: var(--pgn-color-white);
+  --pgn-color-btn-active-bg-inverse-warning: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-success: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-secondary: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-primary: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-light: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-info: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-dark: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-danger: var(--pgn-color-gray-100);
+  --pgn-color-btn-active-bg-inverse-brand: var(--pgn-color-gray-100);
   --pgn-color-btn-active-text-inverse-tertiary: var(--pgn-color-white);
   --pgn-color-btn-active-text-tertiary: var(--pgn-color-gray-700);
   --pgn-color-btn-hover-bg-inverse-tertiary: #FFFFFF1A;
@@ -1003,6 +1124,82 @@
   --pgn-color-chip-bg-light: var(--pgn-color-light-500);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
   --pgn-color-card-bg: var(--pgn-color-bg-base);
+  --pgn-color-btn-disabled-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-btn-disabled-border-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-disabled-border-outline-secondary: var(--pgn-color-secondary-base);
+  --pgn-color-btn-disabled-border-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-disabled-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-disabled-border-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-disabled-border-inverse-outline-danger: var(--pgn-color-btn-border-inverse-outline-danger);
+  --pgn-color-btn-disabled-border-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-disabled-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-disabled-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-disabled-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-disabled-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-disabled-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
+  --pgn-color-btn-disabled-text-inverse-warning: var(--pgn-color-warning-base);
+  --pgn-color-btn-disabled-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-disabled-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-disabled-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
+  --pgn-color-btn-disabled-text-inverse-success: var(--pgn-color-success-base);
+  --pgn-color-btn-disabled-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
+  --pgn-color-btn-disabled-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-disabled-text-inverse-primary: var(--pgn-color-primary-500);
+  --pgn-color-btn-disabled-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-disabled-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-disabled-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
+  --pgn-color-btn-disabled-text-inverse-info: var(--pgn-color-info-base);
+  --pgn-color-btn-disabled-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-disabled-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
+  --pgn-color-btn-disabled-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
+  --pgn-color-btn-disabled-text-inverse-danger: var(--pgn-color-danger-base);
+  --pgn-color-btn-disabled-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-disabled-text-inverse-brand: var(--pgn-color-brand-500);
+  --pgn-color-btn-focus-outline-inverse-success: var(--pgn-color-btn-focus-border-inverse-success);
+  --pgn-color-btn-focus-outline-inverse-outline-secondary: var(--pgn-color-btn-border-inverse-outline-secondary);
+  --pgn-color-btn-focus-outline-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-outline-inverse-primary: var(--pgn-color-btn-focus-border-inverse-primary);
+  --pgn-color-btn-focus-outline-light: var(--pgn-color-primary-300);
+  --pgn-color-btn-focus-outline-inverse-info: var(--pgn-color-btn-focus-border-inverse-info);
+  --pgn-color-btn-focus-outline-inverse-outline-dark: var(--pgn-color-btn-focus-border-inverse-outline-dark);
+  --pgn-color-btn-focus-outline-inverse-dark: var(--pgn-color-btn-focus-border-inverse-dark);
+  --pgn-color-btn-focus-outline-inverse-outline-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-inverse-danger: var(--pgn-color-btn-focus-border-inverse-danger);
+  --pgn-color-btn-focus-outline-inverse-brand: var(--pgn-color-btn-focus-border-inverse-brand);
+  --pgn-color-btn-focus-bg-primary: var(--pgn-color-btn-bg-primary);
+  --pgn-color-btn-focus-bg-light: var(--pgn-color-btn-bg-light);
+  --pgn-color-btn-focus-bg-dark: var(--pgn-color-btn-bg-dark);
+  --pgn-color-btn-focus-bg-brand: var(--pgn-color-btn-bg-brand);
+  --pgn-color-btn-focus-border-inverse-outline-warning: var(--pgn-color-btn-border-inverse-outline-warning);
+  --pgn-color-btn-focus-border-inverse-outline-success: var(--pgn-color-btn-border-inverse-outline-success);
+  --pgn-color-btn-focus-border-inverse-outline-primary: var(--pgn-color-btn-border-inverse-outline-primary);
+  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-btn-border-outline-primary);
+  --pgn-color-btn-focus-border-inverse-outline-light: var(--pgn-color-btn-border-inverse-outline-light);
+  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-btn-border-outline-light);
+  --pgn-color-btn-focus-border-inverse-outline-info: var(--pgn-color-btn-border-inverse-outline-info);
+  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-btn-border-outline-dark);
+  --pgn-color-btn-focus-border-inverse-outline-brand: var(--pgn-color-btn-border-inverse-outline-brand);
+  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-btn-border-outline-brand);
+  --pgn-color-btn-focus-text-inverse-outline-warning: var(--pgn-color-btn-text-inverse-outline-warning);
+  --pgn-color-btn-focus-text-inverse-tertiary: var(--pgn-color-btn-text-inverse-tertiary);
+  --pgn-color-btn-focus-text-tertiary: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-btn-focus-text-inverse-outline-success: var(--pgn-color-btn-text-inverse-outline-success);
+  --pgn-color-btn-focus-text-inverse-outline-secondary: var(--pgn-color-btn-text-inverse-outline-secondary);
+  --pgn-color-btn-focus-text-inverse-outline-primary: var(--pgn-color-btn-text-inverse-outline-primary);
+  --pgn-color-btn-focus-text-inverse-primary: var(--pgn-color-btn-text-inverse-primary);
+  --pgn-color-btn-focus-text-outline-primary: var(--pgn-color-btn-text-outline-primary);
+  --pgn-color-btn-focus-text-inverse-outline-light: var(--pgn-color-btn-text-inverse-outline-light);
+  --pgn-color-btn-focus-text-inverse-light: var(--pgn-color-btn-text-inverse-light);
+  --pgn-color-btn-focus-text-outline-light: var(--pgn-color-btn-text-outline-light);
+  --pgn-color-btn-focus-text-inverse-outline-info: var(--pgn-color-btn-text-inverse-outline-info);
+  --pgn-color-btn-focus-text-inverse-outline-dark: var(--pgn-color-btn-text-inverse-outline-dark);
+  --pgn-color-btn-focus-text-inverse-dark: var(--pgn-color-btn-text-inverse-dark);
+  --pgn-color-btn-focus-text-inverse-outline-danger: var(--pgn-color-btn-text-inverse-outline-danger);
+  --pgn-color-btn-focus-text-inverse-outline-brand: var(--pgn-color-btn-text-inverse-outline-brand);
+  --pgn-color-btn-focus-text-outline-brand: var(--pgn-color-btn-text-outline-brand);
+  --pgn-color-btn-focus-text-inverse-brand: var(--pgn-color-btn-text-inverse-brand);
   --pgn-color-btn-active-bg-inverse-tertiary: var(--pgn-color-btn-hover-bg-inverse-tertiary);
   --pgn-color-btn-active-bg-tertiary: var(--pgn-color-light-500);
   --pgn-color-btn-active-text-inverse-primary: #051627FF;
@@ -1195,15 +1392,71 @@
   --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled);
   --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active);
   --pgn-color-btn-disabled-link: var(--pgn-color-disabled);
-  --pgn-color-btn-focus-border-tertiary: var(--pgn-color-theme-focus-primary);
-  --pgn-color-btn-focus-border-outline-primary: var(--pgn-color-theme-focus-primary);
-  --pgn-color-btn-focus-border-primary: var(--pgn-color-theme-focus-primary);
-  --pgn-color-btn-focus-border-outline-light: var(--pgn-color-theme-focus-light);
-  --pgn-color-btn-focus-border-light: var(--pgn-color-theme-focus-light);
-  --pgn-color-btn-focus-border-outline-dark: var(--pgn-color-theme-focus-dark);
-  --pgn-color-btn-focus-border-dark: var(--pgn-color-theme-focus-dark);
-  --pgn-color-btn-focus-border-outline-brand: var(--pgn-color-theme-focus-brand);
-  --pgn-color-btn-focus-border-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-disabled-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-disabled-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-disabled-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-disabled-border-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-border-dark: var(--pgn-color-btn-border-dark);
+  --pgn-color-btn-disabled-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-disabled-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-disabled-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-disabled-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-disabled-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-disabled-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-disabled-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-disabled-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-disabled-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-disabled-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-disabled-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-disabled-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-disabled-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-disabled-text-brand: var(--pgn-color-btn-text-brand);
+  --pgn-color-btn-focus-outline-tertiary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-focus-outline-inverse-outline-success: var(--pgn-color-btn-focus-border-inverse-outline-success);
+  --pgn-color-btn-focus-outline-outline-primary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-focus-outline-primary: var(--pgn-color-theme-focus-primary);
+  --pgn-color-btn-focus-outline-inverse-outline-light: var(--pgn-color-btn-focus-border-inverse-outline-light);
+  --pgn-color-btn-focus-outline-outline-light: var(--pgn-color-theme-focus-light);
+  --pgn-color-btn-focus-outline-inverse-outline-info: var(--pgn-color-btn-focus-border-inverse-outline-info);
+  --pgn-color-btn-focus-outline-outline-dark: var(--pgn-color-theme-focus-dark);
+  --pgn-color-btn-focus-outline-dark: var(--pgn-color-theme-focus-dark);
+  --pgn-color-btn-focus-outline-inverse-outline-brand: var(--pgn-color-btn-focus-border-inverse-outline-brand);
+  --pgn-color-btn-focus-outline-outline-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-focus-outline-brand: var(--pgn-color-theme-focus-brand);
+  --pgn-color-btn-focus-bg-warning: var(--pgn-color-btn-bg-warning);
+  --pgn-color-btn-focus-bg-success: var(--pgn-color-btn-bg-success);
+  --pgn-color-btn-focus-bg-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-bg-inverse-primary: var(--pgn-color-btn-bg-inverse-primary);
+  --pgn-color-btn-focus-bg-inverse-light: var(--pgn-color-btn-bg-inverse-light);
+  --pgn-color-btn-focus-bg-info: var(--pgn-color-btn-bg-info);
+  --pgn-color-btn-focus-bg-inverse-dark: var(--pgn-color-btn-bg-inverse-dark);
+  --pgn-color-btn-focus-bg-danger: var(--pgn-color-btn-bg-danger);
+  --pgn-color-btn-focus-bg-inverse-brand: var(--pgn-color-btn-bg-inverse-brand);
+  --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-btn-border-outline-warning);
+  --pgn-color-btn-focus-border-outline-success: var(--pgn-color-btn-border-outline-success);
+  --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-btn-border-outline-secondary);
+  --pgn-color-btn-focus-border-secondary: var(--pgn-color-btn-bg-secondary);
+  --pgn-color-btn-focus-border-primary: var(--pgn-color-btn-border-primary);
+  --pgn-color-btn-focus-border-light: var(--pgn-color-btn-border-light);
+  --pgn-color-btn-focus-border-outline-info: var(--pgn-color-btn-border-outline-info);
+  --pgn-color-btn-focus-border-dark: var(--pgn-color-btn-focus-bg-dark);
+  --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-btn-border-outline-danger);
+  --pgn-color-btn-focus-border-brand: var(--pgn-color-btn-border-brand);
+  --pgn-color-btn-focus-text-inverse-warning: var(--pgn-color-btn-text-inverse-warning);
+  --pgn-color-btn-focus-text-outline-warning: var(--pgn-color-btn-text-outline-warning);
+  --pgn-color-btn-focus-text-inverse-success: var(--pgn-color-btn-text-inverse-success);
+  --pgn-color-btn-focus-text-outline-success: var(--pgn-color-btn-text-outline-success);
+  --pgn-color-btn-focus-text-outline-secondary: var(--pgn-color-btn-text-outline-secondary);
+  --pgn-color-btn-focus-text-primary: var(--pgn-color-btn-text-primary);
+  --pgn-color-btn-focus-text-light: var(--pgn-color-btn-text-light);
+  --pgn-color-btn-focus-text-inverse-info: var(--pgn-color-btn-text-inverse-info);
+  --pgn-color-btn-focus-text-outline-info: var(--pgn-color-btn-text-outline-info);
+  --pgn-color-btn-focus-text-dark: var(--pgn-color-btn-text-dark);
+  --pgn-color-btn-focus-text-outline-danger: var(--pgn-color-btn-text-outline-danger);
+  --pgn-color-btn-focus-text-inverse-danger: var(--pgn-color-btn-text-inverse-danger);
+  --pgn-color-btn-focus-text-brand: var(--pgn-color-btn-text-brand);
   --pgn-color-btn-active-border-outline-primary: var(--pgn-color-theme-active-primary);
   --pgn-color-btn-active-border-primary: var(--pgn-color-theme-active-primary);
   --pgn-color-btn-active-border-outline-light: var(--pgn-color-theme-active-light);
@@ -1351,16 +1604,44 @@
   --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
   --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
   --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
-  --pgn-color-btn-focus-border-outline-warning: var(--pgn-color-theme-focus-warning);
-  --pgn-color-btn-focus-border-warning: var(--pgn-color-theme-focus-warning);
-  --pgn-color-btn-focus-border-outline-success: var(--pgn-color-theme-focus-success);
-  --pgn-color-btn-focus-border-success: var(--pgn-color-theme-focus-success);
-  --pgn-color-btn-focus-border-outline-secondary: var(--pgn-color-theme-focus-secondary);
-  --pgn-color-btn-focus-border-secondary: var(--pgn-color-theme-focus-secondary);
-  --pgn-color-btn-focus-border-outline-info: var(--pgn-color-theme-focus-info);
-  --pgn-color-btn-focus-border-info: var(--pgn-color-theme-focus-info);
-  --pgn-color-btn-focus-border-outline-danger: var(--pgn-color-theme-focus-danger);
-  --pgn-color-btn-focus-border-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-border-outline-light: var(--pgn-color-btn-hover-text-outline-light);
+  --pgn-color-btn-disabled-border-outline-dark: var(--pgn-color-btn-hover-text-outline-dark);
+  --pgn-color-btn-disabled-border-danger: var(--pgn-color-btn-border-danger);
+  --pgn-color-btn-disabled-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-disabled-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-disabled-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-disabled-text-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);
+  --pgn-color-btn-disabled-text-outline-light: var(--pgn-color-btn-hover-text-outline-light);
+  --pgn-color-btn-disabled-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-disabled-text-danger: var(--pgn-color-btn-text-danger);
+  --pgn-color-btn-disabled-text-outline-brand: var(--pgn-color-btn-hover-text-outline-brand);
+  --pgn-color-btn-focus-outline-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-focus-outline-warning: var(--pgn-color-theme-focus-warning);
+  --pgn-color-btn-focus-outline-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-success: var(--pgn-color-theme-focus-success);
+  --pgn-color-btn-focus-outline-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-secondary: var(--pgn-color-theme-focus-secondary);
+  --pgn-color-btn-focus-outline-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-info: var(--pgn-color-theme-focus-info);
+  --pgn-color-btn-focus-outline-outline-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-focus-outline-danger: var(--pgn-color-theme-focus-danger);
+  --pgn-color-btn-focus-bg-inverse-warning: var(--pgn-color-btn-bg-inverse-warning);
+  --pgn-color-btn-focus-bg-inverse-success: var(--pgn-color-btn-bg-inverse-success);
+  --pgn-color-btn-focus-bg-inverse-secondary: var(--pgn-color-btn-bg-inverse-secondary);
+  --pgn-color-btn-focus-bg-inverse-info: var(--pgn-color-btn-bg-inverse-info);
+  --pgn-color-btn-focus-bg-inverse-danger: var(--pgn-color-btn-bg-inverse-danger);
+  --pgn-color-btn-focus-border-warning: var(--pgn-color-btn-border-warning);
+  --pgn-color-btn-focus-border-success: var(--pgn-color-btn-border-success);
+  --pgn-color-btn-focus-border-info: var(--pgn-color-btn-border-info);
+  --pgn-color-btn-focus-border-danger: var(--pgn-color-btn-focus-bg-danger);
+  --pgn-color-btn-focus-text-warning: var(--pgn-color-btn-text-warning);
+  --pgn-color-btn-focus-text-success: var(--pgn-color-btn-text-success);
+  --pgn-color-btn-focus-text-secondary: var(--pgn-color-btn-text-secondary);
+  --pgn-color-btn-focus-text-info: var(--pgn-color-btn-text-info);
+  --pgn-color-btn-focus-text-danger: var(--pgn-color-btn-text-danger);
   --pgn-color-btn-active-border-outline-warning: var(--pgn-color-theme-active-warning);
   --pgn-color-btn-active-border-warning: var(--pgn-color-theme-active-warning);
   --pgn-color-btn-active-border-outline-success: var(--pgn-color-theme-active-success);
@@ -1442,6 +1723,7 @@
   --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='%230A3055FF'/></svg>");
   --pgn-color-pagination-text-hover: var(--pgn-color-link-hover);
   --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base);
+  --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
   --pgn-color-btn-active-text-inverse-outline-warning: #454545FF;
   --pgn-color-btn-active-text-outline-warning: #454545FF;
   --pgn-color-btn-active-text-warning: #FFFFFFFF;
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
index 77c16f048b..90258e5019 100644
--- a/src/Button/Button.scss
+++ b/src/Button/Button.scss
@@ -2,17 +2,6 @@
 @import "mixins";
 @import "button-group";
 
-//
-// Override Bootstrap's button definition.
-// We do this to get more control over focus
-// and hover states, as well as to define
-// an extra button variant: btn-inverse-${color}
-//
-
-//
-// Base styles
-//
-
 .btn {
   display: inline-flex;
   align-items: center;
@@ -29,14 +18,69 @@
 
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
 
-  &:hover {
-    color: var(--pgn-btn-hover-color, #{$body-color});
-    background-color: var(--pgn-btn-hover-bg, transparent);
-    border-color: var(--pgn-btn-hover-border-color, transparent);
-    text-decoration: none;
+  &:not(:disabled):not(.disabled):not(.btn-link) {
+    &.focus,
+    &:focus {
+      position: relative;
+      outline: 0;
+      box-shadow: none;
+      background: var(--pgn-btn-focus-bg, transparent);
+      border-color: var(--pgn-btn-focus-border-color, transparent);
+      color: var(--pgn-btn-focus-color, #{$body-color});
+
+      $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
+      $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: calc(#{$distance-include-btn-border} * -1);
+        right: calc(#{$distance-include-btn-border} * -1);
+        bottom: calc(#{$distance-include-btn-border} * -1);
+        left: calc(#{$distance-include-btn-border} * -1);
+        border: solid $btn-focus-width var(--pgn-btn-focus-outline-color, #{$body-color});
+        border-radius: calc(#{$btn-border-radius} + #{$distance});
+      }
+
+      &.btn-lg::before {
+        border-radius: calc(#{$btn-border-radius-lg} + #{$distance});
+      }
+
+      &.btn-sm::before {
+        border-radius: calc(#{$btn-border-radius-sm} + #{$distance});
+      }
+
+      &:active,
+      &.active {
+        &::before {
+          opacity: .75;
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        &::before {
+          display: none;
+        }
+      }
+    }
+
+    &:hover {
+      color: var(--pgn-btn-hover-color, #{$body-color});
+      background-color: var(--pgn-btn-hover-bg, transparent);
+      border-color: var(--pgn-btn-hover-border-color, transparent);
+      text-decoration: none;
+    }
+
+    &:active,
+    &.active,
+    .show > &.dropdown-toggle {
+      color: var(--pgn-btn-active-color, inherit);
+      background-color: var(--pgn-btn-active-bg, inherit);
+      border-color: var(--pgn-btn-active-border-color, transparent);
+    }
   }
 
-  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     color: var(--pgn-btn-disabled-color, inherit);
@@ -45,14 +89,6 @@
     opacity: $btn-disabled-opacity;
   }
 
-  &:not(:disabled):not(.disabled):not(.btn-link):active,
-  &:not(:disabled):not(.disabled):not(.btn-link).active,
-  .show > &.dropdown-toggle {
-    color: var(--pgn-btn-active-color, inherit);
-    background-color: var(--pgn-btn-active-bg, inherit);
-    border-color: var(--pgn-btn-active-border-color, transparent);
-  }
-
   // Button Icon Sizes
 
   .btn-icon-before {
@@ -108,13 +144,6 @@ fieldset:disabled a.btn {
     color: $btn-link-disabled-color;
     pointer-events: none;
   }
-
-  // No need for an active state here
-}
-
-.btn-light,
-.btn-dark {
-  @include button-focus(theme-color("primary", "focus"));
 }
 
 //
@@ -190,61 +219,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-primary-hover-color};
   --pgn-btn-hover-bg: #{$btn-primary-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-primary-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-primary-color};
-  --pgn-btn-disabled-bg: #{$btn-primary-bg};
-  --pgn-btn-disabled-border-color: #{$btn-primary-border-color};
+  --pgn-btn-disabled-color: #{$btn-primary-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-primary-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-primary-disabled-border-color};
   --pgn-btn-active-color: #{$btn-primary-active-color};
   --pgn-btn-active-bg: #{$btn-primary-active-bg};
   --pgn-btn-active-border-color: #{$btn-primary-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-primary-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-primary-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-primary-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-primary-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-primary-focus-border-color);
 }
 
 .btn-outline-primary {
   --pgn-btn-color: #{$btn-primary-outline-color};
+  --pgn-btn-bg: #{$btn-primary-outline-bg};
   --pgn-btn-border-color: #{$btn-primary-outline-border-color};
   --pgn-btn-hover-color: #{$btn-primary-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-primary-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-primary-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-primary-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-primary-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-primary-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-primary-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-primary-outline-active-color};
   --pgn-btn-active-bg: #{$btn-primary-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-primary-outline-active-border-color};
-
-  @include button-focus(#{$btn-primary-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-primary-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-primary-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-primary-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-primary-outline-focus-bg};
 }
 
 .btn-inverse-primary {
   --pgn-btn-color: #{$btn-primary-inverse-color};
   --pgn-btn-bg: #{$btn-primary-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-primary-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-primary-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-primary-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-primary-border-color};
+  --pgn-btn-hover-border-color: #{$btn-primary-inverse-hover-border-color};
+  --pgn-btn-disabled-color: #{$btn-primary-inverse-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-primary-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-primary-inverse-disabled-border-color};
   --pgn-btn-active-color: #{$btn-primary-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-primary-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-primary-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-primary-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-primary-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-primary-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-primary-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-primary-inverse-focus-bg};
 }
 
 .btn-inverse-outline-primary {
   --pgn-btn-color: #{$btn-primary-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-primary-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-primary-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-primary-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-primary-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-primary-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-primary-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-primary-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-primary-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-primary-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-primary-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-primary-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-primary-inverse-outline-active-border-color};
-
-  @include button-focus($btn-primary-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-primary-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-primary-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-primary-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-primary-inverse-outline-focus-bg};
 }
 
 
@@ -256,61 +299,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-secondary-hover-color};
   --pgn-btn-hover-bg: #{$btn-secondary-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-secondary-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-secondary-color};
-  --pgn-btn-disabled-bg: #{$btn-secondary-bg};
-  --pgn-btn-disabled-border-color: #{$btn-secondary-border-color};
+  --pgn-btn-disabled-color: #{$btn-secondary-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-secondary-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-secondary-disabled-border-color};
   --pgn-btn-active-color: #{$btn-secondary-active-color};
   --pgn-btn-active-bg: #{$btn-secondary-active-bg};
   --pgn-btn-active-border-color: #{$btn-secondary-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-secondary-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-secondary-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-secondary-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-secondary-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-secondary-focus-border-color);
 }
 
 .btn-outline-secondary {
   --pgn-btn-color: #{$btn-secondary-outline-color};
+  --pgn-btn-bg: #{$btn-secondary-outline-bg};
   --pgn-btn-border-color: #{$btn-secondary-outline-border-color};
   --pgn-btn-hover-color: #{$btn-secondary-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-secondary-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-secondary-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-secondary-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-secondary-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-secondary-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-secondary-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-secondary-outline-active-color};
   --pgn-btn-active-bg: #{$btn-secondary-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-secondary-outline-active-border-color};
-
-  @include button-focus(#{$btn-secondary-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-secondary-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-secondary-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-secondary-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-secondary-outline-focus-bg};
 }
 
 .btn-inverse-secondary {
   --pgn-btn-color: #{$btn-secondary-inverse-color};
   --pgn-btn-bg: #{$btn-secondary-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-secondary-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-secondary-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-secondary-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-secondary-border-color};
+  --pgn-btn-hover-border-color: #{$btn-secondary-inverse-hover-border-color};
+  --pgn-btn-disabled-bg: #{$btn-secondary-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-disabled-border-color};
+  --pgn-btn-disabled-color: #{$btn-secondary-inverse-disabled-color};
   --pgn-btn-active-color: #{$btn-secondary-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-secondary-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-secondary-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-secondary-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-secondary-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-secondary-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-secondary-inverse-focus-bg};
 }
 
 .btn-inverse-outline-secondary {
   --pgn-btn-color: #{$btn-secondary-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-secondary-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-secondary-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-secondary-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-secondary-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-secondary-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-secondary-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-secondary-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-secondary-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-secondary-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-secondary-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-secondary-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-secondary-inverse-outline-active-border-color};
-
-  @include button-focus($btn-secondary-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-secondary-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-secondary-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-secondary-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-secondary-inverse-outline-focus-bg};
 }
 
 
@@ -322,61 +379,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-brand-hover-color};
   --pgn-btn-hover-bg: #{$btn-brand-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-brand-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-brand-color};
-  --pgn-btn-disabled-bg: #{$btn-brand-bg};
-  --pgn-btn-disabled-border-color: #{$btn-brand-border-color};
+  --pgn-btn-disabled-color: #{$btn-brand-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-brand-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-brand-disabled-border-color};
   --pgn-btn-active-color: #{$btn-brand-active-color};
   --pgn-btn-active-bg: #{$btn-brand-active-bg};
   --pgn-btn-active-border-color: #{$btn-brand-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-brand-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-brand-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-brand-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-brand-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-brand-focus-border-color);
 }
 
 .btn-outline-brand {
   --pgn-btn-color: #{$btn-brand-outline-color};
+  --pgn-btn-bg: #{$btn-brand-outline-bg};
   --pgn-btn-border-color: #{$btn-brand-outline-border-color};
   --pgn-btn-hover-color: #{$btn-brand-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-brand-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-brand-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-brand-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-brand-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-brand-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-brand-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-brand-outline-active-color};
   --pgn-btn-active-bg: #{$btn-brand-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-brand-outline-active-border-color};
-
-  @include button-focus(#{$btn-brand-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-brand-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-brand-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-brand-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-brand-outline-focus-bg};
 }
 
 .btn-inverse-brand {
   --pgn-btn-color: #{$btn-brand-inverse-color};
   --pgn-btn-bg: #{$btn-brand-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-brand-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-brand-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-brand-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-brand-border-color};
+  --pgn-btn-hover-border-color: #{$btn-brand-inverse-hover-border-color};
+  --pgn-btn-disabled-color: #{$btn-brand-inverse-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-brand-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-brand-inverse-disabled-border-color};
   --pgn-btn-active-color: #{$btn-brand-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-brand-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-brand-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-brand-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-brand-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-brand-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-brand-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-brand-inverse-focus-bg};
 }
 
 .btn-inverse-outline-brand {
   --pgn-btn-color: #{$btn-brand-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-brand-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-brand-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-brand-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-brand-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-brand-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-brand-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-brand-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-brand-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-brand-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-brand-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-brand-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-brand-inverse-outline-active-border-color};
-
-  @include button-focus($btn-brand-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-brand-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-brand-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-brand-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-brand-inverse-outline-focus-bg};
 }
 
 
@@ -388,61 +459,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-danger-hover-color};
   --pgn-btn-hover-bg: #{$btn-danger-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-danger-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-danger-color};
-  --pgn-btn-disabled-bg: #{$btn-danger-bg};
-  --pgn-btn-disabled-border-color: #{$btn-danger-border-color};
+  --pgn-btn-disabled-color: #{$btn-danger-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-danger-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-danger-disabled-border-color};
   --pgn-btn-active-color: #{$btn-danger-active-color};
   --pgn-btn-active-bg: #{$btn-danger-active-bg};
   --pgn-btn-active-border-color: #{$btn-danger-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-danger-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-danger-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-danger-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-danger-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-danger-focus-border-color);
 }
 
 .btn-outline-danger {
   --pgn-btn-color: #{$btn-danger-outline-color};
+  --pgn-btn-bg: #{$btn-danger-outline-bg};
   --pgn-btn-border-color: #{$btn-danger-outline-border-color};
   --pgn-btn-hover-color: #{$btn-danger-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-danger-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-danger-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-danger-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-danger-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-danger-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-danger-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-danger-outline-active-color};
   --pgn-btn-active-bg: #{$btn-danger-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-danger-outline-active-border-color};
-
-  @include button-focus(#{$btn-danger-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-danger-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-danger-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-danger-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-danger-outline-focus-bg};
 }
 
 .btn-inverse-danger {
   --pgn-btn-color: #{$btn-danger-inverse-color};
   --pgn-btn-bg: #{$btn-danger-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-danger-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-danger-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-danger-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-danger-border-color};
+  --pgn-btn-hover-border-color: #{$btn-danger-inverse-hover-border-color};
+  --pgn-btn-disabled-color: #{$btn-danger-inverse-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-danger-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-danger-inverse-disabled-border-color};
   --pgn-btn-active-color: #{$btn-danger-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-danger-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-danger-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-danger-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-danger-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-danger-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-danger-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-danger-inverse-focus-bg};
 }
 
 .btn-inverse-outline-danger {
   --pgn-btn-color: #{$btn-danger-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-danger-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-danger-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-danger-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-danger-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-danger-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-danger-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-danger-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-danger-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-danger-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-danger-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-danger-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-danger-inverse-outline-active-border-color};
-
-  @include button-focus($btn-danger-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-danger-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-danger-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-danger-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-danger-inverse-outline-focus-bg};
 }
 
 
@@ -454,61 +539,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-dark-hover-color};
   --pgn-btn-hover-bg: #{$btn-dark-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-dark-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-dark-color};
-  --pgn-btn-disabled-bg: #{$btn-dark-bg};
-  --pgn-btn-disabled-border-color: #{$btn-dark-border-color};
+  --pgn-btn-disabled-color: #{$btn-dark-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-dark-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-dark-disabled-border-color};
   --pgn-btn-active-color: #{$btn-dark-active-color};
   --pgn-btn-active-bg: #{$btn-dark-active-bg};
   --pgn-btn-active-border-color: #{$btn-dark-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-dark-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-dark-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-dark-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-dark-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-dark-focus-border-color);
 }
 
 .btn-outline-dark {
   --pgn-btn-color: #{$btn-dark-outline-color};
+  --pgn-btn-bg: #{$btn-dark-outline-bg};
   --pgn-btn-border-color: #{$btn-dark-outline-border-color};
   --pgn-btn-hover-color: #{$btn-dark-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-dark-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-dark-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-dark-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-dark-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-dark-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-dark-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-dark-outline-active-color};
   --pgn-btn-active-bg: #{$btn-dark-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-dark-outline-active-border-color};
-
-  @include button-focus(#{$btn-dark-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-dark-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-dark-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-dark-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-dark-outline-focus-bg};
 }
 
 .btn-inverse-dark {
   --pgn-btn-color: #{$btn-dark-inverse-color};
   --pgn-btn-bg: #{$btn-dark-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-dark-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-dark-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-dark-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-dark-border-color};
+  --pgn-btn-hover-border-color: #{$btn-dark-inverse-hover-border-color};
+  --pgn-btn-disabled-bg: #{$btn-dark-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-dark-inverse-disabled-border-color};
+  --pgn-btn-disabled-color: #{$btn-dark-inverse-disabled-color};
   --pgn-btn-active-color: #{$btn-dark-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-dark-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-dark-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-dark-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-dark-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-dark-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-dark-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-dark-inverse-focus-bg};
 }
 
 .btn-inverse-outline-dark {
   --pgn-btn-color: #{$btn-dark-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-dark-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-dark-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-dark-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-dark-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-dark-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-dark-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-dark-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-dark-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-dark-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-dark-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-dark-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-dark-inverse-outline-active-border-color};
-
-  @include button-focus($btn-dark-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-dark-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-dark-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-dark-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-dark-inverse-outline-focus-bg};
 }
 
 
@@ -520,61 +619,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-info-hover-color};
   --pgn-btn-hover-bg: #{$btn-info-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-info-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-info-color};
-  --pgn-btn-disabled-bg: #{$btn-info-bg};
-  --pgn-btn-disabled-border-color: #{$btn-info-border-color};
+  --pgn-btn-disabled-color: #{$btn-info-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-info-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-info-disabled-border-color};
   --pgn-btn-active-color: #{$btn-info-active-color};
   --pgn-btn-active-bg: #{$btn-info-active-bg};
   --pgn-btn-active-border-color: #{$btn-info-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-info-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-info-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-info-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-info-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-info-focus-border-color);
 }
 
 .btn-outline-info {
   --pgn-btn-color: #{$btn-info-outline-color};
+  --pgn-btn-bg: #{$btn-info-outline-bg};
   --pgn-btn-border-color: #{$btn-info-outline-border-color};
   --pgn-btn-hover-color: #{$btn-info-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-info-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-info-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-info-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-info-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-info-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-info-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-info-outline-active-color};
   --pgn-btn-active-bg: #{$btn-info-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-info-outline-active-border-color};
-
-  @include button-focus(#{$btn-info-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-info-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-info-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-info-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-info-outline-focus-bg};
 }
 
 .btn-inverse-info {
   --pgn-btn-color: #{$btn-info-inverse-color};
   --pgn-btn-bg: #{$btn-info-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-info-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-info-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-info-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-info-border-color};
+  --pgn-btn-hover-border-color: #{$btn-info-inverse-hover-border-color};
+  --pgn-btn-disabled-color: #{$btn-info-inverse-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-info-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-info-inverse-disabled-border-color};
   --pgn-btn-active-color: #{$btn-info-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-info-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-info-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-info-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-info-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-info-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-info-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-info-inverse-focus-bg};
 }
 
 .btn-inverse-outline-info {
   --pgn-btn-color: #{$btn-info-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-info-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-info-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-info-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-info-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-info-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-info-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-info-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-info-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-info-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-info-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-info-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-info-inverse-outline-active-border-color};
-
-  @include button-focus($btn-info-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-info-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-info-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-info-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-info-inverse-outline-focus-bg};
 }
 
 
@@ -586,61 +699,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-light-hover-color};
   --pgn-btn-hover-bg: #{$btn-light-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-light-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-light-color};
-  --pgn-btn-disabled-bg: #{$btn-light-bg};
-  --pgn-btn-disabled-border-color: #{$btn-light-border-color};
+  --pgn-btn-disabled-color: #{$btn-light-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-light-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-light-disabled-border-color};
   --pgn-btn-active-color: #{$btn-light-active-color};
   --pgn-btn-active-bg: #{$btn-light-active-bg};
   --pgn-btn-active-border-color: #{$btn-light-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-light-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-light-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-light-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-light-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-light-focus-border-color);
 }
 
 .btn-outline-light {
   --pgn-btn-color: #{$btn-light-outline-color};
+  --pgn-btn-bg: #{$btn-light-outline-bg};
   --pgn-btn-border-color: #{$btn-light-outline-border-color};
   --pgn-btn-hover-color: #{$btn-light-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-light-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-light-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-light-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-light-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-light-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-light-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-light-outline-active-color};
   --pgn-btn-active-bg: #{$btn-light-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-light-outline-active-border-color};
-
-  @include button-focus(#{$btn-light-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-light-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-light-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-light-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-light-outline-focus-bg};
 }
 
 .btn-inverse-light {
   --pgn-btn-color: #{$btn-light-inverse-color};
   --pgn-btn-bg: #{$btn-light-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-light-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-light-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-light-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-light-border-color};
+  --pgn-btn-hover-border-color: #{$btn-light-inverse-hover-border-color};
+  --pgn-btn-disabled-bg: #{$btn-light-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-light-inverse-disabled-border-color};
+  --pgn-btn-disabled-color: #{$btn-light-inverse-disabled-color};
   --pgn-btn-active-color: #{$btn-light-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-light-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-light-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-light-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-light-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-light-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-light-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-light-inverse-focus-bg};
 }
 
 .btn-inverse-outline-light {
   --pgn-btn-color: #{$btn-light-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-light-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-light-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-light-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-light-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-light-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-light-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-light-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-light-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-light-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-light-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-light-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-light-inverse-outline-active-border-color};
-
-  @include button-focus($btn-light-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-light-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-light-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-light-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-light-inverse-outline-focus-bg};
 }
 
 
@@ -652,61 +779,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-success-hover-color};
   --pgn-btn-hover-bg: #{$btn-success-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-success-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-success-color};
-  --pgn-btn-disabled-bg: #{$btn-success-bg};
-  --pgn-btn-disabled-border-color: #{$btn-success-border-color};
+  --pgn-btn-disabled-color: #{$btn-success-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-success-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-success-disabled-border-color};
   --pgn-btn-active-color: #{$btn-success-active-color};
   --pgn-btn-active-bg: #{$btn-success-active-bg};
   --pgn-btn-active-border-color: #{$btn-success-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-success-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-success-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-success-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-success-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-success-focus-border-color);
 }
 
 .btn-outline-success {
   --pgn-btn-color: #{$btn-success-outline-color};
+  --pgn-btn-bg: #{$btn-success-outline-bg};
   --pgn-btn-border-color: #{$btn-success-outline-border-color};
   --pgn-btn-hover-color: #{$btn-success-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-success-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-success-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-success-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-success-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-success-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-success-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-success-outline-active-color};
   --pgn-btn-active-bg: #{$btn-success-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-success-outline-active-border-color};
-
-  @include button-focus(#{$btn-success-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-success-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-success-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-success-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-success-outline-focus-bg};
 }
 
 .btn-inverse-success {
   --pgn-btn-color: #{$btn-success-inverse-color};
   --pgn-btn-bg: #{$btn-success-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-success-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-success-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-success-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-success-border-color};
+  --pgn-btn-hover-border-color: #{$btn-success-inverse-hover-border-color};
+  --pgn-btn-disabled-color: #{$btn-success-inverse-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-success-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-success-inverse-disabled-border-color};
   --pgn-btn-active-color: #{$btn-success-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-success-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-success-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-success-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-success-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-success-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-success-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-success-inverse-focus-bg};
 }
 
 .btn-inverse-outline-success {
   --pgn-btn-color: #{$btn-success-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-success-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-success-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-success-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-success-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-success-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-success-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-success-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-success-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-success-inverse-outline-disabled-color};
   --pgn-btn-active-color: #{$btn-success-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-success-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-success-inverse-outline-active-border-color};
-
-  @include button-focus($btn-success-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-success-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-success-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-success-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-success-inverse-outline-focus-bg};
 }
 
 
@@ -718,61 +859,75 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-warning-hover-color};
   --pgn-btn-hover-bg: #{$btn-warning-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-warning-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-warning-color};
-  --pgn-btn-disabled-bg: #{$btn-warning-bg};
-  --pgn-btn-disabled-border-color: #{$btn-warning-border-color};
+  --pgn-btn-disabled-color: #{$btn-warning-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-warning-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-warning-disabled-border-color};
   --pgn-btn-active-color: #{$btn-warning-active-color};
   --pgn-btn-active-bg: #{$btn-warning-active-bg};
   --pgn-btn-active-border-color: #{$btn-warning-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-warning-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-warning-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-warning-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-warning-focus-bg};
 
   box-shadow: $btn-box-shadow;
-
-  @include button-focus($btn-warning-focus-border-color);
 }
 
 .btn-outline-warning {
   --pgn-btn-color: #{$btn-warning-outline-color};
+  --pgn-btn-bg: #{$btn-warning-outline-bg};
   --pgn-btn-border-color: #{$btn-warning-outline-border-color};
   --pgn-btn-hover-color: #{$btn-warning-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-warning-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-warning-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-warning-outline-hover-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-warning-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-warning-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-warning-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-warning-outline-active-color};
   --pgn-btn-active-bg: #{$btn-warning-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-warning-outline-active-border-color};
-
-  @include button-focus(#{$btn-warning-outline-focus-border-color});
+  --pgn-btn-focus-outline-color: #{$btn-warning-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-warning-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-warning-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-warning-outline-focus-bg};
 }
 
 .btn-inverse-warning {
   --pgn-btn-color: #{$btn-warning-inverse-color};
   --pgn-btn-bg: #{$btn-warning-inverse-bg};
-  --pgn-btn-border-color: transparent;
+  --pgn-btn-border-color: #{$btn-warning-inverse-border-color};
   --pgn-btn-hover-color: #{$btn-warning-inverse-hover-color};
   --pgn-btn-hover-bg: #{$btn-warning-inverse-hover-bg};
-  --pgn-btn-hover-border-color: transparent;
-  --pgn-btn-disabled-bg: transparent;
-  --pgn-btn-disabled-border-color: #{$btn-warning-border-color};
+  --pgn-btn-hover-border-color: #{$btn-warning-inverse-hover-border-color};
+  --pgn-btn-disabled-bg: #{$btn-warning-inverse-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-warning-inverse-disabled-border-color};
+  --pgn-btn-disabled-color: #{$btn-warning-inverse-disabled-color};
   --pgn-btn-active-color: #{$btn-warning-inverse-active-color};
-  --pgn-btn-active-bg: #EEEEEE;
-
-  @include button-focus($btn-warning-inverse-focus-border-color);
+  --pgn-btn-active-bg: #{$btn-warning-inverse-active-bg};
+  --pgn-btn-active-border-color: #{$btn-warning-inverse-active-border-color};
+  --pgn-btn-focus-outline-color: #{$btn-warning-inverse-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-warning-inverse-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-warning-inverse-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-warning-inverse-focus-bg};
 }
 
 .btn-inverse-outline-warning {
   --pgn-btn-color: #{$btn-warning-inverse-outline-color};
+  --pgn-btn-bg: #{$btn-warning-inverse-outline-bg};
   --pgn-btn-border-color: #{$btn-warning-inverse-outline-border-color};
   --pgn-btn-hover-color: #{$btn-warning-inverse-outline-hover-color};
   --pgn-btn-hover-bg: #{$btn-warning-inverse-outline-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-warning-inverse-outline-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-warning-inverse-outline-color};
-  --pgn-btn-disabled-bg: transparent;
+  --pgn-btn-disabled-color: #{$btn-warning-inverse-outline-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-warning-inverse-outline-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-warning-inverse-outline-disabled-border-color};
   --pgn-btn-active-color: #{$btn-warning-inverse-outline-active-color};
   --pgn-btn-active-bg: #{$btn-warning-inverse-outline-active-bg};
   --pgn-btn-active-border-color: #{$btn-warning-inverse-outline-active-border-color};
-
-  @include button-focus($btn-warning-inverse-outline-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-warning-inverse-outline-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-warning-inverse-outline-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-warning-inverse-outline-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-warning-inverse-outline-focus-bg};
 }
 
 
@@ -784,14 +939,16 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-tertiary-hover-color};
   --pgn-btn-hover-bg: #{$btn-tertiary-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-tertiary-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-tertiary-color};
-  --pgn-btn-disabled-bg: #{$btn-tertiary-bg};
-  --pgn-btn-disabled-border-color: #{$btn-tertiary-border-color};
+  --pgn-btn-disabled-color: #{$btn-tertiary-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-tertiary-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-tertiary-disabled-border-color};
   --pgn-btn-active-color: #{$btn-tertiary-active-color};
   --pgn-btn-active-bg: #{$btn-tertiary-active-bg};
   --pgn-btn-active-border-color: #{$btn-tertiary-active-border-color};
-
-  @include button-focus($btn-tertiary-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-tertiary-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-tertiary-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-tertiary-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-tertiary-focus-bg};
 }
 
 .btn-inverse-tertiary {
@@ -801,12 +958,14 @@ input[type="button"] {
   --pgn-btn-hover-color: #{$btn-inverse-tertiary-hover-color};
   --pgn-btn-hover-bg: #{$btn-inverse-tertiary-hover-bg};
   --pgn-btn-hover-border-color: #{$btn-inverse-tertiary-hover-border-color};
-  --pgn-btn-disabled-color: #{$btn-inverse-tertiary-color};
-  --pgn-btn-disabled-bg: #{$btn-inverse-tertiary-bg};
-  --pgn-btn-disabled-border-color: #{$btn-inverse-tertiary-border-color};
+  --pgn-btn-disabled-color: #{$btn-inverse-tertiary-disabled-color};
+  --pgn-btn-disabled-bg: #{$btn-inverse-tertiary-disabled-bg};
+  --pgn-btn-disabled-border-color: #{$btn-inverse-tertiary-disabled-border-color};
   --pgn-btn-active-color: #{$btn-inverse-tertiary-active-color};
   --pgn-btn-active-bg: #{$btn-inverse-tertiary-active-bg};
   --pgn-btn-active-border-color: #{$btn-inverse-tertiary-active-border-color};
-
-  @include button-focus($btn-inverse-tertiary-focus-border-color);
+  --pgn-btn-focus-outline-color: #{$btn-inverse-tertiary-focus-outline-color};
+  --pgn-btn-focus-color: #{$btn-inverse-tertiary-focus-color};
+  --pgn-btn-focus-border-color: #{$btn-inverse-tertiary-focus-border-color};
+  --pgn-btn-focus-bg: #{$btn-inverse-tertiary-focus-bg};
 }
diff --git a/src/Button/_mixins.scss b/src/Button/_mixins.scss
index 3befc9ad1c..04c182e669 100644
--- a/src/Button/_mixins.scss
+++ b/src/Button/_mixins.scss
@@ -12,52 +12,3 @@
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
-
-// ------------------------
-// BELOW ARE EDX EXTENSIONS
-// ------------------------
-@mixin button-focus($ring-color) {
-  &.focus,
-  &:focus {
-    position: relative;
-    outline: 0;
-    box-shadow: none;
-
-    $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
-    $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: calc(#{$distance-include-btn-border} * -1);
-      right: calc(#{$distance-include-btn-border} * -1);
-      bottom: calc(#{$distance-include-btn-border} * -1);
-      left: calc(#{$distance-include-btn-border} * -1);
-      border: solid $btn-focus-width $ring-color;
-      border-radius: calc(#{$btn-border-radius} + #{$distance});
-    }
-
-    &.btn-lg::before {
-      border-radius: calc(#{$btn-border-radius-lg} + #{$distance});
-    }
-
-    &.btn-sm::before {
-      border-radius: calc(#{$btn-border-radius-sm} + #{$distance});
-    }
-
-    &:active,
-    &.active {
-      &::before {
-        opacity: .75;
-      }
-    }
-
-    // Disabled buttons should not have focus rings
-    &:disabled,
-    &.disabled {
-      &::before {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
index 344b7dc827..f9e148f68c 100644
--- a/src/Button/_variables.scss
+++ b/src/Button/_variables.scss
@@ -1,3 +1,5 @@
+// stylelint-disable max-line-length
+
 $btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default;
 $btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default;
 $btn-font-family: var(--pgn-typography-btn-font-family) !default;
@@ -44,9 +46,16 @@ $btn-primary-hover-border-color: var(--pgn-color-btn-hover-border-primary) !defa
 $btn-primary-active-bg: var(--pgn-color-btn-active-bg-primary) !default;
 $btn-primary-active-color: var(--pgn-color-btn-active-text-primary) !default;
 $btn-primary-active-border-color: var(--pgn-color-btn-active-border-primary) !default;
+$btn-primary-focus-outline-color: var(--pgn-color-btn-focus-outline-primary) !default;
+$btn-primary-focus-bg: var(--pgn-color-btn-focus-bg-primary) !default;
+$btn-primary-focus-color: var(--pgn-color-btn-focus-text-primary) !default;
 $btn-primary-focus-border-color: var(--pgn-color-btn-focus-border-primary) !default;
+$btn-primary-disabled-color: var(--pgn-color-btn-disabled-text-primary) !default;
+$btn-primary-disabled-bg: var(--pgn-color-btn-disabled-bg-primary) !default;
+$btn-primary-disabled-border-color: var(--pgn-color-btn-disabled-border-primary) !default;
 
 $btn-primary-outline-color: var(--pgn-color-btn-text-outline-primary) !default;
+$btn-primary-outline-bg: var(--pgn-color-btn-bg-outline-primary) !default;
 $btn-primary-outline-border-color: var(--pgn-color-btn-border-outline-primary) !default;
 $btn-primary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary) !default;
 $btn-primary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-primary) !default;
@@ -54,16 +63,33 @@ $btn-primary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin
 $btn-primary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-primary) !default;
 $btn-primary-outline-active-color: var(--pgn-color-btn-active-text-outline-primary) !default;
 $btn-primary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-primary) !default;
+$btn-primary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary) !default;
+$btn-primary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary) !default;
+$btn-primary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-primary) !default;
 $btn-primary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary) !default;
+$btn-primary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary) !default;
+$btn-primary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary) !default;
+$btn-primary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary) !default;
 
 $btn-primary-inverse-color: var(--pgn-color-btn-text-inverse-primary) !default;
 $btn-primary-inverse-bg: var(--pgn-color-btn-bg-inverse-primary) !default;
 $btn-primary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-primary) !default;
 $btn-primary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary) !default;
+$btn-primary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary) !default;
 $btn-primary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-primary) !default;
+$btn-primary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-primary) !default;
+$btn-primary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-primary) !default;
+$btn-primary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary) !default;
 $btn-primary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary) !default;
+$btn-primary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary) !default;
+$btn-primary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-primary) !default;
+$btn-primary-inverse-border-color: var(--pgn-color-btn-border-inverse-primary) !default;
+$btn-primary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary) !default;
+$btn-primary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary) !default;
+$btn-primary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary) !default;
 
 $btn-primary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary) !default;
@@ -71,7 +97,13 @@ $btn-primary-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor
 $btn-primary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary) !default;
 $btn-primary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary) !default;
+$btn-primary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary) !default;
 
 
 // SECONDARY BUTTON VARIABLES
@@ -84,9 +116,16 @@ $btn-secondary-hover-border-color: var(--pgn-color-btn-hover-border-secondary) !
 $btn-secondary-active-bg: var(--pgn-color-btn-active-bg-secondary) !default;
 $btn-secondary-active-color: var(--pgn-color-btn-active-text-secondary) !default;
 $btn-secondary-active-border-color: var(--pgn-color-btn-active-border-secondary) !default;
+$btn-secondary-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary) !default;
 $btn-secondary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default;
+$btn-secondary-focus-bg: var(--pgn-color-btn-focus-bg-secondary) !default;
+$btn-secondary-focus-color: var(--pgn-color-btn-focus-text-secondary) !default;
+$btn-secondary-disabled-color: var(--pgn-color-btn-disabled-text-secondary) !default;
+$btn-secondary-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary) !default;
+$btn-secondary-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary) !default;
 
 $btn-secondary-outline-color: var(--pgn-color-btn-text-outline-secondary) !default;
+$btn-secondary-outline-bg: var(--pgn-color-btn-bg-outline-secondary) !default;
 $btn-secondary-outline-border-color: var(--pgn-color-btn-border-outline-secondary) !default;
 $btn-secondary-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary) !default;
 $btn-secondary-outline-hover-color: var(--pgn-color-btn-hover-text-outline-secondary) !default;
@@ -94,27 +133,47 @@ $btn-secondary-outline-hover-border-color: var(--pgn-color-btn-hover-border-outl
 $btn-secondary-outline-active-bg: var(--pgn-color-btn-active-bg-outline-secondary) !default;
 $btn-secondary-outline-active-color: var(--pgn-color-btn-active-text-outline-secondary) !default;
 $btn-secondary-outline-active-border-color: var(--pgn-color-btn-active-border-outline-secondary) !default;
+$btn-secondary-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary) !default;
 $btn-secondary-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary) !default;
+$btn-secondary-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary) !default;
+$btn-secondary-outline-focus-color: var(--pgn-color-btn-focus-text-outline-secondary) !default;
+$btn-secondary-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary) !default;
+$btn-secondary-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary) !default;
+$btn-secondary-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary) !default;
 
 $btn-secondary-inverse-color: var(--pgn-color-btn-text-inverse-secondary) !default;
 $btn-secondary-inverse-bg: var(--pgn-color-btn-bg-inverse-secondary) !default;
+$btn-secondary-inverse-border-color: var(--pgn-color-btn-border-inverse-secondary) !default;
 $btn-secondary-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary) !default;
 $btn-secondary-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary) !default;
+$btn-secondary-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary) !default;
 $btn-secondary-inverse-active-color: var(--pgn-color-btn-active-text-inverse-secondary) !default;
+$btn-secondary-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary) !default;
+$btn-secondary-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary) !default;
+$btn-secondary-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary) !default;
 $btn-secondary-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary) !default;
+$btn-secondary-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary) !default;
+$btn-secondary-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary) !default;
+$btn-secondary-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary) !default;
+$btn-secondary-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary) !default;
+$btn-secondary-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary) !default;
 
 $btn-secondary-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary) !default;
-
-// stylelint-disable-next-line max-line-length
+$btn-secondary-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary) !default;
+$btn-secondary-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary) !default;
 $btn-secondary-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary) !default;
-$btn-secondary-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary) !default;
-
 
 // BRAND BUTTON VARIABLES
 $btn-brand-bg: var(--pgn-color-btn-bg-brand) !default;
@@ -126,9 +185,16 @@ $btn-brand-hover-border-color: var(--pgn-color-btn-hover-border-brand) !default;
 $btn-brand-active-bg: var(--pgn-color-btn-active-bg-brand) !default;
 $btn-brand-active-color: var(--pgn-color-btn-active-text-brand) !default;
 $btn-brand-active-border-color: var(--pgn-color-btn-active-border-brand) !default;
+$btn-brand-focus-outline-color: var(--pgn-color-btn-focus-outline-brand) !default;
 $btn-brand-focus-border-color: var(--pgn-color-btn-focus-border-brand) !default;
+$btn-brand-focus-bg: var(--pgn-color-btn-focus-bg-brand) !default;
+$btn-brand-focus-color: var(--pgn-color-btn-focus-text-brand) !default;
+$btn-brand-disabled-color: var(--pgn-color-btn-disabled-text-brand) !default;
+$btn-brand-disabled-bg: var(--pgn-color-btn-disabled-bg-brand) !default;
+$btn-brand-disabled-border-color: var(--pgn-color-btn-disabled-border-brand) !default;
 
 $btn-brand-outline-color: var(--pgn-color-btn-text-outline-brand) !default;
+$btn-brand-outline-bg: var(--pgn-color-btn-bg-outline-brand) !default;
 $btn-brand-outline-border-color: var(--pgn-color-btn-border-outline-brand) !default;
 $btn-brand-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand) !default;
 $btn-brand-outline-hover-color: var(--pgn-color-btn-hover-text-outline-brand) !default;
@@ -136,16 +202,33 @@ $btn-brand-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-
 $btn-brand-outline-active-bg: var(--pgn-color-btn-active-bg-outline-brand) !default;
 $btn-brand-outline-active-color: var(--pgn-color-btn-active-text-outline-brand) !default;
 $btn-brand-outline-active-border-color: var(--pgn-color-btn-active-border-outline-brand) !default;
+$btn-brand-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand) !default;
 $btn-brand-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand) !default;
+$btn-brand-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand) !default;
+$btn-brand-outline-focus-color: var(--pgn-color-btn-focus-text-outline-brand) !default;
+$btn-brand-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand) !default;
+$btn-brand-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand) !default;
+$btn-brand-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand) !default;
 
 $btn-brand-inverse-color: var(--pgn-color-btn-text-inverse-brand) !default;
 $btn-brand-inverse-bg: var(--pgn-color-btn-bg-inverse-brand) !default;
+$btn-brand-inverse-border-color: var(--pgn-color-btn-border-inverse-brand) !default;
 $btn-brand-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-brand) !default;
 $btn-brand-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand) !default;
+$btn-brand-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand) !default;
 $btn-brand-inverse-active-color: var(--pgn-color-btn-active-text-inverse-brand) !default;
+$btn-brand-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-brand) !default;
+$btn-brand-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-brand) !default;
+$btn-brand-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand) !default;
 $btn-brand-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand) !default;
+$btn-brand-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-brand) !default;
+$btn-brand-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand) !default;
+$btn-brand-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand) !default;
+$btn-brand-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand) !default;
+$btn-brand-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand) !default;
 
 $btn-brand-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand) !default;
@@ -153,7 +236,13 @@ $btn-brand-inverse-outline-active-border-color: var(--pgn-color-btn-active-borde
 $btn-brand-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand) !default;
 $btn-brand-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand) !default;
+$btn-brand-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand) !default;
 
 
 // DANGER BUTTON VARIABLES
@@ -166,9 +255,16 @@ $btn-danger-hover-border-color: var(--pgn-color-btn-hover-border-danger) !defaul
 $btn-danger-active-bg: var(--pgn-color-btn-active-bg-danger) !default;
 $btn-danger-active-color: var(--pgn-color-btn-active-text-danger) !default;
 $btn-danger-active-border-color: var(--pgn-color-btn-active-border-danger) !default;
+$btn-danger-focus-outline-color: var(--pgn-color-btn-focus-outline-danger) !default;
 $btn-danger-focus-border-color: var(--pgn-color-btn-focus-border-danger) !default;
+$btn-danger-focus-bg: var(--pgn-color-btn-focus-bg-danger) !default;
+$btn-danger-focus-color: var(--pgn-color-btn-focus-text-danger) !default;
+$btn-danger-disabled-color: var(--pgn-color-btn-disabled-text-danger) !default;
+$btn-danger-disabled-bg: var(--pgn-color-btn-disabled-bg-danger) !default;
+$btn-danger-disabled-border-color: var(--pgn-color-btn-disabled-border-danger) !default;
 
 $btn-danger-outline-color: var(--pgn-color-btn-text-outline-danger) !default;
+$btn-danger-outline-bg: var(--pgn-color-btn-bg-outline-danger) !default;
 $btn-danger-outline-border-color: var(--pgn-color-btn-border-outline-danger) !default;
 $btn-danger-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger) !default;
 $btn-danger-outline-hover-color: var(--pgn-color-btn-hover-text-outline-danger) !default;
@@ -176,16 +272,33 @@ $btn-danger-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline
 $btn-danger-outline-active-bg: var(--pgn-color-btn-active-bg-outline-danger) !default;
 $btn-danger-outline-active-color: var(--pgn-color-btn-active-text-outline-danger) !default;
 $btn-danger-outline-active-border-color: var(--pgn-color-btn-active-border-outline-danger) !default;
+$btn-danger-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger) !default;
+$btn-danger-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger) !default;
+$btn-danger-outline-focus-color: var(--pgn-color-btn-focus-text-outline-danger) !default;
 $btn-danger-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger) !default;
+$btn-danger-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger) !default;
+$btn-danger-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger) !default;
+$btn-danger-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger) !default;
 
 $btn-danger-inverse-color: var(--pgn-color-btn-text-inverse-danger) !default;
 $btn-danger-inverse-bg: var(--pgn-color-btn-bg-inverse-danger) !default;
+$btn-danger-inverse-border-color: var(--pgn-color-btn-border-inverse-danger) !default;
 $btn-danger-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-danger) !default;
 $btn-danger-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger) !default;
+$btn-danger-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger) !default;
 $btn-danger-inverse-active-color: var(--pgn-color-btn-active-text-inverse-danger) !default;
+$btn-danger-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-danger) !default;
+$btn-danger-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-danger) !default;
+$btn-danger-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger) !default;
 $btn-danger-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger) !default;
+$btn-danger-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-danger) !default;
+$btn-danger-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger) !default;
+$btn-danger-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger) !default;
+$btn-danger-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger) !default;
+$btn-danger-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger) !default;
 
 $btn-danger-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger) !default;
@@ -193,7 +306,13 @@ $btn-danger-inverse-outline-active-border-color: var(--pgn-color-btn-active-bord
 $btn-danger-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger) !default;
 $btn-danger-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger) !default;
+$btn-danger-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger) !default;
 
 
 // DARK BUTTON VARIABLES
@@ -206,9 +325,16 @@ $btn-dark-hover-border-color: var(--pgn-color-btn-hover-border-dark) !default;
 $btn-dark-active-bg: var(--pgn-color-btn-active-bg-dark) !default;
 $btn-dark-active-color: var(--pgn-color-btn-active-text-dark) !default;
 $btn-dark-active-border-color: var(--pgn-color-btn-active-border-dark) !default;
+$btn-dark-focus-outline-color: var(--pgn-color-btn-focus-outline-dark) !default;
 $btn-dark-focus-border-color: var(--pgn-color-btn-focus-border-dark) !default;
+$btn-dark-focus-bg: var(--pgn-color-btn-focus-bg-dark) !default;
+$btn-dark-focus-color: var(--pgn-color-btn-focus-text-dark) !default;
+$btn-dark-disabled-color: var(--pgn-color-btn-disabled-text-dark) !default;
+$btn-dark-disabled-bg: var(--pgn-color-btn-disabled-bg-dark) !default;
+$btn-dark-disabled-border-color: var(--pgn-color-btn-disabled-border-dark) !default;
 
 $btn-dark-outline-color: var(--pgn-color-btn-text-outline-dark) !default;
+$btn-dark-outline-bg: var(--pgn-color-btn-bg-outline-dark) !default;
 $btn-dark-outline-border-color: var(--pgn-color-btn-border-outline-dark) !default;
 $btn-dark-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark) !default;
 $btn-dark-outline-hover-color: var(--pgn-color-btn-hover-text-outline-dark) !default;
@@ -216,16 +342,33 @@ $btn-dark-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-d
 $btn-dark-outline-active-bg: var(--pgn-color-btn-active-bg-outline-dark) !default;
 $btn-dark-outline-active-color: var(--pgn-color-btn-active-text-outline-dark) !default;
 $btn-dark-outline-active-border-color: var(--pgn-color-btn-active-border-outline-dark) !default;
+$btn-dark-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark) !default;
 $btn-dark-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark) !default;
+$btn-dark-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark) !default;
+$btn-dark-outline-focus-color: var(--pgn-color-btn-focus-text-outline-dark) !default;
+$btn-dark-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark) !default;
+$btn-dark-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark) !default;
+$btn-dark-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark) !default;
 
 $btn-dark-inverse-color: var(--pgn-color-btn-text-inverse-dark) !default;
 $btn-dark-inverse-bg: var(--pgn-color-btn-bg-inverse-dark) !default;
+$btn-dark-inverse-border-color: var(--pgn-color-btn-border-inverse-dark) !default;
 $btn-dark-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-dark) !default;
 $btn-dark-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark) !default;
+$btn-dark-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark) !default;
 $btn-dark-inverse-active-color: var(--pgn-color-btn-active-text-inverse-dark) !default;
+$btn-dark-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-dark) !default;
+$btn-dark-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-dark) !default;
+$btn-dark-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark) !default;
 $btn-dark-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark) !default;
+$btn-dark-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-dark) !default;
+$btn-dark-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark) !default;
+$btn-dark-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark) !default;
+$btn-dark-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark) !default;
+$btn-dark-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark) !default;
 
 $btn-dark-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-dark) !default;
 $btn-dark-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-dark) !default;
 $btn-dark-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark) !default;
 $btn-dark-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark) !default;
@@ -233,7 +376,13 @@ $btn-dark-inverse-outline-active-border-color: var(--pgn-color-btn-active-border
 $btn-dark-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark) !default;
 $btn-dark-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark) !default;
 $btn-dark-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark) !default;
-$btn-dark-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark) !default;
+$btn-dark-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark) !default;
 
 
 // INFO BUTTON VARIABLES
@@ -246,9 +395,16 @@ $btn-info-hover-border-color: var(--pgn-color-btn-hover-border-info) !default;
 $btn-info-active-bg: var(--pgn-color-btn-active-bg-info) !default;
 $btn-info-active-color: var(--pgn-color-btn-active-text-info) !default;
 $btn-info-active-border-color: var(--pgn-color-btn-active-border-info) !default;
+$btn-info-focus-outline-color: var(--pgn-color-btn-focus-outline-info) !default;
 $btn-info-focus-border-color: var(--pgn-color-btn-focus-border-info) !default;
+$btn-info-focus-color: var(--pgn-color-btn-focus-text-info) !default;
+$btn-info-focus-bg: var(--pgn-color-btn-focus-bg-info) !default;
+$btn-info-disabled-color: var(--pgn-color-btn-disabled-text-info) !default;
+$btn-info-disabled-bg: var(--pgn-color-btn-disabled-bg-info) !default;
+$btn-info-disabled-border-color: var(--pgn-color-btn-disabled-border-info) !default;
 
 $btn-info-outline-color: var(--pgn-color-btn-text-outline-info) !default;
+$btn-info-outline-bg: var(--pgn-color-btn-bg-outline-info) !default;
 $btn-info-outline-border-color: var(--pgn-color-btn-border-outline-info) !default;
 $btn-info-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-info) !default;
 $btn-info-outline-hover-color: var(--pgn-color-btn-hover-text-outline-info) !default;
@@ -256,16 +412,33 @@ $btn-info-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-i
 $btn-info-outline-active-bg: var(--pgn-color-btn-active-bg-outline-info) !default;
 $btn-info-outline-active-color: var(--pgn-color-btn-active-text-outline-info) !default;
 $btn-info-outline-active-border-color: var(--pgn-color-btn-active-border-outline-info) !default;
+$btn-info-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info) !default;
 $btn-info-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-info) !default;
+$btn-info-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-info) !default;
+$btn-info-outline-focus-color: var(--pgn-color-btn-focus-text-outline-info) !default;
+$btn-info-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info) !default;
+$btn-info-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-info) !default;
+$btn-info-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info) !default;
 
 $btn-info-inverse-color: var(--pgn-color-btn-text-inverse-info) !default;
 $btn-info-inverse-bg: var(--pgn-color-btn-bg-inverse-info) !default;
+$btn-info-inverse-border-color: var(--pgn-color-btn-border-inverse-info) !default;
 $btn-info-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-info) !default;
 $btn-info-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info) !default;
+$btn-info-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info) !default;
 $btn-info-inverse-active-color: var(--pgn-color-btn-active-text-inverse-info) !default;
+$btn-info-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-info) !default;
+$btn-info-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-info) !default;
+$btn-info-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info) !default;
 $btn-info-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info) !default;
+$btn-info-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-info) !default;
+$btn-info-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info) !default;
+$btn-info-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info) !default;
+$btn-info-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info) !default;
+$btn-info-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info) !default;
 
 $btn-info-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-info) !default;
+$btn-info-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-info) !default;
 $btn-info-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-info) !default;
 $btn-info-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-info) !default;
 $btn-info-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info) !default;
@@ -273,7 +446,13 @@ $btn-info-inverse-outline-active-border-color: var(--pgn-color-btn-active-border
 $btn-info-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info) !default;
 $btn-info-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info) !default;
 $btn-info-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info) !default;
+$btn-info-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info) !default;
 $btn-info-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info) !default;
+$btn-info-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info) !default;
+$btn-info-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info) !default;
+$btn-info-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info) !default;
+$btn-info-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info) !default;
+$btn-info-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info) !default;
 
 
 // LIGHT BUTTON VARIABLES
@@ -286,9 +465,16 @@ $btn-light-hover-border-color: var(--pgn-color-btn-hover-border-light) !default;
 $btn-light-active-bg: var(--pgn-color-btn-active-bg-light) !default;
 $btn-light-active-color: var(--pgn-color-btn-active-text-light) !default;
 $btn-light-active-border-color: var(--pgn-color-btn-active-border-light) !default;
+$btn-light-focus-outline-color: var(--pgn-color-btn-focus-outline-light) !default;
 $btn-light-focus-border-color: var(--pgn-color-btn-focus-border-light) !default;
+$btn-light-focus-bg: var(--pgn-color-btn-focus-bg-light) !default;
+$btn-light-focus-color: var(--pgn-color-btn-focus-text-light) !default;
+$btn-light-disabled-color: var(--pgn-color-btn-disabled-text-light) !default;
+$btn-light-disabled-bg: var(--pgn-color-btn-disabled-bg-light) !default;
+$btn-light-disabled-border-color: var(--pgn-color-btn-disabled-border-light) !default;
 
 $btn-light-outline-color: var(--pgn-color-btn-text-outline-light) !default;
+$btn-light-outline-bg: var(--pgn-color-btn-bg-outline-light) !default;
 $btn-light-outline-border-color: var(--pgn-color-btn-border-outline-light) !default;
 $btn-light-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-light) !default;
 $btn-light-outline-hover-color: var(--pgn-color-btn-hover-text-outline-light) !default;
@@ -296,16 +482,33 @@ $btn-light-outline-hover-border-color: var(--pgn-color-btn-hover-border-outline-
 $btn-light-outline-active-bg: var(--pgn-color-btn-active-bg-outline-light) !default;
 $btn-light-outline-active-color: var(--pgn-color-btn-active-text-outline-light) !default;
 $btn-light-outline-active-border-color: var(--pgn-color-btn-active-border-outline-light) !default;
+$btn-light-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light) !default;
 $btn-light-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-light) !default;
+$btn-light-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-light) !default;
+$btn-light-outline-focus-color: var(--pgn-color-btn-focus-text-outline-light) !default;
+$btn-light-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light) !default;
+$btn-light-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-light) !default;
+$btn-light-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light) !default;
 
 $btn-light-inverse-color: var(--pgn-color-btn-text-inverse-light) !default;
 $btn-light-inverse-bg: var(--pgn-color-btn-bg-inverse-light) !default;
+$btn-light-inverse-border-color: var(--pgn-color-btn-border-inverse-light) !default;
 $btn-light-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-light) !default;
 $btn-light-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light) !default;
+$btn-light-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light) !default;
 $btn-light-inverse-active-color: var(--pgn-color-btn-active-text-inverse-light) !default;
+$btn-light-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-light) !default;
+$btn-light-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-light) !default;
+$btn-light-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light) !default;
 $btn-light-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light) !default;
+$btn-light-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light) !default;
+$btn-light-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-light) !default;
+$btn-light-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light) !default;
+$btn-light-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light) !default;
+$btn-light-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light) !default;
 
 $btn-light-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-light) !default;
+$btn-light-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-light) !default;
 $btn-light-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-light) !default;
 $btn-light-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-light) !default;
 $btn-light-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light) !default;
@@ -313,7 +516,13 @@ $btn-light-inverse-outline-active-border-color: var(--pgn-color-btn-active-borde
 $btn-light-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light) !default;
 $btn-light-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light) !default;
 $btn-light-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light) !default;
+$btn-light-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light) !default;
 $btn-light-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light) !default;
+$btn-light-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light) !default;
+$btn-light-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light) !default;
+$btn-light-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light) !default;
+$btn-light-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light) !default;
+$btn-light-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light) !default;
 
 
 // SUCCESS BUTTON VARIABLES
@@ -326,9 +535,16 @@ $btn-success-hover-border-color: var(--pgn-color-btn-hover-border-success) !defa
 $btn-success-active-bg: var(--pgn-color-btn-active-bg-success) !default;
 $btn-success-active-color: var(--pgn-color-btn-active-text-success) !default;
 $btn-success-active-border-color: var(--pgn-color-btn-active-border-success) !default;
+$btn-success-focus-outline-color: var(--pgn-color-btn-focus-outline-success) !default;
 $btn-success-focus-border-color: var(--pgn-color-btn-focus-border-success) !default;
+$btn-success-focus-bg: var(--pgn-color-btn-focus-bg-success) !default;
+$btn-success-focus-color: var(--pgn-color-btn-focus-text-success) !default;
+$btn-success-disabled-color: var(--pgn-color-btn-disabled-text-success) !default;
+$btn-success-disabled-bg: var(--pgn-color-btn-disabled-bg-success) !default;
+$btn-success-disabled-border-color: var(--pgn-color-btn-disabled-border-success) !default;
 
 $btn-success-outline-color: var(--pgn-color-btn-text-outline-success) !default;
+$btn-success-outline-bg: var(--pgn-color-btn-bg-outline-success) !default;
 $btn-success-outline-border-color: var(--pgn-color-btn-border-outline-success) !default;
 $btn-success-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-success) !default;
 $btn-success-outline-hover-color: var(--pgn-color-btn-hover-text-outline-success) !default;
@@ -336,16 +552,33 @@ $btn-success-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin
 $btn-success-outline-active-bg: var(--pgn-color-btn-active-bg-outline-success) !default;
 $btn-success-outline-active-color: var(--pgn-color-btn-active-text-outline-success) !default;
 $btn-success-outline-active-border-color: var(--pgn-color-btn-active-border-outline-success) !default;
+$btn-success-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success) !default;
 $btn-success-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-success) !default;
+$btn-success-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-success) !default;
+$btn-success-outline-focus-color: var(--pgn-color-btn-focus-text-outline-success) !default;
+$btn-success-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success) !default;
+$btn-success-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-success) !default;
+$btn-success-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success) !default;
 
 $btn-success-inverse-color: var(--pgn-color-btn-text-inverse-success) !default;
 $btn-success-inverse-bg: var(--pgn-color-btn-bg-inverse-success) !default;
+$btn-success-inverse-border-color: var(--pgn-color-btn-border-inverse-success) !default;
 $btn-success-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-success) !default;
 $btn-success-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success) !default;
+$btn-success-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success) !default;
 $btn-success-inverse-active-color: var(--pgn-color-btn-active-text-inverse-success) !default;
+$btn-success-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-success) !default;
+$btn-success-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-success) !default;
+$btn-success-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success) !default;
 $btn-success-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success) !default;
+$btn-success-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-success) !default;
+$btn-success-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success) !default;
+$btn-success-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success) !default;
+$btn-success-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success) !default;
+$btn-success-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success) !default;
 
 $btn-success-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-success) !default;
+$btn-success-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-success) !default;
 $btn-success-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-success) !default;
 $btn-success-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-success) !default;
 $btn-success-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success) !default;
@@ -353,7 +586,13 @@ $btn-success-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor
 $btn-success-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success) !default;
 $btn-success-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success) !default;
 $btn-success-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success) !default;
+$btn-success-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success) !default;
 $btn-success-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success) !default;
+$btn-success-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success) !default;
+$btn-success-inverse-outline-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success) !default;
+$btn-success-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success) !default;
+$btn-success-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success) !default;
+$btn-success-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success) !default;
 
 
 // WARNING BUTTON VARIABLES
@@ -366,9 +605,16 @@ $btn-warning-hover-border-color: var(--pgn-color-btn-hover-border-warning) !defa
 $btn-warning-active-bg: var(--pgn-color-btn-active-bg-warning) !default;
 $btn-warning-active-color: var(--pgn-color-btn-active-text-warning) !default;
 $btn-warning-active-border-color: var(--pgn-color-btn-active-border-warning) !default;
+$btn-warning-focus-outline-color: var(--pgn-color-btn-focus-outline-warning) !default;
 $btn-warning-focus-border-color: var(--pgn-color-btn-focus-border-warning) !default;
+$btn-warning-focus-color: var(--pgn-color-btn-focus-text-warning) !default;
+$btn-warning-focus-bg: var(--pgn-color-btn-focus-bg-warning) !default;
+$btn-warning-disabled-color: var(--pgn-color-btn-disabled-text-warning) !default;
+$btn-warning-disabled-bg: var(--pgn-color-btn-disabled-bg-warning) !default;
+$btn-warning-disabled-border-color: var(--pgn-color-btn-disabled-border-warning) !default;
 
 $btn-warning-outline-color: var(--pgn-color-btn-text-outline-warning) !default;
+$btn-warning-outline-bg: var(--pgn-color-btn-bg-outline-warning) !default;
 $btn-warning-outline-border-color: var(--pgn-color-btn-border-outline-warning) !default;
 $btn-warning-outline-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning) !default;
 $btn-warning-outline-hover-color: var(--pgn-color-btn-hover-text-outline-warning) !default;
@@ -376,16 +622,33 @@ $btn-warning-outline-hover-border-color: var(--pgn-color-btn-hover-border-outlin
 $btn-warning-outline-active-bg: var(--pgn-color-btn-active-bg-outline-warning) !default;
 $btn-warning-outline-active-color: var(--pgn-color-btn-active-text-outline-warning) !default;
 $btn-warning-outline-active-border-color: var(--pgn-color-btn-active-border-outline-warning) !default;
+$btn-warning-outline-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning) !default;
 $btn-warning-outline-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning) !default;
+$btn-warning-outline-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning) !default;
+$btn-warning-outline-focus-color: var(--pgn-color-btn-focus-text-outline-warning) !default;
+$btn-warning-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning) !default;
+$btn-warning-outline-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning) !default;
+$btn-warning-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning) !default;
 
 $btn-warning-inverse-color: var(--pgn-color-btn-text-inverse-warning) !default;
 $btn-warning-inverse-bg: var(--pgn-color-btn-bg-inverse-warning) !default;
+$btn-warning-inverse-border-color: var(--pgn-color-btn-border-inverse-warning) !default;
 $btn-warning-inverse-hover-color: var(--pgn-color-btn-hover-text-inverse-warning) !default;
 $btn-warning-inverse-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning) !default;
+$btn-warning-inverse-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning) !default;
 $btn-warning-inverse-active-color: var(--pgn-color-btn-active-text-inverse-warning) !default;
+$btn-warning-inverse-active-bg: var(--pgn-color-btn-active-bg-inverse-warning) !default;
+$btn-warning-inverse-active-border-color: var(--pgn-color-btn-active-border-inverse-warning) !default;
+$btn-warning-inverse-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning) !default;
 $btn-warning-inverse-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning) !default;
+$btn-warning-inverse-focus-color: var(--pgn-color-btn-focus-text-inverse-warning) !default;
+$btn-warning-inverse-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning) !default;
+$btn-warning-inverse-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning) !default;
+$btn-warning-inverse-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning) !default;
+$btn-warning-inverse-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning) !default;
 
 $btn-warning-inverse-outline-color: var(--pgn-color-btn-text-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-bg: var(--pgn-color-btn-bg-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-border-color: var(--pgn-color-btn-border-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning) !default;
@@ -393,7 +656,13 @@ $btn-warning-inverse-outline-active-border-color: var(--pgn-color-btn-active-bor
 $btn-warning-inverse-outline-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default;
 $btn-warning-inverse-outline-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning) !default;
+$btn-warning-inverse-outline-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning) !default;
 
 
 // TERTIARY BUTTON
@@ -406,7 +675,13 @@ $btn-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-tertiary) !de
 $btn-tertiary-active-color: var(--pgn-color-btn-active-text-tertiary) !default;
 $btn-tertiary-active-bg: var(--pgn-color-btn-active-bg-tertiary) !default;
 $btn-tertiary-active-border-color: var(--pgn-color-btn-active-border-tertiary) !default;
+$btn-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary) !default;
 $btn-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-tertiary) !default;
+$btn-tertiary-focus-color: var(--pgn-color-btn-focus-text-tertiary) !default;
+$btn-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-tertiary) !default;
+$btn-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-tertiary) !default;
+$btn-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary) !default;
+$btn-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary) !default;
 
 $btn-inverse-tertiary-color: var(--pgn-color-btn-text-inverse-tertiary) !default;
 $btn-inverse-tertiary-bg: var(--pgn-color-btn-bg-inverse-tertiary) !default;
@@ -417,7 +692,13 @@ $btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inver
 $btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default;
 $btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default;
 $btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default;
+$btn-inverse-tertiary-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary) !default;
 $btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default;
+$btn-inverse-tertiary-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary) !default;
+$btn-inverse-tertiary-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary) !default;
+$btn-inverse-tertiary-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary) !default;
+$btn-inverse-tertiary-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary) !default;
+$btn-inverse-tertiary-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary) !default;
 
 $btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
 $btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json
index 06f4214351..e6f39658f6 100644
--- a/tokens/src/components/Button/brand.json
+++ b/tokens/src/components/Button/brand.json
@@ -16,11 +16,17 @@
       },
       "bg": {
         "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" },
+        "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" },
         "inverse-brand": {
           "value": "{color.btn.text.inverse-brand}",
           "type": "color",
           "source": "$btn-brand-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
+        },
+        "inverse-outline-brand": {
+          "value": "transparent",
+          "type": "color",
+          "source": "$btn-brand-inverse-outline-bg"
         }
       },
       "border": {
@@ -30,7 +36,8 @@
         },
         "inverse-outline-brand": {
           "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color"
-        }
+        },
+        "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" }
       },
       "hover": {
         "text": {
@@ -79,7 +86,8 @@
           },
           "inverse-outline-brand": {
             "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color"
-          }
+          },
+          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" }
         }
       },
       "active": {
@@ -117,7 +125,8 @@
           },
           "inverse-outline-brand": {
             "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg"
-          }
+          },
+          "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" }
         },
         "border": {
           "brand": {
@@ -128,18 +137,41 @@
             "type": "color",
             "source": "$btn-brand-outline-active-border-color"
           },
+          "inverse-brand": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-brand-inverse-active-border-color"
+          },
           "inverse-outline-brand": {
             "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
+        "text": {
+          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" },
+          "inverse-brand": {
+            "value": "{color.btn.text.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-focus-color"
+          },
+          "outline-brand": {
+            "value": "{color.btn.text.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-focus-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "brand": {
-            "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
+            "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
           },
           "outline-brand": {
-            "value": "{color.theme.focus.brand}",
+            "value": "{color.btn.border.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-focus-border-color"
           },
@@ -147,7 +179,79 @@
             "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color"
           },
           "inverse-outline-brand": {
-            "value": "{color.white}", "type": "color",  "source": "$btn-brand-inverse-outline-focus-border-color"
+            "value": "{color.btn.border.inverse-outline-brand}", "type": "color",  "source": "$btn-brand-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" },
+          "inverse-brand": {
+            "value": "{color.btn.bg.inverse-brand}",
+            "source": "$btn-brand-inverse-focus-bg",
+            "type": "color"
+          },
+          "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" },
+          "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" },
+          "outline-brand": {
+            "value": "{color.theme.focus.brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-focus-outline-color"
+          },
+          "inverse-brand": {
+            "value": "{color.btn.focus.border.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-focus-outline-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.focus.border.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" },
+          "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" },
+          "outline-brand": {
+            "value": "{color.btn.hover.text.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-disabled-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" },
+          "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" },
+          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
+          "inverse-outline-brand": {
+            "value": "{color.btn.bg.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-bg"
+          }
+        },
+        "border": {
+          "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" },
+          "outline-brand": {
+            "value": "{color.btn.border.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-disabled-border-color"
+          },
+          "inverse-brand": {
+            "value": "{color.btn.disabled.bg.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-disabled-border-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/danger.json b/tokens/src/components/Button/danger.json
index be1c0a2dfb..9272c9473c 100644
--- a/tokens/src/components/Button/danger.json
+++ b/tokens/src/components/Button/danger.json
@@ -20,18 +20,21 @@
       },
       "bg": {
         "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" },
+        "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" },
         "inverse-danger": {
           "value": "{color.btn.text.inverse-danger}",
           "type": "color",
           "source": "$btn-danger-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" }
       },
       "border": {
         "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" },
         "outline-danger": {
           "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color"
         },
+        "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" },
         "inverse-outline-danger": {
           "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color"
         }
@@ -81,6 +84,7 @@
           "outline-danger": {
             "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color"
           },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" },
           "inverse-outline-danger": {
             "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color"
           }
@@ -119,6 +123,7 @@
           "outline-danger": {
             "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg"
           },
+          "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" },
           "inverse-outline-danger": {
             "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg"
           }
@@ -132,17 +137,36 @@
             "type": "color",
             "source": "$btn-danger-outline-active-border-color"
           },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" },
           "inverse-outline-danger": {
             "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" }
         }
       },
       "focus": {
+        "text": {
+          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" },
+          "inverse-danger": {
+            "value": "{color.btn.text.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-focus-color"
+          },
+          "outline-danger": {
+            "value": "{color.btn.text.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-focus-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.text.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "danger": {
-            "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
+            "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
           },
           "outline-danger": {
-            "value": "{color.theme.focus.danger}",
+            "value": "{color.btn.border.outline-danger}",
             "type": "color",
             "source": "$btn-danger-outline-focus-border-color"
           },
@@ -152,6 +176,70 @@
           "inverse-outline-danger": {
             "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color"
           }
+        },
+        "bg": {
+          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" },
+          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" },
+          "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" },
+          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" },
+          "outline-danger": {
+            "value": "{color.theme.focus.danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-focus-outline-color"
+          },
+          "inverse-danger": {
+            "value": "{color.btn.focus.border.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-focus-outline-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.focus.border.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" },
+          "outline-danger": {
+            "value": "{color.btn.hover.text.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-disabled-color"
+          },
+          "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" },
+          "inverse-outline-danger": {
+            "value": "{color.btn.text.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" },
+          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" },
+          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" },
+          "outline-danger": {
+            "value": "{color.btn.border.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-disabled-border-color"
+          },
+          "inverse-danger": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-danger-inverse-disabled-border-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.border.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-disabled-border-color"
+          }
         }
       }
     }
diff --git a/tokens/src/components/Button/dark.json b/tokens/src/components/Button/dark.json
index d8c17d96e6..dcb73c0d64 100644
--- a/tokens/src/components/Button/dark.json
+++ b/tokens/src/components/Button/dark.json
@@ -16,18 +16,21 @@
       },
       "bg": {
         "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-bg" },
+        "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-bg" },
         "inverse-dark": {
           "value": "{color.btn.text.inverse-dark}",
           "type": "color",
           "source": "$btn-dark-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-bg" }
       },
       "border": {
         "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-border-color" },
         "outline-dark": {
           "value": "{color.dark.base}", "type": "color", "source": "$btn-dark-outline-border-color"
         },
+        "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-border-color" },
         "inverse-outline-dark": {
           "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-border-color"
         }
@@ -73,6 +76,7 @@
           "outline-dark": {
             "value": "{color.dark.900}", "type": "color", "source": "$btn-dark-outline-hover-border-color"
           },
+          "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-hover-border-color" },
           "inverse-outline-dark": {
             "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-hover-border-color"
           }
@@ -109,6 +113,7 @@
           "outline-dark": {
             "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-outline-active-bg"
           },
+          "inverse-dark": { "value": "{color.gray.100}", "type": "color", "source": "$btn-dark-inverse-active-bg" },
           "inverse-outline-dark": {
             "value": "{color.theme.bg.dark}", "type": "color", "source": "$btn-dark-inverse-outline-active-bg"
           }
@@ -120,24 +125,103 @@
           "outline-dark": {
             "value": "{color.theme.active.dark}", "type": "color", "source": "$btn-dark-outline-active-border-color"
           },
+          "inverse-dark": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-dark-inverse-active-border-color"
+          },
           "inverse-outline-dark": {
             "value": "transparent", "type": "color", "source": "$btn-dark-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
+        "text": {
+          "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-focus-color" },
+          "inverse-dark": { "value": "{color.btn.text.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-color" },
+          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-color" },
+          "inverse-outline-dark": {
+            "value": "{color.btn.text.inverse-outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-outline-focus-color"
+          }
+        },
         "border": {
-          "dark": {
-            "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-border-color"
-          },
+          "dark": { "value": "{color.btn.focus.bg.dark}", "type": "color", "source": "$btn-dark-focus-border-color" },
           "outline-dark": {
-            "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-border-color"
+            "value": "{color.btn.border.outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-outline-focus-border-color"
+          },
+          "inverse-dark": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-dark-inverse-focus-border-color"
           },
+          "inverse-outline-dark": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-dark-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-focus-bg" },
+          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-focus-bg" },
+          "inverse-dark": { "value": "{color.btn.bg.inverse-dark}", "type": "color", "source": "$btn-dark-inverse-focus-bg" },
+          "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-focus-outline-color" },
+          "outline-dark": { "value": "{color.theme.focus.dark}", "type": "color", "source": "$btn-dark-outline-focus-outline-color" },
           "inverse-dark": {
-            "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-focus-border-color"
+            "value": "{color.btn.focus.border.inverse-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-focus-outline-color"
           },
           "inverse-outline-dark": {
-            "value": "{color.white}", "type": "color", "source": "$btn-dark-inverse-outline-focus-border-color"
+            "value": "{color.btn.focus.border.inverse-outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-outline-focus-border-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "dark": { "value": "{color.btn.text.dark}", "type": "color", "source": "$btn-dark-disabled-color" },
+          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-color" },
+          "inverse-dark": {
+            "value": "{color.btn.text.inverse-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-disabled-color"
+          },
+          "inverse-outline-dark": {
+            "value": "{color.btn.text.inverse-outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "dark": { "value": "{color.btn.bg.dark}", "type": "color", "source": "$btn-dark-disabled-bg" },
+          "outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-outline-disabled-bg" },
+          "inverse-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-disabled-bg" },
+          "inverse-outline-dark": { "value": "inherit", "type": "color", "source": "$btn-dark-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "dark": {
+            "value": "{color.btn.border.dark}",
+            "type": "color",
+            "source": "$btn-dark-disabled-border-color"
+          },
+          "outline-dark": {
+            "value": "{color.btn.hover.text.outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-outline-disabled-border-color"
+          },
+          "inverse-dark": { "value": "transparent", "type": "color", "source": "$btn-dark-inverse-disabled-border-color" },
+          "inverse-outline-dark": {
+            "value": "{color.btn.focus.border.inverse-outline-dark}",
+            "type": "color",
+            "source": "$btn-dark-inverse-outline-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/info.json b/tokens/src/components/Button/info.json
index fa086fb1bf..5f777e9524 100644
--- a/tokens/src/components/Button/info.json
+++ b/tokens/src/components/Button/info.json
@@ -16,18 +16,21 @@
       },
       "bg": {
         "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" },
+        "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" },
         "inverse-info": {
           "value": "{color.btn.text.inverse-info}",
           "type": "color",
           "source": "$btn-info-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" }
       },
       "border": {
         "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" },
         "outline-info": {
           "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color"
         },
+        "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" },
         "inverse-outline-info": {
           "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color"
         }
@@ -75,6 +78,7 @@
           "outline-info": {
             "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color"
           },
+          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" },
           "inverse-outline-info": {
             "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color"
           }
@@ -111,6 +115,7 @@
           "outline-info": {
             "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg"
           },
+          "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" },
           "inverse-outline-info": {
             "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg"
           }
@@ -124,24 +129,107 @@
             "type": "color",
             "source": "$btn-info-outline-active-border-color"
           },
+          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" },
           "inverse-outline-info": {
             "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
+        "text": {
+          "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" },
+          "outline-info": {
+            "value": "{color.btn.text.outline-info}",
+            "type": "color",
+            "source": "$btn-info-outline-focus-color"
+          },
+          "inverse-info": {
+            "value": "{color.btn.text.inverse-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-focus-color"
+          },
+          "inverse-outline-info": {
+            "value": "{color.btn.text.inverse-outline-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-outline-focus-color"
+          }
+        },
         "border": {
-          "info": {
-            "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-border-color"
+          "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" },
+          "outline-info": {
+            "value": "{color.btn.border.outline-info}",
+            "type": "color",
+            "source": "$btn-info-outline-focus-border-color"
+          },
+          "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" },
+          "inverse-outline-info": {
+            "value": "{color.btn.border.inverse-outline-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" },
+          "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" },
+          "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" },
+          "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" },
+          "outline-info": {
+            "value": "{color.theme.focus.info}",
+            "type": "color",
+            "source": "$btn-info-outline-focus-outline-color"
+          },
+          "inverse-info": {
+            "value": "{color.btn.focus.border.inverse-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-focus-outline-color"
           },
+          "inverse-outline-info": {
+            "value": "{color.btn.focus.border.inverse-outline-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" },
           "outline-info": {
-            "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-outline-focus-border-color"
+            "value": "{color.btn.text.outline-info}",
+            "type": "color",
+            "source": "$btn-info-outline-disabled-color"
           },
           "inverse-info": {
-            "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color"
+            "value": "{color.info.base}",
+            "type": "color",
+            "source": "$btn-info-inverse-disabled-color"
+          },
+          "inverse-outline-info": {
+            "value": "{color.btn.text.inverse-outline-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" },
+          "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" },
+          "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" },
+          "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" },
+          "outline-info": {
+            "value": "{color.btn.border.outline-info}",
+            "type": "color",
+            "source": "$btn-info-outline-disabled-border-color"
           },
+          "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" },
           "inverse-outline-info": {
-            "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-focus-border-color"
+            "value": "{color.btn.border.inverse-outline-info}",
+            "type": "color",
+            "source": "$btn-info-inverse-outline-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/light.json b/tokens/src/components/Button/light.json
index 8dc026c591..83c4abc465 100644
--- a/tokens/src/components/Button/light.json
+++ b/tokens/src/components/Button/light.json
@@ -21,13 +21,16 @@
           "type": "color",
           "source": "$btn-light-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-bg" },
+        "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-bg" }
       },
       "border": {
         "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-border-color" },
         "outline-light": {
           "value": "{color.light.base}", "type": "color", "source": "$btn-light-outline-border-color"
         },
+        "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-border-color" },
         "inverse-outline-light": {
           "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-border-color"
         }
@@ -77,6 +80,7 @@
           "outline-light": {
             "value": "{color.light.900}", "type": "color", "source": "$btn-light-outline-hover-border-color"
           },
+          "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-hover-border-color" },
           "inverse-outline-light": {
             "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-hover-border-color"
           }
@@ -113,6 +117,7 @@
           "outline-light": {
             "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-outline-active-bg"
           },
+          "inverse-light": { "value": "{color.gray.100}", "type": "color", "source": "$btn-light-inverse-active-bg" },
           "inverse-outline-light": {
             "value": "{color.theme.bg.light}", "type": "color", "source": "$btn-light-inverse-outline-active-bg"
           }
@@ -126,26 +131,103 @@
             "type": "color",
             "source": "$btn-light-outline-active-border-color"
           },
+          "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-active-border-color" },
           "inverse-outline-light": {
             "value": "transparent", "type": "color", "source": "$btn-light-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
-        "border": {
-          "light": {
-            "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-focus-border-color"
+        "text": {
+          "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-focus-color" },
+          "outline-light": {
+            "value": "{color.btn.text.outline-light}",
+            "type": "color",
+            "source": "$btn-light-outline-focus-color"
+          },
+          "inverse-light": {
+            "value": "{color.btn.text.inverse-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-focus-color"
           },
+          "inverse-outline-light": {
+            "value": "{color.btn.text.inverse-outline-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-outline-focus-color"
+          }
+        },
+        "border": {
+          "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-focus-border-color" },
           "outline-light": {
-            "value": "{color.theme.focus.light}",
+            "value": "{color.btn.border.outline-light}",
             "type": "color",
             "source": "$btn-light-outline-focus-border-color"
           },
           "inverse-light": {
-            "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-border-color"
+            "value": "{color.btn.border.inverse-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-focus-border-color"
           },
           "inverse-outline-light": {
-            "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-outline-focus-border-color"
+            "value": "{color.btn.border.inverse-outline-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-focus-bg" },
+          "outline-light": { "value": "transparent", "type": "color", "source": "$btn-light-outline-focus-bg" },
+          "inverse-light": { "value": "{color.btn.bg.inverse-light}", "type": "color", "source": "$btn-light-inverse-focus-bg" },
+          "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "light": { "value": "{color.primary.300}", "type": "color", "source": "$btn-light-focus-outline-color" },
+          "outline-light": { "value": "{color.theme.focus.light}", "type": "color", "source": "$btn-light-outline-focus-outline-color" },
+          "inverse-light": { "value": "{color.white}", "type": "color", "source": "$btn-light-inverse-focus-outline-color" },
+          "inverse-outline-light": {
+            "value": "{color.btn.focus.border.inverse-outline-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "light": { "value": "{color.btn.text.light}", "type": "color", "source": "$btn-light-disabled-color" },
+          "outline-light": {
+            "value": "{color.btn.hover.text.outline-light}",
+            "type": "color",
+            "source": "$btn-light-outline-disabled-color"
+          },
+          "inverse-light": {
+            "value": "{color.btn.text.inverse-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-disabled-color"
+          },
+          "inverse-outline-light": {
+            "value": "{color.btn.text.inverse-outline-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "light": { "value": "{color.btn.bg.light}", "type": "color", "source": "$btn-light-disabled-bg" },
+          "outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-outline-disabled-bg" },
+          "inverse-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-disabled-bg" },
+          "inverse-outline-light": { "value": "inherit", "type": "color", "source": "$btn-light-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "light": { "value": "{color.btn.border.light}", "type": "color", "source": "$btn-light-disabled-border-color" },
+          "outline-light": {
+            "value": "{color.btn.hover.text.outline-light}",
+            "type": "color",
+            "source": "$btn-light-outline-disabled-border-color"
+          },
+          "inverse-light": { "value": "transparent", "type": "color", "source": "$btn-light-inverse-disabled-border-color" },
+          "inverse-outline-light": {
+            "value": "{color.btn.border.inverse-outline-light}",
+            "type": "color",
+            "source": "$btn-light-inverse-outline-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/primary.json b/tokens/src/components/Button/primary.json
index 771ad112ca..1c6e29c6d1 100644
--- a/tokens/src/components/Button/primary.json
+++ b/tokens/src/components/Button/primary.json
@@ -19,7 +19,9 @@
         }
       },
       "bg": {
-        "primary": { "value": "{color.primary.base.value}", "type": "color", "source": "$btn-primary-bg" },
+        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$btn-primary-bg" },
+        "outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-outline-bg" },
+        "inverse-outline-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-bg" },
         "inverse-primary": {
           "value": "{color.btn.text.inverse-primary}",
           "type": "color",
@@ -34,7 +36,8 @@
         },
         "inverse-outline-primary": {
           "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-border-color"
-        }
+        },
+        "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-border-color" }
       },
       "hover": {
         "text": {
@@ -85,7 +88,8 @@
           },
           "inverse-outline-primary": {
             "value": "transparent", "type": "color", "source": "$btn-primary-inverse-outline-hover-border-color"
-          }
+          },
+          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-hover-border-color" }
         }
       },
       "active": {
@@ -125,7 +129,8 @@
             "value": "{color.theme.bg.primary}",
             "type": "color",
             "source": "$btn-primary-inverse-outline-active-bg"
-          }
+          },
+          "inverse-primary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-primary-inverse-active-bg" }
         },
         "border": {
           "primary": {
@@ -142,24 +147,101 @@
             "value": "transparent",
             "type": "color",
             "source": "$btn-primary-inverse-outline-active-border-color"
-          }
+          },
+          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-active-border-color" }
         }
       },
       "focus": {
+        "text": {
+          "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-focus-color" },
+          "outline-primary": {
+            "value": "{color.btn.text.outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-outline-focus-color"
+          },
+          "inverse-primary": {
+            "value": "{color.btn.text.inverse-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-focus-color"
+          },
+          "inverse-outline-primary": {
+            "value": "{color.btn.text.inverse-outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-outline-focus-color"
+          }
+        },
         "border": {
-          "primary": {
-            "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-border-color"
+          "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-focus-border-color" },
+          "outline-primary": {
+            "value": "{color.btn.border.outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-outline-focus-border-color"
           },
+          "inverse-primary": { "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color" },
+          "inverse-outline-primary": {
+            "value": "{color.btn.border.inverse-outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-outline-focus-border-color"
+          }
+        },
+        "outline": {
+          "primary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-primary-focus-focus-outline-color" },
           "outline-primary": {
             "value": "{color.theme.focus.primary}",
             "type": "color",
-            "source": "$btn-primary-outline-focus-border-color"
+            "source": "$btn-primary-outline-focus-outline-color"
           },
           "inverse-primary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-focus-border-color"
+            "value": "{color.btn.focus.border.inverse-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-focus-outline-color"
+          },
+          "inverse-outline-primary": {
+            "value": "{color.btn.border.inverse-outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-outline-focus-outline-color"
+          }
+        },
+        "bg": {
+          "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-focus-bg" },
+          "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-focus-bg" },
+          "inverse-primary": { "value": "{color.btn.bg.inverse-primary}", "type": "color", "source": "$btn-primary-inverse-focus-bg" },
+          "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-focus-bg" }
+        }
+      },
+      "disabled": {
+        "text": {
+          "primary": { "value": "{color.btn.text.primary}", "type": "color", "source": "$btn-primary-disabled-color" },
+          "inverse-primary": { "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-inverse-disabled-color" },
+          "outline-primary": {
+            "value": "{color.btn.hover.text.outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-outline-disabled-color"
           },
           "inverse-outline-primary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-primary-inverse-outline-focus-border-color"
+            "value": "{color.btn.text.inverse-outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "primary": { "value": "{color.btn.bg.primary}", "type": "color", "source": "$btn-primary-disabled-bg" },
+          "inverse-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-disabled-bg" },
+          "outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-outline-disabled-bg" },
+          "inverse-outline-primary": { "value": "inherit", "type": "color", "source": "$btn-primary-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "primary": { "value": "{color.btn.border.primary}", "type": "color", "source": "$btn-primary-disabled-border-color" },
+          "inverse-primary": { "value": "transparent", "type": "color", "source": "$btn-primary-inverse-disabled-border-color" },
+          "outline-primary": {
+            "value": "{color.btn.hover.text.outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-outline-disabled-border-color"
+          },
+          "inverse-outline-primary": {
+            "value": "{color.btn.text.inverse-outline-primary}",
+            "type": "color",
+            "source": "$btn-primary-inverse-outline-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/components/Button/secondary.json
index d9f899b53c..c2b6c680d3 100644
--- a/tokens/src/components/Button/secondary.json
+++ b/tokens/src/components/Button/secondary.json
@@ -22,6 +22,8 @@
         "secondary": {
           "value": "{color.secondary.base}", "type": "color", "source": "$btn-secondary-bg"
         },
+        "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-bg" },
+        "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-bg" },
         "inverse-secondary": {
           "value": "{color.btn.text.inverse-secondary}",
           "type": "color",
@@ -38,7 +40,8 @@
         },
         "inverse-outline-secondary": {
           "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-outline-border-color"
-        }
+        },
+        "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-border-color" }
       },
       "hover": {
         "text": {
@@ -99,7 +102,8 @@
             "value": "transparent",
             "type": "color",
             "source": "$btn-secondary-inverse-outline-hover-border-color"
-          }
+          },
+          "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-hover-border-color" }
         }
       },
       "active": {
@@ -139,7 +143,8 @@
             "value": "{color.theme.bg.secondary}",
             "type": "color",
             "source": "$btn-secondary-inverse-outline-active-bg"
-          }
+          },
+          "inverse-secondary": { "value": "{color.gray.100}", "type": "color", "source": "$btn-secondary-inverse-active-bg" }
         },
         "border": {
           "secondary": {
@@ -154,29 +159,118 @@
           },
           "inverse-outline-secondary": {
             "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-outline-active-border-color"
-          }
+          },
+          "inverse-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-inverse-active-border-color" }
         }
       },
       "focus": {
+        "text": {
+          "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-focus-color" },
+          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-focus-color" },
+          "outline-secondary": {
+            "value": "{color.btn.text.outline-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-outline-focus-color"
+          },
+          "inverse-outline-secondary": {
+            "value": "{color.btn.text.inverse-outline-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "secondary": {
-            "value": "{color.theme.focus.secondary}",
+            "value": "{color.btn.bg.secondary}",
             "type": "color",
             "source": "$btn-secondary-focus-border-color"
           },
           "outline-secondary": {
-            "value": "{color.theme.focus.secondary}",
+            "value": "{color.btn.border.outline-secondary}",
             "type": "color",
             "source": "$btn-secondary-outline-focus-border-color"
           },
           "inverse-secondary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-secondary-inverse-focus-border-color"
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-focus-border-color"
           },
           "inverse-outline-secondary": {
             "value": "{color.white}",
             "type": "color",
             "source": "$btn-secondary-inverse-outline-focus-border-color"
           }
+        },
+        "outline": {
+          "secondary": {
+            "value": "{color.theme.focus.secondary}",
+            "type": "color",
+            "source": "$btn-secondary-focus-outline-color"
+          },
+          "outline-secondary": {
+            "value": "{color.theme.focus.secondary}",
+            "type": "color",
+            "source": "$btn-secondary-outline-focus-outline-color"
+          },
+          "inverse-secondary": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-focus-outline-color"
+          },
+          "inverse-outline-secondary": {
+            "value": "{color.btn.border.inverse-outline-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-outline-focus-outline-color"
+          }
+        },
+        "bg": {
+          "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-focus-bg" },
+          "outline-secondary": { "value": "transparent", "type": "color", "source": "$btn-secondary-outline-focus-bg" },
+          "inverse-secondary": {
+            "value": "{color.btn.bg.inverse-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-focus-bg"
+          },
+          "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-focus-bg" }
+        }
+      },
+      "disabled": {
+        "text": {
+          "secondary": { "value": "{color.btn.text.secondary}", "type": "color", "source": "$btn-secondary-disabled-color" },
+          "outline-secondary": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-secondary-outline-disabled-color"
+          },
+          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-color" },
+          "inverse-outline-secondary": {
+            "value": "{color.btn.text.inverse-outline-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "secondary": { "value": "{color.btn.bg.secondary}", "type": "color", "source": "$btn-secondary-disabled-bg" },
+          "outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-outline-disabled-bg" },
+          "inverse-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-disabled-bg" },
+          "inverse-outline-secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "secondary": { "value": "inherit", "type": "color", "source": "$btn-secondary-disabled-border-color" },
+          "outline-secondary": {
+            "value": "{color.secondary.base}",
+            "type": "color",
+            "source": "$btn-secondary-outline-disabled-border-color"
+          },
+          "inverse-secondary": {
+            "value": "{color.btn.border.inverse-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-disabled-border-color"
+          },
+          "inverse-outline-secondary": {
+            "value": "{color.btn.border.inverse-outline-secondary}",
+            "type": "color",
+            "source": "$btn-secondary-inverse-outline-disabled-border-color"
+          }
         }
       }
     }
diff --git a/tokens/src/components/Button/success.json b/tokens/src/components/Button/success.json
index a27dc9831c..4b68d59462 100644
--- a/tokens/src/components/Button/success.json
+++ b/tokens/src/components/Button/success.json
@@ -20,18 +20,21 @@
       },
       "bg": {
         "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" },
+        "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" },
         "inverse-success": {
           "value": "{color.btn.text.inverse-success}",
           "type": "color",
           "source": "$btn-success-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" }
       },
       "border": {
         "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" },
         "outline-success": {
           "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color"
         },
+        "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-border-color" },
         "inverse-outline-success": {
           "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-border-color"
         }
@@ -83,6 +86,7 @@
           "outline-success": {
             "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color"
           },
+          "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-hover-border-color" },
           "inverse-outline-success": {
             "value": "transparent", "type": "color", "source": "$btn-success-inverse-outline-hover-border-color"
           }
@@ -121,6 +125,7 @@
           "outline-success": {
             "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg"
           },
+          "inverse-success": { "value": "{color.gray.100}", "type": "color", "source": "$btn-success-inverse-active-bg" },
           "inverse-outline-success": {
             "value": "{color.theme.bg.success}",
             "type": "color",
@@ -138,6 +143,10 @@
             "type": "color",
             "source": "$btn-success-outline-active-border-color"
           },
+          "inverse-success": {
+            "value": "inherit",
+            "source": "$btn-success-inverse-active-border-color"
+          },
           "inverse-outline-success": {
             "value": "transparent",
             "type": "color",
@@ -146,21 +155,97 @@
         }
       },
       "focus": {
+        "text": {
+          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" },
+          "outline-success": {
+            "value": "{color.btn.text.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-focus-color"
+          },
+          "inverse-success": {
+            "value": "{color.btn.text.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-color"
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.text.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-color"
+          }
+        },
         "border": {
-          "success": {
-            "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-border-color"
+          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" },
+          "outline-success": {
+            "value": "{color.btn.border.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-focus-border-color"
+          },
+          "inverse-success": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-border-color"
           },
+          "inverse-outline-success": {
+            "value": "{color.btn.border.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-focus-bg" },
+          "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-focus-bg" },
+          "inverse-success": { "value": "{color.btn.bg.inverse-success}", "type": "color", "source": "$btn-success-inverse-focus-bg" },
+          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" },
           "outline-success": {
             "value": "{color.theme.focus.success}",
             "type": "color",
-            "source": "$btn-success-outline-focus-border-color"
+            "source": "$btn-success-outline-focus-outline-color"
           },
           "inverse-success": {
-            "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-focus-border-color"
+            "value": "{color.btn.focus.border.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-outline-color"
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.focus.border.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" },
+          "outline-success": {
+            "value": "{color.btn.text.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-disabled-color"
           },
+          "inverse-success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-disabled-color" },
           "inverse-outline-success": {
-            "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-focus-border-color"
+            "value": "{color.btn.text.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-disabled-color"
           }
+        },
+        "bg": {
+          "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-disabled-bg" },
+          "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-disabled-bg" },
+          "inverse-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-disabled-bg" },
+          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" },
+          "outline-success": {
+            "value": "{color.btn.border.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-disabled-border-color"
+          },
+          "inverse-success": { "value": "transparent", "type": "color", "source": "$btn-success-inverse-disabled-border-color" },
+          "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-disabled-border-color" }
         }
       }
     }
diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/components/Button/tertiary.json
index fb2237f42d..a743b5f0de 100644
--- a/tokens/src/components/Button/tertiary.json
+++ b/tokens/src/components/Button/tertiary.json
@@ -63,12 +63,44 @@
         }
       },
       "focus": {
+        "text": {
+          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" },
+          "inverse-tertiary": {
+            "value": "{color.btn.text.inverse-tertiary}",
+            "type": "color",
+            "source": "$btn-inverse-tertiary-focus-color"
+          }
+        },
         "border": {
-          "tertiary": {
-            "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-border-color"
-          },
+          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" },
+          "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" }
+        },
+        "bg": {
+          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" },
+          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" }
+        },
+        "outline": {
+          "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" },
+          "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" }
+        }
+      },
+      "disabled": {
+        "text": {
+          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" },
+          "inverse-tertiary": {
+            "value": "{color.btn.text.inverse-tertiary}",
+            "type": "color",
+            "source": "$btn-inverse-tertiary-disabled-color"
+          }
+        },
+        "bg": {
+          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" },
+          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" }
+        },
+        "border": {
+          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" },
           "inverse-tertiary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color"
+            "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color"
           }
         }
       }
diff --git a/tokens/src/components/Button/warning.json b/tokens/src/components/Button/warning.json
index c5a5904920..0d47ce0e22 100644
--- a/tokens/src/components/Button/warning.json
+++ b/tokens/src/components/Button/warning.json
@@ -20,18 +20,21 @@
       },
       "bg": {
         "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" },
+        "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" },
         "inverse-warning": {
           "value": "{color.btn.text.inverse-warning}",
           "type": "color",
           "source": "$btn-warning-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" }
       },
       "border": {
         "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" },
         "outline-warning": {
           "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color"
         },
+        "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" },
         "inverse-outline-warning": {
           "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color"
         }
@@ -83,6 +86,7 @@
           "outline-warning": {
             "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color"
           },
+          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" },
           "inverse-outline-warning": {
             "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color"
           }
@@ -121,6 +125,7 @@
           "outline-warning": {
             "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg"
           },
+          "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" },
           "inverse-outline-warning": {
             "value": "{color.theme.bg.warning}",
             "type": "color",
@@ -133,6 +138,11 @@
             "type": "color",
             "source": "$btn-warning-active-border-color"
           },
+          "inverse-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-active-border-color"
+          },
           "outline-warning": {
             "value": "{color.theme.active.warning}",
             "type": "color",
@@ -144,25 +154,121 @@
         }
       },
       "focus": {
+        "text": {
+          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" },
+          "outline-warning": {
+            "value": "{color.btn.text.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-focus-color"
+          },
+          "inverse-warning": {
+            "value": "{color.btn.text.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-color"
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.text.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "warning": {
-            "value": "{color.theme.focus.warning}",
+            "value": "{color.btn.border.warning}",
             "type": "color",
             "source": "$btn-warning-focus-border-color"
           },
           "outline-warning": {
-            "value": "{color.theme.focus.warning}",
+            "value": "{color.btn.border.outline-warning}",
             "type": "color",
             "source": "$btn-warning-outline-focus-border-color"
           },
           "inverse-warning": {
-            "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-focus-border-color"
+            "value": "{color.btn.border.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-border-color"
           },
           "inverse-outline-warning": {
-            "value": "{color.white}",
+            "value": "{color.btn.border.inverse-outline-warning}",
             "type": "color",
             "source": "$btn-warning-inverse-outline-focus-border-color"
           }
+        },
+        "bg": {
+          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" },
+          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" },
+          "inverse-warning": {
+            "value": "{color.btn.bg.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-bg"
+          },
+          "inverse-outline-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-bg"
+          }
+        },
+        "outline": {
+          "warning": {
+            "value": "{color.theme.focus.warning}",
+            "type": "color",
+            "source": "$btn-warning-focus-outline-color"
+          },
+          "outline-warning": {
+            "value": "{color.theme.focus.warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-focus-outline-color"
+          },
+          "inverse-warning": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-outline-color"
+          },
+          "inverse-outline-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-bg"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" },
+          "outline-warning": {
+            "value": "{color.btn.text.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-disabled-color"
+          },
+          "inverse-warning": {
+            "value": "{color.warning.base}",
+            "type": "color",
+            "source": "$btn-warning-inverse-disabled-color"
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.text.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" },
+          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" },
+          "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" },
+          "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" },
+          "outline-warning": {
+            "value": "{color.btn.border.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-disabled-border-color"
+          },
+          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" },
+          "inverse-outline-warning": {
+            "value": "{color.btn.border.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-disabled-border-color"
+          }
         }
       }
     }
diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
index 0a761a5f90..c2cf345075 100644
--- a/tokens/style-dictionary.js
+++ b/tokens/style-dictionary.js
@@ -9,7 +9,13 @@ const cssUtilities = require('./css-utilities');
 const { formattedVariables, fileHeader, sortByReference } = StyleDictionary.formatHelpers;
 
 const colorTransform = (token) => {
-  const { value, modify = [] } = token;
+  const { value, modify = [], original } = token;
+  const reservedColorValues = ['inherit', 'initial', 'revert', 'unset', 'currentColor'];
+
+  if (reservedColorValues.includes(original.value)) {
+    return original.value;
+  }
+
   let color = chroma(value);
 
   if (modify && modify.length > 0) {