@danske/sapphire-css 32.2.0 → 33.0.0

package/components/iconButton/iconButton.module.css

@@ -27,25 +27,25 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* sizing */
-  height: var(--sapphire-icon-button-size-height-m);
-  width: var(--sapphire-icon-button-size-width-m);
+  height: var(--sapphire-semantic-size-height-control-md);
+  width: var(--sapphire-semantic-size-height-control-md);
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   /* shape */
-  border-radius: var(--sapphire-icon-button-size-radius-m);
+  border-radius: var(--sapphire-semantic-size-height-control-md);
   border-style: solid;
   border-width: 0;
   border-color: transparent;
 
   /* typography */
-  font-family: var(--sapphire-icon-button-font-name);
-  font-weight: var(--sapphire-icon-button-font-weight);
-  font-size: var(--sapphire-icon-button-size-font-m);
+  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);
 
   /* transition */
   /* we don't want to transition outline-offset */
   transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-icon-button-time-transition);
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: ease-in-out;
   cursor: pointer;
 }
@@ -57,7 +57,7 @@ a.sapphire-icon-button {
 /* Disabled state for all variants */
 .sapphire-icon-button:disabled,
 .sapphire-icon-button.is-disabled {
-  opacity: var(--sapphire-icon-button-opacity-disabled);
+  opacity: var(--sapphire-semantic-opacity-disabled);
   cursor: not-allowed;
 }
 
@@ -67,9 +67,9 @@ a.sapphire-icon-button {
 }
 .sapphire-icon-button.is-focus,
 .sapphire-icon-button:not(.js-focus):focus-visible {
-  outline: var(--sapphire-icon-button-size-focus-ring-border) solid
-    var(--sapphire-icon-button-color-focus-ring);
-  outline-offset: var(--sapphire-icon-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 loading */
@@ -88,122 +88,83 @@ a.sapphire-icon-button {
 
 /* ### Variant: Primary */
 /* ## Style: Default */
-.sapphire-icon-button--primary-fill {
+.sapphire-icon-button--primary {
   background-color: var(
-    --sapphire-icon-button-color-background-primary-default
+    --sapphire-semantic-color-background-action-primary-default
   );
-  color: var(--sapphire-icon-button-color-content-primary-default);
+  color: var(--sapphire-semantic-color-content-action-primary-default);
 }
-.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  background-color: var(--sapphire-icon-button-color-background-primary-hover);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-hover
+  );
 }
-.sapphire-icon-button--primary-fill.is-focus,
-.sapphire-icon-button--primary-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-icon-button-color-background-primary-focus);
+.sapphire-icon-button--primary.is-focus,
+.sapphire-icon-button--primary:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-default
+  );
 }
-.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-icon-button--primary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-icon-button--primary-fill:not(:disabled):not(
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--primary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
-  background-color: var(--sapphire-icon-button-color-background-primary-active);
+  background-color: var(
+    --sapphire-semantic-color-background-action-primary-active
+  );
 }
 
 /* ### Variant: Secondary */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-icon-button--secondary-fill {
+.sapphire-icon-button--secondary {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-default
+    --sapphire-semantic-color-background-action-secondary-default
   );
-  color: var(--sapphire-icon-button-color-content-secondary-default);
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
-.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-hover
+    --sapphire-semantic-color-background-action-secondary-hover
   );
-  color: var(--sapphire-icon-button-color-content-secondary-hover);
+  color: var(--sapphire-semantic-color-content-action-secondary-hover);
 }
 
-.sapphire-icon-button--secondary-fill.is-focus,
-.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible {
+.sapphire-icon-button--secondary.is-focus,
+.sapphire-icon-button--secondary:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-focus
+    --sapphire-semantic-color-background-action-secondary-default
   );
 }
 
-.sapphire-icon-button--secondary-fill:not(:disabled):not(
-    .is-disabled
-  ).is-active,
-.sapphire-icon-button--secondary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-icon-button--secondary-fill:not(:disabled):not(
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--secondary:not(:disabled):not(
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-active
-  );
-  color: var(--sapphire-icon-button-color-content-secondary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-surface-secondary-default
-  );
-}
-
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-surface-secondary-hover
-  );
-}
-
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-surface-secondary-focus
-  );
-}
-
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--secondary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-icon-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-icon-button--secondary-ghost {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-default
+    --sapphire-semantic-color-background-action-secondary-ghost-default
   );
-  color: var(--sapphire-icon-button-color-content-secondary-default);
+  color: var(--sapphire-semantic-color-content-action-secondary-default);
 }
 
 .sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
@@ -213,15 +174,15 @@ a.sapphire-icon-button {
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-hover
+    --sapphire-semantic-color-background-action-secondary-ghost-hover
   );
