@angular/material-experimental 17.0.1 → 17.0.2

package/theming/_custom-tokens.scss

@@ -21,6 +21,84 @@
   @return $result;
 }
 
+/// Generates custom tokens for the mat-autocomplete.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-autocomplete
+@function autocomplete($systems, $exclude-hardcoded) {
+  @return (
+    background-color: map.get($systems, md-sys-color, surface-container),
+  );
+}
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-badge
+@function badge($systems, $exclude-hardcoded) {
+  @return (
+    background-color: map.get($systems, md-sys-color, error),
+    text-color: map.get($systems, md-sys-color, on-error),
+    disabled-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, error),
+      $alpha: 0.38,
+    ),
+    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
+    text-font: map.get($systems, md-sys-typescale, label-small-font),
+    text-size: map.get($systems, md-sys-typescale, label-small-size),
+    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
+    small-size-text-size: _hardcode(0, $exclude-hardcoded),
+    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
+  );
+}
+
+/// Generates custom tokens for the mat-bottom-sheet.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-bottom-sheet
+@function bottom-sheet($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: _hardcode(28px, $exclude-hardcoded),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface-container-low),
+    ),
+  );
+}
+
+/// Generates custom tokens for the mat-button-toggle.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-button-toggle
+@function button-toggle($systems, $exclude-hardcoded) {
+  @return (
+    shape: _hardcode(9999px, $exclude-hardcoded),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    background-color: _hardcode(transparent, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, on-surface),
+    selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
+    selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
+    disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-state-background-color: _hardcode(transparent, $exclude-hardcoded),
+    disabled-selected-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-selected-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.12,
+    ),
+    divider-color: map.get($systems, md-sys-color, outline),
+    text-font: map.get($systems, md-sys-typescale, label-large-font),
+  );
+}
+
 /// Generates custom tokens for the mat-card.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -35,6 +113,130 @@
   );
 }
 
+/// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
+/// seem to have made up the tokens rather than using ones generated from the token database,
+/// therefore we need a custom token function for it).
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mdc-chip
+@function chip($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+    (
+      container-shape: _hardcode((
+        family: rounded,
+        radius: 8px,
+      ), $exclude-hardcoded),
+      with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
+      elevated-container-color: map.get($systems, md-sys-color, surface-container-low),
+      elevated-disabled-container-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-label-text-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38,
+      ),
+      with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      with-icon-disabled-icon-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38,
+      ),
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38,
+      ),
+      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ),
+  );
+}
+
+/// Generates custom tokens for the mat-datepicker.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-datepicker
+@function datepicker($systems, $exclude-hardcoded) {
+  @return (
+    calendar-date-in-range-state-background-color:
+      map.get($systems, md-sys-color, primary-container),
+    calendar-date-in-comparison-range-state-background-color:
+      map.get($systems, md-sys-color, secondary-container),
+    calendar-date-in-overlap-range-state-background-color:
+      map.get($systems, md-sys-color, tertiary-container),
+    calendar-date-in-overlap-range-selected-state-background-color:
+      map.get($systems, md-sys-color, tertiary),
+    calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
+    calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
+    calendar-date-selected-disabled-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-focus-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+    ),
+    calendar-date-hover-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-header-divider-color: map.get($systems, md-sys-color, outline-variant),
+    calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-today-disabled-state-outline-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-date-outline-color: _hardcode(transparent, $exclude-hardcoded),
+    calendar-date-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, primary),
+    range-input-separator-color: map.get($systems, md-sys-color, on-surface),
+    range-input-disabled-state-separator-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    range-input-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
+    calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
+    calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+  );
+}
+
+/// Generates custom tokens for the mat-divider.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-divider
+@function divider($systems, $exclude-hardcoded) {
+  @return (
+    width: _hardcode(1px, $exclude-hardcoded),
+    color: map.get($systems, md-sys-color, outline-variant),
+  );
+}
+
 /// Generates custom tokens for the mat-form-field.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -62,45 +264,104 @@
   );
 }
 
