Use :host in root selectors so Web Components can access CSS vars

Reproduce #37162 on v6-dev. Adds `:host` beside every
`:root` selector that emits CSS custom properties, so components styled
in a shadow root see the tokens.

Author: mdo

scss/_colors.scss

@@ -97,6 +97,7 @@ $-color-defaults: () !default;
 $color-tokens: defaults($-color-defaults, $color-tokens);
 // scss-docs-end color-tokens
 
-:root {
+:root,
+:host {
   @include tokens($color-tokens);
 }

scss/_root.scss

@@ -198,7 +198,8 @@ $root-tokens: map.set($root-tokens, --radius-pill, 50rem);
   $root-tokens: map.set($root-tokens, --z-#{$key}, $value);
 }
 
-:root {
+:root,
+:host {
   @include tokens($root-tokens);
 
   color-scheme: light dark;
@@ -210,7 +211,8 @@ $root-tokens: map.set($root-tokens, --radius-pill, 50rem);
 // Deepen shadows in dark mode. The shadow-strength token is a plain number, so it
 // can't use light-dark() (colors only); vary it alongside color-scheme instead.
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root,
+  :host {
     --shadow-strength: 2.4;
   }
 }

scss/bootstrap-grid.scss

@@ -61,7 +61,8 @@ $utilities: map-get-multiple(
 // check-unused-imports-disable-next-line — side-effect import: generates utility CSS.
 @use "utilities/api";
 
-:root {
+:root,
+:host {
   @each $name, $value in $breakpoints {
     --breakpoint-#{$name}: #{$value};
   }

scss/content/_reboot.scss

@@ -27,7 +27,8 @@ $type-tokens: defaults(
 );
 // scss-docs-end type-tokens
 
-:root {
+:root,
+:host {
   @include tokens($type-tokens);
 }
 
@@ -81,7 +82,8 @@ $reboot-mark-tokens: defaults(
   // Ability to the value of the root font sizes, affecting the value of `rem`.
   // null by default, thus nothing is generated.
 
-  :root {
+  :root,
+  :host {
     // Assume browser default font-size of 16px, or a user's preference
     accent-color: var(--primary-base);
 

scss/mixins/_color-mode.scss

@@ -5,7 +5,8 @@
   @if $color-mode-type == "media-query" {
     @if $root == true {
       @media (prefers-color-scheme: $mode) {
-        :root {
+        :root,
+        :host {
           @content;
         }
       }

scss/tests/mixins/_color-mode-media-query.test.scss

@@ -27,7 +27,8 @@
           }
         }
         @media (prefers-color-scheme: dark) {
-          :root {
+          :root,
+          :host {
             --custom-color: #{color.mix($indigo, $blue, 50%, oklch)};
           }
         }