@danske/sapphire-css 16.3.0 → 26.1.0

package/components/iconButton/iconButton.module.css

@@ -27,12 +27,12 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* sizing */
-  height: var(--sapphire-icon-button-size-height-medium);
-  width: var(--sapphire-icon-button-size-width-medium);
+  height: var(--sapphire-icon-button-size-height-m);
+  width: var(--sapphire-icon-button-size-width-m);
   flex-shrink: 0; /* When part of flex layout the button will otherwise be squashed */
 
   /* shape */
-  border-radius: var(--sapphire-icon-button-size-radius-medium);
+  border-radius: var(--sapphire-icon-button-size-radius-m);
   border-style: solid;
   border-width: 0;
   border-color: transparent;
@@ -49,7 +49,7 @@ a.sapphire-icon-button {
   text-decoration: none;
 }
 
-/* Diasbled state for all variants */
+/* Disabled state for all variants */
 .sapphire-icon-button:disabled,
 .sapphire-icon-button.is-disabled {
   opacity: var(--sapphire-icon-button-opacity-disabled);
@@ -70,106 +70,392 @@ a.sapphire-icon-button {
 /**
  * Skin rules
  */
-/* primary */
-.sapphire-icon-button--primary {
+
+/* ### Variant: Primary */
+/* ## Style: Default */
+.sapphire-icon-button--primary-fill {
   background-color: var(
     --sapphire-icon-button-color-background-primary-default
   );
   color: var(--sapphire-icon-button-color-content-primary-default);
 }
-.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-icon-button--primary-fill: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(:active):not(.is-active).is-hover {
   background-color: var(--sapphire-icon-button-color-background-primary-hover);
-  color: var(--sapphire-icon-button-color-content-primary-hover);
 }
-.sapphire-icon-button--primary.is-focus,
-.sapphire-icon-button--primary:not(.js-focus):focus-visible {
+.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);
-  color: var(--sapphire-icon-button-color-content-primary-focus);
 }
-.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 {
+.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(.is-disabled):focus-visible:active {
   background-color: var(--sapphire-icon-button-color-background-primary-active);
-  color: var(--sapphire-icon-button-color-content-primary-active);
 }
 
-/* secondary */
-.sapphire-icon-button--secondary {
+/* ### Variant: Secondary */
+/* ## Style: Default */
+/* # Surface: Primary */
+.sapphire-icon-button--secondary-fill {
   background-color: var(
     --sapphire-icon-button-color-background-secondary-default
   );
   color: var(--sapphire-icon-button-color-content-secondary-default);
 }
-.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+
+.sapphire-icon-button--secondary-fill: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(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-icon-button-color-background-secondary-hover
   );
   color: var(--sapphire-icon-button-color-content-secondary-hover);
 }
-.sapphire-icon-button--secondary.is-focus,
-.sapphire-icon-button--secondary:not(.js-focus):focus-visible {
+
+.sapphire-icon-button--secondary-fill.is-focus,
+.sapphire-icon-button--secondary-fill:not(.js-focus):focus-visible {
   background-color: var(
     --sapphire-icon-button-color-background-secondary-focus
   );
-  color: var(--sapphire-icon-button-color-content-secondary-focus);
 }
-.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 {
+
+.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(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-icon-button-color-background-secondary-active
   );
   color: var(--sapphire-icon-button-color-content-secondary-active);
 }
 
-/* neutral */
-.sapphire-icon-button--neutral {
+/* # 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
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-icon-button--secondary-ghost {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-ghost-default
+  );
+  color: var(--sapphire-icon-button-color-content-secondary-default);
+}
+
+.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-icon-button-color-background-secondary-ghost-hover
+  );
+  color: var(--sapphire-icon-button-color-content-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-icon-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--secondary-ghost:not(:disabled):not(.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
+  );
+}
+
+/* ### Variant: Tertiary */
+/* ## Style: Default */
+/* # Surface: Primary */
+.sapphire-icon-button--tertiary-fill {
+  background-color: var(
+    --sapphire-icon-button-color-background-tertiary-default
+  );
+  color: var(--sapphire-icon-button-color-content-tertiary-default);
+}
+
+.sapphire-icon-button--tertiary-fill: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(: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-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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-tertiary-surface-secondary-focus
+  );
+}
+
+.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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-tertiary-surface-secondary-active
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-icon-button--tertiary-ghost {
   background-color: var(
-    --sapphire-icon-button-color-background-neutral-default
+    --sapphire-icon-button-color-background-tertiary-ghost-default
   );
-  color: var(--sapphire-icon-button-color-content-neutral-default);
+  color: var(--sapphire-icon-button-color-content-tertiary-default);
 }
-.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
-  background-color: var(--sapphire-icon-button-color-background-neutral-hover);
-  color: var(--sapphire-icon-button-color-content-neutral-hover);
+
+.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-icon-button-color-background-tertiary-ghost-hover
+  );
+  color: var(--sapphire-icon-button-color-content-tertiary-hover);
 }
-.sapphire-icon-button--neutral.is-focus,
-.sapphire-icon-button--neutral:not(.js-focus):focus-visible {
-  background-color: var(--sapphire-icon-button-color-background-neutral-focus);
-  color: var(--sapphire-icon-button-color-content-neutral-focus);
+
+.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-icon-button--neutral:not(:disabled):not(.is-disabled).is-active,
-.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-icon-button--neutral:not(:disabled):not(.is-disabled):active {
-  background-color: var(--sapphire-icon-button-color-background-neutral-active);
-  color: var(--sapphire-icon-button-color-content-neutral-active);
+
+.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--tertiary-ghost:not(:disabled):not(.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);
 }
 
-/* danger */
-.sapphire-icon-button--danger {
+/* # 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
+  );
+}
+
+/* ### 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: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 {
+
+.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.is-focus,
-.sapphire-icon-button--danger:not(.js-focus):focus-visible {
+
+.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);
-  color: var(--sapphire-icon-button-color-content-danger-focus);
 }
-.sapphire-icon-button--danger:not(:disabled):not(.is-disabled).is-active,
-.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active {
+
+.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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-surface-secondary-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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-surface-secondary-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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-surface-secondary-focus
+  );
+}
+
+.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 {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-surface-secondary-active
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-icon-button--danger-ghost {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-ghost-default
+  );
+  color: var(--sapphire-icon-button-color-content-danger-default);
+}
+
+.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-icon-button-color-background-danger-ghost-hover
+  );
+  color: var(--sapphire-icon-button-color-content-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-icon-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-icon-button--danger-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-icon-button--danger-ghost:not(:disabled):not(.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-button-color-background-danger-ghost-surface-secondary-active
+  );
+}
+
 /**
  * Icon
  */
@@ -178,20 +464,20 @@ a.sapphire-icon-button {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-icon-button-size-icon-medium);
-  width: var(--sapphire-icon-button-size-icon-medium);
+  height: var(--sapphire-icon-button-size-icon-m);
+  width: var(--sapphire-icon-button-size-icon-m);
 }
 .sapphire-icon-button--large .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-large);
-  width: var(--sapphire-icon-button-size-icon-large);
+  height: var(--sapphire-icon-button-size-icon-l);
+  width: var(--sapphire-icon-button-size-icon-l);
 }
 .sapphire-icon-button--small .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-small);
