@danske/sapphire-css 32.2.0 → 33.0.1

package/components/button/button.module.css

@@ -15,11 +15,11 @@
   margin: 0;
 
   /* typography */
-  font-family: var(--sapphire-button-font-name);
-  font-weight: var(--sapphire-button-font-weight);
-  font-size: var(--sapphire-button-size-font-m);
-  text-transform: var(--sapphire-button-font-text-transform);
-  letter-spacing: var(--sapphire-button-font-letter-spacing);
+  font-family: var(--sapphire-semantic-font-name-default);
+  font-weight: var(--sapphire-semantic-font-weight-default-semibold);
+  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
@@ -36,14 +36,14 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* sizing */
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-m);
-  height: var(--sapphire-button-size-height-m);
-  min-width: var(--sapphire-button-size-min-width-no-icon-m);
+  padding: 0 var(--sapphire-global-size-generic-50);
+  height: var(--sapphire-semantic-size-height-control-md);
+  min-width: var(--sapphire-global-size-generic-100);
   max-width: fit-content; /* When part of flex layout the button will otherwise expand to full width of container when container has flex-direction 'column' */
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   /* shape */
-  border-radius: var(--sapphire-button-size-radius-m);
+  border-radius: var(--sapphire-semantic-size-height-control-md);
   border-style: solid;
   border-width: 0;
   border-color: transparent;
@@ -51,7 +51,7 @@
   /* transition */
   /* we don't want to transition outline-offset */
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-button-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   cursor: pointer;
 }
@@ -77,7 +77,7 @@ a.sapphire-button {
 /* Disabled state for all variants */
 .sapphire-button:disabled,
 .sapphire-button.is-disabled {
-  opacity: var(--sapphire-button-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -87,23 +87,23 @@ a.sapphire-button {
 }
 .sapphire-button.is-focus,
 .sapphire-button:not(.js-focus):focus-visible {
-  outline: var(--sapphire-button-size-focus-ring-border) solid
-    var(--sapphire-button-color-focus-ring);
-  outline-offset: var(--sapphire-button-size-focus-ring-offset);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
 /* Button with icon */
 .sapphire-button--with-left-icon {
-  min-width: var(--sapphire-button-size-min-width-with-icon-default);
+  min-width: var(--sapphire-global-size-generic-100);
 }
 .sapphire-button--with-right-icon {
-  min-width: var(--sapphire-button-size-min-width-with-icon-default);
+  min-width: var(--sapphire-global-size-generic-100);
 }
 .sapphire-button--with-right-icon .sapphire-button__icon {
-  margin-left: var(--sapphire-button-size-spacing-icon-gap);
+  margin-left: var(--sapphire-semantic-size-spacing-20);
 }
 .sapphire-button--with-left-icon .sapphire-button__icon {
-  margin-right: var(--sapphire-button-size-spacing-icon-gap);
+  margin-right: var(--sapphire-semantic-size-spacing-20);
 }
 
 /* Button loading */
@@ -126,110 +126,83 @@ a.sapphire-button {
 
 /* ### Variant: Primary */
 /* ## Style: Default */
-.sapphire-button--primary-fill {
-  background-color: var(--sapphire-button-color-background-primary-default);
-  color: var(--sapphire-button-color-content-primary-default);
+.sapphire-button--primary {
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
+  color: var(--sapphire-semantic-color-content-action-primary-default);
 }
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(--sapphire-button-color-background-primary-hover);
+.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.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
+  );
 }
-.sapphire-button--primary-fill.is-focus,
-.sapphire-button--primary-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-primary-focus);
+.sapphire-button--primary.is-focus,
+.sapphire-button--primary:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
 }
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--primary-fill:not(:disabled):not(
+.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-button-color-background-primary-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-active
+  );
 }
 
 /* ### Variant: Secondary */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-button--secondary-fill {
-  background-color: var(--sapphire-button-color-background-secondary-default);
-  color: var(--sapphire-button-color-content-secondary-default);
-}
-
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(--sapphire-button-color-background-secondary-hover);
-  color: var(--sapphire-button-color-content-secondary-hover);
-}
-
-.sapphire-button--secondary-fill.is-focus,
-.sapphire-button--secondary-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-secondary-focus);
-}
-
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-fill:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(--sapphire-button-color-background-secondary-active);
-  color: var(--sapphire-button-color-content-secondary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface {
+.sapphire-button--secondary {
   background-color: var(
-    --sapphire-button-color-background-secondary-surface-secondary-default
+    --sapphire-semantic-color-background-action-secondary-default
   );
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(
-    --sapphire-button-color-background-secondary-surface-secondary-hover
+    --sapphire-semantic-color-background-action-secondary-hover
   );
+  color: var(--sapphire-semantic-color-content-action-secondary-hover);
 }
 
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
+.sapphire-button--secondary.is-focus,
+.sapphire-button--secondary:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-button-color-background-secondary-surface-secondary-focus
+    --sapphire-semantic-color-background-action-secondary-default
   );
 }
 
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--secondary:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
-    --sapphire-button-color-background-secondary-surface-secondary-active
+    --sapphire-semantic-color-background-action-secondary-active
   );
