@kofile/gds-foundations 1.1.1 → 1.1.3

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

@@ -1,277 +1,257 @@
+/* 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);
+
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--button-size-xl-spacing);
+  align-items: center;
+  font-family: var(--font-families-default);
+  font-weight: var(--font-weights-semibold);
+  white-space: nowrap;
+}
+
+/* FOCUS */
+.button:not(:disabled):focus-visible {
+  outline: var(--button-outline-primary-offset)
+    var(--button-outline-primary-style) var(--color-primary-700);
+  outline-offset: var(--spacing-3xs);
+}
+
+.button[data-background="solid"][data-variant="primary"]:disabled,
+.button[data-background="outlined"][data-variant="primary"]:disabled,
+.button[data-background="transparent"][data-variant="primary"]:disabled,
+.button[data-background="outlined"][data-variant="neutral"]:disabled,
+.button[data-background="transparent"][data-variant="neutral"]:disabled,
+.button[data-background="solid"][data-variant="danger"]:disabled,
+.button[data-background="outlined"][data-variant="danger"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--button-opacity-disabled);
+}
+
+/* BACKGROUNDS */
+.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);
-  border-radius: var(--button-size-xl-border-radius);
   box-shadow: 0px -2px 1px 0px rgba(18, 18, 18, 0.12) inset,
     0px 1px 1px 0px rgba(255, 255, 255, 0.24) inset;
-  box-sizing: border-box;
+
   color: var(--button-light-color-text-solid-primary-default);
-  cursor: pointer;
-  display: inline-flex;
-  gap: var(--button-size-xl-spacing);
-  align-items: center;
-  font-family: var(--button-size-xl-typography-font-family);
-  font-size: var(--button-size-xl-typography-font-size);
-  font-weight: var(--button-size-xl-typography-font-weight);
-  letter-spacing: var(--button-size-xl-typography-letter-spacing);
-  line-height: var(--button-size-xl-typography-line-height);
-  text-decoration: var(--button-size-xl-typography-text-decoration);
-  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);
   transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
     border-color 0.25s ease-in-out;
-  white-space: nowrap;
 }
-.button[data-width="full"] {
-  width: 100%;
-  justify-content: center;
+
+.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:not(:disabled):hover {
+
+.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:focus-visible {
-  outline: var(--button-outline-primary-offset)
-    var(--button-outline-primary-style) var(--color-primary-700);
-  outline-offset: var(--spacing-3xs);
+
+.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);
 }
-.button:active,
-.button[data-background="outlined"]:active {
-  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.16);
+
+.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 */
 }
-.button[data-background="outlined"] {
+
+.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
   );
-  box-shadow: none;
+  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);
-}
-.button[data-background="outlined"]:hover {
-  background-color: var(--button-light-color-background-outlined-primary-hover);
-  border-color: var(--button-light-color-border-outlined-primary-hover);
-}
-.button[data-background="transparent"] {
-  box-shadow: none;
-  border-color: var(--button-light-color-border-transparent-primary-default);
-  background-color: var(--button-light-color-transparent-primary-default);
-  color: var(--button-light-color-text-transparent-primary-default);
-}
-
-.button[data-background="transparent"]:hover {
-  background-color: var(--color-neutral-200);
-  border-color: transparent;
+  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"]:active {
-  box-shadow: none;
+.button[data-background="outlined"][data-variant="primary"][data-mode="dark"] {
+  border-color: var(--button-dark-color-border-outlined-primary-default);
   background-color: var(
-    --button-light-color-background-transparent-primary-active
+    --button-dark-color-background-outlined-primary-default
   );
-  border-color: var(--button-light-color-border-transparent-primary-active);
+  color: var(--button-dark-color-text-outlined-primary-default);
 }
 
-.button[data-size="md"] {
-  font-family: var(--button-size-md-typography-font-family);
-  font-size: var(--button-size-md-typography-font-size);
-  font-weight: var(--button-size-md-typography-font-weight);
-  letter-spacing: var(--button-size-md-typography-letter-spacing);
-  line-height: var(--button-size-md-typography-line-height);
-  text-decoration: var(--button-size-md-typography-text-decoration);
-  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);
+.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-size="lg"] {
-  font-family: var(--button-size-lg-typography-font-family);
-  font-size: var(--button-size-lg-typography-font-size);
-  font-weight: var(--button-size-lg-typography-font-weight);
-  letter-spacing: var(--button-size-lg-typography-letter-spacing);
-  line-height: var(--button-size-lg-typography-line-height);
-  text-decoration: var(--button-size-lg-typography-text-decoration);
-  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);
+.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);
 }
 
-.button[data-rounded="left"] {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+.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 */
 }
-.button[data-rounded="right"] {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
+
+.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);
+  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
+    border-color 0.25s ease-in-out;
 }
-.button[data-rounded="none"] {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+
+.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);
 }
 
-/**** VARIANTS */
-.button[data-variant="neutral"][data-background="outlined"] {
-  border-color: var(--color-neutral-300);
-  box-shadow: none;
+.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-outlined-neutral-default
+    --button-light-color-background-transparent-primary-hover
   );
