refactor: move tokens to their component directories

src/material/BUILD.bazel

@@ -1,3 +1,4 @@
+load("@npm2//:defs.bzl", "npm_link_all_packages")
 load(
     "//src/material:config.bzl",
     "MATERIAL_ENTRYPOINTS",
@@ -7,7 +8,6 @@ load(
 load("//tools:defaults.bzl", "ng_package", "sass_library")
 load("//tools:defaults2.bzl", "ts_project")
 load("//tools/bazel:legacy_target.bzl", "get_legacy_label")
-load("@npm2//:defs.bzl", "npm_link_all_packages")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -68,7 +68,6 @@ sass_library(
         "//src/material/core/theming:_palettes",
         "//src/material/core/theming:core_all_theme",
         "//src/material/core/tokens:m3_system",
-        "//src/material/core/tokens/m2",
         "//src/material/core/typography",
         "//src/material/core/typography:all_typography",
         "//src/material/core/typography:utils",
@@ -144,7 +143,6 @@ ng_package(
         "//src/material/core/theming:_palettes",
         "//src/material/core/theming:core_all_theme",
         "//src/material/core/tokens:m3_system",
-        "//src/material/core/tokens/m2",
         "//src/material/core/typography",
         "//src/material/core/typography:all_typography",
         "//src/material/core/typography:utils",

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/BUILD.bazel

@@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
 
+sass_library(
+    name = "m3",
+    srcs = [
+        "_m3-autocomplete.scss",
+    ],
+    deps = [
+        "//src/material/core/style:sass_utils",
+        "//src/material/core/tokens:m3_utils",
+    ],
+)
+
+sass_library(
+    name = "m2",
+    srcs = [
+        "_m2-autocomplete.scss",
+    ],
+    deps = [
+        "//src/material/core/style:elevation",
+        "//src/material/core/style:sass_utils",
+        "//src/material/core/theming:_inspection",
+        "//src/material/core/tokens:m2_utils",
+    ],
+)
+
 sass_library(
     name = "theme",
     srcs = [
         "_autocomplete-theme.scss",
     ],
     deps = [
+        ":m2",
         "//src/material/core/style:sass_utils",
         "//src/material/core/theming",
         "//src/material/core/theming:_inspection",
         "//src/material/core/theming:_validation",
         "//src/material/core/tokens:token_utils",
-        "//src/material/core/tokens/m2/mat",
         "//src/material/core/typography",
     ],
 )
@@ -30,9 +54,9 @@ sass_binary(
     name = "css",
     src = "autocomplete.scss",
     deps = [
+        ":m2",
         "//src/cdk:sass_lib",
         "//src/material/core/tokens:token_utils",
-        "//src/material/core/tokens/m2/mat",
     ],
 )
 

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 '../core/tokens/m2/mat/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/core/tokens/m2/mat/_autocomplete.scss → src/material/autocomplete/_m2-autocomplete.scss

@@ -1,7 +1,7 @@
-@use '../../token-definition';
-@use '../../../theming/inspection';
-@use '../../../style/elevation';
-@use '../../../style/sass-utils';
+@use '../core/tokens/m2-utils';
+@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);
@@ -37,8 +37,8 @@ $prefix: (mat, autocomplete);
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
       get-unthemable-tokens(),
-      get-color-tokens(token-definition.$placeholder-color-config),
-      get-typography-tokens(token-definition.$placeholder-typography-config),
-      get-density-tokens(token-definition.$placeholder-density-config)
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }

src/material/core/tokens/m3/mat/_autocomplete.scss → src/material/autocomplete/_m3-autocomplete.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../style/elevation';
-@use '../../token-definition';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, autocomplete);
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
     background-color: map.get($systems, md-sys-color, surface-container),
     container-shape: map.get($systems, md-sys-shape, corner-extra-small),
     container-elevation-shadow:
-      token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
+      m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
   );
-  @return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
+  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }

src/material/autocomplete/autocomplete-trigger.ts

@@ -625,12 +625,13 @@ export class MatAutocompleteTrigger
         {injector: this._environmentInjector},
       );
     });
-    const optionChanges = this.autocomplete.options?.changes.pipe(
-      tap(() => this._positionStrategy.reapplyLastPosition()),
-      // Defer emitting to the stream until the next tick, because changing
-      // bindings in here will cause "changed after checked" errors.
-      delay(0),
-    ) ?? observableOf();
+    const optionChanges =
+      this.autocomplete.options?.changes.pipe(
+        tap(() => this._positionStrategy.reapplyLastPosition()),
+        // Defer emitting to the stream until the next tick, because changing
+        // bindings in here will cause "changed after checked" errors.
+        delay(0),
+      ) ?? observableOf();
 
     // When the options are initially rendered, and when the option list changes...
     return (

src/material/autocomplete/autocomplete.scss

@@ -1,6 +1,9 @@
 @use '@angular/cdk';
+@use './m2-autocomplete';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/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,11 +20,10 @@ 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.create-token-slot(border-radius, container-shape);
-    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
-    @include token-utils.create-token-slot(background-color, background-color);
+  @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);
   }
 
   @include cdk.high-contrast {

src/material/badge/BUILD.bazel

@@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
 
+sass_library(
+    name = "m3",
+    srcs = [
+        "_m3-badge.scss",
+    ],
+    deps = [
+        "//src/material/core/style:sass_utils",
+        "//src/material/core/tokens:m3_utils",
+    ],
+)
+
+sass_library(
+    name = "m2",
+    srcs = [
+        "_m2-badge.scss",
+    ],
+    deps = [
+        "//src/material/core/style:elevation",
+        "//src/material/core/style:sass_utils",
+        "//src/material/core/theming:_inspection",
+        "//src/material/core/tokens:m2_utils",
+    ],
+)
+
 sass_library(
     name = "theme",
     srcs = [
         "_badge-theme.scss",
     ],
     deps = [
+        ":m2",
         "//src/material/core/style:sass_utils",
         "//src/material/core/theming",
         "//src/material/core/theming:_inspection",
         "//src/material/core/theming:_validation",
         "//src/material/core/tokens:token_utils",
-        "//src/material/core/tokens/m2/mat",
         "//src/material/core/typography",
     ],
 )
@@ -30,9 +54,9 @@ sass_binary(
     name = "badge_css",
     src = "badge.scss",
     deps = [
+        ":m2",
         "//src/cdk:sass_lib",
         "//src/material/core/tokens:token_utils",
-        "//src/material/core/tokens/m2/mat",
     ],
 )
 

src/material/badge/_badge-theme.scss

@@ -3,7 +3,7 @@
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mat/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);
 }