-  color: var(--sapphire-icon-button-color-content-secondary-hover);
+  color: var(--sapphire-semantic-color-content-action-secondary-hover);
 }
 
 .sapphire-icon-button--secondary-ghost.is-focus,
 .sapphire-icon-button--secondary-ghost:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-focus
+    --sapphire-semantic-color-background-action-secondary-ghost-default
   );
 }
 
@@ -233,136 +194,56 @@ a.sapphire-icon-button {
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-active
-  );
-  color: var(--sapphire-icon-button-color-content-secondary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-icon-button-color-background-secondary-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--secondary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-icon-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);
 }
 
 /* ### Variant: Tertiary */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-icon-button--tertiary-fill {
+.sapphire-icon-button--tertiary {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-default
+    --sapphire-semantic-color-background-action-tertiary-default
   );
-  color: var(--sapphire-icon-button-color-content-tertiary-default);
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
 }
 
-.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
+.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(
     :active
   ):not(.is-active).is-hover {
-  background-color: var(--sapphire-icon-button-color-background-tertiary-hover);
-  color: var(--sapphire-icon-button-color-content-tertiary-hover);
-}
-
-.sapphire-icon-button--tertiary-fill.is-focus,
-.sapphire-icon-button--tertiary-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-icon-button-color-background-tertiary-focus);
-}
-
-.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-icon-button--tertiary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-icon-button--tertiary-fill:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(
-    --sapphire-icon-button-color-background-tertiary-active
-  );
-  color: var(--sapphire-icon-button-color-content-tertiary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface {
-  background-color: var(
-    --sapphire-icon-button-color-background-tertiary-surface-secondary-default
-  );
-}
-
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-surface-secondary-hover
+    --sapphire-semantic-color-background-action-tertiary-hover
   );
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
 }
 
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
+.sapphire-icon-button--tertiary.is-focus,
+.sapphire-icon-button--tertiary:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-surface-secondary-focus
+    --sapphire-semantic-color-background-action-tertiary-default
   );
 }
 
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--tertiary-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
+.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--tertiary:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-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-icon-button--tertiary-ghost {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-default
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
   );
-  color: var(--sapphire-icon-button-color-content-tertiary-default);
+  color: var(--sapphire-semantic-color-content-action-tertiary-default);
 }
 
 .sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
@@ -372,15 +253,15 @@ a.sapphire-icon-button {
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-hover
+    --sapphire-semantic-color-background-action-tertiary-ghost-hover
   );
-  color: var(--sapphire-icon-button-color-content-tertiary-hover);
+  color: var(--sapphire-semantic-color-content-action-tertiary-hover);
 }
 
 .sapphire-icon-button--tertiary-ghost.is-focus,
 .sapphire-icon-button--tertiary-ghost:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-focus
+    --sapphire-semantic-color-background-action-tertiary-ghost-default
   );
 }
 
@@ -392,132 +273,56 @@ a.sapphire-icon-button {
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-active
-  );
-  color: var(--sapphire-icon-button-color-content-tertiary-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface {
-  background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-icon-button-color-background-tertiary-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--tertiary-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-icon-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);
 }
 
 /* ### Variant: Danger */
 /* ## Style: Default */
-/* # Surface: Primary */
-.sapphire-icon-button--danger-fill {
-  background-color: var(--sapphire-icon-button-color-background-danger-default);
-  color: var(--sapphire-icon-button-color-content-danger-default);
-}
-
-.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):not(
-    :active
-  ):not(.is-active).is-hover {
-  background-color: var(--sapphire-icon-button-color-background-danger-hover);
-  color: var(--sapphire-icon-button-color-content-danger-hover);
-}
-
-.sapphire-icon-button--danger-fill.is-focus,
-.sapphire-icon-button--danger-fill:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-icon-button-color-background-danger-focus);
-}
-
-.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled).is-active,
-.sapphire-icon-button--danger-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-icon-button--danger-fill:not(:disabled):not(
-    .is-disabled
-  ):focus-visible:active {
-  background-color: var(--sapphire-icon-button-color-background-danger-active);
-  color: var(--sapphire-icon-button-color-content-danger-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface {
+.sapphire-icon-button--danger {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-surface-secondary-default
+    --sapphire-semantic-color-background-action-danger-default
   );
+  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-surface-secondary-hover
+    --sapphire-semantic-color-background-action-danger-hover
   );
+  color: var(--sapphire-semantic-color-content-action-danger-hover);
 }
 
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
+.sapphire-icon-button--danger.is-focus,
+.sapphire-icon-button--danger:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-surface-secondary-focus
+    --sapphire-semantic-color-background-action-danger-default
   );
 }
 
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--danger-fill.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--danger:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-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-icon-button--danger-ghost {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-default
+    --sapphire-semantic-color-background-action-danger-ghost-default
   );
