@gov-design-system-ce/components 0.0.1 → 0.0.2

package/dist/collection/components/gov-button/gov-button.css

@@ -48,15 +48,15 @@
  -  Variables - Typography
  */
 /*
- -  Variables - Sizes
+ -  Variables - Variants
  */
-/* "Constants" for general usage */
 /*
- -  Variables - Variants
+ -  Variables - Container
  */
 /*
- -  Variables - Layout
+ -  Variables - Sizes
  */
+/* "Constants" for general usage */
 /*
  -  Variables - Accordion
  */
@@ -72,6 +72,9 @@
 /*
  -  Variables - Buttons (&& Badges)
  */
+/*
+ -  Variables - Breadcrumbs
+ */
 /*
  -  Variables - Classes
  */
@@ -84,9 +87,6 @@
 /*
  -  Variables - Card
  */
-/*
- -  Variables - Container
- */
 /*
  -  Variables - Message
  */
@@ -99,6 +99,9 @@
 /*
  -  Variables - Grid
  */
+/*
+ -  Variables - Tiles
+ */
 /*
  -  Variables - Modal & Prompt
  */
@@ -118,6 +121,9 @@
 /*
  -  Variables - Tooltip
  */
+/*
+ -  Variables - Loading
+ */
 /*
  -	Variables - Forms
  */
@@ -145,6 +151,9 @@
 /*
  -	Variables - Form checkbox & radio
  */
+/*
+ -  Variables - Form group
+ */
 /*
  -	Variables - Form file
  */
@@ -157,12 +166,21 @@
 /*
  -  Variables - Stepper
  */
+/*
+ -  Variables - Side nav
+ */
 /*
  -  Variables - Grid & Tile
  */
 /*
  -  Variables - Pagination
  */
+/*
+ -  Variables - Nav
+ */
+/*
+ -  Variables - Layout
+ */
 .gov-spin-animation,
 .gov-pseudo-spin-animation::before {
   animation: spin 4s linear infinite;
@@ -173,6 +191,11 @@
     transform: rotate(360deg);
   }
 }
+@keyframes countdown {
+  to {
+    transform: scaleX(0);
+  }
+}
 /*
 *   Button
 */
@@ -185,7 +208,7 @@
 .gov-button .element {
   margin: 0;
   padding: 0;
-  font-family: "Roboto", sans-serif;
+  font-family: var(--gov-font-family, "Roboto", sans-serif);
   font-weight: 400;
   box-sizing: border-box;
   display: inline-flex;
@@ -246,26 +269,28 @@
 }
 [type=solid][variant=primary].gov-button .element {
   background-color: var(--gov-button-primary-solid-bg, var(--gov-color-primary));
-  color: var(--gov-button-primary-solid-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-primary-solid-color, var(--gov-color-neutral-white));
   border-width: 0;
 }
 [type=solid][variant=primary][inverse=""].gov-button .element, [type=solid][variant=primary][inverse=true i].gov-button .element, [type=solid][variant=primary][inverse="1"].gov-button .element {
   color: var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));
-  background-color: var(--gov-button-primary-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-primary-solid-inverse-bg, var(--gov-color-primary-200));
+}
+[type=solid][variant=primary][inverse=""].gov-button .element:focus-visible, [type=solid][variant=primary][inverse=true i].gov-button .element:focus-visible, [type=solid][variant=primary][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-primary-solid-inverse-focus-bg, var(--gov-color-neutral-white));
 }
 [type=solid][variant=primary][disabled=""].gov-button .element, [type=solid][variant=primary][disabled=true i].gov-button .element, [type=solid][variant=primary][disabled="1"].gov-button .element {
   background-color: var(--gov-button-primary-solid-disabled-bg, var(--gov-color-primary-300));
-  color: var(--gov-button-primary-solid-disabled-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-primary-solid-disabled-color, var(--gov-color-neutral-white));
 }
 [type=solid][variant=primary][disabled=""][inverse=""].gov-button .element, [type=solid][variant=primary][disabled=""][inverse=true i].gov-button .element, [type=solid][variant=primary][disabled=""][inverse="1"].gov-button .element, [type=solid][variant=primary][disabled=true i][inverse=""].gov-button .element, [type=solid][variant=primary][disabled=true i][inverse=true i].gov-button .element, [type=solid][variant=primary][disabled=true i][inverse="1"].gov-button .element, [type=solid][variant=primary][disabled="1"][inverse=""].gov-button .element, [type=solid][variant=primary][disabled="1"][inverse=true i].gov-button .element, [type=solid][variant=primary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-primary-solid-inverse-color, var(--gov-color-primary));
-  opacity: 0.6;
-  background-color: var(--gov-button-primary-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-primary-solid-inverse-disabled-bg, var(--gov-color-primary-300));
+  color: var(--gov-button-primary-solid-inverse-disabled-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=primary][hoverable].gov-button .element:hover {
     background-color: var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));
-    color: var(--gov-button-primary-solid-hover-color, var(--gov-color-secondary-100));
+    color: var(--gov-button-primary-solid-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=primary][hoverable].gov-button .element:hover:active {
     background-color: var(--gov-button-primary-solid-active-bg, var(--gov-color-primary-800));
@@ -273,11 +298,11 @@
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=primary][hoverable][inverse=""].gov-button .element:hover, [type=solid][variant=primary][hoverable][inverse=true i].gov-button .element:hover, [type=solid][variant=primary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-primary-solid-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-primary-solid-inverse-hover-color, var(--gov-color-primary-700));
+    background-color: var(--gov-button-primary-solid-inverse-hover-bg, var(--gov-color-primary-700));
+    color: var(--gov-button-primary-solid-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=primary][hoverable][inverse=""].gov-button .element:hover:active, [type=solid][variant=primary][hoverable][inverse=true i].gov-button .element:hover:active, [type=solid][variant=primary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-primary-solid-inverse-active-color, var(--gov-color-primary-800));
+    background-color: var(--gov-button-primary-solid-inverse-active-bg, var(--gov-color-primary-800));
   }
 }
 [type=outlined][variant=primary].gov-button .element {
@@ -285,9 +310,12 @@
   border-color: var(--gov-button-primary-outlined-border, var(--gov-color-primary));
 }
 [type=outlined][variant=primary][inverse=""].gov-button .element, [type=outlined][variant=primary][inverse=true i].gov-button .element, [type=outlined][variant=primary][inverse="1"].gov-button .element {
-  color: var(--gov-button-primary-outlined-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-primary-outlined-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-primary-outlined-inverse-bg, transparent);
-  border-color: var(--gov-button-primary-outlined-inverse-border, var(--gov-color-secondary-100));
+  border-color: var(--gov-button-primary-outlined-inverse-border, var(--gov-color-neutral-white));
+}
+[type=outlined][variant=primary][inverse=""].gov-button .element:focus-visible, [type=outlined][variant=primary][inverse=true i].gov-button .element:focus-visible, [type=outlined][variant=primary][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-primary-outlined-inverse-focus-bg, transparent);
 }
 [type=outlined][variant=primary][disabled=""].gov-button .element, [type=outlined][variant=primary][disabled=true i].gov-button .element, [type=outlined][variant=primary][disabled="1"].gov-button .element {
   background-color: var(--gov-button-primary-outlined-disabled-bg, transparent);
@@ -295,9 +323,9 @@
   border-color: var(--gov-button-primary-outlined-disabled-border, var(--gov-color-primary-300));
 }
 [type=outlined][variant=primary][disabled=""][inverse=""].gov-button .element, [type=outlined][variant=primary][disabled=""][inverse=true i].gov-button .element, [type=outlined][variant=primary][disabled=""][inverse="1"].gov-button .element, [type=outlined][variant=primary][disabled=true i][inverse=""].gov-button .element, [type=outlined][variant=primary][disabled=true i][inverse=true i].gov-button .element, [type=outlined][variant=primary][disabled=true i][inverse="1"].gov-button .element, [type=outlined][variant=primary][disabled="1"][inverse=""].gov-button .element, [type=outlined][variant=primary][disabled="1"][inverse=true i].gov-button .element, [type=outlined][variant=primary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-primary-outlined-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-primary-outlined-inverse-bg, transparent);
