@db-ux/core-components 4.4.3 → 4.5.0

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;

package/build/components/card/card.css

@@ -53,30 +53,72 @@
   padding: unset;
   font: inherit;
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > .db-card,
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > db-card > .db-card {
   background-color: var(--db-card-background-color-hovered);
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), :is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > .db-card,
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > .db-card,
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) > db-card > .db-card {
   background-color: var(--db-card-background-color-pressed);
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), :is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+:is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 
@@ -109,24 +151,54 @@
 .db-card[data-behavior=interactive] {
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-card-background-color-hovered);
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-card-background-color-pressed);
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
+.db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-card[data-elevation-level="2"] {

package/build/components/checkbox/checkbox.css

@@ -71,6 +71,7 @@
   text-transform: none;
   overflow: clip;
   vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
   block-size: var(--db-icon-font-size, 1.5rem);
   aspect-ratio: 1;
   flex-shrink: 0;