-/// Generates custom tokens for the mat-toolbar.
+/// Generates custom tokens for the mat-grid-list.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-toolbar
-@function toolbar($systems, $exclude-hardcoded) {
+/// @return {Map} A set of custom tokens for the mat-grid-list
+@function grid-list($systems, $exclude-hardcoded) {
+  @return (
+    tile-header-primary-text-size: map.get($systems, md-sys-typescale, body-large),
+    tile-header-secondary-text-size: map.get($systems, md-sys-typescale, body-medium),
+    tile-footer-primary-text-size: map.get($systems, md-sys-typescale, body-large),
+    tile-footer-secondary-text-size: map.get($systems, md-sys-typescale, body-medium),
+  );
+}
+
+/// Generates custom tokens for the mat-icon.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-icon
+@function icon($systems, $exclude-hardcoded) {
+  @return (
+    color: _hardcode(inherit, $exclude-hardcoded),
+  );
+}
+
+/// Generates custom tokens for the mat-menu.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-menu
+@function menu($systems, $exclude-hardcoded) {
   @return mat.private-merge-all(
-    _generate-typography-tokens($systems, title-text, title-large),
+    _generate-typography-tokens($systems, item-label-text, label-large),
     (
-      container-background-color: map.get($systems, md-sys-color, surface),
-      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-shape: _hardcode(4px, $exclude-hardcoded),
+      item-label-text-color: map.get($systems, md-sys-color, on-surface),
+      item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      item-hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      item-focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      container-color: map.get($systems, md-sys-color, surface-container),
     )
   );
 }
 
-/// Generates custom tokens for the mat-slide-toggle.
+/// Generates custom tokens for the mat-optgroup.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-slide-toggle
-@function slide-toggle($systems, $exclude-hardcoded) {
-  @return _generate-typography-tokens($systems, label-text, label-large);
+/// @return {Map} A set of custom tokens for the mat-optgroup
+@function optgroup($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, title-small),
+    (
+      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    )
+  );
 }
 
-/// Generates custom tokens for the mat-slider.
+/// Generates custom tokens for the mat-option.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-slider
-@function slider($systems, $exclude-hardcoded) {
-  @return (
-    value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
+/// @return {Map} A set of custom tokens for the mat-option
+@function option($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+    (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      label-text-color: map.get($systems, md-sys-color, on-surface),
+      hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
+    ),
   );
 }
 
-/// Generates custom tokens for the mat-snack-bar.
+/// Generates custom tokens for the mat-paginator.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-snack-bar
-@function snack-bar($systems, $exclude-hardcoded) {
-  @return (
-    button-color: map.get($systems, md-sys-color, inverse-primary),
+/// @return {Map} A set of custom tokens for the mat-paginator
+@function paginator($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, container-text, body-small),
+    (
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      enabled-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-icon-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      select-trigger-text-size: map.get($systems, md-sys-typescale, body-small-size),
+    )
   );
 }
 
@@ -126,6 +387,73 @@
   );
 }
 