-  width: var(--sapphire-icon-button-size-icon-small);
+  height: var(--sapphire-icon-button-size-icon-s);
+  width: var(--sapphire-icon-button-size-icon-s);
 }
 .sapphire-icon-button--extra-small .sapphire-icon-button__icon {
-  height: var(--sapphire-icon-button-size-icon-extra-small);
-  width: var(--sapphire-icon-button-size-icon-extra-small);
+  height: var(--sapphire-icon-button-size-icon-xs);
+  width: var(--sapphire-icon-button-size-icon-xs);
 }
 
 /**
@@ -201,25 +487,25 @@ a.sapphire-icon-button {
  * LARGE
  */
 .sapphire-icon-button--large {
-  height: var(--sapphire-icon-button-size-height-large);
-  width: var(--sapphire-icon-button-size-width-large);
-  border-radius: var(--sapphire-icon-button-size-radius-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);
 }
 
 /**
  * SMALL
  */
 .sapphire-icon-button--small {
-  height: var(--sapphire-icon-button-size-height-small);
-  width: var(--sapphire-icon-button-size-width-small);
-  border-radius: var(--sapphire-icon-button-size-radius-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);
 }
 
 /**
  * EXTRA SMALL
  */
 .sapphire-icon-button--extra-small {
-  height: var(--sapphire-icon-button-size-height-extra-small);
-  width: var(--sapphire-icon-button-size-width-extra-small);
-  border-radius: var(--sapphire-icon-button-size-radius-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);
 }

package/components/iconButton/iconButton.module.css.d.ts

@@ -3,13 +3,17 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
-  readonly "sapphire-icon-button--primary": string;
+  readonly "sapphire-icon-button--primary-fill": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-icon-button--secondary": string;
-  readonly "sapphire-icon-button--neutral": string;
-  readonly "sapphire-icon-button--danger": string;
+  readonly "sapphire-icon-button--secondary-fill": string;
+  readonly "sapphire-icon-button--secondary-surface": string;
+  readonly "sapphire-icon-button--secondary-ghost": string;
+  readonly "sapphire-icon-button--tertiary-fill": string;
+  readonly "sapphire-icon-button--tertiary-ghost": string;
+  readonly "sapphire-icon-button--danger-fill": string;
+  readonly "sapphire-icon-button--danger-ghost": string;
   readonly "sapphire-icon-button__icon": string;
   readonly "sapphire-icon-button--large": string;
   readonly "sapphire-icon-button--small": string;

package/components/label/label.module.css

@@ -0,0 +1,29 @@
+.sapphire-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--sapphire-label-size-height-l);
+  line-height: var(--sapphire-label-size-line-height-l);
+  font-size: var(--sapphire-label-size-font-l);
+  gap: var(--sapphire-label-size-spacing-horizontal);
+}
+
+.sapphire-label--medium {
+  line-height: var(--sapphire-label-size-line-height-m);
+  font-size: var(--sapphire-label-size-font-m);
+  min-height: var(--sapphire-label-size-height-m);
+}
+
+.sapphire-label__text {
+  font-weight: var(--sapphire-label-size-font-weight);
+  color: var(--sapphire-label-color-text);
+}
+
+.sapphire-label__required-indicator {
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A");
+  width: 8px; /* Hard coded, since it's linked to the svg above */
+  height: 8px; /* Hard coded, since it's linked to the svg above */
+}
+
+.sapphire-label__optional-indicator {
+  color: var(--sapphire-label-color-necessity-indicator);
+}