+  color: var(--sapphire-semantic-color-content-action-secondary-active);
 }
 
 /* ## Style: Ghost */
-/* # Surface: Primary */
 .sapphire-button--secondary-ghost {
   background-color: var(
-    --sapphire-button-color-background-secondary-ghost-default
+    --sapphire-semantic-color-background-action-secondary-ghost-default
   );
-  color: var(--sapphire-button-color-content-secondary-default);
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
 .sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
@@ -239,15 +212,15 @@ a.sapphire-button {
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-button-color-background-secondary-ghost-hover
+    --sapphire-semantic-color-background-action-secondary-ghost-hover
   );
-  color: var(--sapphire-button-color-content-secondary-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-button-color-background-secondary-ghost-focus
+    --sapphire-semantic-color-background-action-secondary-ghost-default
   );
 }
 
@@ -257,57 +230,16 @@ a.sapphire-button {
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-button-color-background-secondary-ghost-active
-  );
-  color: var(--sapphire-button-color-content-secondary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface {
-  background-color: var(
-    --sapphire-button-color-background-secondary-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-button-color-background-secondary-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-button-color-background-secondary-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-button-color-background-secondary-ghost-surface-secondary-active
+    --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-button-color-content-secondary-default);
-  border-radius: var(--sapphire-button-size-radius-text);
-  background: var(--sapphire-button-color-background-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;
 }
 
@@ -317,7 +249,7 @@ a.sapphire-button {
 .sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  color: var(--sapphire-button-color-content-secondary-hover);
+  color: var(--sapphire-semantic-color-content-action-secondary-hover);
 }
 
 .sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,
@@ -325,89 +257,54 @@ a.sapphire-button {
 .sapphire-button--secondary-text:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-button-color-content-secondary-active);
+  color: var(--sapphire-semantic-color-content-action-secondary-active);
 }
 
 /* ### Variant: Tertiary */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-button--tertiary-fill {
-  background-color: var(--sapphire-button-color-background-tertiary-default);
-  color: var(--sapphire-button-color-content-tertiary-default);
-}
-
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(--sapphire-button-color-background-tertiary-hover);
-  color: var(--sapphire-button-color-content-tertiary-hover);
-}
-
-.sapphire-button--tertiary-fill.is-focus,
-.sapphire-button--tertiary-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-tertiary-focus);
-}
-
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-fill:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(--sapphire-button-color-background-tertiary-active);
-  color: var(--sapphire-button-color-content-tertiary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface {
+.sapphire-button--tertiary {
   background-color: var(
-    --sapphire-button-color-background-tertiary-surface-secondary-default
+    --sapphire-semantic-color-background-action-tertiary-default
   );
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
 }
 
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(
-    --sapphire-button-color-background-tertiary-surface-secondary-hover
+    --sapphire-semantic-color-background-action-tertiary-hover
   );
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
 }
 
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
+.sapphire-button--tertiary.is-focus,
+.sapphire-button--tertiary:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-button-color-background-tertiary-surface-secondary-focus
+    --sapphire-semantic-color-background-action-tertiary-default
   );
 }
 
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,
+.sapphire-button--tertiary:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
-    --sapphire-button-color-background-tertiary-surface-secondary-active
+    --sapphire-semantic-color-background-action-tertiary-active
   );
+  color: var(--sapphire-semantic-color-content-action-tertiary-active);
 }
 
 /* ## Style: Ghost */
-/* # Surface: Primary */
 .sapphire-button--tertiary-ghost {
   background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-default
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
   );
-  color: var(--sapphire-button-color-content-tertiary-default);
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
 }
 
 .sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
@@ -417,15 +314,15 @@ a.sapphire-button {
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-hover
+    --sapphire-semantic-color-background-action-tertiary-ghost-hover
   );
