@angular/material 20.1.0-next.1 → 20.1.0-rc.0

package/core/tokens/_token-utils.scss

@@ -69,32 +69,12 @@
   @return _create-var(--mat-#{$token}, $sys-fallback);
 }
 
-// Outputs a map of tokens.
-@mixin create-token-values($tokens) {
-  @include _create-token-values-internal($tokens, false);
-}
-
-// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
-// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
-@mixin create-token-values-mixed($tokens) {
-  @include _create-token-values-internal($tokens, true);
-}
-
-@mixin _create-token-values-internal($tokens, $in-place) {
-  @if ($tokens != null) {
-    @if ($in-place) {
-      & {
-        @each $key, $value in $tokens {
-          @if $value != null {
-            --mat-#{$key}: #{$value};
-          }
-        }
-      }
-    } @else {
-      @each $key, $value in $tokens {
-        @if $value != null {
-          --mat-#{$key}: #{$value};
-        }
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include sass-utils.current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --mat-#{$key}: #{$value};
       }
     }
   }
@@ -125,7 +105,7 @@
         $namespace: list.nth($data, 1);
         $name: list.nth($data, 2);
         $prefixed-name: $namespace + '-' + $name;
-        @include create-token-values(($prefixed-name: $value));
+        @include values(($prefixed-name: $value));
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }

package/core/tokens/m2/_index.scss

@@ -0,0 +1,6 @@
+@forward './md-sys-color';
+@forward './md-sys-elevation';
+@forward './md-sys-motion';
+@forward './md-sys-shape';
+@forward './md-sys-state';
+@forward './md-sys-typescale';

package/core/tokens/m2/_md-sys-color.scss

@@ -0,0 +1,123 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+@use '../../m2/palette';
+
+@function md-sys-color-values-dark($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 600),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 600),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 600),
+    shadow: black,
+    surface: map.get(palette.$grey-palette, 800),
+    on-surface: white,
+    surface-variant: #4a4a4a,
+    on-surface-variant: rgba(white, 0.7),
+    background: #303030,
+    inverse-surface: white,
+    inverse-on-surface: rgba(black, 0.87),
+    outline: rgba(white, 0.12),
+    outline-variant: rgba(white, 0.38),
+
+    // TBD
+    error-container: null,
+    on-background: null,
+    on-error-container: null,
+    on-primary-container: null,
+    on-primary-fixed: null,
+    on-primary-fixed-variant: null,
+    on-secondary-container: null,
+    on-secondary-fixed: null,
+    on-secondary-fixed-variant: null,
+    on-tertiary: null,
+    on-tertiary-container: null,
+    on-tertiary-fixed: null,
+    on-tertiary-fixed-variant: null,
+    primary-container: null,
+    primary-fixed: null,
+    primary-fixed-dim: null,
+    scrim: null,
+    secondary-container: null,
+    secondary-fixed: null,
+    secondary-fixed-dim: null,
+    surface-bright: null,
+    surface-container: null,
+    surface-container-high: null,
+    surface-container-highest: null,
+    surface-container-low: null,
+    surface-container-lowest: null,
+    surface-dim: null,
+    surface-tint: null,
+    tertiary: null,
+    tertiary-container: null,
+    tertiary-fixed: null,
+    tertiary-fixed-dim: null,
+  );
+}
+
+@function md-sys-color-values-light($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 300),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 300),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 300),
+    shadow: black,
+    surface: white,
+    on-surface: rgba(black, 0.87),
+    surface-variant: #f6f6f6,
+    on-surface-variant: rgba(black, 0.54),
+    background: map.get(palette.$grey-palette, 50),
+    inverse-surface: map.get(palette.$grey-palette, 800),
+    inverse-on-surface: white,
+    outline: rgba(black, 0.12),
+    outline-variant: rgba(black, 0.38),
+
+    // TBD
+    error-container: null,
+    on-background: null,
+    on-error-container: null,
+    on-primary-container: null,
+    on-primary-fixed: null,
+    on-primary-fixed-variant: null,
+    on-secondary-container: null,
+    on-secondary-fixed: null,
+    on-secondary-fixed-variant: null,
+    on-tertiary: null,
+    on-tertiary-container: null,
+    on-tertiary-fixed: null,
+    on-tertiary-fixed-variant: null,
+    primary-container: null,
+    primary-fixed: null,
+    primary-fixed-dim: null,
+    scrim: null,
+    secondary-container: null,
+    secondary-fixed: null,
+    secondary-fixed-dim: null,
+    surface-bright: null,
+    surface-container: null,
+    surface-container-high: null,
+    surface-container-highest: null,
+    surface-container-low: null,
+    surface-container-lowest: null,
+    surface-dim: null,
+    surface-tint: null,
+    tertiary: null,
+    tertiary-container: null,
+    tertiary-fixed: null,
+    tertiary-fixed-dim: null,
+  );
+}

