@db-ux/core-foundations 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,10 +1,17 @@
 # @db-ux/core-foundations
 
+## 4.2.3
+
+### Patch Changes
+
+- fix(SASS): return typed values from scss functions `px-to-rem` and `px-to-em` instead of strings - [see commit e1be60a](https://github.com/db-ux-design-system/core-web/commit/e1be60a871596107d8026390b194f0730c84a8ad)
+
+- refactor(css): replacing slow selector - [see commit 1133c21](https://github.com/db-ux-design-system/core-web/commit/1133c216ab5ec802241c6986fc9287ff22a287b0)
+
 ## 4.2.2
 
 _version bump_
 
-
 ## 4.2.1
 
 _version bump_

package/build/styles/absolute.css

@@ -52,11 +52,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 /* Screen sizes */
 /* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
-blockquote:not([class]), [data-mode], :is(:root, :host) {
+blockquote:not([class]), [data-mode], :root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  blockquote:not([class]), [data-mode], :is(:root, :host) {
+  blockquote:not([class]), [data-mode], :root,
+  :host {
     --db-adaptive-bg-basic-level-1-default: var(
     	--db-neutral-bg-basic-level-1-default
     );
@@ -207,11 +209,12 @@ blockquote:not([class]), [data-mode], :is(:root, :host) {
   }
 }
 
-[data-mode], :is(:root, :host) {
+[data-mode], :root,
+:host {
   background-color: var(--db-neutral-bg-basic-level-1-default);
   color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
-[data-mode]::before, :is(:root, :host)::before, [data-mode]::after, :is(:root, :host)::after {
+[data-mode]::before, :root::before, [data-mode]::after, :root::after {
   --db-icon-color: var(--db-neutral-on-bg-basic-emphasis-100-default);
 }
 
@@ -6052,16 +6055,19 @@ html::after {
 
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   font: var(--db-type-body-md);
 }
 
-:is(:root, :host) {
+:root,
+:host {
   font: var(--db-type-body-md);
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* Those variables are only for components to calculate heights and change icons */
     --db-icon-font-weight: var(--db-base-body-icon-weight-md);
     --db-icon-font-size: var(--db-base-body-icon-font-size-md);
@@ -6114,11 +6120,13 @@ code {
  */
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     --db-sizing-3xs: var(--db-sizing-regular-3xs);
     --db-sizing-2xs: var(--db-sizing-regular-2xs);
     --db-sizing-xs: var(--db-sizing-regular-xs);
@@ -6145,7 +6153,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
@@ -6158,7 +6167,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
@@ -6171,7 +6181,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
       --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
       --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
@@ -6191,11 +6202,13 @@ code {
 
 @layer variables {}
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -6204,7 +6217,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
@@ -6235,7 +6249,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
@@ -6266,7 +6281,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
       --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
       --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
@@ -6298,11 +6314,13 @@ code {
   }
 }
 
-:is(:root, :host) {
+:root,
+:host {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 }
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* stylelint-disable-next-line media-query-no-invalid */
     /* stylelint-disable-next-line at-rule-empty-line-before */
     /* stylelint-disable-next-line media-query-no-invalid */
@@ -6311,7 +6329,8 @@ code {
     /* stylelint-disable-next-line at-rule-empty-line-before */
   }
   @media screen and (width <= 48em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
@@ -6342,7 +6361,8 @@ code {
     }
   }
   @media screen and (48em < width <= 64em) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
@@ -6373,7 +6393,8 @@ code {
     }
   }
   @media screen and (64em < width) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
       --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
       --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
@@ -6692,7 +6713,8 @@ blockquote:not([class]) {
 
 /* Required styles to normalize default css */
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     --db-neutral-origin-default: light-dark(
     	var(--db-neutral-origin-light-default),
     	var(--db-neutral-origin-dark-default)
@@ -10411,32 +10433,46 @@ blockquote:not([class]) {
 }
 /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
 @layer variables {
-  :is(:root, :host) {
+  :root,
+  :host {
     /* COLORS */
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
   }
   @media (prefers-color-scheme: dark) {
-    :is(:root, :host) {
+    :root,
+    :host {
       --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
       --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
       --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
     }
   }
-  :is(:root, :host) [data-mode=dark] {
+  :root [data-mode=dark],
+  :host [data-mode=dark] {
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiNmOGY4ZjkiIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iI2Y4ZjhmOSIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDdhLjk5OC45OTggMCAwIDAgLS45OTQuOTk1YzAgLjI2Ni4xMzMuNTMxLjI5OC42OTdsNS4wMDYgNS4wMWMuMTk5LjE5OC40NjQuMjk4LjY5Ni4yOThhLjkzNi45MzYgMCAwIDAgLjYyLS4yMmw1LjA4Mi01LjA4OGMuMTk5LS4xNjYuMjk4LS40MzEuMjk4LS42OTdhLjk5OC45OTggMCAwIDAgLS45OTQtLjk5NWMtLjI2NiAwLS41My4xLS43My4yOTlsLTQuMjc2IDQuMjgtNC4yNzYtNC4yOGExLjAyOCAxLjAyOCAwIDAgMCAtLjczLS4yOTl6IiBmaWxsPSIjZjhmOGY5IiBzdHlsZT0idmFyKC0tZGItaWNvbi1jb2xvciwgY3VycmVudENvbG9yKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+DQo=");
   }
-  :is(:root, :host) [data-mode=light] {
+  :root [data-mode=light],
+  :host [data-mode=light] {
     --db-textarea-resizer-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjUgMTYuNWEuOTk5Ljk5OSAwIDAgMSAtLjcwNy0xLjcwN2w0LTRhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTQgNGEuOTk3Ljk5NyAwIDAgMSAtLjcwNy4yOTN6bS03IDBhLjk5OS45OTkgMCAwIDEgLS43MDctMS43MDdsMTEtMTFhLjk5OS45OTkgMCAxIDEgMS40MTQgMS40MTRsLTExIDExYS45OTcuOTk3IDAgMCAxIC0uNzA3LjI5M3oiIGZpbGw9IiMyODJkMzciIHN0eWxlPSJ2YXIoLS1kYi1pY29uLWNvbG9yLCBjdXJyZW50Q29sb3IpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4NCg==");
     --db-textarea-scrollbar-button-decrement: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuOTk0IDEzYS45OTguOTk4IDAgMCAxIC0uOTk0LS45OTVjMC0uMjY2LjEzMy0uNTMxLjI5OC0uNjk3bDUuMDA2LTUuMDFjLjE5OS0uMTk4LjQ2NC0uMjk4LjY5Ni0uMjk4LjIyNyAwIC40NTUuMDczLjYyLjIybDUuMDgyIDUuMDg4Yy4xOTkuMTY2LjI5OC40MzEuMjk4LjY5N2EuOTk4Ljk5OCAwIDAgMSAtLjk5NC45OTVjLS4yNjYgMC0uNTMtLjEtLjczLS4yOTlsLTQuMjc2LTQuMjgtNC4yNzYgNC4yOGMtLjIuMi0uNDY0LjI5OS0uNzMuMjk5eiIgZmlsbD0iIzI4MmQzNyIgc3R5bGU9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg0K");
     --db-textarea-scrollbar-button-increment: url("data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjQ3MiA4LjY5Ni0zLjUzMiAzLjUzNGEuOTk4Ljk5OCAwIDEgMSAtMS40MTMtMS40MTNsMi44MjUtMi44MjUtMi44MjUtMi44MjVhLjk5OC45OTggMCAxIDEgMS40MTMtMS40MTNsMy41MzIgMy41MzJhLjk5OS45OTkgMCAwIDEgMCAxLjQxMnoiIGZpbGw9InZhcigtLWRiLWljb24tY29sb3IsIGN1cnJlbnRDb2xvcikiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoMCAxIC0xIDAgMTUuOTkxIC0uMDA5KSIvPjwvc3ZnPg0K");
   }
 }
-html:not(:has(> head > meta[name=color-scheme])) {
-  color-scheme: light dark;
+:root {
+  color-scheme: var(--db-color-scheme, light dark);
+}
+
+head:has([name=color-scheme][content*=light][content*=dark]) + body {
+  --db-color-scheme: light dark;
+}
+head:has([name=color-scheme][content=light]) + body {
+  --db-color-scheme: light;
+}
+head:has([name=color-scheme][content=dark]) + body {
+  --db-color-scheme: dark;
 }
 
 /* TODO: Switch to attr() as soon as this one is fully supported */
@@ -10466,7 +10502,9 @@ body {
   font-family: var(--db-font-family-sans);
 }
 
-html {
+*,
+::before,
+::after {
   box-sizing: var(--db-box-sizing, border-box);
 }
 
@@ -10477,12 +10515,6 @@ html {
   text-rendering: optimizelegibility;
 }
 
-*,
-::before,
-::after {
-  box-sizing: inherit;
-}
-
 body,
 button,
 input,

package/build/styles/colors/_default-color-mappings.scss

@@ -1,5 +1,6 @@
 @layer variables {
-	:is(:root, :host) {
+	:root,
+	:host {
 		--db-neutral-origin-default: light-dark(
 			var(--db-neutral-origin-light-default),
 			var(--db-neutral-origin-dark-default)

package/build/styles/defaults/_default-container-variables.scss

@@ -1,4 +1,5 @@
-:is(:root, :host) {
+:root,
+:host {
 	--db-container-3xs: 14rem;
 	--db-container-2xs: 16rem;
 	--db-container-xs: 20rem;

package/build/styles/defaults/_default-variables.scss

@@ -2,7 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-:is(:root, :host) {
+:root,
+:host {
 	--db-base-icon-weight-regular-desktop-headline-3xl: 96;
 	--db-base-icon-weight-regular-desktop-headline-2xl: 80;
 	--db-base-icon-weight-regular-desktop-headline-xl: 64;