fix: textarea "responsiveness" due to CSS selector (#5574)

* refactor: simplified selector

* refactor: simplified declaration

* Update default-required.scss

* Update default-required.scss

* Change color-scheme selector to :root

* refactor: another try

* Add CSS variable for color scheme options

* Fix textarea responsiveness due to CSS selector

* Update tasty-tips-suffer.md

* Update default-required.scss

* refactor: another try

* refactor: trying another approach

* Update default-required.scss

* Apply suggestions from code review

---------

Co-authored-by: Michael Kraus <[email protected]>

Author: mfranzke

.changeset/tasty-tips-suffer.md

@@ -0,0 +1,9 @@
+---
+"@db-ux/core-components": patch
+"@db-ux/ngx-core-components": patch
+"@db-ux/react-core-components": patch
+"@db-ux/wc-core-components": patch
+"@db-ux/v-core-components": patch
+---
+
+fix(textarea): "responsiveness" due to CSS selector

packages/foundations/scss/defaults/default-required.scss

@@ -34,8 +34,23 @@
 }
 
 // We'll set the color scheme (https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) to light and dark if it's not already set as a meta tag in the head, which would be the recommended way.
-html:not(:has(> head > meta[name="color-scheme"])) {
-	color-scheme: light dark;
+:root {
+	color-scheme: var(--db-color-scheme, light dark);
+}
+
+// We need to set the CSS value based on an existing HTML meta tag definition because the previous CSS definition would override that HTML declaration.
+head {
+	&:has([name="color-scheme"][content*="light"][content*="dark"]) + body {
+		--db-color-scheme: light dark;
+	}
+
+	&:has([name="color-scheme"][content="light"]) + body {
+		--db-color-scheme: light;
+	}
+
+	&:has([name="color-scheme"][content="dark"]) + body {
+		--db-color-scheme: dark;
+	}
 }
 
 /* TODO: Switch to attr() as soon as this one is fully supported */
@@ -67,7 +82,9 @@ body {
 }
 
 // Box sizing
-html {
+*,
+::before,
+::after {
 	box-sizing: var(--db-box-sizing, border-box);
 }
 
@@ -79,12 +96,6 @@ html {
 	text-rendering: optimizelegibility;
 }
 
-*,
-::before,
-::after {
-	box-sizing: inherit;
-}
-
 // Make sure every elements has the current color from container above
 body,
 button,