@angular/material 19.0.0-next.8 → 19.0.0-next.9

package/core/tokens/_token-utils.scss

@@ -138,10 +138,13 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 @function resolve-elevation($tokens, $elevation-token, $shadow-color-token) {
   $elevation: map.get($tokens, $elevation-token);
   $shadow-color: map.get($tokens, $shadow-color-token);
-  @return map.merge($tokens, (
-    $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
-    $shadow-color-token: null,
-  ));
+  @return map.merge(
+    $tokens,
+    (
+      $elevation-token: elevation.get-box-shadow($elevation, $shadow-color),
+      $shadow-color-token: null,
+    )
+  );
 }
 
 /// Checks whether a list starts wih a given prefix
@@ -195,7 +198,8 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
   $overrides: map.get($tokens, list.append($prefix, $color-variant));
   @if $overrides == null {
     $variants: _supported-color-variants($tokens, $prefix);
-    $secondary-message: if($variants == (),
+    $secondary-message: if(
+      $variants == (),
       'Mixin does not support color variants',
       'Supported color variants are: #{$variants}'
     );
@@ -208,41 +212,94 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 /// Emits new token values for the given token overrides.
 /// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
-@mixin batch-create-token-values($overrides: (), $token-maps...) {
-  @include _validate-token-overrides($overrides, $token-maps);
-
-  @each $token-map in $token-maps {
-    $prefix: map.get($token-map, prefix);
-    $tokens: map.get($token-map, tokens);
-
-    @each $name, $value in $tokens {
-      $tokens: map.set($tokens, $name, map.get($overrides, $name));
+@mixin batch-create-token-values($overrides: (), $namespace-configs...) {
+  @include sass-utils.current-selector-or-root() {
+    $prefixed-name-data: ();
+    $unprefixed-name-data: ();
+    $all-names: ();
+
+    @each $config in $namespace-configs {
+      $namespace: map.get($config, namespace);
+      $prefix: if(map.has-key($config, prefix), map.get($config, prefix), '');
+      $tokens: _filter-nulls(map.get($config, tokens));
+      @each $name, $value in $tokens {
+        $prefixed-name: $prefix + $name;
+        $all-names: list.append($all-names, $prefixed-name, $separator: comma);
+        @if map.has-key($prefixed-name-data, $prefixed-name) {
+          @error #{
+          'Error overriding token: Ambiguous token name `'
+        }#{
+          $prefixed-name
+        }#{
+          '` exists in multiple namespaces: `('
+        }#{
+          list.nth(map.get($prefixed-name-data, $prefixed-name), 1)
+        }#{
+          ')` and `('
+        }#{
+          $namespace
+        }#{
+          ')`'
+        };
+        }
+        $prefixed-name-data: map.set($prefixed-name-data, $prefixed-name, ($namespace, $name));
+        $unprefixed-data: map.has-key($unprefixed-name-data, $name) and
+          map.get($unprefixed-name-data, $name) or
+          ();
+        $unprefixed-data: list.append($unprefixed-data, ($namespace, $prefixed-name));
+        $unprefixed-name-data: map.set($unprefixed-name-data, $name, $unprefixed-data);
+      }
     }
 
-    @include sass-utils.current-selector-or-root() {
-      @include create-token-values($prefix, $tokens);
-    }
-  }
-}
-
-/// Verifies that the token overrides exist and are used in one of the given token maps.
-@mixin _validate-token-overrides($overrides: (), $token-maps) {
-  $valid-token-names: ();
-
-  @each $token-map in $token-maps {
-    @each $name, $value in map.get($token-map, tokens) {
-      @if ($value != null and list.index($valid-token-names, $name) == null) {
-        $valid-token-names: list.append($valid-token-names, $name);
+    @each $name, $value in $overrides {
+      @if map.has-key($prefixed-name-data, $name) {
+        $data: map.get($prefixed-name-data, $name);
+        $namespace: list.nth($data, 1);
+        $name: list.nth($data, 2);
+        @include create-token-values(
+          $namespace,
+          (
+            $name: $value,
+          )
+        );
+      } @else if (map.has-key($unprefixed-name-data, $name)) {
+        $datalist: map.get($unprefixed-name-data, $name);
+        $prefixed-names: ();
+        @each $data in $datalist {
+          $namespace: list.nth($data, 1);
+          $prefixed-names: list.append($prefixed-names, list.nth($data, 2), $separator: comma);
+          @include create-token-values(
+            $namespace,
+            (
+              $name: $value,
+            )
+          );
+        }
+        @warn #{
+        'Token `'
+      }#{
+        $name
+      }#{
+        '` is deprecated. Please use one of the following alternatives: '
+      }#{
+        $prefixed-names
+      };
+      } @else {
+        @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }
     }
   }