+  background-color: var(--gov-button-primary-outlined-inverse-disabled-bg, var(--gov-color-primary-300));
+  color: var(--gov-button-primary-outlined-inverse-disabled-color, var(--gov-color-primary-400));
+  border-color: var(--gov-button-primary-outlined-inverse-disabled-border-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=primary][hoverable].gov-button .element:hover {
@@ -310,11 +338,11 @@
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=primary][hoverable][inverse=""].gov-button .element:hover, [type=outlined][variant=primary][hoverable][inverse=true i].gov-button .element:hover, [type=outlined][variant=primary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-primary-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-primary-outlined-inverse-hover-color, var(--gov-color-primary));
+    background-color: var(--gov-button-primary-outlined-inverse-hover-bg, var(--gov-color-primary-500));
+    color: var(--gov-button-primary-outlined-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=outlined][variant=primary][hoverable][inverse=""].gov-button .element:hover:active, [type=outlined][variant=primary][hoverable][inverse=true i].gov-button .element:hover:active, [type=outlined][variant=primary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-primary-outline-inverse-active-color, var(--gov-color-primary-700));
+    background-color: var(--gov-button-primary-outlined-inverse-active-bg, var(--gov-color-primary-400));
   }
 }
 [type=base][variant=primary].gov-button .element {
@@ -322,16 +350,15 @@
   border-width: 0;
 }
 [type=base][variant=primary][inverse=""].gov-button .element, [type=base][variant=primary][inverse=true i].gov-button .element, [type=base][variant=primary][inverse="1"].gov-button .element {
-  color: var(--gov-button-primary-base-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-primary-base-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-primary-base-inverse-bg, transparent);
 }
 [type=base][variant=primary][disabled=""].gov-button .element, [type=base][variant=primary][disabled=true i].gov-button .element, [type=base][variant=primary][disabled="1"].gov-button .element {
   color: var(--gov-button-primary-base-disabled-color, var(--gov-color-primary-400));
 }
 [type=base][variant=primary][disabled=""][inverse=""].gov-button .element, [type=base][variant=primary][disabled=""][inverse=true i].gov-button .element, [type=base][variant=primary][disabled=""][inverse="1"].gov-button .element, [type=base][variant=primary][disabled=true i][inverse=""].gov-button .element, [type=base][variant=primary][disabled=true i][inverse=true i].gov-button .element, [type=base][variant=primary][disabled=true i][inverse="1"].gov-button .element, [type=base][variant=primary][disabled="1"][inverse=""].gov-button .element, [type=base][variant=primary][disabled="1"][inverse=true i].gov-button .element, [type=base][variant=primary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-primary-base-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-primary-base-inverse-bg, transparent);
+  background-color: var(--gov-button-primary-base-inverse-disabled-bg, var(--gov-color-primary-300));
+  color: var(--gov-button-primary-base-inverse-disabled-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=primary][hoverable].gov-button .element:hover {
@@ -344,35 +371,38 @@
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=primary][hoverable][inverse=""].gov-button .element:hover, [type=base][variant=primary][hoverable][inverse=true i].gov-button .element:hover, [type=base][variant=primary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-primary-base-inverse-hover-bg, transparent);
-    color: var(--gov-button-primary-base-inverse-hover-color, var(--gov-color-primary-200));
+    background-color: var(--gov-button-primary-base-inverse-hover-bg, var(--gov-color-primary-500));
+    color: var(--gov-button-primary-base-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=base][variant=primary][hoverable][inverse=""].gov-button .element:hover:active, [type=base][variant=primary][hoverable][inverse=true i].gov-button .element:hover:active, [type=base][variant=primary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-primary-300));
+    background-color: var(--gov-button-primary-base-inverse-active-bg, var(--gov-color-primary-400));
+    color: var(--gov-button-primary-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
 [type=solid][variant=secondary].gov-button .element {
   background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
-  color: var(--gov-button-secondary-solid-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
   border-width: 0;
 }
 [type=solid][variant=secondary][inverse=""].gov-button .element, [type=solid][variant=secondary][inverse=true i].gov-button .element, [type=solid][variant=secondary][inverse="1"].gov-button .element {
   color: var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));
-  background-color: var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-neutral-white));
+}
+[type=solid][variant=secondary][inverse=""].gov-button .element:focus-visible, [type=solid][variant=secondary][inverse=true i].gov-button .element:focus-visible, [type=solid][variant=secondary][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-secondary-solid-inverse-focus-bg, var(--gov-color-neutral-white));
 }
 [type=solid][variant=secondary][disabled=""].gov-button .element, [type=solid][variant=secondary][disabled=true i].gov-button .element, [type=solid][variant=secondary][disabled="1"].gov-button .element {
   background-color: var(--gov-button-secondary-solid-disabled-bg, var(--gov-color-secondary-300));
   color: var(--gov-button-secondary-solid-disabled-color, var(--gov-color-secondary-600));
 }
 [type=solid][variant=secondary][disabled=""][inverse=""].gov-button .element, [type=solid][variant=secondary][disabled=""][inverse=true i].gov-button .element, [type=solid][variant=secondary][disabled=""][inverse="1"].gov-button .element, [type=solid][variant=secondary][disabled=true i][inverse=""].gov-button .element, [type=solid][variant=secondary][disabled=true i][inverse=true i].gov-button .element, [type=solid][variant=secondary][disabled=true i][inverse="1"].gov-button .element, [type=solid][variant=secondary][disabled="1"][inverse=""].gov-button .element, [type=solid][variant=secondary][disabled="1"][inverse=true i].gov-button .element, [type=solid][variant=secondary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-secondary-solid-inverse-color, var(--gov-color-secondary));
-  opacity: 0.6;
-  background-color: var(--gov-button-secondary-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-secondary-solid-inverse-disabled-bg, var(--gov-color-neutral-white));
+  color: var(--gov-button-secondary-solid-inverse-disabled-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=secondary][hoverable].gov-button .element:hover {
     background-color: var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));
-    color: var(--gov-button-secondary-solid-hover-color, var(--gov-color-secondary-100));
+    color: var(--gov-button-secondary-solid-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=secondary][hoverable].gov-button .element:hover:active {
     background-color: var(--gov-button-secondary-solid-active-bg, var(--gov-color-secondary));
@@ -380,11 +410,12 @@
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=secondary][hoverable][inverse=""].gov-button .element:hover, [type=solid][variant=secondary][hoverable][inverse=true i].gov-button .element:hover, [type=solid][variant=secondary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-secondary-solid-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-secondary-solid-inverse-hover-color, var(--gov-color-secondary-900));
+    background-color: var(--gov-button-secondary-solid-inverse-hover-bg, var(--gov-color-secondary-600));
+    color: var(--gov-button-secondary-solid-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=secondary][hoverable][inverse=""].gov-button .element:hover:active, [type=solid][variant=secondary][hoverable][inverse=true i].gov-button .element:hover:active, [type=solid][variant=secondary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-secondary-solid-inverse-active-color, var(--gov-color-secondary));
+    background-color: var(--gov-button-secondary-solid-inverse-active-bg, var(--gov-color-secondary-700));
+    color: var(--gov-button-secondary-solid-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
 [type=outlined][variant=secondary].gov-button .element {
@@ -392,9 +423,12 @@
   border-color: var(--gov-button-secondary-outlined-border, var(--gov-color-secondary));
 }
 [type=outlined][variant=secondary][inverse=""].gov-button .element, [type=outlined][variant=secondary][inverse=true i].gov-button .element, [type=outlined][variant=secondary][inverse="1"].gov-button .element {
-  color: var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-secondary-outlined-inverse-bg, transparent);
-  border-color: var(--gov-button-secondary-outlined-inverse-border, var(--gov-color-secondary-100));
+  border-color: var(--gov-button-secondary-outlined-inverse-border, var(--gov-color-neutral-white));
+}
+[type=outlined][variant=secondary][inverse=""].gov-button .element:focus-visible, [type=outlined][variant=secondary][inverse=true i].gov-button .element:focus-visible, [type=outlined][variant=secondary][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-secondary-outlined-inverse-focus-bg, transparent);
 }
 [type=outlined][variant=secondary][disabled=""].gov-button .element, [type=outlined][variant=secondary][disabled=true i].gov-button .element, [type=outlined][variant=secondary][disabled="1"].gov-button .element {
   background-color: var(--gov-button-secondary-outlined-disabled-bg, transparent);
@@ -402,9 +436,9 @@
   border-color: var(--gov-button-secondary-outlined-disabled-border, var(--gov-color-secondary-500));
 }
 [type=outlined][variant=secondary][disabled=""][inverse=""].gov-button .element, [type=outlined][variant=secondary][disabled=""][inverse=true i].gov-button .element, [type=outlined][variant=secondary][disabled=""][inverse="1"].gov-button .element, [type=outlined][variant=secondary][disabled=true i][inverse=""].gov-button .element, [type=outlined][variant=secondary][disabled=true i][inverse=true i].gov-button .element, [type=outlined][variant=secondary][disabled=true i][inverse="1"].gov-button .element, [type=outlined][variant=secondary][disabled="1"][inverse=""].gov-button .element, [type=outlined][variant=secondary][disabled="1"][inverse=true i].gov-button .element, [type=outlined][variant=secondary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-secondary-outlined-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-secondary-outlined-inverse-bg, transparent);
