feat(material/theming): Disambiguate token names in theme overrides (#…

…29859) Prior to this change a single key in the theme overrides map sometimes resulted in mutliple tokens being overridden. This change gives every token a unique name, by prefixing when necessary. The old ambiguous keys are still allowed for compatibility, but will now log a warning when they're used.
angular · Oct 11, 2024 · 371446a · 371446a
1 parent 9c3af28
commit 371446a
Show file tree

Hide file tree

Showing 44 changed files with 1,964 additions and 1,050 deletions.
diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss
@@ -10,64 +10,70 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-unthemable-tokens()
+      );
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-color-tokens($theme)
+      );
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-typography-tokens($theme)
+      );
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-density-tokens($theme)
+      );
     }
   }
 }
 
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
+    (
+      namespace: tokens-mat-autocomplete.$prefix,
+      tokens: tokens-mat-autocomplete.get-token-slots(),
+    )
   );
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -84,9 +90,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
+      tokens-mat-autocomplete.$prefix,
+      map.get($tokens, tokens-mat-autocomplete.$prefix)
+    );
   }
 }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
@@ -13,11 +13,12 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -30,21 +31,26 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-color-tokens($theme)
+      );
     }
 
     .mat-badge-accent {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
+      );
     }
 
     .mat-badge-warn {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -54,11 +60,12 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-badge.$prefix,
+        tokens-mat-badge.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -68,16 +75,19 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
+    (
+      namespace: tokens-mat-badge.$prefix,
+      tokens: tokens-mat-badge.get-token-slots(),
+    )
   );
 }
 
@@ -90,8 +100,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -108,7 +117,8 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
 }
diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss
@@ -10,59 +10,64 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-          tokens-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-unthemable-tokens()
+      );
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-color-tokens($theme)
+      );
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-bottom-sheet.$prefix,
+        tokens-mat-bottom-sheet.get-typography-tokens($theme)
+      );
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
+    (
+      namespace: tokens-mat-bottom-sheet.$prefix,
+      tokens: tokens-mat-bottom-sheet.get-token-slots(),
+    )
   );
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -79,9 +84,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
+      tokens-mat-bottom-sheet.$prefix,
+      map.get($tokens, tokens-mat-bottom-sheet.$prefix)
+    );
   }
 }