@db-ux/core-components 2.0.6 → 2.0.7

package/build/styles/internal/_form-components.scss

@@ -408,6 +408,7 @@ $input-valid-types:
 		inset-block-start: $icon-inline-block-start;
 		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 		transform: translateY(-50%);
+		z-index: 1;
 	}
 
 	&::before {
@@ -428,73 +429,55 @@ $input-valid-types:
 	}
 }
 
-// CHECKBOX & RADIO
-
-@mixin get-validity-color-check($key: "valid") {
+@mixin get-validity-color-check-label-color($state, $key: "valid") {
 	$variant: successful;
 
 	@if ($key != "valid") {
 		$variant: critical;
 	}
 
-	@include get-validity-message($key);
+	&:has(input:not([role="switch"])) {
+		&:is(label),
+		> label {
+			color: var(--db-#{$variant}-on-bg-basic-emphasis-100-#{$state});
+		}
+	}
+}
 
-	input:not([role="switch"]) {
-		--db-adaptive-bg-basic-transparent-semi: var(
-			--db-#{$variant}-bg-basic-transparent-semi-default
-		);
-		--db-adaptive-bg-basic-transparent-hovered: var(
-			--db-#{$variant}-bg-basic-transparent-hovered
-		);
-		--db-adaptive-bg-basic-transparent-pressed: var(
-			--db-#{$variant}-bg-basic-transparent-pressed
-		);
+// CHECKBOX & RADIO
 
-		&:not(:checked),
-		&:is([type="radio"]) {
-			--db-check-element-border-color: var(
-				--db-#{$variant}-on-bg-basic-emphasis-70-default
-			);
-		}
+@mixin get-state($state: "hover") {
+	$variant: "hovered";
 
-		&:not([type="radio"]):checked {
-			@include colors.set-current-colors(
-				colors.$db-successful-bg-inverted-contrast-high-default,
-				colors.$db-successful-on-bg-inverted-default,
-				colors.$db-successful-bg-inverted-contrast-high-hovered,
-				colors.$db-successful-bg-inverted-contrast-high-pressed
-			);
-		}
+	@if ($state != "hover") {
+		$variant: "pressed";
 	}
 
-	&:has(input:not([role="switch"])) {
+	&:has(input:#{$state}, > label:#{$state}, :is(label):#{$state}) {
+		--db-check-element-label-color: var(
+			--db-adaptive-on-bg-basic-emphasis-100-#{$variant}
+		);
+
 		&:is(label),
 		> label {
-			color: var(--db-#{$variant}-on-bg-basic-emphasis-80-default);
+			cursor: helpers.$cursor-pointer;
+		}
+
+		input {
+			cursor: helpers.$cursor-pointer;
+			background-color: var(
+				--db-adaptive-bg-basic-transparent-#{$variant}
+			);
+			@content;
 		}
 	}
 }
 
-@mixin set-default-check-element($selector) {
+@mixin set-default-check-element() {
 	@extend %db-overwrite-font-size-md;
 
 	@include set-required-label(input);
 
-	@include get-validity($selector) {
-		@if ($selector == check) {
-			&:has(.db-infotext[data-semantic="successful"]) {
-				@include get-validity-color-check("valid");
-			}
-			/* stylelint-disable-next-line at-rule-empty-line-before */
-		} @else {
-			@include get-validity-color-check("valid");
-		}
-	}
-
-	@include get-validity($selector, "invalid") {
-		@include get-validity-color-check("invalid");
-	}
-
 	&:has(input:disabled) {
 		opacity: component.$default-disabled;
 	}
@@ -505,11 +488,10 @@ $input-valid-types:
 		align-items: flex-start;
 		position: relative;
 		gap: variables.$db-spacing-fixed-xs;
-
-		&:not(:has(input:disabled)) {
-			@include helpers.hover;
-			@include helpers.active;
-		}
+		color: var(
+			--db-check-element-label-color,
+			#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
+		);
 	}
 
 	input {
@@ -526,14 +508,6 @@ $input-valid-types:
 		block-size: $font-size-height;
 		inline-size: $font-size-height;
 		padding: 0;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
-		}
 	}
 
 	&[data-size="small"] {

package/build/styles/internal/_tag-components.scss

@@ -6,35 +6,29 @@
 
 $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 
-%set-adaptive-weak-tag {
-	border-color: colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-
-	@include colors.set-current-colors(
-		colors.$db-adaptive-bg-basic-level-1-default,
-		colors.$db-adaptive-on-bg-basic-emphasis-80-default
+@mixin get-weak($name: "adaptive", $border-color: 60, $background-color: 1) {
+	// stylelint-disable-next-line db-ux/use-border-color
+	border-color: var(
+		--db-#{$name}-on-bg-basic-emphasis-#{$border-color}-default
 	);
-}
-
-%set-adaptive-weak-badge {
-	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
 
 	@include colors.set-current-colors(
-		colors.$db-adaptive-bg-basic-level-3-default,
-		colors.$db-adaptive-on-bg-basic-emphasis-80-default
+		var(--db-#{$name}-bg-basic-level-#{$background-color}-default),
+		var(--db-#{$name}-on-bg-basic-emphasis-80-default)
 	);
 }
 
-%set-adaptive-strong-tag {
-	border-color: colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+@mixin get-strong($name: "adaptive") {
+	border-color: var(--db-#{$name}-on-bg-basic-emphasis-70-default);
 
 	@include colors.set-current-colors(
-		colors.$db-adaptive-bg-vibrant-default,
-		colors.$db-adaptive-on-bg-vibrant-default
+		var(--db-#{$name}-bg-vibrant-default),
+		var(--db-#{$name}-on-bg-vibrant-default)
 	);
 }
 
 %set-interactive-weak {
-	@extend %set-adaptive-weak-tag;
+	@include get-weak();
 
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
@@ -46,39 +40,42 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 }
 
 @mixin get-tag-colors($htmlTag: "tag") {
-	@if ($htmlTag == "badge") {
-		@extend %set-adaptive-weak-badge;
-		// stylelint-disable-next-line at-rule-empty-line-before
-	} @else {
-		@extend %set-adaptive-weak-tag;
-	}
+	$border-color: 60;
+	$background-color: 1;
+
+	&:not([data-semantic]),
+	&[data-semantic="adaptive"] {
+		&:not([data-emphasis]),
+		&[data-emphasis="weak"] {
+			@if ($htmlTag == "badge") {
+				$border-color: 70;
+				$background-color: 3;
+
+				@include get-weak("adaptive", $border-color, $background-color);
+				/* stylelint-disable-next-line at-rule-empty-line-before */
+			} @else {
+				@include get-weak();
+			}
+		}
 
-	&[data-emphasis="strong"] {
-		@extend %set-adaptive-strong-tag;
+		&[data-emphasis="strong"] {
+			@include get-strong();
 
-		.db-tab-remove-button {
-			@extend %set-interactive-strong;
+			.db-tab-remove-button {
+				@extend %set-interactive-strong;
+			}
 		}
 	}
 
 	@each $name in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
-			border-color: var(--db-#{$name}-on-bg-basic-emphasis-60-default);
-
-			@include colors.set-current-colors(
-				var(--db-#{$name}-bg-basic-level-1-default),
-				var(--db-#{$name}-on-bg-basic-emphasis-80-default)
-			);
+			&:not([data-emphasis]),
+			&[data-emphasis="weak"] {
+				@include get-weak($name, $border-color, $background-color);
+			}
 
 			&[data-emphasis="strong"] {
-				border-color: var(
-					--db-#{$name}-on-bg-basic-emphasis-70-default
-				);
-
-				@include colors.set-current-colors(
-					var(--db-#{$name}-bg-vibrant-default),
-					var(--db-#{$name}-on-bg-vibrant-default)
-				);
+				@include get-strong($name);
 			}
 		}
 	}
@@ -95,7 +92,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 }
 
 %set-interactive-strong {
-	@extend %set-adaptive-strong-tag;
+	@include get-strong();
 
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-vibrant-hovered;
@@ -149,7 +146,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		label:has(input[type="radio"]:checked) {
 			&,
 			&:is(:hover, :focus, :active) {
-				@extend %set-adaptive-strong-tag;
+				@include get-strong();
 			}
 		}
 	}
@@ -167,7 +164,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		}
 
 		label:has(input[type="radio"]:checked) {
-			@extend %set-adaptive-strong-tag;
+			@include get-strong();
 		}
 
 		&:has(input):not(:has(input:checked)) {