+  background-color: var(--gov-button-secondary-outlined-inverse-disabled-bg, var(--gov-color-secondary-700));
+  color: var(--gov-button-secondary-outlined-inverse-disabled-color, var(--gov-color-secondary-600));
+  border-color: var(--gov-button-secondary-outlined-inverse-disabled-border-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=secondary][hoverable].gov-button .element:hover {
@@ -417,69 +451,72 @@
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=secondary][hoverable][inverse=""].gov-button .element:hover, [type=outlined][variant=secondary][hoverable][inverse=true i].gov-button .element:hover, [type=outlined][variant=secondary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-secondary-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-secondary-outlined-inverse-hover-color, var(--gov-color-secondary));
+    background-color: var(--gov-button-secondary-outlined-inverse-hover-bg, var(--gov-color-secondary-700));
+    color: var(--gov-button-secondary-outlined-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=outlined][variant=secondary][hoverable][inverse=""].gov-button .element:hover:active, [type=outlined][variant=secondary][hoverable][inverse=true i].gov-button .element:hover:active, [type=outlined][variant=secondary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-secondary-outline-inverse-active-color, var(--gov-color-secondary-900));
+    background-color: var(--gov-button-secondary-outlined-inverse-active-bg, var(--gov-color-secondary-600));
+    color: var(--gov-button-secondary-outlined-inverse-active-color, var(--gov-color-secondary));
   }
 }
 [type=base][variant=secondary].gov-button .element {
-  color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
+  color: var(--gov-button-secondary-base-color, var(--gov-color-secondary));
   border-width: 0;
 }
 [type=base][variant=secondary][inverse=""].gov-button .element, [type=base][variant=secondary][inverse=true i].gov-button .element, [type=base][variant=secondary][inverse="1"].gov-button .element {
-  color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-secondary-base-inverse-bg, transparent);
 }
 [type=base][variant=secondary][disabled=""].gov-button .element, [type=base][variant=secondary][disabled=true i].gov-button .element, [type=base][variant=secondary][disabled="1"].gov-button .element {
-  color: var(--gov-button-secondary-outlined-disabled-color, var(--gov-color-secondary-600));
+  color: var(--gov-button-secondary-base-disabled-color, var(--gov-color-secondary-600));
 }
 [type=base][variant=secondary][disabled=""][inverse=""].gov-button .element, [type=base][variant=secondary][disabled=""][inverse=true i].gov-button .element, [type=base][variant=secondary][disabled=""][inverse="1"].gov-button .element, [type=base][variant=secondary][disabled=true i][inverse=""].gov-button .element, [type=base][variant=secondary][disabled=true i][inverse=true i].gov-button .element, [type=base][variant=secondary][disabled=true i][inverse="1"].gov-button .element, [type=base][variant=secondary][disabled="1"][inverse=""].gov-button .element, [type=base][variant=secondary][disabled="1"][inverse=true i].gov-button .element, [type=base][variant=secondary][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-secondary-base-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-secondary-base-inverse-bg, transparent);
+  background-color: var(--gov-button-secondary-base-inverse-disabled-bg, var(--gov-color-secondary-700));
+  color: var(--gov-button-secondary-base-inverse-disabled-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=secondary][hoverable].gov-button .element:hover {
-    background-color: var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));
-    color: var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary));
+    background-color: var(--gov-button-secondary-base-hover-bg, var(--gov-color-secondary-300));
+    color: var(--gov-button-secondary-base-hover-color, var(--gov-color-secondary));
   }
   [type=base][variant=secondary][hoverable].gov-button .element:hover:active {
-    background-color: var(--gov-button-secondary-outlined-active-bg, var(--gov-color-secondary-400));
+    background-color: var(--gov-button-secondary-base-active-bg, var(--gov-color-secondary-400));
   }
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=secondary][hoverable][inverse=""].gov-button .element:hover, [type=base][variant=secondary][hoverable][inverse=true i].gov-button .element:hover, [type=base][variant=secondary][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-secondary-base-inverse-hover-bg, transparent);
-    color: var(--gov-button-secondary-base-inverse-hover-color, var(--gov-color-secondary-500));
+    background-color: var(--gov-button-secondary-base-inverse-hover-bg, var(--gov-color-secondary-700));
+    color: var(--gov-button-secondary-base-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=base][variant=secondary][hoverable][inverse=""].gov-button .element:hover:active, [type=base][variant=secondary][hoverable][inverse=true i].gov-button .element:hover:active, [type=base][variant=secondary][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary-600));
+    background-color: var(--gov-button-secondary-base-inverse-active-bg, var(--gov-color-secondary-600));
+    color: var(--gov-button-secondary-base-inverse-active-color, var(--gov-color-secondary));
   }
 }
 [type=solid][variant=error].gov-button .element {
   background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
-  color: var(--gov-button-error-solid-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
   border-width: 0;
 }
 [type=solid][variant=error][inverse=""].gov-button .element, [type=solid][variant=error][inverse=true i].gov-button .element, [type=solid][variant=error][inverse="1"].gov-button .element {
   color: var(--gov-button-error-solid-inverse-color, var(--gov-color-error));
-  background-color: var(--gov-button-error-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-error-solid-inverse-bg, var(--gov-color-error-200));
+}
+[type=solid][variant=error][inverse=""].gov-button .element:focus-visible, [type=solid][variant=error][inverse=true i].gov-button .element:focus-visible, [type=solid][variant=error][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-error-solid-inverse-focus-bg, var(--gov-color-neutral-white));
 }
 [type=solid][variant=error][disabled=""].gov-button .element, [type=solid][variant=error][disabled=true i].gov-button .element, [type=solid][variant=error][disabled="1"].gov-button .element {
   background-color: var(--gov-button-error-solid-disabled-bg, var(--gov-color-error-200));
-  color: var(--gov-button-error-solid-disabled-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-error-solid-disabled-color, var(--gov-color-neutral-white));
 }
 [type=solid][variant=error][disabled=""][inverse=""].gov-button .element, [type=solid][variant=error][disabled=""][inverse=true i].gov-button .element, [type=solid][variant=error][disabled=""][inverse="1"].gov-button .element, [type=solid][variant=error][disabled=true i][inverse=""].gov-button .element, [type=solid][variant=error][disabled=true i][inverse=true i].gov-button .element, [type=solid][variant=error][disabled=true i][inverse="1"].gov-button .element, [type=solid][variant=error][disabled="1"][inverse=""].gov-button .element, [type=solid][variant=error][disabled="1"][inverse=true i].gov-button .element, [type=solid][variant=error][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-error-solid-inverse-color, var(--gov-color-error));
-  opacity: 0.6;
-  background-color: var(--gov-button-error-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-error-solid-inverse-disabled-bg, var(--gov-color-error-300));
+  color: var(--gov-button-error-solid-inverse-disabled-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=error][hoverable].gov-button .element:hover {
     background-color: var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));
