@kofile/gds-foundations 1.2.2 → 1.4.0

package/build/css/components/button.module.css

@@ -1,15 +1,17 @@
+/************************/
+/*      BASE/LIGHT      */
+/************************/
+
 /* DEFAULT */
 .button {
   box-sizing: border-box;
-
-  border-start-start-radius: var(--button-size-xl-border-radius);
-  border-end-start-radius: var(--button-size-xl-border-radius);
-  border-start-end-radius: var(--button-size-xl-border-radius);
-  border-end-end-radius: var(--button-size-xl-border-radius);
-
+  border-start-start-radius: var(--border-radius-sm);
+  border-end-start-radius: var(--border-radius-sm);
+  border-start-end-radius: var(--border-radius-sm);
+  border-end-end-radius: var(--border-radius-sm);
   cursor: pointer;
   display: inline-flex;
-  gap: var(--button-size-xl-spacing);
+  gap: var(--spacing-2xs);
   align-items: center;
   font-family: var(--font-families-default);
   font-weight: var(--font-weights-semibold);
@@ -18,8 +20,7 @@
 
 /* FOCUS */
 .button:not(:disabled):focus-visible {
-  outline: var(--button-outline-primary-offset)
-    var(--button-outline-primary-style) var(--color-primary-700);
+  outline: var(--spacing-3xs) solid var(--color-primary-700);
   outline-offset: var(--spacing-3xs);
 }
 
@@ -31,167 +32,95 @@
 .button[data-background="solid"][data-variant="danger"]:disabled,
 .button[data-background="outlined"][data-variant="danger"]:disabled {
   cursor: not-allowed;
-  opacity: var(--button-opacity-disabled);
+  opacity: var(--opacity-disabled);
 }
 
-/* BACKGROUNDS */
+/* BACKGROUNDS - LIGHT MODE DEFAULTS */
 .button[data-background="solid"][data-variant="primary"] {
-  background-color: var(--button-light-color-background-solid-primary-default);
-  border-color: var(--button-light-color-border-solid-primary-default);
-  border-style: var(--button-size-xl-border-style);
-  border-width: var(--button-size-xl-border-width);
+  background-color: var(--color-primary-600);
+  border-color: var(--color-primary-700);
+  border-style: solid;
+  border-width: var(--border-width-sm);
   box-shadow: 0px -2px 1px 0px rgba(18, 18, 18, 0.12) inset,
     0px 1px 1px 0px rgba(255, 255, 255, 0.24) inset;
-
-  color: var(--button-light-color-text-solid-primary-default);
+  color: var(--color-neutral-lightest);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="solid"][data-variant="primary"][data-mode="dark"] {
-  background-color: var(--button-dark-color-background-solid-primary-default);
-  border-color: var(--button-dark-color-border-solid-primary-default);
-  color: var(--button-dark-color-text-solid-primary-default);
-}
-
 .button[data-background="solid"][data-variant="primary"]:not(:disabled):hover {
-  border-color: var(--button-light-color-border-solid-primary-hover);
-  background-color: var(--button-light-color-background-solid-primary-hover);
-}
-
-.button[data-background="solid"][data-variant="primary"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  border-color: var(--button-dark-color-border-solid-primary-hover);
-  background-color: var(--button-dark-color-background-solid-primary-hover);
+  border-color: var(--color-primary-900);
+  background-color: var(--color-primary-700);
 }
 
 .button[data-background="solid"][data-variant="primary"]:not(:disabled):active {
-  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16); /* Transitions styles aren't applied due to the inset shadow */
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
 }
 
 .button[data-background="outlined"][data-variant="primary"] {
-  border-color: var(--button-light-color-border-outlined-primary-default);
-  background-color: var(
-    --button-light-color-background-outlined-primary-default
-  );
-  border-style: var(--button-size-xl-border-style);
-  border-width: var(--button-size-xl-border-width);
-  color: var(--button-light-color-text-outlined-primary-default);
+  border-color: var(--color-primary-600);
+  background-color: var(--color-neutral-lightest);
+  border-style: solid;
+  border-width: var(--border-width-sm);
+  color: var(--color-primary-600);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="outlined"][data-variant="primary"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-outlined-primary-default);
-  background-color: var(
-    --button-dark-color-background-outlined-primary-default
-  );
-  color: var(--button-dark-color-text-outlined-primary-default);
-}
-
 .button[data-background="outlined"][data-variant="primary"]:not(
     :disabled
   ):hover {
-  background-color: var(--button-light-color-background-outlined-primary-hover);
-  border-color: var(--button-light-color-border-outlined-primary-hover);
-}
-
-.button[data-background="outlined"][data-variant="primary"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  background-color: var(--button-dark-color-background-outlined-primary-hover);
-  border-color: var(--button-dark-color-border-outlined-primary-hover);
+  background-color: var(--color-primary-100);
+  border-color: var(--color-primary-600);
 }
 
 .button[data-background="outlined"][data-variant="primary"]:not(
     :disabled
   ):active {
-  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16); /* Transitions styles aren't applied due to the inset shadow */
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
 }
 
 .button[data-background="transparent"][data-variant="primary"] {
-  background-color: var(--button-light-color-transparent-primary-default);
-  border-color: var(--button-light-color-border-transparent-primary-default);
-  color: var(--button-light-color-text-transparent-primary-default);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-primary-600);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="transparent"][data-variant="primary"][data-mode="dark"] {
-  background-color: var(--button-dark-color-transparent-primary-default);
-  border-color: var(--button-dark-color-border-transparent-primary-default);
-  color: var(--button-dark-color-text-transparent-primary-default);
-}
-
 .button[data-background="transparent"][data-variant="primary"]:not(
     :disabled
   ):hover {
-  border-color: var(--button-light-color-border-transparent-primary-hover);
-  background-color: var(
-    --button-light-color-background-transparent-primary-hover
-  );
-}
-
-.button[data-background="transparent"][data-variant="primary"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  border-color: var(--button-dark-color-border-transparent-primary-hover);
-  background-color: var(
-    --button-dark-color-background-transparent-primary-hover
-  );
+  border-color: var(--color-neutral-200-alpha);
+  background-color: var(--color-neutral-200-alpha);
 }
 
 .button[data-background="transparent"][data-variant="primary"]:not(
     :disabled
   ):active {
   box-shadow: none;
-  background-color: var(
-    --button-light-color-background-transparent-primary-active
-  );
-  border-color: var(--button-light-color-border-transparent-primary-active);
-}
-
-.button[data-background="transparent"][data-variant="primary"][data-mode="dark"]:not(
-    :disabled
-  ):active {
-  box-shadow: none;
-  background-color: var(
-    --button-dark-color-background-transparent-primary-active
-  );
+  background-color: var(--color-neutral-300-alpha);
+  border-color: var(--color-neutral-300-alpha);
 }
 
 .button[data-background="outlined"][data-variant="neutral"] {
-  border-color: var(--color-neutral-300);
-  border-style: var(--button-size-xl-border-style);
+  --gds-button-border-width-inline-start: var(--border-width-sm);
+
+  border-color: var(--color-neutral-500);
+  border-width: var(--border-width-sm);
+  border-inline-start-width: var(--gds-button-border-width-inline-start);
+  border-style: solid;
   box-shadow: none;
-  background-color: var(
-    --button-light-color-background-outlined-neutral-default
-  );
-  color: var(--button-light-color-text-outlined-neutral-default);
+  background-color: var(--color-neutral-lightest);
+  color: var(--color-neutral-darkest);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="outlined"][data-variant="neutral"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-outlined-neutral-default);
-  box-shadow: none;
-  background-color: var(
-    --button-dark-color-background-outlined-neutral-default
-  );
-  color: var(--button-dark-color-text-outlined-neutral-default);
-}
-
 .button[data-background="outlined"][data-variant="neutral"]:not(
     :disabled
   ):hover {
-  background-color: var(--button-light-color-background-outlined-neutral-hover);
-}
-
-.button[data-background="outlined"][data-variant="neutral"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  background-color: var(--button-dark-color-background-outlined-neutral-hover);
+  background-color: var(--color-neutral-200-alpha);
 }
 
 .button[data-background="outlined"][data-variant="neutral"]:not(
@@ -201,184 +130,104 @@
 }
 
 .button[data-background="transparent"][data-variant="neutral"] {
-  border-style: var(--button-size-xl-border-style);
+  border-style: solid;
   box-shadow: none;
-  border-color: var(--button-light-color-border-transparent-neutral-default);
-  background-color: var(
-    --button-light-color-background-transparent-neutral-default
-  );
-  color: var(--button-light-color-text-outlined-neutral-default);
-
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-neutral-darkest);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="transparent"][data-variant="neutral"][data-mode="dark"] {
-  border-style: var(--button-size-xl-border-style);
-  border-color: var(--button-dark-color-border-transparent-neutral-default);
-  background-color: var(
-    --button-dark-color-background-transparent-neutral-default
-  );
-  color: var(--button-dark-color-text-transparent-neutral-default);
-}
-
 .button[data-background="transparent"][data-variant="neutral"]:not(
     :disabled
   ):hover {
-  border-color: var(--button-light-color-border-transparent-neutral-hover);
-  background-color: var(
-    --button-light-color-background-transparent-neutral-hover
-  );
-}
-
-.button[data-background="transparent"][data-variant="neutral"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  border-color: var(--button-dark-color-border-transparent-neutral-hover);
-  background-color: var(
-    --button-dark-color-background-transparent-neutral-hover
-  );
+  border-color: transparent;
+  background-color: var(--color-neutral-200-alpha);
 }
 
 .button[data-background="transparent"][data-variant="neutral"]:not(
     :disabled
   ):active {
-  border-color: var(--button-light-color-border-transparent-neutral-active);
-  background-color: var(
-    --button-light-color-background-transparent-neutral-active
-  );
-}
-
-.button[data-background="transparent"][data-variant="neutral"][data-mode="dark"]:not(
-    :disabled
-  ):active {
-  box-shadow: none;
-  border-color: var(--button-dark-color-border-transparent-neutral-active);
-  background-color: var(
-    --button-dark-color-background-transparent-neutral-active
-  );
+  border-color: transparent;
+  background-color: var(--color-neutral-300-alpha);
 }
 
 .button[data-background="solid"][data-variant="danger"] {
-  border-style: var(--button-size-xl-border-style);
+  border-style: solid;
+  border-width: var(--border-width-sm);
   box-shadow: 0px -2px 1px 0px rgba(18, 18, 18, 0.12) inset,
     0px 1px 1px 0px rgba(255, 255, 255, 0.24) inset;
-
-  background-color: var(--button-light-color-background-solid-danger-default);
-  border-color: var(--button-light-color-border-solid-danger-default);
-  color: var(--button-light-color-text-solid-danger-default);
-
+  background-color: var(--color-danger-600);
+  border-color: var(--color-danger-600);
+  color: var(--color-neutral-lightest);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="solid"][data-variant="danger"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-solid-danger-default);
-  box-shadow: none;
-}
-
 .button[data-background="solid"][data-variant="danger"]:not(:disabled):hover {
-  border-color: var(--button-light-color-border-solid-danger-hover);
-  background-color: var(--button-light-color-background-solid-danger-hover);
-}
-
-.button[data-background="solid"][data-variant="danger"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  border-color: var(--button-dark-color-border-solid-danger-hover);
-  background-color: var(--button-dark-color-background-solid-danger-hover);
-  box-shadow: none;
+  border-color: var(--color-danger-700);
+  background-color: var(--color-danger-700);
 }
 
 .button[data-background="solid"][data-variant="danger"]:not(:disabled):active {
   box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
 }
 
