fix: issues with snapshots

db-ui · Oct 23, 2023 · 098910e · 098910e
1 parent 6c9a392
commit 098910e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png b/...shots__/textarea/component/mobile-chrome/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-chrome/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png b/...a/showcase/mobile-safari/regular/neutral/DBTextarea-should-match-screenshot.png
diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss
@@ -42,12 +42,20 @@ $scrollbar-width: 12px;
 		@extend %default-transition;
 		z-index: 3;
 		inline-size: $scrollbar-width;
-		background-color: colors.$db-current-bg-color;
+		background-color: colors.$db-base-bg;
 		border-start-end-radius: component.$default-border-radius;
 	}
 
+	&:hover {
+		&::-webkit-scrollbar-track,
+		&::-webkit-scrollbar-button:single-button,
+		&::-webkit-resizer {
+			@include colors.get-variant-bg-color(0.16);
+		}
+	}
+
 	&::-webkit-scrollbar-track {
-		@include colors.get-variant-bg-color(0);
+		@include colors.get-variant-bg-color(0.08);
 		border-end-end-radius: component.$default-border-radius;
 	}
 
@@ -67,6 +75,7 @@ $scrollbar-width: 12px;
 	/* Buttons */
 	&::-webkit-scrollbar-button:single-button {
 		@include colors.bg-transparent-interactive(false);
+		@include colors.get-variant-bg-color(0.08);
 		background-size: $scrollbar-width;
 		background-repeat: no-repeat;
 		background-position: center;
@@ -83,7 +92,7 @@ $scrollbar-width: 12px;
 	}
 
 	&::-webkit-resizer {
-		@include colors.get-variant-bg-color(0);
+		@include colors.get-variant-bg-color(0.08);
 		background-size: $scrollbar-width;
 		background-repeat: no-repeat;
 		background-position: center;
@@ -93,7 +102,7 @@ $scrollbar-width: 12px;
 
 	&::-webkit-scrollbar-corner {
 		@extend %default-transition;
-		background-color: colors.$db-current-bg-color;
+		background-color: colors.$db-base-bg;
 		border-end-end-radius: calc(#{component.$default-border-radius});
 	}
 }
@@ -121,16 +130,23 @@ $scrollbar-width: 12px;
 			&::before {
 				@extend %default-transition;
 				@include get-scrolling-workaround();
-				background-color: colors.$db-current-bg-color;
+				background-color: colors.$db-base-bg;
 			}
 
 			&::after {
 				@extend %component-border;
 				@include get-scrolling-workaround();
+				@include colors.get-variant-bg-color(0.08);
 				z-index: 1;
 				border-block-end: none;
 				border-inline-end: none;
 			}
+
+			&:has(textarea:enabled:hover) {
+				&::after {
+					@include colors.get-variant-bg-color(0.16);
+				}
+			}
 		}
 	}
 }