+}
 
-  @each $name in map.keys($overrides) {
-    @if (list.index($valid-token-names, $name) == null) {
-      @error (
-        'Invalid token: "' + $name + '"'
-        'Valid tokens include: ' $valid-token-names
-      );
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
     }
   }
+  @return $result;
 }

package/core/tokens/m2/mat/_badge.scss

@@ -6,15 +6,19 @@
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
+$_default-size: 22px;
+$_small-size: $_default-size - 6px;
+$_large-size: $_default-size + 6px;
+
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  $default-size: 22px;
-  $small-size: $default-size - 6;
-  $large-size: $default-size + 6;
+  $default-size: $_default-size;
+  $small-size: $_small-size;
+  $large-size: $_large-size;
 
   @return (
     container-shape: 50%,
@@ -77,10 +81,15 @@ $prefix: (mat, badge);
 
   @return (
     text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    line-height: $_default-size,
     text-size: $base-size,
     text-weight: 600,
+
     small-size-text-size: $base-size * 0.75,
+    small-size-line-height: $_small-size,
+
     large-size-text-size: $base-size * 2,
+    large-size-line-height: $_large-size,
   );
 }
 

package/core/tokens/m2/mdc/_radio.scss

@@ -32,7 +32,6 @@ $prefix: (mdc, radio);
     selected-hover-state-layer-opacity: null,
     selected-pressed-state-layer-color: null,
     selected-pressed-state-layer-opacity: null,
-    unselected-focus-icon-color: null,
     unselected-focus-state-layer-color: null,
     unselected-focus-state-layer-opacity: null,
     unselected-hover-state-layer-color: null,
@@ -52,6 +51,7 @@ $prefix: (mdc, radio);
     disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     disabled-unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
     unselected-hover-icon-color: $icon-color,
+    unselected-focus-icon-color: $icon-color,
     unselected-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     unselected-pressed-icon-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     selected-focus-icon-color: $palette-color,

package/core/tokens/m3/definitions/_md-comp-elevated-card.scss

@@ -22,7 +22,7 @@ $_default: (
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
-    'container-color': map.get($deps, 'md-sys-color', 'surface'),
+    'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
     'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'),

package/core/tokens/m3/mat/_badge.scss

@@ -25,9 +25,11 @@ $prefix: (mat, badge);
     small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-full),
     container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-small-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    line-height: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
     small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
+    small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
     container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
     container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
@@ -37,11 +39,12 @@ $prefix: (mat, badge);
 
     // This size isn't in the M3 spec so we emit the same values as for `medium`.
     large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
     large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
     large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
     large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
   ), (
     primary: (
       background-color: map.get($systems, md-sys-color, primary),

package/datepicker/_datepicker-theme.scss

@@ -21,11 +21,15 @@ $calendar-weekday-table-font-size: 11px !default;
   $palette-color: inspection.get-theme-color($theme, $palette-name);
   $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
   $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
-  $calendar-tokens:
-    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name);
+  $calendar-tokens: tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens(
+    $theme,
+    $palette-name
+  );
 
-  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
-    map.merge($calendar-tokens, $range-tokens));
+  @include token-utils.create-token-values(
+    tokens-mat-datepicker.$prefix,
+    map.merge($calendar-tokens, $range-tokens)
+  );
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -34,11 +38,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -51,11 +56,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-color-tokens($theme)
+      );
     }
 
     .mat-datepicker-content {
@@ -70,14 +76,18 @@ $calendar-weekday-table-font-size: 11px !default;
 
     .mat-datepicker-toggle-active {
       &.mat-accent {
-        $accent-tokens:
-          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        $accent-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
+          $theme,
+          accent
+        );
         @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
       }
 
       &.mat-warn {
-        $warn-tokens:
-          tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        $warn-tokens: tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens(
+          $theme,
+          warn
+        );
         @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
       }
     }