-  color: var(--button-light-color-text-outlined-neutral-default);
-}
-.button[data-variant="neutral"][data-background="outlined"]:active {
-  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.16);
-}
-.button[data-variant="neutral"]:hover {
-  background-color: var(--button-light-color-background-outlined-neutral-hover);
 }
-.button[data-variant="neutral"][data-background="transparent"] {
-  border-color: var(--button-light-color-border-transparent-neutral-default);
+
+.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-light-color-background-transparent-neutral-default
+    --button-dark-color-background-transparent-primary-hover
   );
-  color: var(--button-light-color-text-outlined-neutral-default);
 }
-.button[data-variant="neutral"][data-background="transparent"]:hover {
-  border-color: var(--button-light-color-border-transparent-neutral-hover);
+
+.button[data-background="transparent"][data-variant="primary"]:not(
+    :disabled
+  ):active {
+  box-shadow: none;
   background-color: var(
-    --button-light-color-background-transparent-neutral-hover
+    --button-light-color-background-transparent-primary-active
   );
+  border-color: var(--button-light-color-border-transparent-primary-active);
 }
-.button[data-variant="neutral"][data-background="transparent"]:active {
-  border-color: var(--button-light-color-border-transparent-neutral-active);
+
+.button[data-background="transparent"][data-variant="primary"][data-mode="dark"]:not(
+    :disabled
+  ):active {
+  box-shadow: none;
   background-color: var(
-    --button-light-color-background-transparent-neutral-active
+    --button-dark-color-background-transparent-primary-active
   );
 }
-.button[data-variant="danger"] {
-  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);
-}
-.button[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-variant="danger"][data-background="outlined"] {
+.button[data-background="outlined"][data-variant="neutral"] {
+  border-color: var(--color-neutral-300);
+  border-style: var(--button-size-xl-border-style);
+  box-shadow: none;
   background-color: var(
-    --button-light-color-background-outlined-danger-default
+    --button-light-color-background-outlined-neutral-default
   );
-  border-color: var(--button-light-color-border-outlined-danger-default);
-  color: var(--button-light-color-text-outlined-danger-default);
-}
-.button[data-variant="danger"][data-background="outlined"]:hover {
-  border-color: var(--color-danger-600);
-  background-color: var(--color-danger-100);
-}
-.button[data-variant="danger"]:active {
-  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.16);
+  color: var(--button-light-color-text-outlined-neutral-default);
+  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out,
+    border-color 0.25s ease-in-out;
 }
 
-/*! DARK MODE */
-
-.button[data-mode="dark"] {
-  border-color: var(--button-dark-color-border-solid-primary-default);
+.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-mode="dark"]:not(:disabled):active {
-  box-shadow: 0px 0px 0px 6px rgba(12, 87, 205, 0.24);
+.button[data-background="outlined"][data-variant="neutral"]:not(
+    :disabled
+  ):hover {
+  background-color: var(--button-light-color-background-outlined-neutral-hover);
 }
 
-.button[data-mode="dark"][data-variant="neutral"][data-background="outlined"]:not(
+.button[data-background="outlined"][data-variant="neutral"][data-mode="dark"]:not(
     :disabled
-  ):active {
-  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.24);
+  ):hover {
+  background-color: var(--button-dark-color-background-outlined-neutral-hover);
 }
 
-.button[data-mode="dark"][data-variant="danger"]:not(:disabled):active,
-.button[data-mode="dark"][data-background="outlined"][data-variant="danger"]:not(
+.button[data-background="outlined"][data-variant="neutral"]:not(
     :disabled
   ):active {
-  box-shadow: 0px 0px 0px 6px rgba(209, 40, 40, 0.24);
-}
-
-.button[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);
+  box-shadow: 0px 0px 0px 6px rgba(107, 114, 128, 0.16);
 }
 
-.button[data-background="outlined"][data-mode="dark"] {
+.button[data-background="transparent"][data-variant="neutral"] {
+  border-style: var(--button-size-xl-border-style);
   box-shadow: none;
-  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-mode="dark"]:hover {
-  background-color: var(--button-dark-color-background-outlined-primary-hover);
-  border-color: var(--button-dark-color-border-outlined-primary-hover);
-}
-
-.button[data-background="transparent"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-transparent-primary-default);
+  border-color: var(--button-light-color-border-transparent-neutral-default);
   background-color: var(
-    --button-dark-color-background-transparent-primary-default
+    --button-light-color-background-transparent-neutral-default
   );
-  color: var(--button-dark-color-text-transparent-primary-default);
-}
+  color: var(--button-light-color-text-outlined-neutral-default);
 
-.button[data-background="transparent"][data-mode="dark"]:hover {
-  border-color: var(--button-dark-color-border-transparent-primary-hover);
-  background-color: var(
-    --button-dark-color-background-transparent-primary-hover
-  );
+  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-mode="dark"]:active {
-  box-shadow: none;
+.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-primary-active
+    --button-dark-color-background-transparent-neutral-default
   );
+  color: var(--button-dark-color-text-transparent-neutral-default);
 }
 
-.button[data-variant="neutral"][data-background="outlined"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-outlined-neutral-default);
-  box-shadow: none;
+.button[data-background="transparent"][data-variant="neutral"]:not(
+    :disabled
+  ):hover {
+  border-color: var(--button-light-color-border-transparent-neutral-hover);
   background-color: var(
-    --button-dark-color-background-outlined-neutral-default
+    --button-light-color-background-transparent-neutral-hover
   );
-  color: var(--button-dark-color-text-outlined-neutral-default);
-}
-.button[data-variant="neutral"][data-background="outlined"][data-mode="dark"]:hover {
-  background-color: var(--button-dark-color-background-outlined-neutral-hover);
 }
 
-.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"] {
-  border-color: var(--button-dark-color-border-transparent-neutral-default);
+.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-default
+    --button-dark-color-background-transparent-neutral-hover
   );