-  color: var(--sapphire-icon-button-color-content-danger-default);
+  color: var(--sapphire-semantic-color-content-action-danger-default);
 }
 
 .sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(
@@ -527,15 +332,15 @@ a.sapphire-icon-button {
     :active
   ):not(.is-active).is-hover {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-hover
+    --sapphire-semantic-color-background-action-danger-ghost-hover
   );
-  color: var(--sapphire-icon-button-color-content-danger-hover);
+  color: var(--sapphire-semantic-color-content-action-danger-hover);
 }
 
 .sapphire-icon-button--danger-ghost.is-focus,
 .sapphire-icon-button--danger-ghost:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-focus
+    --sapphire-semantic-color-background-action-danger-ghost-default
   );
 }
 
@@ -545,50 +350,9 @@ a.sapphire-icon-button {
     .is-disabled
   ):focus-visible:active {
   background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-active
-  );
-  color: var(--sapphire-icon-button-color-content-danger-active);
-}
-
-/* # Surface: Secondary */
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface {
-  background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-surface-secondary-default
-  );
-}
-
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-surface-secondary-hover
-  );
-}
-
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface.is-focus,
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    .js-focus
-  ):focus-visible {
-  background-color: var(
-    --sapphire-icon-button-color-background-danger-ghost-surface-secondary-focus
-  );
-}
-
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled).is-active,
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):active,
-.sapphire-icon-button--danger-ghost.sapphire-icon-button--secondary-surface:not(
-    :disabled
-  ):not(.is-disabled):focus-visible:active {
-  background-color: var(
-    --sapphire-icon-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);
 }
 
 /**
@@ -599,20 +363,20 @@ a.sapphire-icon-button {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-icon-button-size-icon-m);
-  width: var(--sapphire-icon-button-size-icon-m);
+  height: var(--sapphire-semantic-size-icon-md);
+  width: var(--sapphire-semantic-size-icon-md);
 }
-.sapphire-icon-button--large .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-l);
-  width: var(--sapphire-icon-button-size-icon-l);
+.sapphire-icon-button--lg .sapphire-icon-button__icon {
+  height: var(--sapphire-semantic-size-icon-lg);
+  width: var(--sapphire-semantic-size-icon-lg);
 }
-.sapphire-icon-button--small .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-s);
-  width: var(--sapphire-icon-button-size-icon-s);
+.sapphire-icon-button--sm .sapphire-icon-button__icon {
+  height: var(--sapphire-semantic-size-icon-sm);
+  width: var(--sapphire-semantic-size-icon-sm);
 }
-.sapphire-icon-button--extra-small .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-xs);
-  width: var(--sapphire-icon-button-size-icon-xs);
+.sapphire-icon-button--xs .sapphire-icon-button__icon {
+  height: var(--sapphire-semantic-size-icon-sm);
+  width: var(--sapphire-semantic-size-icon-sm);
 }
 
 /**
@@ -621,29 +385,29 @@ a.sapphire-icon-button {
 /**
  * LARGE
  */
-.sapphire-icon-button--large {
-  height: var(--sapphire-icon-button-size-height-l);
-  width: var(--sapphire-icon-button-size-width-l);
-  border-radius: var(--sapphire-icon-button-size-radius-l);
-  font-size: var(--sapphire-icon-button-size-font-l);
+.sapphire-icon-button--lg {
+  height: var(--sapphire-semantic-size-height-control-lg);
+  width: var(--sapphire-semantic-size-height-control-lg);
+  border-radius: var(--sapphire-semantic-size-height-control-lg);
+  font-size: var(--sapphire-semantic-size-font-control-default);
 }
 
 /**
  * SMALL
  */
-.sapphire-icon-button--small {
-  height: var(--sapphire-icon-button-size-height-s);
-  width: var(--sapphire-icon-button-size-width-s);
-  border-radius: var(--sapphire-icon-button-size-radius-s);
-  font-size: var(--sapphire-icon-button-size-font-s);
+.sapphire-icon-button--sm {
+  height: var(--sapphire-semantic-size-height-control-sm);
+  width: var(--sapphire-semantic-size-height-control-sm);
+  border-radius: var(--sapphire-semantic-size-height-control-sm);
+  font-size: var(--sapphire-semantic-size-font-control-sm);
 }
 
 /**
  * EXTRA SMALL
  */
-.sapphire-icon-button--extra-small {
-  height: var(--sapphire-icon-button-size-height-xs);
-  width: var(--sapphire-icon-button-size-width-xs);
-  border-radius: var(--sapphire-icon-button-size-radius-xs);
-  font-size: var(--sapphire-icon-button-size-font-xs);
+.sapphire-icon-button--xs {
+  height: var(--sapphire-semantic-size-height-control-xs);
+  width: var(--sapphire-semantic-size-height-control-xs);
+  border-radius: var(--sapphire-semantic-size-height-control-xs);
+  font-size: var(--sapphire-semantic-size-font-control-sm);
 }