@@ -89,11 +99,12 @@ $calendar-weekday-table-font-size: 11px !default;
 @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-datepicker.$prefix,
-        tokens-mat-datepicker.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-datepicker.$prefix,
+        tokens-mat-datepicker.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -103,7 +114,8 @@ $calendar-weekday-table-font-size: 11px !default;
   $comparison-color: tokens-mat-datepicker.$private-default-comparison-color,
   $overlap-color: tokens-mat-datepicker.$private-default-overlap-color,
   $overlap-selected-color:
-    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)) {
+    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)
+) {
   $tokens: tokens-mat-datepicker.get-range-color-tokens(
     $range-color: $range-color,
     $comparison-color: $comparison-color,
@@ -121,8 +133,7 @@ $calendar-weekday-table-font-size: 11px !default;
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
 
@@ -139,7 +150,10 @@ $calendar-weekday-table-font-size: 11px !default;
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots()),
+    (
+      namespace: tokens-mat-datepicker.$prefix,
+      tokens: tokens-mat-datepicker.get-token-slots(),
+    )
   );
 }
 
@@ -152,8 +166,7 @@ $calendar-weekday-table-font-size: 11px !default;
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
     @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);
@@ -170,8 +183,12 @@ $calendar-weekday-table-font-size: 11px !default;
 
 @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');
-  $mat-datepicker-tokens:
-      token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mat-datepicker-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-datepicker.$prefix,
+    $options...
+  );
   @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
 }

package/datepicker/index.d.ts

@@ -825,7 +825,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     private _getCloseStream;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDatepickerBase<any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerBase<any, any, any>, never, never, { "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "color": { "alias": "color"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatDatepickerBase<any, any, any>, never, never, { "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "color": { "alias": "color"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
     static ngAcceptInputType_touchUi: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_restoreFocus: unknown;

package/dialog/_dialog-theme.scss

@@ -11,14 +11,17 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-        tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-unthemable-tokens());
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -26,13 +29,16 @@
 @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-mdc-dialog.$prefix, tokens-mdc-dialog.get-color-tokens($theme));
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -40,13 +46,16 @@
 @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-mdc-dialog.$prefix, tokens-mdc-dialog.get-typography-tokens($theme));
+        tokens-mdc-dialog.$prefix,
+        tokens-mdc-dialog.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
-        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
+        tokens-mat-dialog.$prefix,
+        tokens-mat-dialog.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -54,15 +63,21 @@
 @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-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots()),
-    (prefix: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots()),
+    (
+      namespace: tokens-mdc-dialog.$prefix,
+      tokens: tokens-mdc-dialog.get-token-slots(),
+    ),
+    (
+      namespace: tokens-mat-dialog.$prefix,
+      tokens: tokens-mat-dialog.get-token-slots(),
+    )
   );
 }
 
@@ -70,8 +85,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {
     @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);
@@ -88,11 +102,16 @@
 
 @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-mdc-dialog.$prefix, map.get($tokens, tokens-mdc-dialog.$prefix));
+      tokens-mdc-dialog.$prefix,
+      map.get($tokens, tokens-mdc-dialog.$prefix)
+    );
     @include token-utils.create-token-values(
-      tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
+      tokens-mat-dialog.$prefix,
+      map.get($tokens, tokens-mat-dialog.$prefix)
+    );
   }
 }

package/divider/_divider-theme.scss

@@ -9,11 +9,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-divider.$prefix, tokens-mat-divider.get-unthemable-tokens());
+        tokens-mat-divider.$prefix,
+        tokens-mat-divider.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -21,11 +22,12 @@
 @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-divider.$prefix,
-        tokens-mat-divider.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-divider.$prefix,
+        tokens-mat-divider.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -33,21 +35,24 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 @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-divider.$prefix, tokens: tokens-mat-divider.get-token-slots()),
+    (
+      namespace: tokens-mat-divider.$prefix,
+      tokens: tokens-mat-divider.get-token-slots(),
+    )
   );
 }
 
@@ -55,8 +60,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') {
     @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);
@@ -73,9 +77,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-divider.$prefix, map.get($tokens, tokens-mat-divider.$prefix));
+      tokens-mat-divider.$prefix,
+      map.get($tokens, tokens-mat-divider.$prefix)
+    );
   }
 }