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`

Author: mmalerba

src/material/checkbox/_checkbox-theme.scss

@@ -12,9 +12,11 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  .mat-mdc-checkbox {
+  @at-root #{& or body} {
     @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 +42,12 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  .mat-mdc-checkbox {
+
+  @at-root #{& or body} {
     @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 +58,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-checkbox {
+  @at-root #{& or body} {
     @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 {
+  body {
     // 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/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 body
+          // when there is no baseSelector.
+          selector = 'body';
+        } 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);