@akad/design-system 0.2.0-beta.8 → 1.0.0-alpha.1

package/scss/core/components/atoms/button.scss

@@ -0,0 +1,816 @@
+// === BUTTON TOKENS (colocated with component) ===
+$button__font--family: var(--font__family--highlight) !default;
+$button__font--weight: $font__weight--regular !default;
+$button__padding: 0 $spacing__inset--sm !default;
+$button__padding--with-icon: 0 $spacing__inset--xs !default;
+$button__border-radius: $border__radius--sm !default;
+$button__border-width: $border__width--hairline !default;
+$button__text--transform: initial !default;
+$button__text-letter--spacing: initial !default;
+
+// Size tokens
+$button__large: (
+  'height': $spacing--lg,
+  'padding': 0 $spacing__inset--md,
+  'font-size': $font__size--md,
+) !default;
+$button__medium: (
+  'height': $spacing--md,
+  'padding': 0 $spacing__inset--sm,
+  'font-size': $font__size--sm,
+) !default;
+$button__small: (
+  'height': $spacing--sm,
+  'padding': 0 $spacing__inset--sm,
+  'font-size': $font__size--xs,
+) !default;
+
+// Disabled
+$button__disabled: (
+  'background': var(--color__neutral--30),
+  'color': var(--color__neutral--50),
+) !default;
+
+// Colors
+$button__colors: primary, secondary, success, danger, warning, info, neutral;
+
+// Button Solid (all color variants)
+$button__solid: (
+  'bg__primary': var(--button-background-color__primary),
+  'bg__primary--hover': var(--button-background-color__primary--hover),
+  'bg__primary--active': var(--button-background-color__primary--active),
+  'text__primary': var(--button-color__primary),
+  'text__primary--hover':
+    var(--button-color__primary--hover, var(--button-color__primary)),
+  'text__primary--active':
+    var(--button-color__primary--active, var(--button-color__primary)),
+  'border__primary': var(--button-background-color__primary),
+  'border__primary--hover': var(--button-background-color__primary--hover),
+  'border__primary--active': var(--button-background-color__primary--active),
+  'bg__secondary': var(--button-background-color__secondary),
+  'bg__secondary--hover': var(--button-background-color__secondary--hover),
+  'bg__secondary--active': var(--button-background-color__secondary--active),
+  'text__secondary': var(--button-color__secondary),
+  'text__secondary--hover':
+    var(--button-color__secondary--hover, var(--button-color__secondary)),
+  'text__secondary--active':
+    var(--button-color__secondary--active, var(--button-color__secondary)),
+  'border__secondary': var(--button-background-color__secondary),
+  'border__secondary--hover': var(--button-background-color__secondary--hover),
+  'border__secondary--active': var(--button-background-color__secondary--active),
+  'bg__success': var(--button-background-color__success),
+  'bg__success--hover': var(--button-background-color__success--hover),
+  'bg__success--active': var(--button-background-color__success--active),
+  'text__success': var(--button-color__success),
+  'text__success--hover':
+    var(--button-color__success--hover, var(--button-color__success)),
+  'text__success--active':
+    var(--button-color__success--active, var(--button-color__success)),
+  'border__success': var(--button-background-color__success),
+  'border__success--hover': var(--button-background-color__success--hover),
+  'border__success--active': var(--button-background-color__success--active),
+  'bg__danger': var(--button-background-color__danger),
+  'bg__danger--hover': var(--button-background-color__danger--hover),
+  'bg__danger--active': var(--button-background-color__danger--active),
+  'text__danger': var(--button-color__danger),
+  'text__danger--hover':
+    var(--button-color__danger--hover, var(--button-color__danger)),
+  'text__danger--active':
+    var(--button-color__danger--active, var(--button-color__danger)),
+  'border__danger': var(--button-background-color__danger),
+  'border__danger--hover': var(--button-background-color__danger--hover),
+  'border__danger--active': var(--button-background-color__danger--active),
+  'bg__warning': var(--button-background-color__warning),
+  'bg__warning--hover': var(--button-background-color__warning--hover),
+  'bg__warning--active': var(--button-background-color__warning--active),
+  'text__warning': var(--button-color__warning),
+  'text__warning--hover':
+    var(--button-color__warning--hover, var(--button-color__warning)),
+  'text__warning--active':
+    var(--button-color__warning--active, var(--button-color__warning)),
+  'border__warning': var(--button-background-color__warning),
+  'border__warning--hover': var(--button-background-color__warning--hover),
+  'border__warning--active': var(--button-background-color__warning--active),
+  'bg__info': var(--button-background-color__info),
+  'bg__info--hover': var(--button-background-color__info--hover),
+  'bg__info--active': var(--button-background-color__info--active),
+  'text__info': var(--button-color__info),
+  'text__info--hover':
+    var(--button-color__info--hover, var(--button-color__info)),
+  'text__info--active':
+    var(--button-color__info--active, var(--button-color__info)),
+  'border__info': var(--button-background-color__info),
+  'border__info--hover': var(--button-background-color__info--hover),
+  'border__info--active': var(--button-background-color__info--active),
+  'bg__neutral': var(--button-background-color__neutral),
+  'bg__neutral--hover': var(--button-background-color__neutral--hover),
+  'bg__neutral--active': var(--button-background-color__neutral--active),
+  'text__neutral': var(--button-color__neutral),
+  'text__neutral--hover':
+    var(--button-color__neutral--hover, var(--button-color__neutral)),
+  'text__neutral--active':
+    var(--button-color__neutral--active, var(--button-color__neutral)),
+  'border__neutral': var(--button-background-color__neutral),
+  'border__neutral--hover': var(--button-background-color__neutral--hover),
+  'border__neutral--active': var(--button-background-color__neutral--active),
+) !default;
+
+// Button Outline (all color variants)
+$button__outline: (
+  'bg__primary': var(--button-background-color__primary-outline),
+  'bg__primary--hover': var(--button-background-color__primary-outline--hover),
+  'bg__primary--active': var(--button-background-color__primary-outline--active),
+  'text__primary': var(--button-color__primary-outline),
+  'text__primary--hover': var(--button-color__primary-outline),
+  'text__primary--active': var(--button-color__primary-outline--active),
+  'border__primary': var(--button-color__primary-outline),
+  'border__primary--hover': var(--button-color__primary-outline),
+  'border__primary--active': var(--button-color__primary-outline--active),
+  'bg__secondary': var(--button-background-color__secondary-outline),
+  'bg__secondary--hover':
+    var(--button-background-color__secondary-outline--hover),
+  'bg__secondary--active':
+    var(--button-background-color__secondary-outline--active),
+  'text__secondary': var(--button-color__secondary-outline),
+  'text__secondary--hover': var(--button-color__secondary-outline),
+  'text__secondary--active': var(--button-color__secondary-outline--active),
+  'border__secondary': var(--button-color__secondary-outline),
+  'border__secondary--hover': var(--button-color__secondary-outline),
+  'border__secondary--active': var(--button-color__secondary-outline--active),
+  'bg__success': var(--button-background-color__success-outline),
+  'bg__success--hover': var(--button-background-color__success-outline--hover),
+  'bg__success--active': var(--button-background-color__success-outline--active),
+  'text__success': var(--button-color__success-outline),
+  'text__success--hover': var(--button-color__success-outline),
+  'text__success--active': var(--button-color__success-outline--active),
+  'border__success': var(--button-color__success-outline),
+  'border__success--hover': var(--button-color__success-outline),
+  'border__success--active': var(--button-color__success-outline--active),
+  'bg__danger': var(--button-background-color__danger-outline),
+  'bg__danger--hover': var(--button-background-color__danger-outline--hover),
+  'bg__danger--active': var(--button-background-color__danger-outline--active),
+  'text__danger': var(--button-color__danger-outline),
+  'text__danger--hover': var(--button-color__danger-outline),
+  'text__danger--active': var(--button-color__danger-outline--active),
+  'border__danger': var(--button-color__danger-outline),
+  'border__danger--hover': var(--button-color__danger-outline),
+  'border__danger--active': var(--button-color__danger-outline--active),
+  'bg__warning': var(--button-background-color__warning-outline),
+  'bg__warning--hover': var(--button-background-color__warning-outline--hover),
+  'bg__warning--active': var(--button-background-color__warning-outline--active),
+  'text__warning': var(--button-color__warning-outline),
+  'text__warning--hover': var(--button-color__warning-outline),
+  'text__warning--active': var(--button-color__warning-outline--active),
+  'border__warning': var(--button-color__warning-outline),
+  'border__warning--hover': var(--button-color__warning-outline),
+  'border__warning--active': var(--button-color__warning-outline--active),
+  'bg__info': var(--button-background-color__info-outline),
+  'bg__info--hover': var(--button-background-color__info-outline--hover),
+  'bg__info--active': var(--button-background-color__info-outline--active),
+  'text__info': var(--button-color__info-outline),
+  'text__info--hover': var(--button-color__info-outline),
+  'text__info--active': var(--button-color__info-outline--active),
+  'border__info': var(--button-color__info-outline),
+  'border__info--hover': var(--button-color__info-outline),
+  'border__info--active': var(--button-color__info-outline--active),
+  'bg__neutral': var(--button-background-color__neutral-outline),
+  'bg__neutral--hover': var(--button-background-color__neutral-outline--hover),
+  'bg__neutral--active': var(--button-background-color__neutral-outline--active),
+  'text__neutral': var(--button-color__neutral-outline),
+  'text__neutral--hover': var(--button-color__neutral-outline),
+  'text__neutral--active': var(--button-color__neutral-outline--active),
+  'border__neutral': var(--button-color__neutral-outline),
+  'border__neutral--hover': var(--button-color__neutral-outline),
+  'border__neutral--active': var(--button-color__neutral-outline--active),
+) !default;
+
+// Button Text (all color variants)
+$button__text: (
+  'bg__primary': transparent,
+  'bg__primary--hover': var(--button-background-color__primary-text--hover),
+  'bg__primary--active': var(--button-background-color__primary-text--active),
+  'text__primary': var(--button-color__primary-text),
+  'text__primary--hover': var(--button-color__primary-text),
+  'text__primary--active': var(--button-color__primary-text--active),
+  'border__primary': transparent,
+  'border__primary--hover': transparent,
+  'border__primary--active': transparent,
+  'bg__secondary': transparent,
+  'bg__secondary--hover': var(--button-background-color__secondary-text--hover),
+  'bg__secondary--active':
+    var(--button-background-color__secondary-text--active),
+  'text__secondary': var(--button-color__secondary-text),
+  'text__secondary--hover': var(--button-color__secondary-text),
+  'text__secondary--active': var(--button-color__secondary-text--active),
+  'border__secondary': transparent,
+  'border__secondary--hover': transparent,
+  'border__secondary--active': transparent,
+  'bg__success': transparent,
+  'bg__success--hover': var(--button-background-color__success-text--hover),
+  'bg__success--active': var(--button-background-color__success-text--active),
+  'text__success': var(--button-color__success-text),
+  'text__success--hover': var(--button-color__success-text),
+  'text__success--active': var(--button-color__success-text--active),
+  'border__success': transparent,
+  'border__success--hover': transparent,
+  'border__success--active': transparent,
+  'bg__danger': transparent,
+  'bg__danger--hover': var(--button-background-color__danger-text--hover),
+  'bg__danger--active': var(--button-background-color__danger-text--active),
+  'text__danger': var(--button-color__danger-text),
+  'text__danger--hover': var(--button-color__danger-text),
+  'text__danger--active': var(--button-color__danger-text--active),
+  'border__danger': transparent,
+  'border__danger--hover': transparent,
+  'border__danger--active': transparent,
+  'bg__warning': transparent,
+  'bg__warning--hover': var(--button-background-color__warning-text--hover),
+  'bg__warning--active': var(--button-background-color__warning-text--active),
+  'text__warning': var(--button-color__warning-text),
+  'text__warning--hover': var(--button-color__warning-text),
+  'text__warning--active': var(--button-color__warning-text--active),
+  'border__warning': transparent,
+  'border__warning--hover': transparent,
+  'border__warning--active': transparent,
+  'bg__info': transparent,
+  'bg__info--hover': var(--button-background-color__info-text--hover),
+  'bg__info--active': var(--button-background-color__info-text--active),
+  'text__info': var(--button-color__info-text),
+  'text__info--hover': var(--button-color__info-text),
+  'text__info--active': var(--button-color__info-text--active),
+  'border__info': transparent,
+  'border__info--hover': transparent,
+  'border__info--active': transparent,
+  'bg__neutral': transparent,
+  'bg__neutral--hover': var(--button-background-color__neutral-text--hover),
+  'bg__neutral--active': var(--button-background-color__neutral-text--active),
+  'text__neutral': var(--button-color__neutral-text),
+  'text__neutral--hover': var(--button-color__neutral-text),
+  'text__neutral--active': var(--button-color__neutral-text--active),
+  'border__neutral': transparent,
+  'border__neutral--hover': transparent,
+  'border__neutral--active': transparent,
+) !default;
+
+// Button Outline (all color variants)
+$button__outline: (
+  'bg__primary': var(--button-background-color__primary-outline),
+  'bg__primary--hover': var(--button-background-color__primary-outline--hover),
+  'bg__primary--active': var(--button-background-color__primary-outline--active),
+  'text__primary': var(--button-color__primary-outline),
+  'text__primary--hover': var(--button-color__primary-outline),
+  'text__primary--active': var(--button-color__primary-outline--active),
+  'border__primary': var(--button-color__primary-outline),
+  'border__primary--hover': var(--button-color__primary-outline),
+  'border__primary--active': var(--button-color__primary-outline--active),
+  'bg__secondary': var(--button-background-color__secondary-outline),
+  'bg__secondary--hover':
+    var(--button-background-color__secondary-outline--hover),
+  'bg__secondary--active':
+    var(--button-background-color__secondary-outline--active),
+  'text__secondary': var(--button-color__secondary-outline),
+  'text__secondary--hover': var(--button-color__secondary-outline),
+  'text__secondary--active': var(--button-color__secondary-outline--active),
+  'border__secondary': var(--button-color__secondary-outline),
+  'border__secondary--hover': var(--button-color__secondary-outline),
+  'border__secondary--active': var(--button-color__secondary-outline--active),
+  'bg__success': var(--button-background-color__success-outline),
+  'bg__success--hover': var(--button-background-color__success-outline--hover),
+  'bg__success--active': var(--button-background-color__success-outline--active),
+  'text__success': var(--button-color__success-outline),
+  'text__success--hover': var(--button-color__success-outline),
+  'text__success--active': var(--button-color__success-outline--active),
+  'border__success': var(--button-color__success-outline),
+  'border__success--hover': var(--button-color__success-outline),
+  'border__success--active': var(--button-color__success-outline--active),
+  'bg__danger': var(--button-background-color__danger-outline),
+  'bg__danger--hover': var(--button-background-color__danger-outline--hover),
+  'bg__danger--active': var(--button-background-color__danger-outline--active),
+  'text__danger': var(--button-color__danger-outline),
+  'text__danger--hover': var(--button-color__danger-outline),
+  'text__danger--active': var(--button-color__danger-outline--active),
+  'border__danger': var(--button-color__danger-outline),
+  'border__danger--hover': var(--button-color__danger-outline),
+  'border__danger--active': var(--button-color__danger-outline--active),
+  'bg__warning': var(--button-background-color__warning-outline),
+  'bg__warning--hover': var(--button-background-color__warning-outline--hover),
+  'bg__warning--active': var(--button-background-color__warning-outline--active),
+  'text__warning': var(--button-color__warning-outline),
+  'text__warning--hover': var(--button-color__warning-outline),
+  'text__warning--active': var(--button-color__warning-outline--active),
+  'border__warning': var(--button-color__warning-outline),
+  'border__warning--hover': var(--button-color__warning-outline),
+  'border__warning--active': var(--button-color__warning-outline--active),
+  'bg__info': var(--button-background-color__info-outline),
+  'bg__info--hover': var(--button-background-color__info-outline--hover),
+  'bg__info--active': var(--button-background-color__info-outline--active),
+  'text__info': var(--button-color__info-outline),
+  'text__info--hover': var(--button-color__info-outline),
+  'text__info--active': var(--button-color__info-outline--active),
+  'border__info': var(--button-color__info-outline),
+  'border__info--hover': var(--button-color__info-outline),
+  'border__info--active': var(--button-color__info-outline--active),
+  'bg__neutral': var(--button-background-color__neutral-outline),
+  'bg__neutral--hover': var(--button-background-color__neutral-outline--hover),
+  'bg__neutral--active': var(--button-background-color__neutral-outline--active),
+  'text__neutral': var(--button-color__neutral-outline),
+  'text__neutral--hover': var(--button-color__neutral-outline),
+  'text__neutral--active': var(--button-color__neutral-outline--active),
+  'border__neutral': var(--button-color__neutral-outline),
+  'border__neutral--hover': var(--button-color__neutral-outline),
+  'border__neutral--active': var(--button-color__neutral-outline--active),
+) !default;
+
+// Button Text (all color variants)
+$button__text: (
+  'bg__primary': transparent,
+  'bg__primary--hover': var(--button-background-color__primary-text--hover),
+  'bg__primary--active': var(--button-background-color__primary-text--active),
+  'text__primary': var(--button-color__primary-text),
+  'text__primary--hover': var(--button-color__primary-text),
+  'text__primary--active': var(--button-color__primary-text--active),
+  'border__primary': transparent,
+  'border__primary--hover': transparent,
+  'border__primary--active': transparent,
+  'bg__secondary': transparent,
+  'bg__secondary--hover': var(--button-background-color__secondary-text--hover),
+  'bg__secondary--active':
+    var(--button-background-color__secondary-text--active),
+  'text__secondary': var(--button-color__secondary-text),
+  'text__secondary--hover': var(--button-color__secondary-text),
+  'text__secondary--active': var(--button-color__secondary-text--active),
+  'border__secondary': transparent,
+  'border__secondary--hover': transparent,
+  'border__secondary--active': transparent,
+  'bg__success': transparent,
+  'bg__success--hover': var(--button-background-color__success-text--hover),
+  'bg__success--active': var(--button-background-color__success-text--active),
+  'text__success': var(--button-color__success-text),
+  'text__success--hover': var(--button-color__success-text),
+  'text__success--active': var(--button-color__success-text--active),
+  'border__success': transparent,
+  'border__success--hover': transparent,
+  'border__success--active': transparent,
+  'bg__danger': transparent,
+  'bg__danger--hover': var(--button-background-color__danger-text--hover),
+  'bg__danger--active': var(--button-background-color__danger-text--active),
+  'text__danger': var(--button-color__danger-text),
+  'text__danger--hover': var(--button-color__danger-text),
+  'text__danger--active': var(--button-color__danger-text--active),
+  'border__danger': transparent,
+  'border__danger--hover': transparent,
+  'border__danger--active': transparent,
+  'bg__warning': transparent,
+  'bg__warning--hover': var(--button-background-color__warning-text--hover),
+  'bg__warning--active': var(--button-background-color__warning-text--active),
+  'text__warning': var(--button-color__warning-text),
+  'text__warning--hover': var(--button-color__warning-text),
+  'text__warning--active': var(--button-color__warning-text--active),
+  'border__warning': transparent,
+  'border__warning--hover': transparent,
+  'border__warning--active': transparent,
+  'bg__info': transparent,
+  'bg__info--hover': var(--button-background-color__info-text--hover),
+  'bg__info--active': var(--button-background-color__info-text--active),
+  'text__info': var(--button-color__info-text),
+  'text__info--hover': var(--button-color__info-text),
+  'text__info--active': var(--button-color__info-text--active),
+  'border__info': transparent,
+  'border__info--hover': transparent,
+  'border__info--active': transparent,
+  'bg__neutral': transparent,
+  'bg__neutral--hover': var(--button-background-color__neutral-text--hover),
+  'bg__neutral--active': var(--button-background-color__neutral-text--active),
+  'text__neutral': var(--button-color__neutral-text),
+  'text__neutral--hover': var(--button-color__neutral-text),
+  'text__neutral--active': var(--button-color__neutral-text--active),
+  'border__neutral': transparent,
+  'border__neutral--hover': transparent,
+  'border__neutral--active': transparent,
+) !default;
+
+// Primary (used in Stepper)
+$button__primary: (
+  'background': var(--button-background-color__primary),
+  'color': var(--button-color__primary),
+  'border': none,
+) !default;
+$button__primary--hover: (
+  'background': var(--button-background-color__primary--hover),
+) !default;
+
+// === BUTTON COMPONENT ===
+.ds-button {
+  $self: &;
+
+  // CSS vars for Sass vars overrides
+  --button__border-radius: #{$button__border-radius};
+  --button__text-transform: #{$button__text--transform};
+  --button__letter-spacing: #{$button__text-letter--spacing};
+  --button__border-width: #{$button__border-width};
+  --button__height--md: #{get-token($button__medium, 'height')}; // Size override for themes
+
+  // ===== PRIMARY BUTTON =====
+  // Solid
+  --button-background-color__primary: var(--color__primary);
+  --button-color__primary: var(--color__neutral--00);
+  --button-background-color__primary--hover: var(--color__primary--light);
+  --button-background-color__primary--active: var(--color__primary--dark);
+
+  // Outline
+  --button-color__primary-outline: var(--color__primary);
+  --button-background-color__primary-outline: transparent;
+  --button-background-color__primary-outline--hover: var(
+    --color__primary--lighter
+  );
+  --button-background-color__primary-outline--active: var(
+    --color__primary--light
+  );
+  --button-color__primary-outline--active: var(--color__primary--dark);
+
+  // Text
+  --button-color__primary-text: var(--color__primary);
+  --button-background-color__primary-text--hover: var(
+    --color__primary--lighter
+  );
+  --button-background-color__primary-text--active: var(--color__primary--light);
+  --button-color__primary-text--active: var(--color__primary--dark);
+
+  // ===== SECONDARY BUTTON =====
+  // Solid
+  --button-background-color__secondary: var(--color__secondary);
+  --button-color__secondary: var(--color__neutral--00);
+  --button-background-color__secondary--hover: var(--color__secondary--light);
+  --button-background-color__secondary--active: var(--color__secondary--dark);
+
+  // Outline
+  --button-color__secondary-outline: var(--color__secondary);
+  --button-background-color__secondary-outline: transparent;
+  --button-background-color__secondary-outline--hover: var(
+    --color__secondary--lighter
+  );
+  --button-background-color__secondary-outline--active: var(
+    --color__secondary--light
+  );
+  --button-color__secondary-outline--active: var(--color__secondary--dark);
+
+  // Text
+  --button-color__secondary-text: var(--color__secondary);
+  --button-background-color__secondary-text--hover: var(
+    --color__secondary--lighter
+  );
+  --button-background-color__secondary-text--active: var(
+    --color__secondary--light
+  );
+  --button-color__secondary-text--active: var(--color__secondary--dark);
+
+  // ===== SUCCESS BUTTON =====
+  // Solid
+  --button-background-color__success: var(--color__success);
+  --button-color__success: var(--color__neutral--00);
+  --button-background-color__success--hover: var(--color__success--light);
+  --button-background-color__success--active: var(--color__success--dark);
+
+  // Outline
+  --button-color__success-outline: var(--color__success);
+  --button-background-color__success-outline: transparent;
+  --button-background-color__success-outline--hover: var(
+    --color__success--lighter
+  );
+  --button-background-color__success-outline--active: var(
+    --color__success--light
+  );
+  --button-color__success-outline--active: var(--color__success--dark);
+
+  // Text
+  --button-color__success-text: var(--color__success);
+  --button-background-color__success-text--hover: var(
+    --color__success--lighter
+  );
+  --button-background-color__success-text--active: var(--color__success--light);
+  --button-color__success-text--active: var(--color__success--dark);
+
+  // ===== WARNING BUTTON =====
+  // Solid
+  --button-background-color__warning: var(--color__warning);
+  --button-color__warning: var(--color__neutral--00);
+  --button-background-color__warning--hover: var(--color__warning--light);
+  --button-background-color__warning--active: var(--color__warning--dark);
+
+  // Outline
+  --button-color__warning-outline: var(--color__warning);
+  --button-background-color__warning-outline: transparent;
+  --button-background-color__warning-outline--hover: var(
+    --color__warning--lighter
+  );
+  --button-background-color__warning-outline--active: var(
+    --color__warning--light
+  );
+  --button-color__warning-outline--active: var(--color__warning--dark);
+
+  // Text
+  --button-color__warning-text: var(--color__warning);
+  --button-background-color__warning-text--hover: var(
+    --color__warning--lighter
+  );
+  --button-background-color__warning-text--active: var(--color__warning--light);
+  --button-color__warning-text--active: var(--color__warning--dark);
+
+  // ===== DANGER BUTTON =====
+  // Solid
+  --button-background-color__danger: var(--color__danger);
+  --button-color__danger: var(--color__neutral--00);
+  --button-background-color__danger--hover: var(--color__danger--light);
+  --button-background-color__danger--active: var(--color__danger--dark);
+
+  // Outline
+  --button-color__danger-outline: var(--color__danger);
+  --button-background-color__danger-outline: transparent;
+  --button-background-color__danger-outline--hover: var(
+    --color__danger--lighter
+  );
+  --button-background-color__danger-outline--active: var(
+    --color__danger--light
+  );
+  --button-color__danger-outline--active: var(--color__danger--dark);
+
+  // Text
+  --button-color__danger-text: var(--color__danger);
+  --button-background-color__danger-text--hover: var(--color__danger--lighter);
+  --button-background-color__danger-text--active: var(--color__danger--light);
+  --button-color__danger-text--active: var(--color__danger--dark);
+
+  // ===== INFO BUTTON =====
+  // Solid
+  --button-background-color__info: var(--color__info);
+  --button-color__info: var(--color__neutral--00);
+  --button-background-color__info--hover: var(--color__info--light);
+  --button-background-color__info--active: var(--color__info--dark);
+
+  // Outline
+  --button-color__info-outline: var(--color__info);
+  --button-background-color__info-outline: transparent;
+  --button-background-color__info-outline--hover: var(--color__info--lighter);
+  --button-background-color__info-outline--active: var(--color__info--light);
+  --button-color__info-outline--active: var(--color__info--dark);
+
+  // Text
+  --button-color__info-text: var(--color__info);
+  --button-background-color__info-text--hover: var(--color__info--lighter);
+  --button-background-color__info-text--active: var(--color__info--light);
+  --button-color__info-text--active: var(--color__info--dark);
+
+  // ===== NEUTRAL BUTTON =====
+  // Solid
+  --button-background-color__neutral: var(--color__neutral--80);
+  --button-color__neutral: var(--color__neutral--00);
+  --button-background-color__neutral--hover: var(--color__neutral--50);
+  --button-background-color__neutral--active: var(--color__neutral--90);
+
+  // Outline
+  --button-color__neutral-outline: var(--color__neutral--80);
+  --button-background-color__neutral-outline: transparent;
+  --button-background-color__neutral-outline--hover: var(--color__neutral--50);
+  --button-background-color__neutral-outline--active: var(--color__neutral--60);
+  --button-color__neutral-outline--active: var(--color__neutral--90);
+
+  // Text
+  --button-color__neutral-text: var(--color__neutral--80);
+  --button-background-color__neutral-text--hover: var(--color__neutral--50);
+  --button-background-color__neutral-text--active: var(--color__neutral--60);
+  --button-color__neutral-text--active: var(--color__neutral--90);
+
+  border-radius: var(--button__border-radius);
+  border-style: solid;
+  border-width: var(--button__border-width);
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  padding: $button__padding;
+  position: relative;
+
+  &__text {
+    align-items: center;
+    display: flex;
+    font-family: $button__font--family;
+    font-weight: $button__font--weight;
+    gap: $spacing--nano;
+    justify-content: center;
+    letter-spacing: var(--button__letter-spacing);
+    text-transform: var(--button__text-transform);
+  }
+
+  &__text--reversed {
+    flex-direction: row-reverse;
+  }
+
+  &--with-icon {
+    padding: $button__padding--with-icon;
+  }
+
+  &--full-size {
+    width: 100%;
+  }
+
+  // Size modifiers
+  &--lg {
+    height: get-token($button__large, 'height');
+
+    .ds-button__text {
+      font-size: get-token($button__large, 'font-size');
+    }
+  }
+
+  &--md {
+    height: var(--button__height--md);
+
+    .ds-button__text {
+      font-size: get-token($button__medium, 'font-size');
+    }
+  }
+
+  &--sm {
+    height: get-token($button__small, 'height');
+
+    .ds-button__text {
+      font-size: get-token($button__small, 'font-size');
+    }
+  }
+
+  // elevation modifiers
+  &--elevation {
+    &-1 {
+      box-shadow: $shadow__level--1;
+    }
+
+    &-2 {
+      box-shadow: $shadow__level--2;
+    }
+
+    &-3 {
+      box-shadow: $shadow__level--3;
+    }
+
+    &-4 {
+      box-shadow: $shadow__level--4;
+    }
+  }
+
+  // variant modifiers
+  @each $color in $button__colors {
+    &__#{$color} {
+      &--solid {
+        background: get-token($button__solid, 'bg__' + $color);
+        border-color: get-token($button__solid, 'border__' + $color);
+        color: get-token($button__solid, 'text__' + $color);
+
+        .ds-button__icon {
+          color: get-token($button__solid, 'text__' + $color);
+        }
+
+        &:hover {
+          background: get-token($button__solid, 'bg__' + $color + '--hover');
+          border-color: get-token(
+            $button__solid,
+            'border__' + $color + '--hover'
+          );
+          color: get-token($button__solid, 'text__' + $color + '--hover');
+
+          .ds-button__icon {
+            color: get-token($button__solid, 'text__' + $color + '--hover');
+          }
+        }
+
+        &:active {
+          background: get-token($button__solid, 'bg__' + $color + '--active');
+          border-color: get-token(
+            $button__solid,
+            'border__' + $color + '--active'
+          );
+          color: get-token($button__solid, 'text__' + $color + '--active');
+
+          .ds-button__icon {
+            color: get-token($button__solid, 'text__' + $color + '--active');
+          }
+        }
+      }
+
+      &--outline {
+        background: get-token($button__outline, 'bg__' + $color);
+        border-color: get-token($button__outline, 'border__' + $color);
+        color: get-token($button__outline, 'text__' + $color);
+
+        .ds-button__icon {
+          color: get-token($button__outline, 'text__' + $color);
+        }
+
+        &:hover {
+          background: get-token($button__outline, 'bg__' + $color + '--hover');
+          border-color: get-token(
+            $button__outline,
+            'border__' + $color + '--hover'
+          );
+          color: get-token($button__outline, 'text__' + $color + '--hover');
+
+          .ds-button__icon {
+            color: get-token($button__outline, 'text__' + $color + '--hover');
+          }
+        }
+
+        &:active {
+          background: get-token($button__outline, 'bg__' + $color + '--active');
+          border-color: get-token(
+            $button__outline,
+            'border__' + $color + '--active'
+          );
+          color: get-token($button__outline, 'text__' + $color + '--active');
+
+          .ds-button__icon {
+            color: get-token($button__outline, 'text__' + $color + '--active');
+          }
+        }
+      }
+
+      &--text {
+        background: get-token($button__text, 'bg__' + $color);
+        border-color: get-token($button__text, 'border__' + $color);
+        color: get-token($button__text, 'text__' + $color);
+
+        .ds-button__icon {
+          color: get-token($button__text, 'text__' + $color);
+        }
+
+        &:hover {
+          background: get-token($button__text, 'bg__' + $color + '--hover');
+          border-color: get-token(
+            $button__text,
+            'border__' + $color + '--hover'
+          );
+          color: get-token($button__text, 'text__' + $color + '--hover');
+
+          .ds-button__icon {
+            color: get-token($button__text, 'text__' + $color + '--hover');
+          }
+
+          &.ds-button--disabled {
+            background: transparent;
+            color: get-token($button__disabled, 'color');
+          }
+        }
+
+        &:active {
+          background: get-token($button__text, 'bg__' + $color + '--active');
+          border-color: get-token(
+            $button__text,
+            'border__' + $color + '--active'
+          );
+          color: get-token($button__text, 'text__' + $color + '--active');
+
+          .ds-button__icon {
+            color: get-token($button__text, 'text__' + $color + '--active');
+          }
+        }
+
+        &.ds-button--disabled {
+          background: transparent;
+          color: get-token($button__disabled, 'color');
+        }
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:focus {
+    border-color: transparent;
+    outline: 2px solid var(--color__neutral--50);
+  }
+
+  &--disabled {
+    background: get-token($button__disabled, 'background');
+    border-color: transparent;
+    color: get-token($button__disabled, 'color');
+    cursor: not-allowed;
+
+    .ds-button__icon {
+      color: get-token($button__disabled, 'color');
+    }
+
+    & #{ $self }__icon {
+      background: get-token($button__disabled, 'background');
+    }
+
+    &:hover {
+      background: get-token($button__disabled, 'background');
+      border-color: transparent;
+      color: get-token($button__disabled, 'color');
+
+      .ds-button__icon {
+        color: get-token($button__disabled, 'color');
+      }
+
+      & #{ $self }__icon {
+        background: get-token($button__disabled, 'background');
+      }
+    }
+  }
+}