@danske/sapphire-css 16.3.0 → 25.1.0

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

@@ -2,7 +2,6 @@ declare const styles: {
   readonly "sapphire-field": string;
   readonly "sapphire-field__label": string;
   readonly "sapphire-field__control": string;
-  readonly "sapphire-field__control--group": string;
   readonly "sapphire-field--no-shrink": string;
   readonly "sapphire-field__message": string;
   readonly "sapphire-field__note-row": string;

package/components/fieldGroup/fieldGroup.module.css

@@ -1,64 +1,18 @@
-.sapphire-fieldGroup-label-container {
-  /* 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
-   * occurs for bold fonts on dark backgrounds but depending on the font, it
-   * can happen in other contexts as well.
-   *
-   * These do not do anything except in webkit browsers & firefox on OSX.
-   *
-   * For more details see:
-   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
-   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
-   */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-field-group-size-spacing-heading-horizontal);
-  margin-bottom: var(--sapphire-field-group-size-spacing-heading-vertical);
-}
-
-.sapphire-fieldGroup-label-text {
-  font-family: var(--sapphire-field-group-font-heading-name);
-  font-weight: var(--sapphire-field-group-font-heading-weight);
-  font-size: var(--sapphire-field-group-size-font-default);
-  line-height: var(--sapphire-field-group-size-line-height);
-  color: var(--sapphire-field-group-color-label);
-}
-
-.sapphire-fieldGroup-label-text--disabled {
-  opacity: var(--sapphire-radio-opacity-disabled);
-}
-
-.sapphire-fieldGroup-content {
+.sapphire-field-group {
   display: flex;
-}
-
-.sapphire-fieldGroup-content--horizontal {
-  flex-direction: row;
   flex-wrap: wrap;
+  column-gap: var(--sapphire-field-group-size-spacing-field-horizontal);
+  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-l);
 }
 
-.sapphire-fieldGroup-content--horizontal
-  .sapphire-fieldGroup-field:not(:last-child) {
-  margin-right: var(--sapphire-field-group-size-spacing-field-horizontal);
+.sapphire-field-group--horizontal {
+  flex-direction: row;
 }
 
-.sapphire-fieldGroup-content--vertical {
+.sapphire-field-group--vertical {
   flex-direction: column;
 }
 
-.sapphire-fieldGroup-content--vertical
-  .sapphire-fieldGroup-field:not(:last-child) {
-  margin-bottom: var(--sapphire-field-group-size-spacing-field-vertical);
-}
-
-.sapphire-fieldGroup-error-text {
-  display: block;
-  font-family: var(--sapphire-field-group-font-heading-name);
-  font-weight: var(--sapphire-field-group-font-error-text-weight);
-  font-size: var(--sapphire-field-group-size-font-error-text);
-  margin-top: var(--sapphire-field-group-size-spacing-error-text-vertical);
-  color: var(--sapphire-field-group-color-error-text);
+.sapphire-field-group--medium {
+  row-gap: var(--sapphire-field-group-size-spacing-field-vertical-m);
 }

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

@@ -1,12 +1,8 @@
 declare const styles: {
-  readonly "sapphire-fieldGroup-label-container": string;
-  readonly "sapphire-fieldGroup-label-text": string;
-  readonly "sapphire-fieldGroup-label-text--disabled": string;
-  readonly "sapphire-fieldGroup-content": string;
-  readonly "sapphire-fieldGroup-content--horizontal": string;
-  readonly "sapphire-fieldGroup-field": string;
-  readonly "sapphire-fieldGroup-content--vertical": string;
-  readonly "sapphire-fieldGroup-error-text": string;
+  readonly "sapphire-field-group": string;
+  readonly "sapphire-field-group--horizontal": string;
+  readonly "sapphire-field-group--vertical": string;
+  readonly "sapphire-field-group--medium": string;
 };
 export = styles;
 

package/components/icon/icon.module.css

@@ -1,14 +1,19 @@
 .sapphire-icon.sapphire-icon--small {
-  height: var(--sapphire-icon-size-small);
-  width: var(--sapphire-icon-size-small);
+  height: var(--sapphire-icon-size-s);
+  width: var(--sapphire-icon-size-s);
 }
 
 .sapphire-icon.sapphire-icon--medium {
-  height: var(--sapphire-icon-size-medium);
-  width: var(--sapphire-icon-size-medium);
+  height: var(--sapphire-icon-size-m);
+  width: var(--sapphire-icon-size-m);
 }
 
 .sapphire-icon.sapphire-icon--large {
-  height: var(--sapphire-icon-size-large);
-  width: var(--sapphire-icon-size-large);
+  height: var(--sapphire-icon-size-l);
+  width: var(--sapphire-icon-size-l);
+}
+
+.sapphire-icon.sapphire-icon--extra-large {
+  height: var(--sapphire-icon-size-xl);
+  width: var(--sapphire-icon-size-xl);
 }

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

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-icon--small": string;
   readonly "sapphire-icon--medium": string;
   readonly "sapphire-icon--large": string;
+  readonly "sapphire-icon--extra-large": string;
 };
 export = styles;
 

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);
 }