feat: add cursor pointer to interactive components

nmerget · nmerget · commit ddec5b05bfa5 · 2024-03-01T09:48:39.000+01:00
diff --git a/packages/components/src/README.md b/packages/components/src/README.md
@@ -48,15 +48,15 @@ Main use-case to overwrite a color or change colors by `data-variant`. Example:
 
 ```scss
 @use "@db-ui/foundations/build/scss/colors";
+@use "@db-ui/foundations/build/scss/helpers";
 
 .db-xxx {
-	&:enabled {
-		&:hover {
-			background-color: colors.$db-current-color-bg-transparent-hover;
-		}
-		&:active {
-			background-color: colors.$db-current-color-bg-transparent-pressed;
-		}
+	@include helpers.hover {
+		background-color: colors.$db-current-color-bg-transparent-hover;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-current-color-bg-transparent-pressed;
 	}
 
 	@each $name in colors.$variant-colors {
diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss
@@ -42,11 +42,11 @@
 		padding: variables.$db-spacing-fixed-md;
 		gap: variables.$db-spacing-fixed-md;
 
-		&:hover {
+		@include helpers.hover {
 			background-color: colors.$db-current-color-bg-transparent-hover;
 		}
 
-		&:active {
+		@include helpers.active {
 			background-color: colors.$db-current-color-bg-transparent-pressed;
 		}
 
diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
@@ -3,6 +3,7 @@
 @use "@db-ui/foundations/build/scss/variables";
 @use "@db-ui/foundations/build/scss/colors";
 @use "@db-ui/foundations/build/scss/icons";
+@use "@db-ui/foundations/build/scss/helpers";
 @use "../../styles/component";
 @use "../../styles/button-components";
 
@@ -19,6 +20,14 @@
 	// disable text-decoration if someone wants to use the button for an <a> tag
 	text-decoration: none;
 
+	@include helpers.hover {
+		background-color: colors.$db-current-color-bg-transparent-hover;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-current-color-bg-transparent-pressed;
+	}
+
 	// Square icon only buttons
 	&[data-no-text="true"] {
 		@include icons.is-icon-text-replace();
@@ -59,14 +68,12 @@
 		background-color: colors.$db-brand-origin-enabled;
 		color: colors.$db-brand-on-enabled;
 
-		&:not(:disabled) {
-			&:hover {
-				background-color: colors.$db-brand-origin-hover;
-			}
+		@include helpers.hover {
+			background-color: colors.$db-brand-origin-hover;
+		}
 
-			&:active {
-				background-color: colors.$db-brand-origin-pressed;
-			}
+		@include helpers.active {
+			background-color: colors.$db-brand-origin-pressed;
 		}
 	}
 
@@ -85,16 +92,6 @@
 		background-color: colors.$db-current-color-bg-transparent-semi-enabled;
 	}
 
-	&:not(:disabled) {
-		&:hover {
-			background-color: colors.$db-current-color-bg-transparent-hover;
-		}
-
-		&:active {
-			background-color: colors.$db-current-color-bg-transparent-pressed;
-		}
-	}
-
 	&:disabled {
 		opacity: component.$default-disabled;
 	}
diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss
@@ -1,5 +1,6 @@
 @use "@db-ui/foundations/build/scss/variables";
 @use "@db-ui/foundations/build/scss/colors";
+@use "@db-ui/foundations/build/scss/helpers";
 @use "../../styles/component";
 
 .db-card {
@@ -29,12 +30,12 @@
 	&:not([data-elevation-level]) {
 		background-color: colors.$db-current-color-bg-lvl-1-enabled;
 
-		&[data-behaviour="interactive"]:not(:disabled) {
-			&:hover {
+		&[data-behaviour="interactive"] {
+			@include helpers.hover {
 				background-color: colors.$db-current-color-bg-lvl-1-hover;
 			}
 
-			&:active {
+			@include helpers.active {
 				background-color: colors.$db-current-color-bg-lvl-1-pressed;
 			}
 		}
@@ -43,12 +44,12 @@
 	&[data-elevation-level="2"] {
 		background-color: colors.$db-current-color-bg-lvl-2-enabled;
 
-		&[data-behaviour="interactive"]:not(:disabled) {
-			&:hover {
+		&[data-behaviour="interactive"] {
+			@include helpers.hover {
 				background-color: colors.$db-current-color-bg-lvl-2-hover;
 			}
 
-			&:active {
+			@include helpers.active {
 				background-color: colors.$db-current-color-bg-lvl-2-pressed;
 			}
 		}
@@ -57,12 +58,12 @@
 	&[data-elevation-level="3"] {
 		background-color: colors.$db-current-color-bg-lvl-3-enabled;
 
-		&[data-behaviour="interactive"]:not(:disabled) {
-			&:hover {
+		&[data-behaviour="interactive"] {
+			@include helpers.hover {
 				background-color: colors.$db-current-color-bg-lvl-3-hover;
 			}
 
-			&:active {
+			@include helpers.active {
 				background-color: colors.$db-current-color-bg-lvl-3-pressed;
 			}
 		}
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -2,6 +2,7 @@
 @use "@db-ui/foundations/build/scss/icons";
 @use "@db-ui/foundations/build/scss/density";
 @use "@db-ui/foundations/build/scss/colors";
+@use "@db-ui/foundations/build/scss/helpers";
 @use "../../styles/component";
 @use "../../styles/form-components";
 
@@ -28,18 +29,16 @@
 			color: colors.$db-current-color-bg-enabled;
 			background-color: colors.$db-current-color-enabled;
 
-			&::before {
-				color: colors.$db-current-color-bg-enabled;
+			@include helpers.hover {
+				background-color: colors.$db-current-color-hover;
 			}
 
-			&:not(:disabled) {
-				&:hover {
-					background-color: colors.$db-current-color-hover;
-				}
+			@include helpers.active {
+				background-color: colors.$db-current-color-pressed;
+			}
 
-				&:active {
-					background-color: colors.$db-current-color-pressed;
-				}
+			&::before {
+				color: colors.$db-current-color-bg-enabled;
 			}
 		}
 
diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
@@ -45,11 +45,11 @@
 		--db-current-icon-color: #{colors.$db-brand-contrast-high-enabled};
 		color: colors.$db-current-color-enabled;
 
-		&:hover {
+		@include helpers.hover {
 			--db-current-color-enabled: #{colors.$db-brand-contrast-high-hover};
 		}
 
-		&:active {
+		@include helpers.active {
 			--db-current-color-enabled: #{colors.$db-brand-contrast-high-pressed};
 		}
 	}
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -57,14 +57,17 @@
 	text-align: center;
 	align-items: center; // Centering the content vertically and horizontally
 
-	&:hover,
-	&:has(~ .db-sub-navigation:hover) {
+	@include helpers.hover {
 		background-color: colors.$db-current-color-bg-transparent-hover;
 	}
 
-	&:active {
+	@include helpers.active {
 		background-color: colors.$db-current-color-bg-transparent-pressed;
 	}
+
+	&:has(~ .db-sub-navigation:hover) {
+		background-color: colors.$db-current-color-bg-transparent-hover;
+	}
 }
 
 .db-navigation-item {
diff --git a/packages/components/src/components/tab/tab.scss b/packages/components/src/components/tab/tab.scss
@@ -2,6 +2,7 @@
 @use "@db-ui/foundations/build/scss/colors";
 @use "@db-ui/foundations/build/scss/focus";
 @use "@db-ui/foundations/build/scss/icons";
+@use "@db-ui/foundations/build/scss/helpers";
 @use "../../styles/component";
 @use "../../styles/db-puls";
 @use "../../styles/form-components";
@@ -17,11 +18,11 @@
 	position: relative;
 	background-color: colors.$db-current-color-bg-transparent-full-enabled;
 
-	&:hover {
+	@include helpers.hover {
 		background-color: colors.$db-current-color-bg-transparent-hover;
 	}
 
-	&:active {
+	@include helpers.active {
 		background-color: colors.$db-current-color-bg-transparent-pressed;
 	}
 
@@ -38,6 +39,7 @@
 			block-size: calc(100% + #{variables.$db-border-height-3xs});
 			margin-inline-end: initial;
 			inset: 0;
+			cursor: inherit;
 
 			&:focus-within,
 			&:focus-visible {
diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -237,7 +237,7 @@ $floating-label-size: calc(
 			opacity: component.$default-disabled;
 		}
 
-		&:hover {
+		@include helpers.hover {
 			background-color: colors.$db-current-color-bg-transparent-hover;
 		}
 
@@ -373,6 +373,11 @@ $floating-label-size: calc(
 		display: flex;
 		align-items: center;
 		position: relative;
+
+		&:not(:has(input:disabled)) {
+			@include helpers.hover;
+			@include helpers.active;
+		}
 	}
 
 	input {
@@ -396,14 +401,12 @@ $floating-label-size: calc(
 		inline-size: auto;
 		padding: 0;
 
-		&:enabled {
-			&:hover {
-				background-color: colors.$db-current-color-bg-transparent-hover;
-			}
+		@include helpers.hover {
+			background-color: colors.$db-current-color-bg-transparent-hover;
+		}
 
-			&:active {
-				background-color: colors.$db-current-color-bg-transparent-pressed;
-			}
+		@include helpers.active {
+			background-color: colors.$db-current-color-bg-transparent-pressed;
 		}
 	}
 
diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss
@@ -12,15 +12,15 @@
 %db-link-default-color {
 	color: colors.$db-current-color-enabled;
 
-	&:hover {
+	@include helpers.hover {
 		color: color-mix(
 			in srgb,
 			transparent 25%,
 			colors.$db-current-color-enabled
 		);
 	}
 
-	&:active {
+	@include helpers.active {
 		color: color-mix(
 			in srgb,
 			transparent 50%,
diff --git a/packages/components/src/styles/_tag-components.scss b/packages/components/src/styles/_tag-components.scss
@@ -2,6 +2,7 @@
 @use "component";
 @use "@db-ui/foundations/build/scss/variables";
 @use "@db-ui/foundations/build/scss/colors";
+@use "@db-ui/foundations/build/scss/helpers";
 
 $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 
@@ -45,23 +46,23 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 %set-interactive-weak {
 	background-color: colors.$db-current-color-bg-lvl-1-enabled;
 
-	&:hover {
+	@include helpers.hover {
 		background-color: colors.$db-current-color-bg-lvl-1-hover;
 	}
 
-	&:active {
+	@include helpers.active {
 		background-color: colors.$db-current-color-bg-lvl-1-pressed;
 	}
 }
 
 %set-interactive-strong {
 	@extend %set-adaptive-strong-tag;
 
-	&:hover {
+	@include helpers.hover {
 		background-color: colors.$db-current-color-contrast-high-hover;
 	}
 
-	&:active {
+	@include helpers.active {
 		background-color: colors.$db-current-color-contrast-high-pressed;
 	}
 }
@@ -89,11 +90,11 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		label:has(input[type="checkbox"]:checked) {
 			background-color: colors.$db-current-color-bg-lvl-3-enabled;
 
-			&:hover {
+			@include helpers.hover {
 				background-color: colors.$db-current-color-bg-lvl-3-hover;
 			}
 
-			&:active {
+			@include helpers.active {
 				background-color: colors.$db-current-color-bg-lvl-3-pressed;
 			}
 		}
diff --git a/packages/foundations/scss/_init.scss b/packages/foundations/scss/_init.scss
@@ -3,6 +3,7 @@
 @use "animation";
 @use "density";
 @use "focus";
+@use "helpers";
 
 :root {
 	@extend %db-component-variables-md;
@@ -303,11 +304,11 @@ p {
 		variables.$db-transition-timing-functional;
 	box-shadow: variables.$db-elevation-md;
 
-	&:hover:not(:disabled) {
+	@include helpers.hover {
 		box-shadow: variables.$db-elevation-lg;
 	}
 
-	&:active:not(:disabled) {
+	@include helpers.active {
 		box-shadow: variables.$db-elevation-sm;
 	}
 }
diff --git a/packages/foundations/scss/helpers/_functions.scss b/packages/foundations/scss/helpers/_functions.scss

Original file line number	Diff line number	Diff line change
`@@ -42,11 +42,11 @@`
`42`	`42`	`padding: variables.$db-spacing-fixed-md;`
`43`	`43`	`gap: variables.$db-spacing-fixed-md;`
`44`	`44`
`45`		`- &:hover {`
	`45`	`+ @include helpers.hover {`
`46`	`46`	`background-color: colors.$db-current-color-bg-transparent-hover;`
`47`	`47`	`}`
`48`	`48`
`49`		`- &:active {`
	`49`	`+ @include helpers.active {`
`50`	`50`	`background-color: colors.$db-current-color-bg-transparent-pressed;`
`51`	`51`	`}`
`52`	`52`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`@use "@db-ui/foundations/build/scss/variables";`
`2`	`2`	`@use "@db-ui/foundations/build/scss/colors";`
	`3`	`+@use "@db-ui/foundations/build/scss/helpers";`
`3`	`4`	`@use "../../styles/component";`
`4`	`5`
`5`	`6`	`.db-card {`
`@@ -29,12 +30,12 @@`
`29`	`30`	`&:not([data-elevation-level]) {`
`30`	`31`	`background-color: colors.$db-current-color-bg-lvl-1-enabled;`
`31`	`32`
`32`		`- &[data-behaviour="interactive"]:not(:disabled) {`
`33`		`- &:hover {`
	`33`	`+ &[data-behaviour="interactive"] {`
	`34`	`+ @include helpers.hover {`
`34`	`35`	`background-color: colors.$db-current-color-bg-lvl-1-hover;`
`35`	`36`	`}`
`36`	`37`
`37`		`- &:active {`
	`38`	`+ @include helpers.active {`
`38`	`39`	`background-color: colors.$db-current-color-bg-lvl-1-pressed;`
`39`	`40`	`}`
`40`	`41`	`}`
`@@ -43,12 +44,12 @@`
`43`	`44`	`&[data-elevation-level="2"] {`
`44`	`45`	`background-color: colors.$db-current-color-bg-lvl-2-enabled;`
`45`	`46`
`46`		`- &[data-behaviour="interactive"]:not(:disabled) {`
`47`		`- &:hover {`
	`47`	`+ &[data-behaviour="interactive"] {`
	`48`	`+ @include helpers.hover {`
`48`	`49`	`background-color: colors.$db-current-color-bg-lvl-2-hover;`
`49`	`50`	`}`
`50`	`51`
`51`		`- &:active {`
	`52`	`+ @include helpers.active {`
`52`	`53`	`background-color: colors.$db-current-color-bg-lvl-2-pressed;`
`53`	`54`	`}`
`54`	`55`	`}`
`@@ -57,12 +58,12 @@`
`57`	`58`	`&[data-elevation-level="3"] {`
`58`	`59`	`background-color: colors.$db-current-color-bg-lvl-3-enabled;`
`59`	`60`
`60`		`- &[data-behaviour="interactive"]:not(:disabled) {`
`61`		`- &:hover {`
	`61`	`+ &[data-behaviour="interactive"] {`
	`62`	`+ @include helpers.hover {`
`62`	`63`	`background-color: colors.$db-current-color-bg-lvl-3-hover;`
`63`	`64`	`}`
`64`	`65`
`65`		`- &:active {`
	`66`	`+ @include helpers.active {`
`66`	`67`	`background-color: colors.$db-current-color-bg-lvl-3-pressed;`
`67`	`68`	`}`
`68`	`69`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,11 @@`
`45`	`45`	`--db-current-icon-color: #{colors.$db-brand-contrast-high-enabled};`
`46`	`46`	`color: colors.$db-current-color-enabled;`
`47`	`47`
`48`		`- &:hover {`
	`48`	`+ @include helpers.hover {`
`49`	`49`	`--db-current-color-enabled: #{colors.$db-brand-contrast-high-hover};`
`50`	`50`	`}`
`51`	`51`
`52`		`- &:active {`
	`52`	`+ @include helpers.active {`
`53`	`53`	`--db-current-color-enabled: #{colors.$db-brand-contrast-high-pressed};`
`54`	`54`	`}`
`55`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -57,14 +57,17 @@`
`57`	`57`	`text-align: center;`
`58`	`58`	`align-items: center; // Centering the content vertically and horizontally`
`59`	`59`
`60`		`- &:hover,`
`61`		`- &:has(~ .db-sub-navigation:hover) {`
	`60`	`+ @include helpers.hover {`
`62`	`61`	`background-color: colors.$db-current-color-bg-transparent-hover;`
`63`	`62`	`}`
`64`	`63`
`65`		`- &:active {`
	`64`	`+ @include helpers.active {`
`66`	`65`	`background-color: colors.$db-current-color-bg-transparent-pressed;`
`67`	`66`	`}`
	`67`	`+`
	`68`	`+ &:has(~ .db-sub-navigation:hover) {`
	`69`	`+ background-color: colors.$db-current-color-bg-transparent-hover;`
	`70`	`+ }`
`68`	`71`	`}`
`69`	`72`
`70`	`73`	`.db-navigation-item {`