@danske/sapphire-css 16.3.0 → 25.1.0

package/components/button/button.module.css

@@ -17,7 +17,7 @@
   /* typography */
   font-family: var(--sapphire-button-font-name);
   font-weight: var(--sapphire-button-font-weight);
-  font-size: var(--sapphire-button-size-font-medium);
+  font-size: var(--sapphire-button-size-font-m);
   text-transform: var(--sapphire-button-font-text-transform);
   letter-spacing: var(--sapphire-button-font-letter-spacing);
 
@@ -36,13 +36,14 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* sizing */
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-medium);
-  height: var(--sapphire-button-size-height-default-medium);
-  min-width: var(--sapphire-button-size-min-width-no-icon-medium);
+  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);
+  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-medium);
+  border-radius: var(--sapphire-button-size-radius-m);
   border-style: solid;
   border-width: 0;
   border-color: transparent;
@@ -59,7 +60,7 @@ a.sapphire-button {
   text-decoration: none;
 }
 
-/* Diasbled state for all variants */
+/* Disabled state for all variants */
 .sapphire-button:disabled,
 .sapphire-button.is-disabled {
   opacity: var(--sapphire-button-opacity-disabled);
@@ -94,101 +95,427 @@ a.sapphire-button {
 /**
  * Skin rules
  */
-/* primary */
-.sapphire-button--primary {
+
+/* ### 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: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 {
+.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.is-focus,
-.sapphire-button--primary:not(.js-focus):focus-visible {
+.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: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 {
+.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(.is-disabled):focus-visible:active {
   background-color: var(--sapphire-button-color-background-primary-active);
 }
 
-/* secondary */
-.sapphire-button--secondary {
+/* ### 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: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 {
+
+.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.is-focus,
-.sapphire-button--secondary:not(.js-focus):focus-visible {
+
+.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: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 {
+
+.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);
 }
 
-/* dangerSecondary */
-.sapphire-button--dangerSecondary {
+/* # Surface: Secondary */
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface {
   background-color: var(
-    --sapphire-button-color-background-danger-secondary-default
+    --sapphire-button-color-background-secondary-surface-secondary-default
   );
-  color: var(--sapphire-button-color-content-danger-secondary-default);
 }
-.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+
+.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 {
   background-color: var(
-    --sapphire-button-color-background-danger-secondary-hover
+    --sapphire-button-color-background-secondary-surface-secondary-hover
   );
 }
-.sapphire-button--dangerSecondary.is-focus,
-.sapphire-button--dangerSecondary:not(.js-focus):focus-visible {
+
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-button-color-background-danger-secondary-focus
+    --sapphire-button-color-background-secondary-surface-secondary-focus
   );
 }
-.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-button--dangerSecondary:not(:disabled):not(.is-disabled):active {
+
+.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 {
+  background-color: var(
+    --sapphire-button-color-background-secondary-surface-secondary-active
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-button--secondary-ghost {
+  background-color: var(
+    --sapphire-button-color-background-secondary-ghost-default
+  );
+  color: var(--sapphire-button-color-content-secondary-default);
+}
+
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-button-color-background-secondary-ghost-hover
+  );
+  color: var(--sapphire-button-color-content-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-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(
+    --sapphire-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-danger-secondary-active
+    --sapphire-button-color-background-secondary-ghost-surface-secondary-active
   );
-  color: var(--sapphire-button-color-content-danger-secondary-active);
 }
 
-/* tertiary */
-.sapphire-button--tertiary {
-  border-radius: var(--sapphire-button-size-radius-tertiary);
-  padding-right: var(--sapphire-button-size-spacing-horizontal-tertiary);
-  padding-left: var(--sapphire-button-size-spacing-horizontal-tertiary);
+/* ## 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);
+  padding: 0;
+}
+
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-button-color-content-secondary-hover);
+}
+
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active {
+  color: var(--sapphire-button-color-content-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:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active {
+
+.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);
 }
 
-/* dangerTertiary */
-.sapphire-button--dangerTertiary {
-  border-radius: var(--sapphire-button-size-radius-tertiary);
-  padding-right: var(--sapphire-button-size-spacing-horizontal-danger-tertiary);
-  padding-left: var(--sapphire-button-size-spacing-horizontal-danger-tertiary);
+/* # Surface: Secondary */
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface {
+  background-color: var(
+    --sapphire-button-color-background-tertiary-surface-secondary-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 {
+  background-color: var(
+    --sapphire-button-color-background-tertiary-surface-secondary-hover
+  );
+}
+
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
   background-color: var(
-    --sapphire-button-color-background-danger-tertiary-default
+    --sapphire-button-color-background-tertiary-surface-secondary-focus
   );
-  color: var(--sapphire-button-color-content-danger-tertiary-default);
 }
-.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled):focus-visible:active,
-.sapphire-button--dangerTertiary:not(:disabled):not(.is-disabled):active {
-  color: var(--sapphire-button-color-content-danger-tertiary-active);
+
+.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 {
+  background-color: var(
+    --sapphire-button-color-background-tertiary-surface-secondary-active
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-button--tertiary-ghost {
+  background-color: var(
+    --sapphire-button-color-background-tertiary-ghost-default
+  );
+  color: var(--sapphire-button-color-content-tertiary-default);
+}
+
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  background-color: var(
+    --sapphire-button-color-background-tertiary-ghost-hover
+  );
+  color: var(--sapphire-button-color-content-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-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
+  background-color: var(
+    --sapphire-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
+  );
+}
+
+/* ## 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);
+  padding: 0;
+}
+
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-button-color-content-tertiary-hover);
+}
+
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active {
+  color: var(--sapphire-button-color-content-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-fill: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(.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-button--danger-fill.sapphire-button--secondary-surface.is-focus,
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+  background-color: var(
+    --sapphire-button-color-background-danger-surface-secondary-focus
+  );
+}
+
+.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 {
+  background-color: var(
+    --sapphire-button-color-background-danger-surface-secondary-active
+  );
+}
+
+/* ## Style: Ghost */
+/* # Surface: Primary */
+.sapphire-button--danger-ghost {
+  background-color: var(
+    --sapphire-button-color-background-danger-ghost-default
+  );
+  color: var(--sapphire-button-color-content-danger-default);
+}
+
+.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.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);
+}
+
+.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);
+}
+
+.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,
+.sapphire-button--danger-ghost:not(:disabled):not(.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
+  );
+}
+
+/* ## 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);
+  padding: 0;
+}
+
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+  color: var(--sapphire-button-color-content-danger-hover);
+}
+
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active {
+  color: var(--sapphire-button-color-content-danger-active);
 }
 
 /**
@@ -240,16 +567,16 @@ a.sapphire-button {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-button-size-icon-medium);
-  width: var(--sapphire-button-size-icon-medium);
+  height: var(--sapphire-button-size-icon-m);
+  width: var(--sapphire-button-size-icon-m);
 }
 .sapphire-button--large .sapphire-button__icon {
-  height: var(--sapphire-button-size-icon-large);
-  width: var(--sapphire-button-size-icon-large);
+  height: var(--sapphire-button-size-icon-l);
+  width: var(--sapphire-button-size-icon-l);
 }
 .sapphire-button--small .sapphire-button__icon {
-  height: var(--sapphire-button-size-icon-small);
-  width: var(--sapphire-button-size-icon-small);
+  height: var(--sapphire-button-size-icon-s);
+  width: var(--sapphire-button-size-icon-s);
 }
 
 /**
@@ -259,20 +586,20 @@ a.sapphire-button {
  * LARGE
  */
 .sapphire-button--large {
-  height: var(--sapphire-button-size-height-default-large);
-  min-width: var(--sapphire-button-size-min-width-no-icon-large);
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-large);
-  font-size: var(--sapphire-button-size-font-large);
-  border-radius: var(--sapphire-button-size-radius-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);
 }
 
 /**
  * SMALL
  */
 .sapphire-button--small {
-  height: var(--sapphire-button-size-height-default-small);
-  min-width: var(--sapphire-button-size-min-width-no-icon-small);
-  padding: 0 var(--sapphire-button-size-spacing-horizontal-small);
-  font-size: var(--sapphire-button-size-font-small);
-  border-radius: var(--sapphire-button-size-radius-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);
 }

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

@@ -6,14 +6,20 @@ declare const styles: {
   readonly "sapphire-button--with-left-icon": string;
   readonly "sapphire-button--with-right-icon": string;
   readonly "sapphire-button__icon": string;
-  readonly "sapphire-button--primary": string;
+  readonly "sapphire-button--primary-fill": string;
   readonly "is-active": string;
   readonly "js-hover": string;
   readonly "is-hover": string;
-  readonly "sapphire-button--secondary": string;
-  readonly "sapphire-button--dangerSecondary": string;
-  readonly "sapphire-button--tertiary": string;
-  readonly "sapphire-button--dangerTertiary": string;
+  readonly "sapphire-button--secondary-fill": string;
+  readonly "sapphire-button--secondary-surface": string;
+  readonly "sapphire-button--secondary-ghost": string;
+  readonly "sapphire-button--secondary-text": string;
+  readonly "sapphire-button--tertiary-fill": string;
+  readonly "sapphire-button--tertiary-ghost": string;
+  readonly "sapphire-button--tertiary-text": string;
+  readonly "sapphire-button--danger-fill": string;
+  readonly "sapphire-button--danger-ghost": string;
+  readonly "sapphire-button--danger-text": string;
   readonly "sapphire-button--selected": string;
   readonly "sapphire-button--unselected": string;
   readonly "sapphire-button--large": string;

package/components/buttonGroup/buttonGroup.module.css

@@ -1,14 +1,14 @@
 .sapphire-button-group {
   display: flex;
-  gap: var(--sapphire-button-group-size-spacing-large);
+  gap: var(--sapphire-button-group-size-spacing-m);
 }
 
-.sapphire-button-group--normal {
-  gap: var(--sapphire-button-group-size-spacing-medium);
+.sapphire-button-group--large {
+  gap: var(--sapphire-button-group-size-spacing-l);
 }
 
 .sapphire-button-group--dense {
-  gap: var(--sapphire-button-group-size-spacing-small);
+  gap: var(--sapphire-button-group-size-spacing-s);
 }
 
 .sapphire-button-group--align-center {
@@ -22,3 +22,19 @@
 .sapphire-button-group--align-left {
   justify-content: flex-start;
 }
+
+.sapphire-button-group--vertical {
+  flex-direction: column;
+}
+
+.sapphire-button-group--vertical.sapphire-button-group--align-center {
+  align-items: center;
+}
+
+.sapphire-button-group--vertical.sapphire-button-group--align-right {
+  align-items: flex-end;
+}
+
+.sapphire-button-group--vertical.sapphire-button-group--align-left {
+  align-items: flex-start;
+}

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

@@ -1,10 +1,11 @@
 declare const styles: {
   readonly "sapphire-button-group": string;
-  readonly "sapphire-button-group--normal": string;
+  readonly "sapphire-button-group--large": string;
   readonly "sapphire-button-group--dense": string;
   readonly "sapphire-button-group--align-center": string;
   readonly "sapphire-button-group--align-right": string;
   readonly "sapphire-button-group--align-left": string;
+  readonly "sapphire-button-group--vertical": string;
 };
 export = styles;