diff --git a/.github/workflows/00-init.yml b/.github/workflows/00-init.yml
index 613b79e12c20..aba030449c08 100644
--- a/.github/workflows/00-init.yml
+++ b/.github/workflows/00-init.yml
@@ -17,10 +17,10 @@ jobs:
           ASSET_INIT_VECTOR: ${{ secrets.ASSET_INIT_VECTOR }}
           ASSET_PASSWORD: ${{ secrets.ASSET_PASSWORD }}
 
-#      - name: 🚮 Dump GitHub context for debugging
-#        env:
-#          GITHUB_CONTEXT: ${{ toJson(github) }}
-#        run: echo "$GITHUB_CONTEXT"
+      #      - name: 🚮 Dump GitHub context for debugging
+      #        env:
+      #          GITHUB_CONTEXT: ${{ toJson(github) }}
+      #        run: echo "$GITHUB_CONTEXT"
 
       - name: 💀 Killing me softly
         uses: ./.github/actions/cancel-workflow
diff --git a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
index f81a28d6fc45..7be170929b9d 100644
Binary files a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
index 8df0cfc3a49a..0cdd7fbcc497 100644
Binary files a/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ
diff --git a/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png
index 68bb7fd4471d..cdca96286650 100644
Binary files a/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png and b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ
diff --git a/packages/components/src/styles/internal/_form-components.scss b/packages/components/src/styles/internal/_form-components.scss
index 29121d1afb35..c0d2428418df 100644
--- a/packages/components/src/styles/internal/_form-components.scss
+++ b/packages/components/src/styles/internal/_form-components.scss
@@ -153,6 +153,24 @@ $db-min-inline-size: var(
 				}
 			}
 		}
+
+		@each $state, $variant in (valid: successful, invalid: critical) {
+			&[data-custom-validity="#{$state}"] > label,
+			&:has(> #{$selector}[data-custom-validity="#{$state}"]) > label {
+				color: var(--db-#{$variant}-on-bg-basic-emphasis-70-default);
+			}
+
+			@if ($selector == textarea) {
+				&:has(> #{$selector}[data-custom-validity="#{$state}"]) {
+					&::before,
+					&::after {
+						// necessary to force this override over the placeholder-content mixin's ::before rule
+						// to avoid the label to influence the border of the textarea
+						content: none !important;
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -183,30 +201,14 @@ $db-min-inline-size: var(
 		$variant: "critical";
 	}
 
-	@if ($selector != textarea) {
+	& {
+		@if ($selector == textarea) {
+			--db-textarea-read-only: var(
+				--db-#{$variant}-bg-basic-level-1-default
+			);
+		}
+
 		@extend %db-#{$variant}-variables;
-		/* stylelint-disable-next-line at-rule-empty-line-before */
-	} @else {
-		// this is a workaround for the textarea scrollbar
-		--db-textarea-read-only: var(--db-#{$variant}-bg-basic-level-1-default);
-		--db-adaptive-bg-basic-transparent-full-default: var(
-			--db-#{$variant}-bg-basic-transparent-full-default
-		);
-		--db-adaptive-bg-basic-transparent-semi-default: 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
-		);
-		--db-adaptive-on-bg-basic-emphasis-100-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-100-default
-		);
-		--db-adaptive-on-bg-basic-emphasis-60-default: var(
-			--db-#{$variant}-on-bg-basic-emphasis-60-default
-		);
 	}
 
 	#{$selector},