tweaks based on recent feedback and discussions

Author: mmalerba

src/dev-app/theme-token-api.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@use '@angular/material-experimental';
+@use '@angular/material-experimental' as matx;
 
 dev-app {
   &::before {
@@ -23,6 +23,15 @@ dev-app {
 
 @include mat.core();
 
+$light-theme: mat.define-light-theme((
+  color: (
+    primary: mat.define-palette(mat.$indigo-palette),
+    accent: mat.define-palette(mat.$pink-palette),
+  ),
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
 $dark-theme: mat.define-dark-theme((
   color: (
     primary: mat.define-palette(mat.$blue-grey-palette),
@@ -35,18 +44,22 @@ $dark-theme: mat.define-dark-theme((
 
 // Set up light theme.
 
-@include material-experimental.theme($components: (
-  material-experimental.card(),
-  material-experimental.checkbox(),
-));
+html {
+  @include matx.theme(
+    $tokens: mat.m2-tokens-from-theme($light-theme),
+    $components: (
+      matx.card(),
+      matx.checkbox(),
+    ));
+}
 
 // Set up dark theme.
 
 .demo-unicorn-dark-theme {
-  @include material-experimental.theme(
+  @include matx.theme(
     $tokens: mat.m2-tokens-from-theme($dark-theme),
     $components: (
-      material-experimental.checkbox((
+      matx.checkbox((
         (mdc, checkbox): (
           selected-checkmark-color: red,
         )

src/material-experimental/theming/_theming.scss

@@ -60,16 +60,14 @@ $_error-on-missing-dep: false;
 
 @mixin _theme($tokens, $components) {
   // Call the theme mixin for each configured component.
-  @at-root #{& or body} {
-    @each $component in $components {
-      @include _apply-theme($tokens, $component);
-    }
+  @each $component in $components {
+    @include _apply-theme($tokens, $component);
   }
 }
 
 // Takes the full list of tokens and a list of components to configure, and outputs all theme
 // tokens for the configured components.
-@mixin theme($tokens: mat.m2-tokens-from-theme(), $components) {
+@mixin theme($tokens, $components) {
   @include _theme($tokens, _get-transitive-deps(mat.private-normalize-args-list($components)));
 }
 

src/material/core/tokens/m2/_index.scss

@@ -30,6 +30,9 @@
     @return meta.call(
         meta.get-function(get-#{$system}-tokens, $module: $module));
   }
+  @if not map.get($theme, $system) {
+    @return ();
+  }
   @return meta.call(
       meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
 }
@@ -44,23 +47,13 @@
   @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
 }
 
-// Gets the full set of m2 tokens for the given theme object. If parts of the theme are missing
-// (color, density, etc), defaults are used. Returned format:
+// Gets the full set of m2 tokens for the given theme object. Returned format:
 // (
 //   (fully, qualified, namespace): (
 //     token: value
 //   )
 // )
-@function m2-tokens-from-theme($theme: ()) {
-  $theme: map.merge((
-    color: theming.define-light-theme(
-        theming.define-palette(palette.$indigo-palette),
-        theming.define-palette(palette.$pink-palette),
-    ),
-    typography: all-typography.define-typography-config(),
-    density: 0
-  ), $theme);
-
+@function m2-tokens-from-theme($theme) {
   @return sass-utils.deep-merge-all(
       _get-tokens-for-module($theme, tokens-mat-card),
       _get-tokens-for-module($theme, tokens-mat-radio),