-.button[data-background="solid"][data-variant="danger"][data-mode="dark"]:not(
-    :disabled
-  ):active {
-  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
-}
-
 .button[data-background="outlined"][data-variant="danger"] {
-  border-style: var(--button-size-xl-border-style);
-  background-color: var(
-    --button-light-color-background-outlined-danger-default
-  );
-  border-color: var(--button-light-color-border-outlined-danger-default);
-  color: var(--button-light-color-text-outlined-danger-default);
+  border-style: solid;
+  border-width: var(--border-width-sm);
+  background-color: var(--color-neutral-lightest);
+  border-color: var(--color-danger-600);
+  color: var(--color-danger-600);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
 }
 
-.button[data-background="outlined"][data-variant="danger"][data-mode="dark"] {
-  border-style: var(--button-size-xl-border-style);
-  border-color: var(--button-dark-color-border-outlined-danger-default);
-  box-shadow: none;
-  background-color: var(--button-dark-color-background-outlined-danger-default);
-  color: var(--button-dark-color-text-outlined-danger-default);
-}
-
 .button[data-background="outlined"][data-variant="danger"]:not(
     :disabled
   ):hover {
-  /* border-color: var(--color-danger-600); */
   background-color: var(--color-danger-100);
 }
 
-.button[data-background="outlined"][data-variant="danger"][data-mode="dark"]:not(
-    :disabled
-  ):hover {
-  box-shadow: none;
-  background-color: var(--color-danger-1000);
-  color: var(--color-danger-400);
-}
-
 .button[data-background="outlined"][data-variant="danger"]:not(
     :disabled
   ):active {
   box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
 }
 