package/core/tokens/m2/_md-sys-elevation.scss

@@ -0,0 +1,16 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-elevation-values() {
+  @return (
+    // TBD
+    level0: null,
+    level1: null,
+    level2: null,
+    level3: null,
+    level4: null,
+    level5: null,
+  );
+}

package/core/tokens/m2/_md-sys-motion.scss

@@ -0,0 +1,36 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-motion-values() {
+  @return (
+    // TBD
+    duration-extra-long1: null,
+    duration-extra-long2: null,
+    duration-extra-long3: null,
+    duration-extra-long4: null,
+    duration-long1: null,
+    duration-long2: null,
+    duration-long3: null,
+    duration-long4: null,
+    duration-medium1: null,
+    duration-medium2: null,
+    duration-medium3: null,
+    duration-medium4: null,
+    duration-short1: null,
+    duration-short2: null,
+    duration-short3: null,
+    duration-short4: null,
+    easing-emphasized: null,
+    easing-emphasized-accelerate: null,
+    easing-emphasized-decelerate: null,
+    easing-legacy: null,
+    easing-legacy-accelerate: null,
+    easing-legacy-decelerate: null,
+    easing-linear: null,
+    easing-standard: null,
+    easing-standard-accelerate: null,
+    easing-standard-decelerate: null,
+  );
+}

package/core/tokens/m2/_md-sys-shape.scss

@@ -0,0 +1,22 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function  md-sys-shape-values() {
+  @return (
+    // TBD
+    corner-extra-large: null,
+    corner-extra-large-top: null,
+    corner-extra-small: null,
+    corner-extra-small-top: null,
+    corner-full: null,
+    corner-large: null,
+    corner-large-end: null,
+    corner-large-start: null,
+    corner-large-top: null,
+    corner-medium: null,
+    corner-none: null,
+    corner-small: null,
+  );
+}

package/core/tokens/m2/_md-sys-state.scss

@@ -0,0 +1,15 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-state-values($exclude-hardcoded-values: false) {
+  @return (
+    focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.04,
+    pressed-state-layer-opacity: 0.12,
+
+    // TBD
+    dragged-state-layer-opacity: 0.16,
+  );
+}