-  color: var(--button-dark-color-text-transparent-neutral-default);
 }
 
-.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"]:hover {
-  border-color: var(--button-dark-color-border-transparent-neutral-hover);
+.button[data-background="transparent"][data-variant="neutral"]:not(
+    :disabled
+  ):active {
+  border-color: var(--button-light-color-border-transparent-neutral-active);
   background-color: var(
-    --button-dark-color-background-transparent-neutral-hover
+    --button-light-color-background-transparent-neutral-active
   );
 }
 
-.button[data-variant="neutral"][data-background="transparent"][data-mode="dark"]: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(
@@ -279,43 +259,144 @@
   );
 }
 
-.button[data-mode="dark"][data-variant="danger"] {
+.button[data-background="solid"][data-variant="danger"] {
+  border-style: var(--button-size-xl-border-style);
+  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);
+
+  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-mode="dark"][data-variant="danger"]:hover {
+.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;
 }
 
-.button[data-variant="danger"][data-background="outlined"][data-mode="dark"] {
+.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);
+  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-variant="danger"][data-background="outlined"][data-mode="dark"]:hover {
+.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:disabled,
-.button[data-variant="danger"]:disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: var(--button-opacity-disabled);
-  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);
 }
 
-.button:is([data-loading="true"]) {
-  opacity: 0.8;
-  pointer-events: none;
+.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);
 }
 
-.button[data-mode="dark"]:focus-visible {
-  outline-color: var(--color-primary-300);
+/* 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);
+}
+
+.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);
+}
+
+.button[data-size="xl"] {
+  font-size: var(--font-size-lg);
+  letter-spacing: var(--letter-spacing-lg);
+  line-height: 22px; /* Custom line-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);
+}
+
+/* SPACE */
+.button[data-width="full"] {
+  width: 100%;
+  justify-content: center;
+}
+
+/* SHAPE */
+.button[data-rounded="left"] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.button[data-rounded="right"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.button[data-rounded="none"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }

package/build/css/components/checkbox.module.css

@@ -46,7 +46,7 @@
 .checkbox[data-disabled],
 .checkbox[data-error="true"][data-disabled],
 .checkbox[data-mode="dark"][data-disabled] {
-  pointer-events: none;
+  cursor: not-allowed;
   opacity: var(--checkbox-opacity-disabled);
 }
 .checkbox[data-error="true"] {

package/build/css/components/dialog.module.css

@@ -45,12 +45,11 @@
   margin: var(--dialog-elements-title-margin);
   margin-block-start: var(--dialog-elements-title-margin-block-start);
   color: var(--dialog-light-elements-title-color-text-primary-default);
-  font-family: var(--dialog-elements-title-typography-font-family);
-  font-size: var(--dialog-elements-title-typography-font-size);
-  font-weight: var(--dialog-elements-title-typography-font-weight);
-  letter-spacing: var(--dialog-elements-title-typography-letter-spacing);
-  line-height: var(--dialog-elements-title-typography-line-height);
-  text-decoration: var(--dialog-elements-title-typography-text-decoration);
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weights-bold);
+  letter-spacing: var(--letter-spacing-xl);
+  line-height: var(--line-heights-xl);
   text-align: var(--dialog-elements-title-text-align);
 }
 .title[data-mode="dark"] {
@@ -61,15 +60,11 @@
   margin: var(--dialog-elements-description-margin);
   margin-block-start: var(--dialog-elements-description-margin-block-start);
   color: var(--dialog-light-elements-description-color-text-primary-default);
-  font-family: var(--dialog-elements-description-typography-font-family);
-  font-size: var(--dialog-elements-description-typography-font-size);
-  font-weight: var(--dialog-elements-description-typography-font-weight);
-  letter-spacing: var(--dialog-elements-description-typography-letter-spacing);
-  line-height: var(--dialog-elements-description-typography-line-height);
-  text-decoration: var(
-    --dialog-elements-description-typography-text-decoration
-  );
-
+  font-family: var(--font-families-default);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weights-regular);
+  letter-spacing: var(--letter-spacing-2xs);
+  line-height: var(--line-heights-2xs);
   text-align: var(--dialog-elements-description-text-align);
 }
 .description[data-mode="dark"] {