-    color: var(--gov-button-error-solid-hover-color, var(--gov-color-secondary-100));
+    color: var(--gov-button-error-solid-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=error][hoverable].gov-button .element:hover:active {
     background-color: var(--gov-button-error-solid-active-bg, var(--gov-color-error-600));
@@ -487,11 +524,11 @@
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=error][hoverable][inverse=""].gov-button .element:hover, [type=solid][variant=error][hoverable][inverse=true i].gov-button .element:hover, [type=solid][variant=error][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-error-solid-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-error-solid-inverse-hover-color, var(--gov-color-error-500));
+    background-color: var(--gov-button-error-solid-inverse-hover-bg, var(--gov-color-error-700));
+    color: var(--gov-button-error-solid-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=error][hoverable][inverse=""].gov-button .element:hover:active, [type=solid][variant=error][hoverable][inverse=true i].gov-button .element:hover:active, [type=solid][variant=error][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-error-solid-inverse-active-color, var(--gov-color-error-600));
+    background-color: var(--gov-button-error-solid-inverse-active-bg, var(--gov-color-error-800));
   }
 }
 [type=outlined][variant=error].gov-button .element {
@@ -499,9 +536,12 @@
   border-color: var(--gov-button-error-outlined-border, var(--gov-color-error));
 }
 [type=outlined][variant=error][inverse=""].gov-button .element, [type=outlined][variant=error][inverse=true i].gov-button .element, [type=outlined][variant=error][inverse="1"].gov-button .element {
-  color: var(--gov-button-error-outlined-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-error-outlined-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-error-outlined-inverse-bg, transparent);
-  border-color: var(--gov-button-error-outlined-inverse-border, var(--gov-color-secondary-100));
+  border-color: var(--gov-button-error-outlined-inverse-border, var(--gov-color-neutral-white));
+}
+[type=outlined][variant=error][inverse=""].gov-button .element:focus-visible, [type=outlined][variant=error][inverse=true i].gov-button .element:focus-visible, [type=outlined][variant=error][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-error-outlined-inverse-focus-bg, transparent);
 }
 [type=outlined][variant=error][disabled=""].gov-button .element, [type=outlined][variant=error][disabled=true i].gov-button .element, [type=outlined][variant=error][disabled="1"].gov-button .element {
   background-color: var(--gov-button-error-outlined-disabled-bg, transparent);
@@ -509,9 +549,9 @@
   border-color: var(--gov-button-error-outlined-disabled-border, var(--gov-color-error-200));
 }
 [type=outlined][variant=error][disabled=""][inverse=""].gov-button .element, [type=outlined][variant=error][disabled=""][inverse=true i].gov-button .element, [type=outlined][variant=error][disabled=""][inverse="1"].gov-button .element, [type=outlined][variant=error][disabled=true i][inverse=""].gov-button .element, [type=outlined][variant=error][disabled=true i][inverse=true i].gov-button .element, [type=outlined][variant=error][disabled=true i][inverse="1"].gov-button .element, [type=outlined][variant=error][disabled="1"][inverse=""].gov-button .element, [type=outlined][variant=error][disabled="1"][inverse=true i].gov-button .element, [type=outlined][variant=error][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-error-outlined-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-error-outlined-inverse-bg, transparent);
+  background-color: var(--gov-button-error-outlined-inverse-disabled-bg, var(--gov-color-error-300));
+  color: var(--gov-button-error-outlined-inverse-disabled-color, var(--gov-color-error-400));
+  border-color: var(--gov-button-error-outlined-inverse-disabled-border-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=error][hoverable].gov-button .element:hover {
@@ -524,69 +564,71 @@
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=error][hoverable][inverse=""].gov-button .element:hover, [type=outlined][variant=error][hoverable][inverse=true i].gov-button .element:hover, [type=outlined][variant=error][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-error-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-error-outlined-inverse-hover-color, var(--gov-color-error));
+    background-color: var(--gov-button-error-outlined-inverse-hover-bg, var(--gov-color-error-500));
+    color: var(--gov-button-error-outlined-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=outlined][variant=error][hoverable][inverse=""].gov-button .element:hover:active, [type=outlined][variant=error][hoverable][inverse=true i].gov-button .element:hover:active, [type=outlined][variant=error][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-error-outlined-inverse-active-color, var(--gov-color-error-500));
+    background-color: var(--gov-button-error-outlined-inverse-active-bg, var(--gov-color-error-400));
   }
 }
 [type=base][variant=error].gov-button .element {
-  color: var(--gov-button-error-outlined-color, var(--gov-color-error));
+  color: var(--gov-button-error-base-color, var(--gov-color-error));
   border-width: 0;
 }
 [type=base][variant=error][inverse=""].gov-button .element, [type=base][variant=error][inverse=true i].gov-button .element, [type=base][variant=error][inverse="1"].gov-button .element {
-  color: var(--gov-button-error-base-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-error-base-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-error-base-inverse-bg, transparent);
 }
 [type=base][variant=error][disabled=""].gov-button .element, [type=base][variant=error][disabled=true i].gov-button .element, [type=base][variant=error][disabled="1"].gov-button .element {
-  color: var(--gov-button-error-outlined-disabled-color, var(--gov-color-error-200));
+  color: var(--gov-button-error-base-disabled-color, var(--gov-color-error-200));
 }
 [type=base][variant=error][disabled=""][inverse=""].gov-button .element, [type=base][variant=error][disabled=""][inverse=true i].gov-button .element, [type=base][variant=error][disabled=""][inverse="1"].gov-button .element, [type=base][variant=error][disabled=true i][inverse=""].gov-button .element, [type=base][variant=error][disabled=true i][inverse=true i].gov-button .element, [type=base][variant=error][disabled=true i][inverse="1"].gov-button .element, [type=base][variant=error][disabled="1"][inverse=""].gov-button .element, [type=base][variant=error][disabled="1"][inverse=true i].gov-button .element, [type=base][variant=error][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-error-base-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-error-base-inverse-bg, transparent);
+  background-color: var(--gov-button-error-base-inverse-disabled-bg, var(--gov-color-error-300));
+  color: var(--gov-button-error-base-inverse-disabled-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=error][hoverable].gov-button .element:hover {
-    background-color: var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));
-    color: var(--gov-button-error-outlined-hover-color, var(--gov-color-error));
+    background-color: var(--gov-button-error-base-hover-bg, var(--gov-color-error-100));
+    color: var(--gov-button-error-base-hover-color, var(--gov-color-error));
   }
   [type=base][variant=error][hoverable].gov-button .element:hover:active {
-    background-color: var(--gov-button-error-outlined-active-bg, var(--gov-color-error-200));
+    background-color: var(--gov-button-error-base-active-bg, var(--gov-color-error-200));
   }
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=error][hoverable][inverse=""].gov-button .element:hover, [type=base][variant=error][hoverable][inverse=true i].gov-button .element:hover, [type=base][variant=error][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-error-base-inverse-hover-bg, transparent);
-    color: var(--gov-button-error-base-inverse-hover-color, var(--gov-color-error-200));
+    background-color: var(--gov-button-error-base-inverse-hover-bg, var(--gov-color-error-500));
+    color: var(--gov-button-error-base-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=base][variant=error][hoverable][inverse=""].gov-button .element:hover:active, [type=base][variant=error][hoverable][inverse=true i].gov-button .element:hover:active, [type=base][variant=error][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-error-300));
+    background-color: var(--gov-button-error-base-inverse-active-bg, var(--gov-color-error-400));
+    color: var(--gov-button-error-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
 [type=solid][variant=success].gov-button .element {
   background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
-  color: var(--gov-button-success-solid-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
   border-width: 0;
 }
 [type=solid][variant=success][inverse=""].gov-button .element, [type=solid][variant=success][inverse=true i].gov-button .element, [type=solid][variant=success][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success-500));
-  background-color: var(--gov-button-success-solid-inverse-bg, var(--gov-color-secondary-100));
+  color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success));
+  background-color: var(--gov-button-success-solid-inverse-bg, var(--gov-color-success-200));
+}
+[type=solid][variant=success][inverse=""].gov-button .element:focus-visible, [type=solid][variant=success][inverse=true i].gov-button .element:focus-visible, [type=solid][variant=success][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-success-solid-inverse-focus-bg, var(--gov-color-neutral-white));
 }
 [type=solid][variant=success][disabled=""].gov-button .element, [type=solid][variant=success][disabled=true i].gov-button .element, [type=solid][variant=success][disabled="1"].gov-button .element {
   background-color: var(--gov-button-success-solid-disabled-bg, var(--gov-color-success-200));
-  color: var(--gov-button-success-solid-disabled-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-success-solid-disabled-color, var(--gov-color-neutral-white));
 }
 [type=solid][variant=success][disabled=""][inverse=""].gov-button .element, [type=solid][variant=success][disabled=""][inverse=true i].gov-button .element, [type=solid][variant=success][disabled=""][inverse="1"].gov-button .element, [type=solid][variant=success][disabled=true i][inverse=""].gov-button .element, [type=solid][variant=success][disabled=true i][inverse=true i].gov-button .element, [type=solid][variant=success][disabled=true i][inverse="1"].gov-button .element, [type=solid][variant=success][disabled="1"][inverse=""].gov-button .element, [type=solid][variant=success][disabled="1"][inverse=true i].gov-button .element, [type=solid][variant=success][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-solid-inverse-color, var(--gov-color-success-500));
