fix: issue with transition for foreground color (#1562)

db-ui · Sep 13, 2023 · c81d179 · c81d179
1 parent abd55ef
commit c81d179
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss
@@ -15,6 +15,7 @@
 }
 
 .db-link {
+	@extend %default-fg-transition;
 	@extend %db-link-height;
 	inline-size: fit-content;
 	align-items: center;

diff --git a/packages/foundations/scss/db-ui-foundations.scss b/packages/foundations/scss/db-ui-foundations.scss
@@ -19,10 +19,10 @@
 
 [class^="db-"],
 [class^="db-"] * {
-	@extend %default-color-transition;
+	@extend %default-transition;
 
 	::before,
 	::after {
-		@extend %default-color-transition;
+		@extend %default-transition;
 	}
 }
diff --git a/packages/foundations/scss/helpers/_component.scss b/packages/foundations/scss/helpers/_component.scss
@@ -32,15 +32,24 @@ $default-mobile-header-height: functions.to-rem(56);
 	border-radius: $default-border-radius;
 }
 
-%default-color-transition {
+%default-transition {
 	transition:
 		outline
 			var(
 				--db-transition-duration-ultra-fast,
 				#{var-todo.$db-transition-duration-ultra-fast}
 			),
 		background-color
-			var(--db-transition-color, #{var-todo.$db-transition-color}),
+			var(--db-transition-color, #{var-todo.$db-transition-color});
+}
+
+%default-fg-transition {
+	transition:
+		outline
+			var(
+				--db-transition-duration-ultra-fast,
+				#{var-todo.$db-transition-duration-ultra-fast}
+			),
 		color var(--db-transition-color, #{var-todo.$db-transition-color});
 }