-  color: var(--sapphire-button-color-content-tertiary-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-button-color-background-tertiary-ghost-focus
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
   );
 }
 
@@ -435,57 +332,16 @@ a.sapphire-button {
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-active
-  );
-  color: var(--sapphire-button-color-content-tertiary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface {
-  background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-button-color-background-tertiary-ghost-surface-secondary-active
+    --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-button-color-content-tertiary-default);
-  border-radius: var(--sapphire-button-size-radius-text);
-  background: var(--sapphire-button-color-background-tertiary-text);
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
+  background: var(--sapphire-semantic-color-background-action-tertiary-text);
   padding: 0;
 }
 
@@ -495,7 +351,7 @@ a.sapphire-button {
 .sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  color: var(--sapphire-button-color-content-tertiary-hover);
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
 }
 
 .sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,
@@ -503,89 +359,52 @@ a.sapphire-button {
 .sapphire-button--tertiary-text:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-button-color-content-tertiary-active);
+  color: var(--sapphire-semantic-color-content-action-tertiary-active);
 }
 
 /* ### Variant: Danger */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-button--danger-fill {
-  background-color: var(--sapphire-button-color-background-danger-default);
-  color: var(--sapphire-button-color-content-danger-default);
+.sapphire-button--danger {
+  background-color: var(
+    --sapphire-semantic-color-background-action-danger-default
+  );
+  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(
+.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ):not(.js-hover):hover,
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(
+.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(--sapphire-button-color-background-danger-hover);
-  color: var(--sapphire-button-color-content-danger-hover);
-}
-
-.sapphire-button--danger-fill.is-focus,
-.sapphire-button--danger-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-danger-focus);
-}
-
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-fill:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(--sapphire-button-color-background-danger-active);
-  color: var(--sapphire-button-color-content-danger-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--danger-fill.sapphire-button--secondary-surface {
-  background-color: var(
-    --sapphire-button-color-background-danger-surface-secondary-default
-  );
-}
-
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-button-color-background-danger-surface-secondary-hover
+    --sapphire-semantic-color-background-action-danger-hover
   );
+  color: var(--sapphire-semantic-color-content-action-danger-hover);
 }
 
-.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
+.sapphire-button--danger.is-focus,
+.sapphire-button--danger:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-button-color-background-danger-surface-secondary-focus
+    --sapphire-semantic-color-background-action-danger-default
   );
 }
 
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
+.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-button-color-background-danger-surface-secondary-active
+    --sapphire-semantic-color-background-action-danger-active
   );
+  color: var(--sapphire-semantic-color-content-action-danger-active);
 }
 
 /* ## Style: Ghost */
-/* # Surface: Primary */
 .sapphire-button--danger-ghost {
   background-color: var(
-    --sapphire-button-color-background-danger-ghost-default
+    --sapphire-semantic-color-background-action-danger-ghost-default
   );
-  color: var(--sapphire-button-color-content-danger-default);
+  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
 .sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
@@ -594,13 +413,17 @@ a.sapphire-button {
 .sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  background-color: var(--sapphire-button-color-background-danger-ghost-hover);
-  color: var(--sapphire-button-color-content-danger-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-danger-ghost-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-button-color-background-danger-ghost-focus);
+  background-color: var(
+    --sapphire-semantic-color-background-action-danger-ghost-default
+  );
 }
 
 .sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
@@ -608,56 +431,17 @@ a.sapphire-button {
 .sapphire-button--danger-ghost:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(--sapphire-button-color-background-danger-ghost-active);
-  color: var(--sapphire-button-color-content-danger-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface {
-  background-color: var(
-    --sapphire-button-color-background-danger-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-button-color-background-danger-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-button-color-background-danger-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
   background-color: var(
-    --sapphire-button-color-background-danger-ghost-surface-secondary-active
+    --sapphire-semantic-color-background-action-danger-ghost-active
   );
+  color: var(--sapphire-semantic-color-content-action-danger-active);
 }
 
 /* ## Style: Text */
 .sapphire-button--danger-text {
-  color: var(--sapphire-button-color-content-danger-default);
-  border-radius: var(--sapphire-button-size-radius-text);
-  background: var(--sapphire-button-color-background-danger-text);
+  color: var(--sapphire-semantic-color-content-action-danger-default);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
+  background: var(--sapphire-semantic-color-background-action-danger-text);
   padding: 0;
 }
 
@@ -667,7 +451,7 @@ a.sapphire-button {
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  color: var(--sapphire-button-color-content-danger-hover);
+  color: var(--sapphire-semantic-color-content-action-danger-hover);
 }
 
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,
@@ -675,15 +459,17 @@ a.sapphire-button {
 .sapphire-button--danger-text:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  color: var(--sapphire-button-color-content-danger-active);
+  color: var(--sapphire-semantic-color-content-action-danger-active);
 }
 
 /**
  * Toggle Button
  */
 .sapphire-button--selected {
-  background-color: var(--sapphire-button-color-background-selected-default);
-  color: var(--sapphire-button-color-content-selected-default);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-default
+  );
+  color: var(--sapphire-semantic-color-content-selection-selected-default);
 }
 .sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -691,24 +477,32 @@ a.sapphire-button {
 .sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(--sapphire-button-color-background-selected-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-hover
+  );
 }
 .sapphire-button--selected.is-focus,
 .sapphire-button--selected:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-selected-focus);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-default
+  );
 }
 .sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--selected:not(:disabled):not(.is-disabled):active,
 .sapphire-button--selected:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(--sapphire-button-color-background-selected-active);