-  opacity: 0.6;
-  background-color: var(--gov-button-success-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-success-solid-inverse-disabled-bg, var(--gov-color-success-300));
+  color: var(--gov-button-success-solid-inverse-disabled-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=success][hoverable].gov-button .element:hover {
     background-color: var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));
-    color: var(--gov-button-success-solid-hover-color, var(--gov-color-secondary-100));
+    color: var(--gov-button-success-solid-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=success][hoverable].gov-button .element:hover:active {
     background-color: var(--gov-button-success-solid-active-bg, var(--gov-color-success-700));
@@ -594,11 +636,11 @@
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=success][hoverable][inverse=""].gov-button .element:hover, [type=solid][variant=success][hoverable][inverse=true i].gov-button .element:hover, [type=solid][variant=success][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-success-solid-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-success-solid-inverse-hover-color, var(--gov-color-success-600));
+    background-color: var(--gov-button-success-solid-inverse-hover-bg, var(--gov-color-success-700));
+    color: var(--gov-button-success-solid-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=success][hoverable][inverse=""].gov-button .element:hover:active, [type=solid][variant=success][hoverable][inverse=true i].gov-button .element:hover:active, [type=solid][variant=success][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-success-solid-inverse-active-color, var(--gov-color-success-700));
+    background-color: var(--gov-button-success-solid-inverse-active-bg, var(--gov-color-success-800));
   }
 }
 [type=outlined][variant=success].gov-button .element {
@@ -606,9 +648,12 @@
   border-color: var(--gov-button-success-outlined-border, var(--gov-color-success-500));
 }
 [type=outlined][variant=success][inverse=""].gov-button .element, [type=outlined][variant=success][inverse=true i].gov-button .element, [type=outlined][variant=success][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-outlined-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-success-outlined-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-success-outlined-inverse-bg, transparent);
-  border-color: var(--gov-button-success-outlined-inverse-border, var(--gov-color-secondary-100));
+  border-color: var(--gov-button-success-outlined-inverse-border, var(--gov-color-neutral-white));
+}
+[type=outlined][variant=success][inverse=""].gov-button .element:focus-visible, [type=outlined][variant=success][inverse=true i].gov-button .element:focus-visible, [type=outlined][variant=success][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-success-outlined-inverse-focus-bg, transparent);
 }
 [type=outlined][variant=success][disabled=""].gov-button .element, [type=outlined][variant=success][disabled=true i].gov-button .element, [type=outlined][variant=success][disabled="1"].gov-button .element {
   background-color: var(--gov-button-success-outlined-disabled-bg, transparent);
@@ -616,9 +661,9 @@
   border-color: var(--gov-button-success-outlined-disabled-border, var(--gov-color-success-300));
 }
 [type=outlined][variant=success][disabled=""][inverse=""].gov-button .element, [type=outlined][variant=success][disabled=""][inverse=true i].gov-button .element, [type=outlined][variant=success][disabled=""][inverse="1"].gov-button .element, [type=outlined][variant=success][disabled=true i][inverse=""].gov-button .element, [type=outlined][variant=success][disabled=true i][inverse=true i].gov-button .element, [type=outlined][variant=success][disabled=true i][inverse="1"].gov-button .element, [type=outlined][variant=success][disabled="1"][inverse=""].gov-button .element, [type=outlined][variant=success][disabled="1"][inverse=true i].gov-button .element, [type=outlined][variant=success][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-outlined-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-success-outlined-inverse-bg, transparent);
+  background-color: var(--gov-button-success-outlined-inverse-disabled-bg, var(--gov-color-success-300));
+  color: var(--gov-button-success-outlined-inverse-disabled-color, var(--gov-color-success-400));
+  border-color: var(--gov-button-success-outlined-inverse-disabled-border-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=success][hoverable].gov-button .element:hover {
@@ -631,69 +676,71 @@
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=success][hoverable][inverse=""].gov-button .element:hover, [type=outlined][variant=success][hoverable][inverse=true i].gov-button .element:hover, [type=outlined][variant=success][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-success-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-success-outlined-inverse-hover-color, var(--gov-color-success-500));
+    background-color: var(--gov-button-success-outlined-inverse-hover-bg, var(--gov-color-success-500));
+    color: var(--gov-button-success-outlined-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=outlined][variant=success][hoverable][inverse=""].gov-button .element:hover:active, [type=outlined][variant=success][hoverable][inverse=true i].gov-button .element:hover:active, [type=outlined][variant=success][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-success-outlined-inverse-active-color, var(--gov-color-success-600));
+    background-color: var(--gov-button-success-outlined-inverse-active-bg, var(--gov-color-success-400));
   }
 }
 [type=base][variant=success].gov-button .element {
-  color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
+  color: var(--gov-button-success-base-color, var(--gov-color-success-500));
   border-width: 0;
 }
 [type=base][variant=success][inverse=""].gov-button .element, [type=base][variant=success][inverse=true i].gov-button .element, [type=base][variant=success][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-base-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-success-base-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-success-base-inverse-bg, transparent);
 }
 [type=base][variant=success][disabled=""].gov-button .element, [type=base][variant=success][disabled=true i].gov-button .element, [type=base][variant=success][disabled="1"].gov-button .element {
-  color: var(--gov-button-success-outlined-disabled-color, var(--gov-color-success-300));
+  color: var(--gov-button-success-base-disabled-color, var(--gov-color-success-300));
 }
 [type=base][variant=success][disabled=""][inverse=""].gov-button .element, [type=base][variant=success][disabled=""][inverse=true i].gov-button .element, [type=base][variant=success][disabled=""][inverse="1"].gov-button .element, [type=base][variant=success][disabled=true i][inverse=""].gov-button .element, [type=base][variant=success][disabled=true i][inverse=true i].gov-button .element, [type=base][variant=success][disabled=true i][inverse="1"].gov-button .element, [type=base][variant=success][disabled="1"][inverse=""].gov-button .element, [type=base][variant=success][disabled="1"][inverse=true i].gov-button .element, [type=base][variant=success][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-success-base-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-success-base-inverse-bg, transparent);