package/core/tokens/m2/_md-sys-typescale.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
+
+@function md-sys-typescale-values($config) {
+  // Mapping is according to the old 2014 version of the typography spec.
+  $sys-to-config: (
+    body-large: subheading-1,
+    body-medium: body-1,
+    body-small: caption,
+    display-large: display-4,
+    display-medium: display-4,
+    display-small: display-4,
+    headline-large: display-3,
+    headline-medium: display-2,
+    headline-small: display-1,
+    label-large: subheading-2,
+    label-medium: body-2,
+    label-small: button,
+    title-large: headline,
+    title-medium: headline,
+    title-small: title,
+  );
+
+  // If the config is based on the updated 2018 version of the typography spec, then
+  // use the correct config keys mapping.
+  @if (map.get($config, headline-1) != null) {
+    $sys-to-config: (
+      body-large: body-1,
+      body-medium: body-2,
+      body-small: caption,
+      label-large: subtitle-1,
+      label-medium: subtitle-2,
+      label-small: button,
+      display-large: headline-1,
+      display-medium: headline-1,
+      display-small: headline-1,
+      headline-large: headline-2,
+      headline-medium: headline-3,
+      headline-small: headline-4,
+      title-large: headline-5,
+      title-medium: headline-5,
+      title-small: headline-6,
+    );
+  }
+
+  $typography: ();
+  @each $sys-key, $config-key in $sys-to-config {
+    $font: map.get($config, $config-key, font-family);
+    @if (meta.type-of($font) == 'string') {
+      $font: string.unquote($font);
+    }
+    $line-height: map.get($config, $config-key, line-height);
+    $size: map.get($config, $config-key, font-size);
+    $tracking: map.get($config, $config-key, letter-spacing);
+    $weight: map.get($config, $config-key, font-weight);
+    $typography: map.merge($typography, (
+      #{$sys-key}: $weight $size #{'/'} $line-height $font,
+      #{$sys-key}-font: $font,
+      #{$sys-key}-line-height: $line-height,
+      #{$sys-key}-size: $size,
+      #{$sys-key}-tracking: $tracking,
+      #{$sys-key}-weight: $weight,
+    ));
+  }
+
+  @return $typography;
+}

package/core/tokens/m3/_md-sys-color.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-color-values-dark($palettes) {
+@function md-sys-color-values-dark($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 6),
     error: map.get($palettes, error, 80),
@@ -80,7 +80,7 @@ $_alternate-tokens: false;
   @return $values;
 }
 
-@function md-sys-color-values-light($palettes) {
+@function md-sys-color-values-light($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 98),
     error: map.get($palettes, error, 40),

package/core/tokens/m3/_md-sys-typescale.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-typescale-values($typography) {
+@function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
   $brand: map.get($typography, brand);
   $bold: map.get($typography, bold);

package/core/tokens/m3/_theme.scss

@@ -1,4 +1,3 @@
-@use '../../theming/palettes';
 @use './md-sys-color';
 @use './md-sys-elevation';
 @use './md-sys-shape';
@@ -17,31 +16,20 @@
   @return $new-map;
 }
 
-/// Map key used to store internals of theme config.
-$internals: _mat-theming-internals-do-not-access;
-
-$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
-$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
-$app-vars: (
-  'md-sys-color': _create-system-app-vars-map(
-      md-sys-color.md-sys-color-values-light($placeholder-palettes)),
-  'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
-    brand: (Roboto),
-    plain: (Roboto),
-    bold: 700,
-    medium: 500,
-    regular: 400
-  ))),
-  'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
-  'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
-  'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
-  // Add a subset of palette-specific colors used by components instead of system values
-  'md-ref-palette': _create-system-app-vars-map(
-      (
-        neutral10: '', // Form field native select option text color
-        neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
-      )
+$_sys-maps: (
+  md-sys-color.md-sys-color-values-light(),
+  md-sys-typescale.md-sys-typescale-values(),
+  md-sys-elevation.md-sys-elevation-values(),
+  md-sys-state.md-sys-state-values(),
+  md-sys-shape.md-sys-shape-values(),
+  (
+    neutral10: '', // Form field native select option text color
+    neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
   ),
 );
 
-$sys-theme: ($internals: $app-vars);
+$_system: (density-scale: 0);
+@each $sys-map in $_sys-maps {
+  $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
+}
+$sys-theme: (_mat-system: $_system);

package/datepicker/_datepicker-theme.scss

@@ -2,10 +2,8 @@
 @use 'sass:map';
 @use './m2-datepicker';
 @use './m3-datepicker';
-@use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../button/icon-button-theme';
 
@@ -13,37 +11,35 @@
 /// for the mat-datepicker.
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), base));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-datepicker.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Outputs color theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate color styles for.
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(
-        map.get(m3-datepicker.get-tokens($theme, $color-variant), color));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(
-          m2-datepicker.get-color-tokens($theme, primary));
-    }
+    $tokens: map.get(m3-datepicker.get-tokens($theme, $color-variant), color);
+  }
 
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
     .mat-datepicker-content, .mat-datepicker-toggle-active {
       &.mat-accent {
-        @include token-utils.create-token-values-mixed(
-            m2-datepicker.get-color-tokens($theme, secondary));
+        $tokens: m2-datepicker.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
       }
 
       &.mat-warn {
-        @include token-utils.create-token-values-mixed(
-            m2-datepicker.get-color-tokens($theme, error));
+        $tokens: m2-datepicker.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
       }
     }
   }