-.button[data-background="outlined"][data-variant="danger"][data-mode="dark"]:not(
-    :disabled
-  ):active {
-  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
-}
-
 /* SIZES */
 .button[data-size="md"] {
   font-size: var(--font-size-2xs);
   letter-spacing: var(--letter-spacing-2xs);
   line-height: var(--line-heights-2xs);
-  height: var(--button-size-md-height);
-  padding-block-start: var(--button-size-md-padding-top);
-  padding-block-end: var(--button-size-md-padding-bottom);
-  padding-inline-start: var(--button-size-md-padding-left);
-  padding-inline-end: var(--button-size-md-padding-right);
+  height: var(--spacing-xl);
+  padding-block-start: var(--spacing-3xs);
+  padding-block-end: var(--spacing-3xs);
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-xs);
 }
 
 .button[data-size="lg"] {
   font-size: var(--font-size-sm);
   letter-spacing: var(--letter-spacing-sm);
   line-height: var(--line-heights-sm);
-  height: var(--button-size-lg-height);
-  padding-block-start: var(--button-size-lg-padding-top);
-  padding-block-end: var(--button-size-lg-padding-bottom);
-  padding-inline-start: var(--button-size-lg-padding-left);
-  padding-inline-end: var(--button-size-lg-padding-right);
+  height: var(--spacing-2xl);
+  padding-block-start: var(--primitive-6);
+  padding-block-end: var(--primitive-6);
+  padding-inline-start: var(--spacing-sm);
+  padding-inline-end: var(--spacing-sm);
 }
 
 .button[data-size="xl"] {
   font-size: var(--font-size-lg);
-  height: var(--button-size-xl-height);
+  height: var(--spacing-3xl);
   letter-spacing: var(--letter-spacing-lg);
   line-height: 22px; /* Custom line-height */
-  height: var(--button-size-xl-height);
-  padding-block-start: var(--button-size-xl-padding-top);
-  padding-block-end: var(--button-size-xl-padding-bottom);
-  padding-inline-start: var(--button-size-xl-padding-left);
-  padding-inline-end: var(--button-size-xl-padding-right);
+  padding-block-start: var(--spacing-sm);
+  padding-block-end: var(--spacing-sm);
+  padding-inline-start: var(--spacing-md);
+  padding-inline-end: var(--spacing-md);
 }
 
 /* SPACE */