+  background-color: var(--gov-button-success-base-inverse-disabled-bg, var(--gov-color-success-300));
+  color: var(--gov-button-success-base-inverse-disabled-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=success][hoverable].gov-button .element:hover {
-    background-color: var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));
-    color: var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500));
+    background-color: var(--gov-button-success-base-hover-bg, var(--gov-color-success-100));
+    color: var(--gov-button-success-base-hover-color, var(--gov-color-success-500));
   }
   [type=base][variant=success][hoverable].gov-button .element:hover:active {
-    background-color: var(--gov-button-success-outlined-active-bg, var(--gov-color-success-200));
+    background-color: var(--gov-button-success-base-active-bg, var(--gov-color-success-200));
   }
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=success][hoverable][inverse=""].gov-button .element:hover, [type=base][variant=success][hoverable][inverse=true i].gov-button .element:hover, [type=base][variant=success][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-success-base-inverse-hover-bg, transparent);
-    color: var(--gov-button-success-base-inverse-hover-color, var(--gov-color-success-200));
+    background-color: var(--gov-button-success-base-inverse-hover-bg, var(--gov-color-success-600));
+    color: var(--gov-button-success-base-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=base][variant=success][hoverable][inverse=""].gov-button .element:hover:active, [type=base][variant=success][hoverable][inverse=true i].gov-button .element:hover:active, [type=base][variant=success][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-success-300));
+    background-color: var(--gov-button-success-base-inverse-active-bg, var(--gov-color-success-500));
+    color: var(--gov-button-success-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
 [type=solid][variant=warning].gov-button .element {
   background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
-  color: var(--gov-button-warning-solid-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
   border-width: 0;
 }
 [type=solid][variant=warning][inverse=""].gov-button .element, [type=solid][variant=warning][inverse=true i].gov-button .element, [type=solid][variant=warning][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning-500));
-  background-color: var(--gov-button-warning-solid-inverse-bg, var(--gov-color-secondary-100));
+  color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning));
+  background-color: var(--gov-button-warning-solid-inverse-bg, var(--gov-color-warning-200));
+}
+[type=solid][variant=warning][inverse=""].gov-button .element:focus-visible, [type=solid][variant=warning][inverse=true i].gov-button .element:focus-visible, [type=solid][variant=warning][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-warning-solid-inverse-focus-bg, var(--gov-color-neutral-white));
 }
 [type=solid][variant=warning][disabled=""].gov-button .element, [type=solid][variant=warning][disabled=true i].gov-button .element, [type=solid][variant=warning][disabled="1"].gov-button .element {
   background-color: var(--gov-button-warning-solid-disabled-bg, var(--gov-color-warning-200));
-  color: var(--gov-button-warning-solid-disabled-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-warning-solid-disabled-color, var(--gov-color-neutral-white));
 }
 [type=solid][variant=warning][disabled=""][inverse=""].gov-button .element, [type=solid][variant=warning][disabled=""][inverse=true i].gov-button .element, [type=solid][variant=warning][disabled=""][inverse="1"].gov-button .element, [type=solid][variant=warning][disabled=true i][inverse=""].gov-button .element, [type=solid][variant=warning][disabled=true i][inverse=true i].gov-button .element, [type=solid][variant=warning][disabled=true i][inverse="1"].gov-button .element, [type=solid][variant=warning][disabled="1"][inverse=""].gov-button .element, [type=solid][variant=warning][disabled="1"][inverse=true i].gov-button .element, [type=solid][variant=warning][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-solid-inverse-color, var(--gov-color-warning-500));
-  opacity: 0.6;
-  background-color: var(--gov-button-warning-solid-inverse-bg, var(--gov-color-secondary-100));
+  background-color: var(--gov-button-warning-solid-inverse-disabled-bg, var(--gov-color-warning-300));
+  color: var(--gov-button-warning-solid-inverse-disabled-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=warning][hoverable].gov-button .element:hover {
     background-color: var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));
-    color: var(--gov-button-warning-solid-hover-color, var(--gov-color-secondary-100));
+    color: var(--gov-button-warning-solid-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=warning][hoverable].gov-button .element:hover:active {
     background-color: var(--gov-button-warning-solid-active-bg, var(--gov-color-warning-700));
@@ -701,11 +748,11 @@
 }
 @media not all and (pointer: coarse) {
   [type=solid][variant=warning][hoverable][inverse=""].gov-button .element:hover, [type=solid][variant=warning][hoverable][inverse=true i].gov-button .element:hover, [type=solid][variant=warning][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-warning-solid-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-warning-solid-inverse-hover-color, var(--gov-color-warning-600));
+    background-color: var(--gov-button-warning-solid-inverse-hover-bg, var(--gov-color-warning-700));
+    color: var(--gov-button-warning-solid-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=solid][variant=warning][hoverable][inverse=""].gov-button .element:hover:active, [type=solid][variant=warning][hoverable][inverse=true i].gov-button .element:hover:active, [type=solid][variant=warning][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-warning-solid-inverse-active-color, var(--gov-color-warning-700));
+    background-color: var(--gov-button-warning-solid-inverse-active-bg, var(--gov-color-warning-800));
   }
 }
 [type=outlined][variant=warning].gov-button .element {
@@ -713,9 +760,12 @@
   border-color: var(--gov-button-warning-outlined-border, var(--gov-color-warning-500));
 }
 [type=outlined][variant=warning][inverse=""].gov-button .element, [type=outlined][variant=warning][inverse=true i].gov-button .element, [type=outlined][variant=warning][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-outlined-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-warning-outlined-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-warning-outlined-inverse-bg, transparent);
-  border-color: var(--gov-button-warning-outlined-inverse-border, var(--gov-color-secondary-100));
+  border-color: var(--gov-button-warning-outlined-inverse-border, var(--gov-color-neutral-white));
+}
+[type=outlined][variant=warning][inverse=""].gov-button .element:focus-visible, [type=outlined][variant=warning][inverse=true i].gov-button .element:focus-visible, [type=outlined][variant=warning][inverse="1"].gov-button .element:focus-visible {
+  background-color: var(--gov-button-warning-outlined-inverse-focus-bg, transparent);
 }
 [type=outlined][variant=warning][disabled=""].gov-button .element, [type=outlined][variant=warning][disabled=true i].gov-button .element, [type=outlined][variant=warning][disabled="1"].gov-button .element {
   background-color: var(--gov-button-warning-outlined-disabled-bg, transparent);
@@ -723,9 +773,9 @@
   border-color: var(--gov-button-warning-outlined-disabled-border, var(--gov-color-warning));
 }
 [type=outlined][variant=warning][disabled=""][inverse=""].gov-button .element, [type=outlined][variant=warning][disabled=""][inverse=true i].gov-button .element, [type=outlined][variant=warning][disabled=""][inverse="1"].gov-button .element, [type=outlined][variant=warning][disabled=true i][inverse=""].gov-button .element, [type=outlined][variant=warning][disabled=true i][inverse=true i].gov-button .element, [type=outlined][variant=warning][disabled=true i][inverse="1"].gov-button .element, [type=outlined][variant=warning][disabled="1"][inverse=""].gov-button .element, [type=outlined][variant=warning][disabled="1"][inverse=true i].gov-button .element, [type=outlined][variant=warning][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-outlined-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-warning-outlined-inverse-bg, transparent);
+  background-color: var(--gov-button-warning-outlined-inverse-disabled-bg, var(--gov-color-warning-300));
+  color: var(--gov-button-warning-outlined-inverse-disabled-color, var(--gov-color-warning-400));
+  border-color: var(--gov-button-warning-outlined-inverse-disabled-border-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=warning][hoverable].gov-button .element:hover {
@@ -738,60 +788,60 @@
 }
 @media not all and (pointer: coarse) {
   [type=outlined][variant=warning][hoverable][inverse=""].gov-button .element:hover, [type=outlined][variant=warning][hoverable][inverse=true i].gov-button .element:hover, [type=outlined][variant=warning][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-warning-outlined-inverse-hover-bg, var(--gov-color-secondary-100));
-    color: var(--gov-button-warning-outlined-inverse-hover-color, var(--gov-color-warning-500));
+    background-color: var(--gov-button-warning-outlined-inverse-hover-bg, var(--gov-color-warning-500));
+    color: var(--gov-button-warning-outlined-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=outlined][variant=warning][hoverable][inverse=""].gov-button .element:hover:active, [type=outlined][variant=warning][hoverable][inverse=true i].gov-button .element:hover:active, [type=outlined][variant=warning][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-warning-outlined-inverse-active-color, var(--gov-color-warning-600));
+    background-color: var(--gov-button-warning-outlined-inverse-active-bg, var(--gov-color-warning-400));
   }
 }
 [type=base][variant=warning].gov-button .element {
-  color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
+  color: var(--gov-button-warning-base-color, var(--gov-color-warning-500));
   border-width: 0;
 }
 [type=base][variant=warning][inverse=""].gov-button .element, [type=base][variant=warning][inverse=true i].gov-button .element, [type=base][variant=warning][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-base-inverse-color, var(--gov-color-secondary-100));
