fix: form elements border color (#3601)

* fix: form elements border color * test: updated screenshots * test: updated screenshots * test: updated screenshots * Update _accessibility-review.json
db-ui · Dec 16, 2024 · a83866d · a83866d
1 parent 188b896
commit a83866d
Show file tree

Hide file tree

Showing 31 changed files with 12 additions and 2 deletions.
diff --git a/__snapshots__/input/component/chromium/DBInput-should-match-screenshot.png b/__snapshots__/input/component/chromium/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/component/firefox/DBInput-should-match-screenshot.png b/__snapshots__/input/component/firefox/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/component/mobile-chrome/DBInput-should-match-screenshot.png b/__snapshots__/input/component/mobile-chrome/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png b/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png
diff --git a/.../chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/.../chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...e/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...e/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...le-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...le-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...le-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...le-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/...se/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/...se/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
diff --git a/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/chromium/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/firefox/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png b/__snapshots__/select/component/mobile-chrome/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png b/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png
diff --git a/...hromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...hromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/...-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/...-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/.../webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/.../webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png
diff --git a/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/chromium/DBTextarea-should-match-screenshot.png
diff --git a/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/component/firefox/DBTextarea-should-match-screenshot.png
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/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png
diff --git a/...ium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/...ium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
diff --git a/...fox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/...fox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
diff --git a/...ome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/...ome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
diff --git a/...ari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/...ari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
diff --git a/...kit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/...kit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss
@@ -62,7 +62,7 @@
 			}
 
 			&::after {
-				@extend %component-border;
+				@extend %form-component-border;
 
 				@include get-scrolling-workaround();
 

diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss
@@ -24,6 +24,11 @@ $placeholder-disabled: 0.68;
 		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 }
 
+%form-component-border {
+	border: variables.$db-border-height-3xs solid
+		colors.$db-adaptive-on-bg-basic-emphasis-70-default;
+}
+
 %default-interactive-component {
 	@extend %default-adaptive-border;
 

diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -301,7 +301,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file",
 	#{$selector} {
 		@extend %db-overwrite-font-size-md;
 		@extend %default-interactive-component;
-		@extend %component-border;
+		@extend %form-component-border;
 
 		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 		caret-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;

diff --git a/showcases/shared/_accessibility-review.json b/showcases/shared/_accessibility-review.json
@@ -53,5 +53,10 @@
 		"name": "card",
 		"status": "DONE",
 		"date": "2024-12-12"
+	},
+	{
+		"name": "textarea",
+		"status": "DONE",
+		"date": "2024-12-12"
 	}
 ]