From 44e7dd4fce4cee57f6f35fafbd78b38e4329ec6c Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 17 May 2023 21:30:08 +0000
Subject: [PATCH 1/2] 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`
---
 src/material/checkbox/_checkbox-theme.scss          | 11 ++++++++---
 src/material/checkbox/checkbox.scss                 |  2 +-
 src/material/core/theming/tests/theming-api.spec.ts | 12 +++++++++---
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index fff80b03e940..63897344ebc7 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/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 html} {
     @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 html} {
     @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 html} {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 6a8ebf920fa0..e004237a8211 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/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());
   }
diff --git a/src/material/core/theming/tests/theming-api.spec.ts b/src/material/core/theming/tests/theming-api.spec.ts
index 73b1501dd7c8..18a00cf1a401 100644
--- a/src/material/core/theming/tests/theming-api.spec.ts
+++ b/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);

From 43b638bb019c377261db099b0faecea43e559f48 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 18 May 2023 19:56:16 +0000
Subject: [PATCH 2/2] add a helper mixin for current-selector-or-root

---
 src/material/checkbox/_checkbox-theme.scss | 7 ++++---
 src/material/core/style/_sass-utils.scss   | 7 +++++++
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 src/material/core/style/_sass-utils.scss

diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index 63897344ebc7..ed076353f62c 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/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,7 +13,7 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  @at-root #{& or html} {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
   }
 
@@ -43,7 +44,7 @@
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
 
-  @at-root #{& or html} {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
   }
 
@@ -58,7 +59,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  @at-root #{& or html} {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 
diff --git a/src/material/core/style/_sass-utils.scss b/src/material/core/style/_sass-utils.scss
new file mode 100644
index 000000000000..19ab313b2f42
--- /dev/null
+++ b/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;
+  }
+}