+  color: var(--gov-button-warning-base-inverse-color, var(--gov-color-neutral-white));
   background-color: var(--gov-button-warning-base-inverse-bg, transparent);
 }
 [type=base][variant=warning][disabled=""].gov-button .element, [type=base][variant=warning][disabled=true i].gov-button .element, [type=base][variant=warning][disabled="1"].gov-button .element {
-  color: var(--gov-button-warning-outlined-disabled-color, var(--gov-color-warning));
+  color: var(--gov-button-warning-base-disabled-color, var(--gov-color-warning));
 }
 [type=base][variant=warning][disabled=""][inverse=""].gov-button .element, [type=base][variant=warning][disabled=""][inverse=true i].gov-button .element, [type=base][variant=warning][disabled=""][inverse="1"].gov-button .element, [type=base][variant=warning][disabled=true i][inverse=""].gov-button .element, [type=base][variant=warning][disabled=true i][inverse=true i].gov-button .element, [type=base][variant=warning][disabled=true i][inverse="1"].gov-button .element, [type=base][variant=warning][disabled="1"][inverse=""].gov-button .element, [type=base][variant=warning][disabled="1"][inverse=true i].gov-button .element, [type=base][variant=warning][disabled="1"][inverse="1"].gov-button .element {
-  color: var(--gov-button-warning-base-inverse-color, var(--gov-color-secondary-100));
-  opacity: 0.6;
-  background-color: var(--gov-button-warning-base-inverse-bg, transparent);
+  background-color: var(--gov-button-warning-base-inverse-disabled-bg, var(--gov-color-warning-300));
+  color: var(--gov-button-warning-base-inverse-disabled-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=warning][hoverable].gov-button .element:hover {
-    background-color: var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));
-    color: var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500));
+    background-color: var(--gov-button-warning-base-hover-bg, var(--gov-color-warning-200));
+    color: var(--gov-button-warning-base-hover-color, var(--gov-color-warning-500));
   }
   [type=base][variant=warning][hoverable].gov-button .element:hover:active {
-    background-color: var(--gov-button-warning-outlined-active-bg, var(--gov-color-warning-300));
+    background-color: var(--gov-button-warning-base-active-bg, var(--gov-color-warning-300));
   }
 }
 @media not all and (pointer: coarse) {
   [type=base][variant=warning][hoverable][inverse=""].gov-button .element:hover, [type=base][variant=warning][hoverable][inverse=true i].gov-button .element:hover, [type=base][variant=warning][hoverable][inverse="1"].gov-button .element:hover {
-    background-color: var(--gov-button-warning-base-inverse-hover-bg, transparent);
-    color: var(--gov-button-warning-base-inverse-hover-color, var(--gov-color-warning-200));
+    background-color: var(--gov-button-warning-base-inverse-hover-bg, var(--gov-color-warning-500));
+    color: var(--gov-button-warning-base-inverse-hover-color, var(--gov-color-neutral-white));
   }
   [type=base][variant=warning][hoverable][inverse=""].gov-button .element:hover:active, [type=base][variant=warning][hoverable][inverse=true i].gov-button .element:hover:active, [type=base][variant=warning][hoverable][inverse="1"].gov-button .element:hover:active {
-    color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-warning-300));
+    background-color: var(--gov-button-warning-base-inverse-active-bg, var(--gov-color-warning-400));
+    color: var(--gov-button-warning-base-inverse-active-color, var(--gov-color-neutral-white));
   }
 }
 [size=xs].gov-button .element {
-  font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
-  font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
-  line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
-  letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-       column-gap: var(--gov-button-padding-x, 0.75rem);
-  min-height: var(--gov-button-min-height, 2rem);
-  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+  font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
+  font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
+  line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
+  letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
+  -moz-column-gap: var(--gov-button-xs-padding-x, 0.625rem);
+       column-gap: var(--gov-button-xs-padding-x, 0.625rem);
+  min-height: var(--gov-button-xs-min-height, 1.5rem);
+  padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
 }
 [size=xs].gov-button .element .gov-icon {
-  width: var(--gov-button-icon-size, 1rem);
-  height: var(--gov-button-icon-size, 1rem);
+  width: var(--gov-button-xs-icon-size, 1rem);
+  height: var(--gov-button-xs-icon-size, 1rem);
 }
 @media (min-width: 48em) {
   [size=xs].gov-button .element {
@@ -799,14 +849,14 @@
     font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
     line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
     letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
-    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-         column-gap: var(--gov-button-padding-x, 0.75rem);
-    min-height: var(--gov-button-min-height, 1.375rem);
-    padding: var(--gov-button-padding-y, 0.0625rem) var(--gov-button-padding-x, 0.75rem);
+    -moz-column-gap: var(--gov-button-xs-padding-x, 0.625rem);
+         column-gap: var(--gov-button-xs-padding-x, 0.625rem);
+    min-height: var(--gov-button-xs-min-height, 1.5rem);
+    padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
   }
   [size=xs].gov-button .element .gov-icon {
-    width: var(--gov-button-icon-size, 1rem);
-    height: var(--gov-button-icon-size, 1rem);
+    width: var(--gov-button-xs-icon-size, 1rem);
+    height: var(--gov-button-xs-icon-size, 1rem);
   }
 }
 [size=s].gov-button .element {
@@ -814,14 +864,14 @@
   font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
   line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
   letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-       column-gap: var(--gov-button-padding-x, 0.75rem);
-  min-height: var(--gov-button-min-height, 2rem);
-  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+  -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
+       column-gap: var(--gov-button-s-padding-x, 0.75rem);
+  min-height: var(--gov-button-s-min-height, 2rem);
+  padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
 }
 [size=s].gov-button .element .gov-icon {
-  width: var(--gov-button-icon-size, 1rem);
-  height: var(--gov-button-icon-size, 1rem);
+  width: var(--gov-button-s-icon-size, 1rem);
+  height: var(--gov-button-s-icon-size, 1rem);
 }
 @media (min-width: 48em) {
   [size=s].gov-button .element {
@@ -829,14 +879,14 @@
     font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
     line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
     letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-         column-gap: var(--gov-button-padding-x, 0.75rem);
-    min-height: var(--gov-button-min-height, 2rem);
-    padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+    -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
+         column-gap: var(--gov-button-s-padding-x, 0.75rem);
+    min-height: var(--gov-button-s-min-height, 2rem);
+    padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
   }
   [size=s].gov-button .element .gov-icon {
-    width: var(--gov-button-icon-size, 1rem);
-    height: var(--gov-button-icon-size, 1rem);
+    width: var(--gov-button-s-icon-size, 1rem);
+    height: var(--gov-button-s-icon-size, 1rem);
   }
 }
 [size=m].gov-button .element {
@@ -844,14 +894,14 @@
   font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
   line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
   letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
-  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-       column-gap: var(--gov-button-padding-x, 0.75rem);
-  min-height: var(--gov-button-min-height, 2rem);
-  padding: var(--gov-button-padding-y, 0.25rem) var(--gov-button-padding-x, 0.75rem);
+  -moz-column-gap: var(--gov-button-s-padding-x, 0.75rem);
+       column-gap: var(--gov-button-s-padding-x, 0.75rem);
+  min-height: var(--gov-button-s-min-height, 2rem);
+  padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
 }
 [size=m].gov-button .element .gov-icon {
-  width: var(--gov-button-icon-size, 1rem);
-  height: var(--gov-button-icon-size, 1rem);
+  width: var(--gov-button-s-icon-size, 1rem);
+  height: var(--gov-button-s-icon-size, 1rem);
 }
 @media (min-width: 48em) {
   [size=m].gov-button .element {
@@ -859,14 +909,14 @@
     font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
     line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
     letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
-    -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-         column-gap: var(--gov-button-padding-x, 0.75rem);
-    min-height: var(--gov-button-min-height, 2.5rem);
-    padding: var(--gov-button-padding-y, 0.375rem) var(--gov-button-padding-x, 0.75rem);
+    -moz-column-gap: var(--gov-button-m-padding-x, 0.75rem);
+         column-gap: var(--gov-button-m-padding-x, 0.75rem);
+    min-height: var(--gov-button-m-min-height, 2.5rem);
+    padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
   }
   [size=m].gov-button .element .gov-icon {
-    width: var(--gov-button-icon-size, 1.25rem);
-    height: var(--gov-button-icon-size, 1.25rem);
+    width: var(--gov-button-m-icon-size, 1.25rem);
+    height: var(--gov-button-m-icon-size, 1.25rem);
   }
 }
 [size=l].gov-button .element {
@@ -874,14 +924,14 @@
   font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
   line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
   letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
-  -moz-column-gap: var(--gov-button-padding-x, 0.75rem);
-       column-gap: var(--gov-button-padding-x, 0.75rem);
-  min-height: var(--gov-button-min-height, 2.5rem);
-  padding: var(--gov-button-padding-y, 0.375rem) var(--gov-button-padding-x, 0.75rem);
+  -moz-column-gap: var(--gov-button-m-padding-x, 0.75rem);
+       column-gap: var(--gov-button-m-padding-x, 0.75rem);
+  min-height: var(--gov-button-m-min-height, 2.5rem);
+  padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
 }
 [size=l].gov-button .element .gov-icon {
-  width: var(--gov-button-icon-size, 1.25rem);
-  height: var(--gov-button-icon-size, 1.25rem);
+  width: var(--gov-button-m-icon-size, 1.25rem);
+  height: var(--gov-button-m-icon-size, 1.25rem);
 }
 @media (min-width: 48em) {
   [size=l].gov-button .element {
@@ -889,14 +939,14 @@
     font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
     line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
     letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
-    -moz-column-gap: var(--gov-button-padding-x, 1rem);
-         column-gap: var(--gov-button-padding-x, 1rem);
-    min-height: var(--gov-button-min-height, 3rem);
-    padding: var(--gov-button-padding-y, 0.5rem) var(--gov-button-padding-x, 1rem);
+    -moz-column-gap: var(--gov-button-l-padding-x, 1rem);
+         column-gap: var(--gov-button-l-padding-x, 1rem);
+    min-height: var(--gov-button-l-min-height, 3rem);
+    padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
   }
   [size=l].gov-button .element .gov-icon {
-    width: var(--gov-button-icon-size, 1.5rem);
-    height: var(--gov-button-icon-size, 1.5rem);
+    width: var(--gov-button-l-icon-size, 1.5rem);
+    height: var(--gov-button-l-icon-size, 1.5rem);
   }
 }
 [size=xl].gov-button .element {
@@ -904,14 +954,14 @@
   font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
   line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
   letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
-  -moz-column-gap: var(--gov-button-padding-x, 1rem);
-       column-gap: var(--gov-button-padding-x, 1rem);
-  min-height: var(--gov-button-min-height, 3rem);
-  padding: var(--gov-button-padding-y, 0.5rem) var(--gov-button-padding-x, 1rem);
+  -moz-column-gap: var(--gov-button-l-padding-x, 1rem);
+       column-gap: var(--gov-button-l-padding-x, 1rem);
+  min-height: var(--gov-button-l-min-height, 3rem);
+  padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
 }
 [size=xl].gov-button .element .gov-icon {
-  width: var(--gov-button-icon-size, 1.5rem);
-  height: var(--gov-button-icon-size, 1.5rem);
+  width: var(--gov-button-l-icon-size, 1.5rem);
+  height: var(--gov-button-l-icon-size, 1.5rem);
 }
 @media (min-width: 48em) {
   [size=xl].gov-button .element {
@@ -919,14 +969,14 @@
     font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
     line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
     letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
-    -moz-column-gap: var(--gov-button-padding-x, 1.25rem);
-         column-gap: var(--gov-button-padding-x, 1.25rem);
-    min-height: var(--gov-button-min-height, 3.5rem);
-    padding: var(--gov-button-padding-y, 0.75rem) var(--gov-button-padding-x, 1.25rem);
+    -moz-column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+         column-gap: var(--gov-button-xl-padding-x, 1.25rem);
+    min-height: var(--gov-button-xl-min-height, 3.5rem);
+    padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
   }
   [size=xl].gov-button .element .gov-icon {
-    width: var(--gov-button-icon-size, 1.75rem);
-    height: var(--gov-button-icon-size, 1.75rem);
+    width: var(--gov-button-xl-icon-size, 1.75rem);
+    height: var(--gov-button-xl-icon-size, 1.75rem);
   }
 }
 
