@db-ux/core-components 4.4.2 → 4.5.0

package/build/components/button/button.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -123,12 +107,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-button {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -154,118 +132,303 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   display: inline-flex;
 }
 
-.db-button {
-  max-inline-size: 100%;
-  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
-  min-block-size: var(--db-sizing-md);
-  block-size: max-content;
-  inline-size: fit-content;
-  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
-  text-decoration: none;
-}
-.db-button[data-no-text=true] {
-  font-size: 0 !important;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  padding: 0;
-  aspect-ratio: 1;
-  inline-size: var(--db-sizing-md);
-}
-.db-button[data-no-text=true]::before {
-  --db-icon-margin-end: 0;
+.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-no-text=true]::before {
-  margin: auto;
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
 }
-.db-button[data-size=small] {
-  font-weight: 700;
-  min-block-size: var(--db-sizing-sm);
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
 }
-.db-button[data-size=small]:not([data-no-text=true]) {
-  padding: 1px var(--db-spacing-fixed-sm);
+.db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
-.db-button[data-size=small]:not([data-no-text=true])::before {
-  margin-inline-end: var(--db-spacing-fixed-2xs);
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
 }
-.db-button[data-size=small][data-no-text=true] {
-  inline-size: var(--db-sizing-sm);
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
 }
-.db-button[data-width=full] {
-  inline-size: 100%;
+.db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
 }
+
 .db-button[data-variant=brand] {
   background-color: var(--db-brand-origin-default);
   color: var(--db-brand-on-origin-default);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-hovered);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-brand-origin-pressed);
   border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+
+.db-button {
+  max-inline-size: 100%;
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  min-block-size: var(--db-sizing-md);
+  block-size: max-content;
+  inline-size: fit-content;
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
+  text-decoration: none;
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+.db-button[data-no-text=true] {
+  padding: 0;
+  aspect-ratio: 1;
+  inline-size: var(--db-sizing-md);
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
+.db-button[data-no-text=true]::before {
+  --db-icon-margin-end: 0;
 }
-.db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-button[data-no-text=true]::before {
+  margin: auto;
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+.db-button[data-wrap=false] {
+  white-space: nowrap;
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
+.db-button[data-size=small] {
+  font-weight: 700;
+  min-block-size: var(--db-sizing-sm);
 }
-.db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
+.db-button[data-size=small]:not([data-no-text=true]) {
+  padding: 1px var(--db-spacing-fixed-sm);
+}
+.db-button[data-size=small]:not([data-no-text=true])::before {
+  margin-inline-end: var(--db-spacing-fixed-2xs);
+}
+.db-button[data-size=small][data-no-text=true] {
+  inline-size: var(--db-sizing-sm);
+}
+.db-button[data-width=full] {
+  inline-size: 100%;
 }
 .db-button[data-variant=filled] {
   background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-button:is(:disabled, [aria-disabled=true]) {

package/build/components/button/button.scss

@@ -1,113 +1,9 @@
-@charset "utf-8";
-@use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/icons";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/component";
 @use "../../styles/internal/button-components";
 
 // generic styles can be found in _button-components.scss
 .db-button {
-	@extend %default-interactive-component;
-	@extend %default-button;
-	@extend %db-overwrite-font-size-md;
-
-	max-inline-size: 100%;
-	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
-	min-block-size: variables.$db-sizing-md;
-	block-size: max-content;
-	inline-size: fit-content;
-	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-md;
-
-	// disable text-decoration if someone wants to use the button for an <a> tag
-	text-decoration: none;
-
-	// Square icon only buttons
-	&[data-no-text="true"] {
-		@include icons.is-icon-text-replace;
-
-		padding: 0;
-		aspect-ratio: 1;
-		inline-size: variables.$db-sizing-md;
-
-		&::before {
-			margin: auto;
-		}
-	}
-
-	&[data-size="small"] {
-		@extend %db-overwrite-font-size-sm;
-
-		font-weight: 700;
-		min-block-size: variables.$db-sizing-sm;
-
-		&:not([data-no-text="true"]) {
-			// stylelint-disable-next-line db-ux/use-spacings
-			padding: 1px variables.$db-spacing-fixed-sm;
-
-			&::before {
-				margin-inline-end: variables.$db-spacing-fixed-2xs;
-			}
-		}
-
-		// Square icon only buttons
-		&[data-no-text="true"] {
-			inline-size: variables.$db-sizing-sm;
-		}
-	}
-
-	&[data-width="full"] {
-		inline-size: 100%;
-	}
-
-	&[data-variant="brand"] {
-		background-color: colors.$db-brand-origin-default;
-		color: colors.$db-brand-on-origin-default;
-		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-brand-origin-hovered;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-brand-origin-pressed;
-			border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
-		}
-	}
-
-	&[data-variant="filled"],
-	&[data-variant="ghost"] {
-		@extend %transparent-border;
-	}
-
-	&[data-variant="outlined"],
-	&:not([data-variant]),
-	&[data-variant=""],
-	&[data-variant="ghost"] {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
-		}
-	}
-
-	&[data-variant="filled"] {
-		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-semi-pressed;
-		}
-	}
+	@include button-components.set-basic-button;
 
 	&:is(:disabled, [aria-disabled="true"]) {
 		opacity: variables.$db-opacity-md;