@@ -402,3 +251,258 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
+
+/********************************************/
+/*   DARK MODE via PREFERS-COLOR-SCHEME     */
+/********************************************/
+/* @media (prefers-color-scheme: dark) {
+  .button[data-background="solid"][data-variant="primary"] {
+    background-color: var(--color-primary-600);
+    border-color: var(--color-primary-600);
+    color: var(--color-neutral-lightest);
+    box-shadow: none;
+  }
+  .button[data-background="solid"][data-variant="primary"]:not(
+      :disabled
+    ):hover {
+    border-color: var(--color-primary-700);
+    background-color: var(--color-primary-700);
+  }
+  .button[data-background="solid"][data-variant="primary"]:not(
+      :disabled
+    ):active {
+    box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+  }
+
+  .button[data-background="outlined"][data-variant="primary"] {
+    border-color: var(--color-primary-400);
+    background-color: var(--color-neutral-darkest);
+    color: var(--color-primary-400);
+  }
+  .button[data-background="outlined"][data-variant="primary"]:not(
+      :disabled
+    ):hover {
+    background-color: var(--color-primary-1000);
+    border-color: var(--color-primary-400);
+  }
+
+  .button[data-background="transparent"][data-variant="primary"] {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-400);
+  }
+  .button[data-background="transparent"][data-variant="primary"]:not(
+      :disabled
+    ):hover {
+    border-color: var(--color-neutral-900);
+    background-color: var(--color-neutral-900);
+  }
+  .button[data-background="transparent"][data-variant="primary"]:not(
+      :disabled
+    ):active {
+    background-color: var(--color-neutral-800);
+    border-color: var(--color-neutral-800);
+    box-shadow: none;
+  }
+
+  .button[data-background="outlined"][data-variant="neutral"] {
+    border-color: var(--color-neutral-600);
+    background-color: var(--color-neutral-darkest);
+    color: var(--color-neutral-lightest);
+    box-shadow: none;
+  }
+  .button[data-background="outlined"][data-variant="neutral"]:not(
+      :disabled
+    ):hover {
+    background-color: var(--color-neutral-900);
+  }
+  .button[data-background="outlined"][data-variant="neutral"]:not(
+      :disabled
+    ):active {
+    box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.16);
+  }
+
+  .button[data-background="transparent"][data-variant="neutral"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--color-neutral-lightest);
+    box-shadow: none;
+  }
+  .button[data-background="transparent"][data-variant="neutral"]:not(
+      :disabled
+    ):hover {
+    border-color: var(--color-neutral-900);
+    background-color: var(--color-neutral-900);
+  }
+  .button[data-background="transparent"][data-variant="neutral"]:not(
+      :disabled
+    ):active {
+    border-color: var(--color-neutral-800);
+    background-color: var(--color-neutral-800);
+    box-shadow: none;
+  }
+
+  .button[data-background="solid"][data-variant="danger"] {
+    border-color: var(--color-danger-600);
+    box-shadow: none;
+  }
+  .button[data-background="solid"][data-variant="danger"]:not(:disabled):hover {
+    border-color: var(--color-danger-700);
+    background-color: var(--color-danger-700);
+    box-shadow: none;
+  }
+  .button[data-background="solid"][data-variant="danger"]:not(
+      :disabled
+    ):active {
+    box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+  }
+
+  .button[data-background="outlined"][data-variant="danger"] {
+    border-color: var(--color-danger-400);
+    background-color: var(--color-neutral-darkest);
+    color: var(--color-danger-400);
+    box-shadow: none;
+  }
+  .button[data-background="outlined"][data-variant="danger"]:not(
+      :disabled
+    ):hover {
+    background-color: var(--color-danger-1000);
+    color: var(--color-danger-400);
+    box-shadow: none;
+  }
+  .button[data-background="outlined"][data-variant="danger"]:not(
+      :disabled
+    ):active {
+    box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+  }
+} */
+
+/********************************/
+/*   DARK MODE via DATA-MODE    */
+/********************************/
+.button[data-mode="dark"][data-background="solid"][data-variant="primary"] {
+  background-color: var(--color-primary-600);
+  border-color: var(--color-primary-600);
+  color: var(--color-neutral-lightest);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="solid"][data-variant="primary"]:not(
+    :disabled
+  ):hover {
+  border-color: var(--color-primary-700);
+  background-color: var(--color-primary-700);
+}
+.button[data-mode="dark"][data-background="solid"][data-variant="primary"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+}
+
+.button[data-mode="dark"][data-background="outlined"][data-variant="primary"] {
+  border-color: var(--color-primary-400);
+  background-color: var(--color-neutral-darkest);
+  color: var(--color-primary-400);
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="primary"]:not(
+    :disabled
+  ):hover {
+  background-color: var(--color-primary-1000);
+  border-color: var(--color-primary-400);
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="primary"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+}
+
+.button[data-mode="dark"][data-background="transparent"][data-variant="primary"] {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-primary-400);
+}
+.button[data-mode="dark"][data-background="transparent"][data-variant="primary"]:not(
+    :disabled
+  ):hover {
+  border-color: var(--color-neutral-900);
+  background-color: var(--color-neutral-900);
+}
+.button[data-mode="dark"][data-background="transparent"][data-variant="primary"]:not(
+    :disabled
+  ):active {
+  background-color: var(--color-neutral-800);
+  border-color: var(--color-neutral-800);
+  box-shadow: none;
+}
+
+.button[data-mode="dark"][data-background="outlined"][data-variant="neutral"] {
+  border-color: var(--color-neutral-600);
+  background-color: var(--color-neutral-darkest);
+  color: var(--color-neutral-lightest);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="neutral"]:not(
+    :disabled
+  ):hover {
+  background-color: var(--color-neutral-900);
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="neutral"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.16);
+}
+
+.button[data-mode="dark"][data-background="transparent"][data-variant="neutral"] {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--color-neutral-lightest);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="transparent"][data-variant="neutral"]:not(
+    :disabled
+  ):hover {
+  border-color: var(--color-neutral-900);
+  background-color: var(--color-neutral-900);
+}
+.button[data-mode="dark"][data-background="transparent"][data-variant="neutral"]:not(
+    :disabled
+  ):active {
+  border-color: var(--color-neutral-800);
+  background-color: var(--color-neutral-800);
+  box-shadow: none;
+}
+
+.button[data-mode="dark"][data-background="solid"][data-variant="danger"] {
+  border-color: var(--color-danger-600);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="solid"][data-variant="danger"]:not(
+    :disabled
+  ):hover {
+  border-color: var(--color-danger-700);
+  background-color: var(--color-danger-700);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="solid"][data-variant="danger"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+}
+
+.button[data-mode="dark"][data-background="outlined"][data-variant="danger"] {
+  border-color: var(--color-danger-400);
+  background-color: var(--color-neutral-darkest);
+  color: var(--color-danger-400);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="danger"]:not(
+    :disabled
+  ):hover {
+  background-color: var(--color-danger-1000);
+  color: var(--color-danger-400);
+  box-shadow: none;
+}
+.button[data-mode="dark"][data-background="outlined"][data-variant="danger"]:not(
+    :disabled
+  ):active {
+  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+}