checkin

Author: andrewseguin

src/material/_index.scss

@@ -17,7 +17,7 @@
 @forward './core/theming/theming' as private-* show private-clamp-density;
 @forward './core/typography/typography' show typography-hierarchy;
 @forward './core/typography/typography-utils' show font-shorthand;
-@forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides;

src/material/autocomplete/_autocomplete-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use './m2/autocomplete' as tokens-mat-autocomplete;
+@use 'm2-autocomplete';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-unthemable-tokens()
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-unthemable-tokens()
       );
     }
   }
@@ -26,8 +26,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-color-tokens($theme)
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-color-tokens($theme)
       );
     }
   }
@@ -39,8 +39,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-typography-tokens($theme)
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-typography-tokens($theme)
       );
     }
   }
@@ -52,8 +52,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-autocomplete.$prefix,
-        tokens-mat-autocomplete.get-density-tokens($theme)
+        m2-autocomplete.$prefix,
+        m2-autocomplete.get-density-tokens($theme)
       );
     }
   }
@@ -63,8 +63,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-autocomplete.$prefix,
-      tokens: tokens-mat-autocomplete.get-token-slots(),
+      namespace: m2-autocomplete.$prefix,
+      tokens: m2-autocomplete.get-token-slots(),
     ),
   );
 }
@@ -98,8 +98,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mat-autocomplete.$prefix,
-      map.get($tokens, tokens-mat-autocomplete.$prefix)
+      m2-autocomplete.$prefix,
+      map.get($tokens, m2-autocomplete.$prefix)
     );
   }
 }

src/material/autocomplete/m2/_autocomplete.scss renamed to src/material/autocomplete/_m2-autocomplete.scss

@@ -1,7 +1,7 @@
-@use '../../core/tokens/token-definition';
-@use '../../core/theming/inspection';
-@use '../../core/style/elevation';
-@use '../../core/style/sass-utils';
+@use '../core/tokens/token-definition';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, autocomplete);

src/material/autocomplete/m3/_autocomplete.scss renamed to src/material/autocomplete/_m3-autocomplete.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../core/style/elevation';
-@use '../../core/tokens/token-definition';
+@use '../core/style/elevation';
+@use '../core/tokens/token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, autocomplete);

src/material/autocomplete/autocomplete.scss

@@ -1,6 +1,9 @@
 @use '@angular/cdk';
+@use './m2-autocomplete';
 @use '../core/tokens/token-utils';
-@use './m2/autocomplete' as tokens-mat-autocomplete;
+
+$token-prefix: m2-autocomplete.$prefix;
+$token-slots: m2-autocomplete.get-token-slots();
 
 // Even though we don't use the MDC styles, we need to keep the classes in the
 // DOM for the Gmat versions to work. We need to bump up the specificity here
@@ -17,8 +20,7 @@ div.mat-mdc-autocomplete-panel {
   // Workaround in case other MDC menu surface styles bleed in.
   position: static;
 
-  @include token-utils.use-tokens(
-    tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
+  @include token-utils.use-tokens($token-prefix, $token-slots) {
     border-radius: token-utils.slot(container-shape);
     box-shadow: token-utils.slot(container-elevation-shadow);
     background-color: token-utils.slot(background-color);

src/material/badge/_badge-theme.scss

@@ -3,7 +3,7 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/typography/typography';
-@use './m2/badge' as tokens-mat-badge;
+@use './m2-badge';
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
@@ -16,8 +16,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-unthemable-tokens()
+        m2-badge.$prefix,
+        m2-badge.get-unthemable-tokens()
       );
     }
   }
@@ -34,22 +34,22 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-color-tokens($theme)
+        m2-badge.$prefix,
+        m2-badge.get-color-tokens($theme)
       );
     }
 
     .mat-badge-accent {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
+        m2-badge.$prefix,
+        m2-badge.private-get-color-palette-color-tokens($theme, accent)
       );
     }
 
     .mat-badge-warn {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
+        m2-badge.$prefix,
+        m2-badge.private-get-color-palette-color-tokens($theme, warn)
       );
     }
   }
