@danske/sapphire-css 39.0.0 → 40.0.0

package/components/button/button.module.css

@@ -16,10 +16,9 @@
 
   /* typography */
   font-family: var(--sapphire-semantic-font-name-default);
-  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  font-weight: var(--sapphire-semantic-font-weight-default-regular);
   font-size: var(--sapphire-semantic-size-font-control-md);
   text-transform: none;
-  letter-spacing: 0.01em;
 
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -50,9 +49,9 @@
 
   /* transition */
   /* we don't want to transition outline-offset */
-  transition-property: opacity, background-color, color;
+  transition-property: opacity, background, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: ease-in-out;
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   cursor: pointer;
 }
 
@@ -63,6 +62,9 @@
   vertical-align: middle;
   white-space: nowrap;
 
+  /* for when there are icons inside the button */
+  gap: var(--sapphire-semantic-size-spacing-xs);
+
   /* In Safari buttons get a 2px border
    * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
    */
@@ -92,20 +94,6 @@ a.sapphire-button {
   outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
-/* Button with icon */
-.sapphire-button--with-left-icon {
-  min-width: var(--sapphire-global-size-generic-100);
-}
-.sapphire-button--with-right-icon {
-  min-width: var(--sapphire-global-size-generic-100);
-}
-.sapphire-button--with-right-icon .sapphire-button__icon {
-  margin-left: var(--sapphire-semantic-size-spacing-20);
-}
-.sapphire-button--with-left-icon .sapphire-button__icon {
-  margin-right: var(--sapphire-semantic-size-spacing-20);
-}
-
 /* Button loading */
 .sapphire-button--loading {
   cursor: not-allowed;
@@ -120,17 +108,10 @@ a.sapphire-button {
   visibility: hidden;
 }
 
-/**
- * Skin rules
- */
-
-/* ### Variant: Primary */
-/* ## Style: Default */
+/* ## Primary */
 .sapphire-button--primary {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-default
-  );
-  color: var(--sapphire-semantic-color-content-action-primary-default);
+  background: var(--sapphire-semantic-color-background-action-primary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-primary-default);
 }
 .sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -138,33 +119,28 @@ a.sapphire-button {
 .sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-primary-hover);
 }
 .sapphire-button--primary.is-focus,
 .sapphire-button--primary:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-primary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-primary-default);
 }
 .sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--primary:not(:disabled):not(.is-disabled):active,
 .sapphire-button--primary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-primary-active
-  );
+  background: var(--sapphire-semantic-color-background-action-primary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-primary-active);
 }
 
-/* ### Variant: Secondary */
-/* ## Style: Default */
+/* ## Secondary */
 .sapphire-button--secondary {
-  background-color: var(
+  background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-action-secondary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
 }
 
 .sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(
@@ -173,17 +149,16 @@ a.sapphire-button {
 .sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-secondary-hover);
+  background: var(--sapphire-semantic-color-background-action-secondary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
 }
 
 .sapphire-button--secondary.is-focus,
 .sapphire-button--secondary:not(.js-focus):focus-visible {
-  background-color: var(
+  background: var(
     --sapphire-semantic-color-background-action-secondary-default
   );
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
 }
 
 .sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,
@@ -191,82 +166,14 @@ a.sapphire-button {
 .sapphire-button--secondary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-active
-  );
-  color: var(--sapphire-semantic-color-content-action-secondary-active);
-}
-
-/* ## Style: Ghost */
-.sapphire-button--secondary-ghost {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-ghost-default
-  );
-  color: var(--sapphire-semantic-color-content-action-secondary-default);
-}
-
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-ghost-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-secondary-hover);
-}
-
-.sapphire-button--secondary-ghost.is-focus,
-.sapphire-button--secondary-ghost:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-ghost-default
-  );
-}
-
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-ghost:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-secondary-ghost-active
-  );
-  color: var(--sapphire-semantic-color-content-action-secondary-active);
-}
-
-/* ## Style: Text */
-.sapphire-button--secondary-text {
-  color: var(--sapphire-semantic-color-content-action-secondary-default);
-  border-radius: var(--sapphire-semantic-size-radius-xs);
-  background: var(--sapphire-semantic-color-background-action-secondary-text);
-  padding: 0;
-}
-
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  color: var(--sapphire-semantic-color-content-action-secondary-hover);
-}
-
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-text:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-action-secondary-active);
+  background: var(--sapphire-semantic-color-background-action-secondary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
 }
 