+/// Generates custom tokens for the mat-select.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-select
+@function select($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, trigger-text, body-large),
+    (
+      panel-background-color: map.get($systems, md-sys-color, surface-container),
+      enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface),
+      disabled-trigger-text-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      placeholder-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      enabled-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-arrow-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      focused-arrow-color: map.get($systems, md-sys-color, primary),
+      invalid-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  );
+}
+
+/// Generates custom tokens for the mat-sidenav.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-sidenav
+@function sidenav($systems, $exclude-hardcoded) {
+  @return (
+    container-shape: 16px,
+    container-divider-color: map.get($systems, md-sys-color, outline),
+    container-background-color: map.get($systems, md-sys-color, surface),
+    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    content-background-color: _hardcode(inherit, $exclude-hardcoded),
+    content-text-color: _hardcode(inherit, $exclude-hardcoded),
+    scrim-color: mat.private-safe-color-change(
+        map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
+  );
+}
+
+/// Generates custom tokens for the mat-slide-toggle.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-slide-toggle
+@function slide-toggle($systems, $exclude-hardcoded) {
+  @return _generate-typography-tokens($systems, label-text, label-large);
+}
+
+/// Generates custom tokens for the mat-slider.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-slider
+@function slider($systems, $exclude-hardcoded) {
+  @return (
+    value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
+  );
+}
+
+/// Generates custom tokens for the mat-snack-bar.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-snack-bar
+@function snack-bar($systems, $exclude-hardcoded) {
+  @return (
+    button-color: map.get($systems, md-sys-color, inverse-primary),
+  );
+}
+
 /// Generates custom tokens for the mat-sort.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
@@ -181,7 +509,7 @@
   @return mat.private-merge-all(
     _generate-typography-tokens($systems, label-text, title-small),
     (
-      disabled-ripple-color: blue, // TODO(mmalerba): Figure out correct value.
+      disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
       pagination-icon-color: map.get($systems, md-sys-color, on-surface),
       inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
       active-label-text-color: map.get($systems, md-sys-color, on-surface),
@@ -230,6 +558,20 @@
   );
 }
 
+/// Generates custom tokens for the mat-toolbar.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-toolbar
+@function toolbar($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+      _generate-typography-tokens($systems, title-text, title-large),
+      (
+        container-background-color: map.get($systems, md-sys-color, surface),
+        container-text-color: map.get($systems, md-sys-color, on-surface),
+      )
+  );
+}
+
 /// Generates custom tokens for the mat-tree.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values

package/theming/_m3-density.scss

@@ -19,23 +19,27 @@ $_density-tokens: (
   (mdc, checkbox): (
     state-layer-size: (40px, 36px, 32px, 28px),
   ),
+  (mdc, chip): (
+    container-height: (32px, 28px, 24px),
+  ),
+  (mdc, circular-progress): (),
+  (mdc, dialog): (),
   (mdc, elevated-card): (),
   (mdc, filled-text-field): (),
-  (mdc, outlined-card): (),
-  (mdc, outlined-text-field): (),
-  (mdc, slider): (),
-  (mdc, snackbar): (),
-  (mdc, plain-tooltip): (),
-  (mdc, circular-progress): (),
-  (mdc, radio): (
-    state-layer-size: (40px, 36px, 32px, 28px),
-  ),
   (mdc, linear-progress): (),
   (mdc, list): (
     list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
     list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
     list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
   ),
+  (mdc, outlined-card): (),
+  (mdc, outlined-text-field): (),
+  (mdc, plain-tooltip): (),
+  (mdc, radio): (
+    state-layer-size: (40px, 36px, 32px, 28px),
+  ),
+  (mdc, slider): (),
+  (mdc, snackbar): (),
   (mdc, switch): (),
   (mdc, tab): (
     container-height: (48px, 44px, 40px, 36px, 32px)
@@ -43,18 +47,32 @@ $_density-tokens: (
   (mdc, tab-indicator): (),
 
   // Custom Angular Material tokens
+  (mat, autocomplete): (),
+  (mat, badge): (),
+  (mat, bottom-sheet): (),
   (mat, card): (),
+  (mat, datepicker): (),
+  (mat, divider): (),
   (mat, form-fild): (),
-  (mat, toolbar): (
-    standard-height: (64px, 60px, 56px, 52px),
-    mobile-height: (56px, 52px, 48px, 44px),
+  (mat, grid-list): (),
+  (mat, icon): (),
+  (mat, menu): (),
+  (mat, optgroup): (),
+  (mat, option): (),
+  (mat, paginator): (
+    container-size: (56px, 52px, 48px, 40px),
   ),
-  (mat, slider): (),
-  (mat, snack-bar): (),
   (mat, radio): (),
   (mat, ripple): (),
+  (mat, select): (),
+  (mat, sidenav): (),
   (mat, slide-toggle): (),
+  (mat, slider): (),
+  (mat, snack-bar): (),
   (mat, sort): (),
+  (mat, standard-button-toggle): (
+    height: (40px, 40px, 40px, 36px, 24px),
+  ),
   (mat, stepper): (
     header-height: (72px, 68px, 64px, 60px, 42px),
   ),
@@ -64,6 +82,10 @@ $_density-tokens: (
     footer-container-height: (52px, 48px, 44px, 40px, 36px),
     row-item-container-height: (52px, 48px, 44px, 40px, 36px),
   ),
+  (mat, toolbar): (
+    standard-height: (64px, 60px, 56px, 52px),
+    mobile-height: (56px, 52px, 48px, 44px),
+  ),
   (mat, tree): (
     node-min-height: (48px, 44px, 40px, 36px, 28px),
   ),

package/theming/_m3-palettes.scss

@@ -1,5 +1,34 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+/// Estimate a hue using the given previous and next hues.
+@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) {
+  $weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%;
+  @return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight);
+}
+
+// TODO(mmalerba): Remove this and add correct values for these hues.
+/// The Material Design spec references some neutral hues that are not generated by
+/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
+/// by blending the nearest hues that are generated.
+@function _patch-missing-hues($palette) {
+  $neutral: map.get($palette, neutral);
+  $palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));
+  $palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10));
+  $palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20));
+  $palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20));
+  $palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25));
+  $palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25));
+  $palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90));
+  $palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95));
+  $palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95));
+  $palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98));
+  @return $palette;
+}
+
 /// Blue color palette to be used as primary, secondary, or tertiary palette.