@@ -52,13 +48,12 @@
 /// Outputs typography theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), typography));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-datepicker.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-datepicker.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin date-range-colors(
@@ -78,9 +73,14 @@
 /// Outputs density theme styles for the mat-datepicker.
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
+  $tokens: map.get(m2-datepicker.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-datepicker.get-tokens($theme), density));
-  } @else {
+    $tokens: map.get(m3-datepicker.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
     // TODO(crisbeto): move this into the structural styles
     // once the icon button density is switched to tokens.
 
@@ -112,23 +112,21 @@
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {String} $color-variant The color variant to use for the component (M3 only)
 @mixin theme($theme, $color-variant: null) {
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
-      @include color($theme, $color-variant);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/datepicker/_m2-datepicker.scss

@@ -1,23 +1,40 @@
 @use 'sass:color';
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/tokens/m3-utils';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
-// 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() {
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    datepicker-calendar-container-shape: 4px,
-    datepicker-calendar-container-touch-shape: 4px,
-    datepicker-calendar-container-elevation-shadow: elevation.get-box-shadow(4),
-    datepicker-calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
+    base: (
+      datepicker-calendar-container-shape: 4px,
+      datepicker-calendar-container-touch-shape: 4px,
+      datepicker-calendar-container-elevation-shadow: elevation.get-box-shadow(4),
+      datepicker-calendar-container-touch-elevation-shadow: elevation.get-box-shadow(24),
+    ),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (
+      // TODO(crisbeto): the typography tokens for other components set every typography dimension
+      // of an element (e.g. size, weight, line height, letter spacing). These tokens only set the
+      // values that were set in the previous theming API to reduce the amount of subtle screenshot
+      // differences. We should look into introducing the other tokens in a follow-up.
+      datepicker-calendar-text-font: map.get($system, body-large-font),
+      datepicker-calendar-text-size: 13px,
+      datepicker-calendar-body-label-text-size: map.get($system, label-small-size),
+      datepicker-calendar-body-label-text-weight: map.get($system, label-small-weight),
+      datepicker-calendar-period-button-text-size: map.get($system, label-small-size),
+      datepicker-calendar-period-button-text-weight: map.get($system, label-small-weight),
+      datepicker-calendar-header-text-size: 11px,
+      datepicker-calendar-header-text-weight: map.get($system, body-large-weight),
+    ),
+    density: (),
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $color-variant) {
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
@@ -62,34 +79,3 @@
     datepicker-calendar-container-text-color: map.get($system, on-surface),
   );
 }
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return (
-    // TODO(crisbeto): the typography tokens for other components set every typography dimension of
-    // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
-    // that were set in the previous theming API to reduce the amount of subtle screenshot
-    // differences. We should look into introducing the other tokens in a follow-up.
-    datepicker-calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    datepicker-calendar-text-size: 13px,
-
-    datepicker-calendar-body-label-text-size:
-        inspection.get-theme-typography($theme, button, font-size),
-    datepicker-calendar-body-label-text-weight:
-        inspection.get-theme-typography($theme, button, font-weight),
-
-    datepicker-calendar-period-button-text-size:
-        inspection.get-theme-typography($theme, button, font-size),
-    datepicker-calendar-period-button-text-weight:
-        inspection.get-theme-typography($theme, button, font-weight),
-
-    datepicker-calendar-header-text-size: 11px,
-    datepicker-calendar-header-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}