-/* ### Variant: Tertiary */
-/* ## Style: Default */
+/* ## Tertiary (undocumented) */
 .sapphire-button--tertiary {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-default
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
 }
 
 .sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(
@@ -275,17 +182,14 @@ a.sapphire-button {
 .sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);
 }
 
 .sapphire-button--tertiary.is-focus,
 .sapphire-button--tertiary:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-default
-  );
+  background: var(--sapphire-semantic-color-background-action-tertiary-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);
 }
 
 .sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,
@@ -293,82 +197,37 @@ a.sapphire-button {
 .sapphire-button--tertiary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-active
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
-}
-
-/* ## Style: Ghost */
-.sapphire-button--tertiary-ghost {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-tertiary-active);
 }
 
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
-}
-
-.sapphire-button--tertiary-ghost.is-focus,
-.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-default
-  );
-}
-
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-ghost:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-tertiary-ghost-active
-  );
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
-}
-
-/* ## Style: Text */
-.sapphire-button--tertiary-text {
-  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+/* ## text */
+.sapphire-button--text {
+  color: var(--sapphire-semantic-color-foreground-action-link-default);
   border-radius: var(--sapphire-semantic-size-radius-xs);
-  background: var(--sapphire-semantic-color-background-action-tertiary-text);
+  background: transparent;
   padding: 0;
 }
 
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
+.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
+  color: var(--sapphire-semantic-color-foreground-action-link-hover);
 }
 
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-text:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-action-tertiary-active);
+.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--text:not(:disabled):not(.is-disabled):active,
+.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active {
+  color: var(--sapphire-semantic-color-foreground-action-link-active);
 }
 
-/* ### Variant: Danger */
-/* ## Style: Default */
+/* ## Danger */
 .sapphire-button--danger {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-default
-  );
-  color: var(--sapphire-semantic-color-content-action-danger-default);
+  background: var(--sapphire-semantic-color-background-action-danger-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-danger-default);
 }
 
 .sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
@@ -377,71 +236,122 @@ a.sapphire-button {
 .sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-hover
-  );
-  color: var(--sapphire-semantic-color-content-action-danger-hover);
+  background: var(--sapphire-semantic-color-background-action-danger-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-danger-hover);
 }
 
 .sapphire-button--danger.is-focus,
 .sapphire-button--danger:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-default
-  );
+  background: var(--sapphire-semantic-color-background-action-danger-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-danger-default);
 }
 
 .sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--danger:not(:disabled):not(.is-disabled):active,
 .sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-active
+  background: var(--sapphire-semantic-color-background-action-danger-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-danger-active);
+}
+
+/* ## Danger Secondary */
+.sapphire-button--danger-secondary {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-secondary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-secondary-default
+  );
+}
+
+.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-secondary-hover
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-secondary-hover
   );
-  color: var(--sapphire-semantic-color-content-action-danger-active);
 }
 
-/* ## Style: Ghost */
-.sapphire-button--danger-ghost {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-ghost-default
+.sapphire-button--danger-secondary.is-focus,
+.sapphire-button--danger-secondary:not(.js-focus):focus-visible {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-secondary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
+.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--danger-secondary:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-secondary-active
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-secondary-active
+  );
+}
+
+/* ## Danger Tertiary */
+.sapphire-button--danger-tertiary {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-default
+  );
+}
+
+.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
+.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-ghost-hover
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-hover
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-hover
   );
-  color: var(--sapphire-semantic-color-content-action-danger-hover);
 }
 
-.sapphire-button--danger-ghost.is-focus,
-.sapphire-button--danger-ghost:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-ghost-default
+.sapphire-button--danger-tertiary.is-focus,
+.sapphire-button--danger-tertiary:not(.js-focus):focus-visible {
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-default
   );
 }
 
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-ghost:not(:disabled):not(
+.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--danger-tertiary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-action-danger-ghost-active
+  background: var(
+    --sapphire-semantic-color-background-action-danger-tertiary-active
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-danger-tertiary-active
   );
-  color: var(--sapphire-semantic-color-content-action-danger-active);
 }
 
-/* ## Style: Text */
+/* ## Danger text */
 .sapphire-button--danger-text {
-  color: var(--sapphire-semantic-color-content-action-danger-default);
+  color: var(--sapphire-semantic-color-foreground-action-danger-default);
   border-radius: var(--sapphire-semantic-size-radius-xs);
-  background: var(--sapphire-semantic-color-background-action-danger-text);
+  background: transparent;
   padding: 0;
 }
 
@@ -451,7 +361,7 @@ a.sapphire-button {
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-semantic-color-content-action-danger-hover);
+  color: var(--sapphire-semantic-color-foreground-action-danger-hover);
 }
 
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,
@@ -459,17 +369,19 @@ a.sapphire-button {
 .sapphire-button--danger-text:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-semantic-color-content-action-danger-active);