-  color: var(--sapphire-button-color-content-selected-active);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-selected-active
+  );
+  color: var(--sapphire-semantic-color-content-selection-selected-active);
 }
 
 .sapphire-button--unselected {
-  background-color: var(--sapphire-button-color-background-unselected-default);
-  color: var(--sapphire-button-color-content-unselected-default);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-default
+  );
+  color: var(--sapphire-semantic-color-content-selection-unselected-default);
 }
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
@@ -716,19 +510,25 @@ a.sapphire-button {
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background-color: var(--sapphire-button-color-background-unselected-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-hover
+  );
 }
 .sapphire-button--unselected.is-focus,
 .sapphire-button--unselected:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-button-color-background-unselected-focus);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-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-button-color-background-unselected-active);
-  color: var(--sapphire-button-color-content-unselected-active);
+  background-color: var(
+    --sapphire-semantic-color-background-selection-unselected-active
+  );
+  color: var(--sapphire-semantic-color-content-selection-unselected-active);
 }
 
 /**
@@ -739,16 +539,16 @@ a.sapphire-button {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-button-size-icon-m);
-  width: var(--sapphire-button-size-icon-m);
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
 }
-.sapphire-button--large .sapphire-button__icon {
-  height: var(--sapphire-button-size-icon-l);
-  width: var(--sapphire-button-size-icon-l);
+.sapphire-button--lg .sapphire-button__icon {
+  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-lg);
 }
-.sapphire-button--small .sapphire-button__icon {
-  height: var(--sapphire-button-size-icon-s);
-  width: var(--sapphire-button-size-icon-s);
+.sapphire-button--sm .sapphire-button__icon {
+  height: var(--sapphire-semantic-size-icon-sm);
+  width: var(--sapphire-semantic-size-icon-sm);
 }
 
 /**
@@ -757,33 +557,33 @@ a.sapphire-button {
 /**
  * LARGE
  */
-.sapphire-button--large {
-  height: var(--sapphire-button-size-height-l);
-  min-width: var(--sapphire-button-size-min-width-no-icon-l);
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-l);
-  font-size: var(--sapphire-button-size-font-l);
-  border-radius: var(--sapphire-button-size-radius-l);
-}
-.sapphire-button--large.sapphire-button--secondary-text,
-.sapphire-button--large.sapphire-button--tertiary-text,
-.sapphire-button--large.sapphire-button--danger-text {
+.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);
+  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--danger-text {
   padding: 0;
-  border-radius: var(--sapphire-button-size-radius-text);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
 }
 
 /**
  * SMALL
  */
-.sapphire-button--small {
-  height: var(--sapphire-button-size-height-s);
-  min-width: var(--sapphire-button-size-min-width-no-icon-s);
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-s);
-  font-size: var(--sapphire-button-size-font-s);
-  border-radius: var(--sapphire-button-size-radius-s);
-}
-.sapphire-button--small.sapphire-button--secondary-text,
-.sapphire-button--small.sapphire-button--tertiary-text,
-.sapphire-button--small.sapphire-button--danger-text {
+.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);
+  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--danger-text {
   padding: 0;
-  border-radius: var(--sapphire-button-size-radius-text);
+  border-radius: var(--sapphire-semantic-size-radius-xs);
 }