@angular/material-experimental 17.1.0-next.0 → 17.1.0-next.2

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,
   ),
-);
+));

package/theming/_m3-tokens.scss

@@ -177,16 +177,51 @@
       _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-values($systems, $exclude-hardcoded)),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, chip),
+      custom-tokens.chip($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, circular-progress),
+      mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, dialog),
+      mdc-tokens.md-comp-dialog-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, elevated-card),
       mdc-tokens.md-comp-elevated-card-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, fab),
+      mdc-tokens.md-comp-fab-primary-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, extended-fab),
+      mdc-tokens.md-comp-extended-fab-primary-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, filled-text-field),
       mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, icon-button),
+      mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, linear-progress),
+      mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, list),
       mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
@@ -202,6 +237,16 @@
       mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, plain-tooltip),
+      mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, radio),
+      mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, slider),
       mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
@@ -218,40 +263,51 @@
       $token-slots
     ),
     _namespace-tokens(
-      (mdc, plain-tooltip),
-      mdc-tokens.md-comp-plain-tooltip-values($systems, $exclude-hardcoded),
+      (mdc, tab),
+      mdc-tokens.md-comp-secondary-navigation-tab-values($systems, $exclude-hardcoded),
       $token-slots
     ),
+
+    // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
+    // values.
     _namespace-tokens(
-      (mdc, circular-progress),
-      mdc-tokens.md-comp-circular-progress-indicator-values($systems, $exclude-hardcoded),
+      (mdc, tab-indicator),
+      custom-tokens.tab-indicator($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mdc, radio),
-      mdc-tokens.md-comp-radio-button-values($systems, $exclude-hardcoded),
+      (mat, autocomplete),
+      custom-tokens.autocomplete($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mdc, linear-progress),
-      mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+      (mat, badge),
+      custom-tokens.badge($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mdc, tab),
-      mdc-tokens.md-comp-secondary-navigation-tab-values($systems, $exclude-hardcoded),
+      (mat, bottom-sheet),
+      custom-tokens.bottom-sheet($systems, $exclude-hardcoded),
       $token-slots
     ),
-    // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
-    // values.
     _namespace-tokens(
-      (mdc, tab-indicator),
-      custom-tokens.tab-indicator($systems, $exclude-hardcoded),
+      (mat, card),
+      custom-tokens.card($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mat, card),
-      custom-tokens.card($systems, $exclude-hardcoded),
+      (mat, datepicker),
+      custom-tokens.datepicker($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, divider),
+      custom-tokens.divider($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, fab),
+      custom-tokens.fab($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
@@ -259,29 +315,44 @@
       custom-tokens.form-field($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, expansion),
+      custom-tokens.expansion($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, grid-list),
       custom-tokens.grid-list($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mat, toolbar),
-      custom-tokens.toolbar($systems, $exclude-hardcoded),
-      $token-slots,
+      (mat, icon),
+      custom-tokens.icon($systems, $exclude-hardcoded),
+      $token-slots
     ),
     _namespace-tokens(
-      (mat, slide-toggle),
-      custom-tokens.slide-toggle($systems, $exclude-hardcoded),
+      (mat, icon-button),
+      custom-tokens.icon-button($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mat, slider),
-      custom-tokens.slider($systems, $exclude-hardcoded),
+      (mat, menu),
+      custom-tokens.menu($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
-      (mat, snack-bar),
-      custom-tokens.snack-bar($systems, $exclude-hardcoded),
+      (mat, optgroup),
+      custom-tokens.optgroup($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, option),
+      custom-tokens.option($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, paginator),
+      custom-tokens.paginator($systems, $exclude-hardcoded),
       $token-slots
     ),
     _namespace-tokens(
@@ -294,11 +365,41 @@
       custom-tokens.ripple($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, select),
+      custom-tokens.select($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, sidenav),
+      custom-tokens.sidenav($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, slide-toggle),
+      custom-tokens.slide-toggle($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, slider),
+      custom-tokens.slider($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, snack-bar),
+      custom-tokens.snack-bar($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, sort),
       custom-tokens.sort($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, standard-button-toggle),
+      custom-tokens.button-toggle($systems, $exclude-hardcoded),
+      $token-slots
+    ),
     _namespace-tokens(
       (mat, stepper),
       custom-tokens.stepper($systems, $exclude-hardcoded),
@@ -314,6 +415,11 @@
       custom-tokens.table($systems, $exclude-hardcoded),
       $token-slots
     ),
+    _namespace-tokens(
+      (mat, toolbar),
+      custom-tokens.toolbar($systems, $exclude-hardcoded),
+      $token-slots,
+    ),
     _namespace-tokens(
       (mat, tree),
       custom-tokens.tree($systems, $exclude-hardcoded),
@@ -347,11 +453,11 @@
   $sys-color: if($type == dark,
     mdc-tokens.md-sys-color-values-dark($ref),
     mdc-tokens.md-sys-color-values-light($ref));
-  @return _generate-tokens((
+  @return _generate-tokens(map.merge($ref, (
     md-sys-color: $sys-color,
     md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
     md-sys-state: mdc-tokens.md-sys-state-values(),
-  ));
+  )));
 }
 
 /// Generates a set of namespaced color tokens for all components.