-$blue-palette: (
+$blue-palette: _patch-missing-hues((
   0: #000000,
   10: #00006e,
   20: #0001ac,
@@ -52,10 +81,10 @@ $blue-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));
 
 /// Cyan color palette to be used as primary, secondary, or tertiary palette.
-$cyan-palette: (
+$cyan-palette: _patch-missing-hues((
   0: #000000,
   10: #002020,
   20: #003737,
@@ -108,10 +137,10 @@ $cyan-palette: (
     99: #f4fefd,
     100: #ffffff,
   ),
-);
+));
 
 /// Green color palette to be used as primary, secondary, or tertiary palette.
-$green-palette: (
+$green-palette: _patch-missing-hues((
   0: #000000,
   10: #002200,
   20: #013a00,
@@ -164,10 +193,10 @@ $green-palette: (
     99: #f9fef1,
     100: #ffffff,
   ),
-);
+));
 
 /// Magenta color palette to be used as primary, secondary, or tertiary palette.
-$magenta-palette: (
+$magenta-palette: _patch-missing-hues((
   0: #000000,
   10: #380038,
   20: #5b005b,
@@ -220,10 +249,10 @@ $magenta-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));
 
 /// Orange color palette to be used as primary, secondary, or tertiary palette.
-$orange-palette: (
+$orange-palette: _patch-missing-hues((
   0: #000000,
   10: #311300,
   20: #502400,
@@ -276,10 +305,10 @@ $orange-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));
 
 /// Purple color palette to be used as primary, secondary, or tertiary palette.
-$purple-palette: (
+$purple-palette: _patch-missing-hues((
   0: #000000,
   10: #270057,
   20: #42008a,
@@ -332,10 +361,10 @@ $purple-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));
 
 /// Red color palette to be used as primary, secondary, or tertiary palette.
-$red-palette: (
+$red-palette: _patch-missing-hues((
   0: #000000,
   10: #410000,
   20: #690100,
@@ -388,10 +417,10 @@ $red-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));
 
 /// Yellow color palette to be used as primary, secondary, or tertiary palette.
-$yellow-palette: (
+$yellow-palette: _patch-missing-hues((
   0: #000000,
   10: #1d1d00,
   20: #323200,
@@ -444,4 +473,4 @@ $yellow-palette: (
     99: #fffbff,
     100: #ffffff,
   ),
-);
+));