fix(material/checkbox): set token values on the element where theme is …

…@included (#27114)

* fix(material/checkbox): set token values on the element where theme is @included

For example:

```
.my-el {
  @include mat.checkbox-theme(...);
}
```

should emit the token values on `.my-el`, not `.my-el .mat-mdc-checkbox`

* add a helper mixin for current-selector-or-root

(cherry picked from commit 6610b6d)

src/material/checkbox/_checkbox-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
@@ -12,9 +13,11 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     &.mat-primary {
       $primary-config: map.merge($config, (accent: $primary));
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
@@ -40,9 +43,12 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  .mat-mdc-checkbox {
+
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     @include mdc-helpers.using-mdc-typography($config) {
       // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
@@ -53,7 +59,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 

src/material/checkbox/checkbox.scss

@@ -142,7 +142,7 @@
     }
   }
 
-  .mat-mdc-checkbox {
+  html {
     // Add default values for MDC checkbox tokens that aren't outputted by the theming API.
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
   }

src/material/core/style/_sass-utils.scss

@@ -0,0 +1,7 @@
+// Include content under the current selector (&) or the document root if there is no current
+// selector.
+@mixin current-selector-or-root($root: html) {
+  @at-root #{& or $root} {
+    @content;
+  }
+}

src/material/core/theming/tests/theming-api.spec.ts

@@ -210,9 +210,15 @@ describe('theming api', () => {
         return;
       }
       node.selectors.forEach(selector => {
-        // Only check selectors that match the specified base selector.
-        if (baseSelector && !baseSelectorRegex.test(selector)) {
-          return;
+        if (baseSelector && selector === baseSelector) {
+          // Styles emitted directly to the baseSelector are emitted to html
+          // when there is no baseSelector.
+          selector = 'html';
+        } else {
+          // Only check selectors that match the specified base selector.
+          if (baseSelector && !baseSelectorRegex.test(selector)) {
+            return;
+          }
         }
         selector = selector.replace(baseSelectorRegex, '');
         const matchingRule = knownDensitySelectors.get(selector);