@@ -63,8 +63,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-badge.$prefix,
-        tokens-mat-badge.get-typography-tokens($theme)
+        m2-badge.$prefix,
+        m2-badge.get-typography-tokens($theme)
       );
     }
   }
@@ -83,8 +83,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-badge.$prefix,
-      tokens: tokens-mat-badge.get-token-slots(),
+      namespace: m2-badge.$prefix,
+      tokens: m2-badge.get-token-slots(),
     ),
   );
 }
@@ -123,6 +123,6 @@
   @include validation.selector-defined(
     '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);
+  $mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...);
+  @include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
 }

src/material/badge/m2/_badge.scss renamed to src/material/badge/_m2-badge.scss

@@ -2,9 +2,9 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:color';
-@use '../../core/tokens/token-definition';
-@use '../../core/theming/inspection';
-@use '../../core/style/sass-utils';
+@use '../core/tokens/token-definition';
+@use '../core/theming/inspection';
+@use '../core/style/sass-utils';
 
 $_default-size: 22px;
 $_small-size: $_default-size - 6px;

src/material/badge/m3/_badge.scss renamed to src/material/badge/_m3-badge.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../core/style/sass-utils';
-@use '../../core/tokens/token-definition';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-definition';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);

src/material/badge/badge.scss

@@ -1,14 +1,17 @@
 @use 'sass:color';
 @use '@angular/cdk';
-@use './m2/badge' as tokens-mat-badge;
+@use './m2-badge';
 @use '../core/tokens/token-utils';
 
 $default-size: 22px !default;
 $small-size: $default-size - 6;
 $large-size: $default-size + 6;
 
+$token-prefix: m2-badge.$prefix;
+$token-slots: m2-badge.get-token-slots();
+
 @mixin _badge-size($size) {
-  @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
+  @include token-utils.use-tokens($token-prefix, $token-slots) {
     $prefix: if($size == 'medium', '', $size + '-size-');
     $legacy-size-var-name: 'legacy-#{$prefix}container-size';
     $size-var-name: '#{$prefix}container-size';
@@ -62,7 +65,7 @@ $large-size: $default-size + 6;
   box-sizing: border-box;
   pointer-events: none;
 
-  @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
+  @include token-utils.use-tokens($token-prefix, $token-slots) {
     background-color: token-utils.slot(background-color);
     color: token-utils.slot(text-color);
     font-family: token-utils.slot(text-font);
@@ -103,7 +106,7 @@ $large-size: $default-size + 6;
 }
 
 .mat-badge-disabled .mat-badge-content {
-  @include token-utils.use-tokens(tokens-mat-badge.$prefix, tokens-mat-badge.get-token-slots()) {
+  @include token-utils.use-tokens($token-prefix, $token-slots) {
     background-color: token-utils.slot(disabled-state-background-color);
     color: token-utils.slot(disabled-state-text-color);
   }

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use './m2/bottom-sheet' as tokens-mat-bottom-sheet;
+@use './m2-bottom-sheet';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-unthemable-tokens()
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.get-unthemable-tokens()
       );
     }
   }
@@ -26,8 +26,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-color-tokens($theme)
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.get-color-tokens($theme)
       );
     }
   }
@@ -39,8 +39,8 @@
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
-        tokens-mat-bottom-sheet.$prefix,
-        tokens-mat-bottom-sheet.get-typography-tokens($theme)
+        m2-bottom-sheet.$prefix,
+        m2-bottom-sheet.get-typography-tokens($theme)
       );
     }
   }
@@ -57,8 +57,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-bottom-sheet.$prefix,
-      tokens: tokens-mat-bottom-sheet.get-token-slots(),
+      namespace: m2-bottom-sheet.$prefix,
+      tokens: m2-bottom-sheet.get-token-slots(),
     ),
   );
 }
@@ -92,8 +92,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mat-bottom-sheet.$prefix,
-      map.get($tokens, tokens-mat-bottom-sheet.$prefix)
+      m2-bottom-sheet.$prefix,
+      map.get($tokens, m2-bottom-sheet.$prefix)
     );
   }
 }