+  color: var(--sapphire-semantic-color-foreground-action-danger-active);
 }
 
 /**
  * Toggle Button
  */
 .sapphire-button--selected {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-selection-selected-default);
 }
 .sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -477,14 +389,20 @@ a.sapphire-button {
 .sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-hover
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-hover
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-hover
   );
 }
 .sapphire-button--selected.is-focus,
 .sapphire-button--selected:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-default
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-default
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-default
   );
 }
 .sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,
@@ -492,17 +410,19 @@ a.sapphire-button {
 .sapphire-button--selected:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-selected-active
+  background: var(
+    --sapphire-semantic-color-background-action-select-secondary-active
+  );
+  color: var(
+    --sapphire-semantic-color-foreground-action-on-select-secondary-active
   );
-  color: var(--sapphire-semantic-color-content-selection-selected-active);
 }
 
 .sapphire-button--unselected {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-default
+  background: var(
+    --sapphire-semantic-color-background-action-secondary-default
   );
-  color: var(--sapphire-semantic-color-content-selection-unselected-default);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
 }
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -510,46 +430,42 @@ a.sapphire-button {
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-hover
-  );
+  background: var(--sapphire-semantic-color-background-action-secondary-hover);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-hover);
 }
 .sapphire-button--unselected.is-focus,
 .sapphire-button--unselected:not(.js-focus):focus-visible {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-default
+  background: var(
+    --sapphire-semantic-color-background-action-secondary-default
   );
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-default);
 }
 .sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):active,
 .sapphire-button--unselected:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(
-    --sapphire-semantic-color-background-selection-unselected-active
-  );
-  color: var(--sapphire-semantic-color-content-selection-unselected-active);
+  background: var(--sapphire-semantic-color-background-action-secondary-active);
+  color: var(--sapphire-semantic-color-foreground-action-on-secondary-active);
 }
 
 /**
  * Icon
+ * Technically, there's a design guideline that disallows icons in small
+ * buttons, but it works anyway.
  */
 .sapphire-button__icon {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-semantic-size-icon-md);
-  width: var(--sapphire-semantic-size-icon-md);
-}
-.sapphire-button--lg .sapphire-button__icon {
-  height: var(--sapphire-semantic-size-icon-lg);
-  width: var(--sapphire-semantic-size-icon-lg);
-}
-.sapphire-button--sm .sapphire-button__icon {
   height: var(--sapphire-semantic-size-icon-sm);
   width: var(--sapphire-semantic-size-icon-sm);
 }
+.sapphire-button--lg .sapphire-button__icon {
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
+}
 
 /**
  * Size variations
@@ -560,12 +476,11 @@ a.sapphire-button {
 .sapphire-button--lg {
   height: var(--sapphire-semantic-size-height-control-lg);
   min-width: var(--sapphire-global-size-generic-120);
-  padding: 0 var(--sapphire-semantic-size-spacing-50);
-  font-size: var(--sapphire-semantic-size-font-control-default);
+  padding: 0 var(--sapphire-semantic-size-spacing-xl);
+  font-size: var(--sapphire-semantic-size-font-control-lg);
   border-radius: var(--sapphire-semantic-size-height-control-lg);
 }
-.sapphire-button--lg.sapphire-button--secondary-text,
-.sapphire-button--lg.sapphire-button--tertiary-text,
+.sapphire-button--lg.sapphire-button--text,
 .sapphire-button--lg.sapphire-button--danger-text {
   padding: 0;
   border-radius: var(--sapphire-semantic-size-radius-xs);
@@ -577,13 +492,15 @@ a.sapphire-button {
 .sapphire-button--sm {
   height: var(--sapphire-semantic-size-height-control-sm);
   min-width: var(--sapphire-global-size-generic-80);
-  padding: 0 var(--sapphire-semantic-size-spacing-40);
+  padding: 0 var(--sapphire-semantic-size-spacing-md);
   font-size: var(--sapphire-semantic-size-font-control-sm);
   border-radius: var(--sapphire-semantic-size-height-control-sm);
 }
-.sapphire-button--sm.sapphire-button--secondary-text,
-.sapphire-button--sm.sapphire-button--tertiary-text,
+.sapphire-button--sm.sapphire-button--text,
 .sapphire-button--sm.sapphire-button--danger-text {
   padding: 0;
   border-radius: var(--sapphire-semantic-size-radius-xs);
 }
+.sapphire-button--sm .sapphire-button__content {
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}