@@ -942,19 +992,19 @@
   display: none;
 }
 .gov-button:not(.gov-button--w-icon)[loading="0"][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xs] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xs] .element {
-  padding: var(--gov-button-padding-y, 0.0625rem) calc(var(--gov-button-padding-x, 0.75rem) + var(--gov-button-padding-x, 0.75rem) / 2 + var(--gov-button-icon-size, 1rem) / 2);
+  padding: var(--gov-button-xs-padding-y, 0.125rem) calc(var(--gov-button-xs-padding-x, 0.625rem) + var(--gov-button-xs-padding-x, 0.625rem) / 2 + var(--gov-button-xs-icon-size, 1rem) / 2);
 }
 .gov-button:not(.gov-button--w-icon)[loading="0"][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=s] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=s] .element {
-  padding: var(--gov-button-padding-y, 0.25rem) calc(var(--gov-button-padding-x, 0.75rem) + var(--gov-button-padding-x, 0.75rem) / 2 + var(--gov-button-icon-size, 1rem) / 2);
+  padding: var(--gov-button-s-padding-y, 0.25rem) calc(var(--gov-button-s-padding-x, 0.75rem) + var(--gov-button-s-padding-x, 0.75rem) / 2 + var(--gov-button-s-icon-size, 1rem) / 2);
 }
 .gov-button:not(.gov-button--w-icon)[loading="0"][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=m] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=m] .element {
-  padding: var(--gov-button-padding-y, 0.375rem) calc(var(--gov-button-padding-x, 0.75rem) + var(--gov-button-padding-x, 0.75rem) / 2 + var(--gov-button-icon-size, 1.25rem) / 2);
+  padding: var(--gov-button-m-padding-y, 0.375rem) calc(var(--gov-button-m-padding-x, 0.75rem) + var(--gov-button-m-padding-x, 0.75rem) / 2 + var(--gov-button-m-icon-size, 1.25rem) / 2);
 }
 .gov-button:not(.gov-button--w-icon)[loading="0"][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=l] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=l] .element {
-  padding: var(--gov-button-padding-y, 0.5rem) calc(var(--gov-button-padding-x, 1rem) + var(--gov-button-padding-x, 1rem) / 2 + var(--gov-button-icon-size, 1.5rem) / 2);
+  padding: var(--gov-button-l-padding-y, 0.5rem) calc(var(--gov-button-l-padding-x, 1rem) + var(--gov-button-l-padding-x, 1rem) / 2 + var(--gov-button-l-icon-size, 1.5rem) / 2);
 }
 .gov-button:not(.gov-button--w-icon)[loading="0"][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=false][size=xl] .element, .gov-button:not(.gov-button--w-icon)[loading=""][size=xl] .element {
-  padding: var(--gov-button-padding-y, 0.75rem) calc(var(--gov-button-padding-x, 1.25rem) + var(--gov-button-padding-x, 1.25rem) / 2 + var(--gov-button-icon-size, 1.75rem) / 2);
+  padding: var(--gov-button-xl-padding-y, 0.75rem) calc(var(--gov-button-xl-padding-x, 1.25rem) + var(--gov-button-xl-padding-x, 1.25rem) / 2 + var(--gov-button-xl-icon-size, 1.75rem) / 2);
 }
 .gov-button[type=outlined][variant=primary] .gov-spin-animation, .gov-button[type=base][variant=primary] .gov-spin-animation {
   color: var(--gov-button-primary-outlined-color, var(--gov-color-primary));