fixup! Add the new mat.theme API

.github/CODEOWNERS

@@ -131,10 +131,10 @@
 # Material experimental package
 /src/material-experimental/*                                @andrewseguin
 /src/material-experimental/column-resize/**                 @andrewseguin
-/src/material-experimental/mdc-tooltip/**                   @crisbeto
 /src/material-experimental/menubar/**                       @jelbourn
 /src/material-experimental/popover-edit/**                  @andrewseguin
 /src/material-experimental/selection/**                     @andrewseguin
+/src/material-experimental/theming/**                       @mmalerba
 
 # CDK experimental package
 /src/cdk-experimental/*                                     @andrewseguin

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

@@ -43,11 +43,13 @@ $dark-theme: mat.define-dark-theme((
 // Set up dark theme.
 
 .demo-unicorn-dark-theme {
-  @include material-experimental.theme($tokens: mat.m2-tokens-from-theme($dark-theme), $components: (
-    material-experimental.checkbox((
-      (mdc, checkbox): (
-        selected-checkmark-color: red,
-      )
-    )),
-  ));
+  @include material-experimental.theme(
+    $tokens: mat.m2-tokens-from-theme($dark-theme),
+    $components: (
+      material-experimental.checkbox((
+        (mdc, checkbox): (
+          selected-checkmark-color: red,
+        )
+      )),
+    ));
 }

src/material-experimental/BUILD.bazel

@@ -19,7 +19,9 @@ ts_library(
 
 sass_library(
     name = "theming_scss_lib",
-    srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS,
+    srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
+        "//src/material-experimental/theming:theming_scss_lib",
+    ],
 )
 
 sass_library(

src/material-experimental/theming/BUILD.bazel

@@ -0,0 +1,9 @@
+load("//tools:defaults.bzl", "sass_library")
+
+package(default_visibility = ["//visibility:public"])
+
+sass_library(
+    name = "theming_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = ["//src/material:sass_lib"],
+)

src/material-experimental/theming/_theming.scss

@@ -1,7 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:string';
 @use '@angular/material' as mat;
 
 // Whether to throw an error when a required dep is not configured. If false, the dep will be
@@ -17,9 +16,11 @@ $_error-on-missing-dep: false;
   // supported, the configuration data will contain a reference to its own theme mixin.
   @if $id == 'mat.card' {
     @include mat.private-apply-card-theme-from-tokens($tokens);
-  } @else if $id == 'mat.checkbox' {
+  }
+  @else if $id == 'mat.checkbox' {
     @include mat.private-apply-checkbox-theme-from-tokens($tokens);
-  } @else {
+  }
+  @else {
     @error 'Unrecognized component theme: #{id}';
   }
 }
@@ -41,7 +42,8 @@ $_error-on-missing-dep: false;
         @if $_error-on-missing-dep {
           @error 'Missing theme: `#{map.get($component, id)}` depends on `#{$dep-id}`.' +
             ' Please configure the theme for `#{$dep-id}` in your call to `mat.theme`';
-        } @else {
+        }
+        @else {
           $configured: map.set($configured, $dep-id, true);
           $new-deps: list.append($new-deps, $dep);
         }

src/material/BUILD.bazel

@@ -24,6 +24,7 @@ sass_library(
     srcs = [
         "_index.scss",
         "_theming.scss",
+        "_token-theming.scss",
     ],
     deps = [
         "//src/material/core:core_scss_lib",

src/material/button/_icon-button-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use '@material/density/functions' as mdc-density-functions;
-@use '@material/icon-button/mixins' as mdc-icon-button;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;

src/material/card/_card-theme.import.scss

@@ -1,3 +1,3 @@
-@forward 'card-theme' hide color, density, theme, typography;
+@forward 'card-theme' hide color, density, theme, typography, theme-from-tokens;
 @forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color,
 $mat-mdc-card-mdc-card-outline-color;

src/material/checkbox/_checkbox-theme.import.scss

@@ -1,5 +1,5 @@
 @forward 'checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme,
-typography;
+typography, theme-from-tokens;
 @forward 'checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color,
 $mat-mdc-mdc-checkbox-disabled-color, mat-mdc-background-focus-density,
 mat-mdc-background-focus-indicator-checked-color, mat-mdc-background-focus-indicator-color,

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

@@ -1,4 +1,3 @@
-@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 

src/material/core/tokens/_token-utils.scss

@@ -51,7 +51,8 @@ $_component-prefix: null;
 @mixin _configure-token-prefix($first, $rest...) {
   $_component-prefix: '' !global;
   @each $item in $rest {
-    $_component-prefix: if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
+    $_component-prefix:
+      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
   }
   @include mdc-custom-properties.configure($varname-prefix: $first) {
     @content;

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

@@ -1,4 +1,3 @@
-@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../theming/palette';

src/material/core/tokens/m2/mdc/_checkbox.scss

@@ -59,7 +59,8 @@ $prefix: (mdc, checkbox);
   $disabled-color: theming.get-color-from-palette($foreground, base, 0.38);
   $selected-color: theming.get-color-from-palette($accent);
   $border-color: theming.get-color-from-palette($foreground, base, 0.54);
-  $active-border-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+  $active-border-color:
+    theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
     // The color of the checkbox fill when the checkbox is selected and disabled.

src/material/core/tokens/m2/mdc/_chip.scss

@@ -1,7 +1,7 @@
-@use 'sass:color';
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../mdc-helpers/mdc-helpers';
+@use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
 
@@ -304,7 +304,7 @@ $prefix: (mdc, chip);
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
-  @return token-utils.merge-all(
+  @return sass-utils.deep-merge-all(
     get-unthemable-tokens(),
     get-color-tokens(token-utils.$placeholder-color-config),
     get-typography-tokens(token-utils.$placeholder-typography-config),

src/material/core/tokens/m2/mdc/_icon-button.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../../../style/sass-utils';
 @use '../../token-utils';
 

src/material/core/tokens/m2/mdc/_list.scss

@@ -87,7 +87,8 @@ $prefix: (mdc, list);
   $foreground: map.get($config, foreground);
   $is-dark: map.get($config, is-dark);
   $foreground-base: theming.get-color-from-palette($foreground, base);
-  $text-icon-on-background: theming.get-color-from-palette($foreground, base, if($is-dark, 0.5, 0.38));
+  $text-icon-on-background:
+    theming.get-color-from-palette($foreground, base, if($is-dark, 0.5, 0.38));
 
   @return (
     // Text color of the list item primary text.

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -6,7 +6,6 @@
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/circular-progress/circular-progress-theme' as mdc-circular-progress-theme;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
-@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/tooltip/plain-tooltip-theme' as mdc-plaintip-tooltip-theme;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
@@ -20,7 +19,6 @@
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
 @use '../m2/mdc/icon-button' as tokens-mdc-icon-button;
 @use '../m2/mdc/checkbox' as tokens-mdc-checkbox;
-@use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/list' as tokens-mdc-list;
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
 @use '../m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;

src/material/legacy-radio/radio.scss

@@ -2,7 +2,6 @@
 @use '@angular/cdk';
 
 @use '../core/style/variables';
-@use '../core/ripple/ripple';
 @use '../core/style/vendor-prefixes';
 
 

src/material/legacy-slide-toggle/slide-toggle.scss

@@ -3,7 +3,6 @@
 
 @use '../core/style/vendor-prefixes';
 @use '../core/style/variables';
-@use '../core/ripple/ripple';
 @use '../core/style/list-common';
 
 $thumb-size: 20px !default;

src/material/slide-toggle/slide-toggle.scss

@@ -5,7 +5,7 @@
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
 @use '../core/mdc-helpers/mdc-helpers';
-@use '../core/style/_layout-common.scss';
+@use '../core/style/layout-common';
 
 
 @include mdc-helpers.disable-mdc-fallback-declarations {

src/material/stepper/stepper.scss

@@ -1,7 +1,6 @@
 @use '@angular/cdk';
 @use 'sass:math';
 
-@use '../core/style/variables';
 @use './stepper-variables';
 
 .mat-stepper-vertical,

src/material/tabs/_tabs-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
-@use '@material/tab' as mdc-tab;
 @use '@material/tab/tab-theme' as mdc-tab-theme;
 @use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
 @use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;

tools/stylelint/no-unused-import.ts

@@ -9,14 +9,21 @@ const messages = utils.ruleMessages(ruleName, {
     `imports Stylelint rule likely needs to be updated.`,
 });
 
+function stripCommentsAndAtUse(content: string) {
+  return content
+    .replace(/@use.*?;/g, '')
+    .replace(/\/\/.*?\n/g, '')
+    .replace(/\/\*.*?\*\//g, '');
+}
+
 /** Stylelint plugin that flags unused `@use` statements. */
 const ruleFn: Rule<boolean, string> = (isEnabled, _options, context) => {
   return (root, result) => {
     if (!isEnabled) {
       return;
     }
 
-    const fileContent = root.toString();
+    const fileContent = stripCommentsAndAtUse(root.toString());
 
     root.walkAtRules(rule => {
       if (rule.name === 'use') {
@@ -30,7 +37,9 @@ const ruleFn: Rule<boolean, string> = (isEnabled, _options, context) => {
             message: messages.invalid(rule.params),
             node: rule,
           });
-        } else if (!fileContent.includes(namespace + '.')) {
+        } else if (!fileContent.match('[^\\w$@-]' + namespace + '[^\\w-]')) {
+          // We use a broader match than just `${namespace}.`, because this doesn't catch the case
+          // where we use the module as an argument to something like `meta.get-function`.
           if (context.fix) {
             rule.remove();
           } else {