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

package/esm2022/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of the Material experimental package. */
-export const VERSION = new Version('17.0.0');
+export const VERSION = new Version('17.1.0-next.0');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC1leHBlcmltZW50YWwvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXRDLDREQUE0RDtBQUM1RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge1ZlcnNpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogQ3VycmVudCB2ZXJzaW9uIG9mIHRoZSBNYXRlcmlhbCBleHBlcmltZW50YWwgcGFja2FnZS4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzAuMC4wLVBMQUNFSE9MREVSJyk7XG4iXX0=

package/fesm2022/material-experimental.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Material experimental package. */
-const VERSION = new Version('17.0.0');
+const VERSION = new Version('17.1.0-next.0');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.0.0');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.1.0-next.0');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.0.0",
+  "version": "17.1.0-next.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -48,13 +48,13 @@
     }
   },
   "peerDependencies": {
-    "@angular/animations": "^17.0.0 || ^18.0.0",
-    "@angular/cdk": "17.0.0",
-    "@angular/core": "^17.0.0 || ^18.0.0",
-    "@angular/common": "^17.0.0 || ^18.0.0",
-    "@angular/forms": "^17.0.0 || ^18.0.0",
-    "@angular/platform-browser": "^17.0.0 || ^18.0.0",
-    "@angular/material": "17.0.0"
+    "@angular/animations": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
+    "@angular/cdk": "17.1.0-next.0",
+    "@angular/core": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
+    "@angular/common": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
+    "@angular/forms": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
+    "@angular/platform-browser": "^17.0.0-0 || ^17.1.0-0 || ^17.2.0-0 || ^17.3.0-0 || ^18.0.0-0",
+    "@angular/material": "17.1.0-next.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/theming/_custom-tokens.scss

@@ -1,6 +1,11 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function _hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
 /// Sets all of the standard typography tokens for the given token base name to the given typography
 /// level.
 /// @param {Map} $systems The MDC system tokens
@@ -22,11 +27,51 @@
 /// @return {Map} A set of custom tokens for the mat-card
 @function card($systems, $exclude-hardcoded) {
   @return mat.private-merge-all(
-      _generate-typography-tokens($systems, title-text, title-large),
-      _generate-typography-tokens($systems, subtitle-text, title-medium),
-      (
-        subtitle-text-color: map.get($systems, md-sys-color, on-surface)
-      )
+    _generate-typography-tokens($systems, title-text, title-large),
+    _generate-typography-tokens($systems, subtitle-text, title-medium),
+    (
+      subtitle-text-color: map.get($systems, md-sys-color, on-surface)
+    )
+  );
+}
+
+/// 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
+/// @return {Map} A set of custom tokens for the mat-form-field
+@function form-field($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, container-text, body-large),
+    _generate-typography-tokens($systems, subscript-text, body-small),
+    (
+      disabled-input-text-placeholder-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      state-layer-color: map.get($systems, md-sys-color, on-surface),
+      error-text-color: map.get($systems, md-sys-color, error),
+      select-option-text-color: map.get($systems, md-ref-palette, neutral10),
+      select-disabled-option-text-color: mat.private-safe-color-change(
+          map.get($systems, md-ref-palette, neutral10), $alpha: 0.38),
+      enabled-select-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-select-arrow-color: mat.private-safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      focus-state-layer-opacity: _hardcode(0, $exclude-hardcoded),
+      focus-select-arrow-color: map.get($systems, md-sys-color, primary),
+      outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
+    )
+  );
+}
+
+/// 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-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),
   );
 }
 
@@ -36,21 +81,29 @@
 /// @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),
-      )
+    _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-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: 1,
+    value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
   );
 }
 
@@ -75,3 +128,131 @@
     disabled-label-color: map.get($systems, md-sys-color, on-surface),
   );
 }
+
+/// Generates custom tokens for the mat-ripple.
+/// @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-ripple
+@function ripple($systems, $exclude-hardcoded) {
+  @return (
+    color: mat.private-safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1),
+  );
+}
+
+/// Generates custom tokens for the mat-sort.
+/// @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-sort
+@function sort($systems, $exclude-hardcoded) {
+  @return (
+    arrow-color: map.get($systems, md-sys-color, on-surface),
+  );
+}
+
+/// Generates custom tokens for the mat-stepper.
+/// @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-stepper
+@function stepper($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    (
+      container-color: map.get($systems, md-sys-color, surface),
+      line-color: map.get($systems, md-sys-color, outline-variant),
+      header-hover-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, inverse-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      header-focus-state-layer-color: mat.private-safe-color-change(
+        map.get($systems, md-sys-color, inverse-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface),
+      header-icon-background-color: map.get($systems, md-sys-color, inverse-surface),
+      header-icon-foreground-color: map.get($systems, md-sys-color, inverse-on-surface),
+      header-error-state-label-text-color: map.get($systems, md-sys-color, error),
+      header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
+      header-error-state-icon-background-color: _hardcode(transparent, $exclude-hardcoded),
+      container-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+      header-label-text-font: map.get($systems, md-sys-typescale, title-small-font),
+      header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+      header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+      header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-szie),
+      header-selected-state-label-text-weight: map.get(
+          $systems, md-sys-typescale, title-small-weight),
+    ),
+  );
+}
+
+/// Generates custom tokens for the mat-tab-header.
+/// @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-tab-header
+@function tab-header($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, title-small),
+    (
+      disabled-ripple-color: blue, // 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),
+      active-ripple-color: map.get($systems, md-sys-color, on-surface),
+      inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
+      inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+      inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-focus-indicator-color: map.get($systems, md-sys-color, primary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, primary),
+    ),
+  );
+}
+
+/// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator 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-tab-indicator
+@function tab-indicator($systems, $exclude-hardcoded) {
+  @return (
+    active-indicator-height: _hardcode(2px, $exclude-hardcoded),
+    active-indicator-shape: _hardcode(0, $exclude-hardcoded),
+    active-indicator-color: map.get($systems, md-sys-color, primary),
+  );
+}
+
+/// Generates custom tokens for the mat-table.
+/// @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-table
+@function table($systems, $exclude-hardcoded) {
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, header-headline, title-small),
+    _generate-typography-tokens($systems, row-item-label-text, body-medium),
+    _generate-typography-tokens($systems, footer-supporting-text, body-medium),
+    (
+      row-item-outline-width: _hardcode(1px, $exclude-hardcoded),
+      background-color: map.get($systems, md-sys-color, surface),
+      header-headline-color: map.get($systems, md-sys-color, on-surface),
+      row-item-label-text-color: map.get($systems, md-sys-color, on-surface),
+      row-item-outline-color: map.get($systems, md-sys-color, outline-variant),
+    ),
+  );
+}
+
+/// Generates custom tokens for the mat-tree.
+/// @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-tree
+@function tree($systems, $exclude-hardcoded) {
+  @return (
+    container-background-color: map.get($systems, md-sys-color, surface),
+    node-text-color: map.get($systems, md-sys-color, on-surface),
+    node-text-font: map.get($systems, md-sys-typescale, body-large-font),
+    node-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+  );
+}

package/theming/_definition.scss

@@ -38,7 +38,7 @@ $theme-version: 1;
   }
 
   $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or m3-palettes.$indigo-palette;
+  $primary: map.get($config, primary) or m3-palettes.$purple-palette;
   $secondary: map.get($config, secondary) or $primary;
   $tertiary: map.get($config, tertiary) or $secondary;
 
@@ -47,15 +47,15 @@ $theme-version: 1;
       theme-version: $theme-version,
       theme-type: $type,
       palettes: (
-        primary: map.remove($primary, neutral-variant),
-        secondary: map.remove($secondary, neutral-variant),
-        tertiary: map.remove($tertiary, neutral-variant),
-        neutral: m3-palettes.$neutral-palette,
+        primary: map.remove($primary, neutral, neutral-variant),
+        secondary: map.remove($secondary, neutral, neutral-variant),
+        tertiary: map.remove($tertiary, neutral, neutral-variant),
+        neutral: map.get($primary, neutral),
         neutral-variant: map.get($primary, neutral-variant),
-        error: m3-palettes.$red-palette
+        error: map.remove(m3-palettes.$red-palette, neutral, neutral-variant),
       ),
-      color-tokens: m3-tokens.generate-color-tokens($type, $primary, $secondary, $tertiary,
-        m3-palettes.$neutral-palette, m3-palettes.$red-palette)
+      color-tokens: m3-tokens.generate-color-tokens(
+          $type, $primary, $secondary, $tertiary, m3-palettes.$red-palette)
     )
   );
 }

package/theming/_m3-density.scss

@@ -16,28 +16,58 @@
 // TODO(mmalerba): Add density tokens for remaining components.
 $_density-tokens: (
   // MDC tokens
-    (mdc, checkbox): (
+  (mdc, checkbox): (
     state-layer-size: (40px, 36px, 32px, 28px),
   ),
-    (mdc, elevated-card): (),
-    (mdc, outlined-card): (),
-    (mdc, slider): (),
-    (mdc, snackbar): (),
-    (mdc, plain-tooltip): (),
-    (mdc, circular-progress): (),
-    (mdc, radio): (
+  (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, 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, switch): (),
+  (mdc, tab): (
+    container-height: (48px, 44px, 40px, 36px, 32px)
+  ),
+  (mdc, tab-indicator): (),
+
   // Custom Angular Material tokens
-    (mat, card): (),
-    (mat, toolbar): (
+  (mat, card): (),
+  (mat, form-fild): (),
+  (mat, grid-list): (),
+  (mat, toolbar): (
     standard-height: (64px, 60px, 56px, 52px),
     mobile-height: (56px, 52px, 48px, 44px),
   ),
-    (mat, slider): (),
-    (mat, snack-bar): (),
-    (mat, radio): (),
+  (mat, slider): (),
+  (mat, snack-bar): (),
+  (mat, radio): (),
+  (mat, ripple): (),
+  (mat, slide-toggle): (),
+  (mat, sort): (),
+  (mat, stepper): (
+    header-height: (72px, 68px, 64px, 60px, 42px),
+  ),
+  (mat, tab-header): (),
+  (mat, table): (
+    header-container-height: (56px, 52px, 48px, 44px, 40px),
+    footer-container-height: (52px, 48px, 44px, 40px, 36px),
+    row-item-container-height: (52px, 48px, 44px, 40px, 36px),
+  ),
+  (mat, tree): (
+    node-min-height: (48px, 44px, 40px, 36px, 28px),
+  ),
 );
 
 /// Gets the value for the given density scale from the given set of density values.

package/theming/_m3-palettes.scss

@@ -1,105 +1,123 @@
-/// Red color palette to be used as primary, secondary, or tertiary palette.
-$red-palette: (
-  0: #000,
-  10: #410000,
-  20: #690100,
-  30: #930100,
-  40: #c00100,
-  50: #ef0000,
-  60: #ff5540,
-  70: #ff8a78,
-  80: #ffb4a8,
-  90: #ffdad4,
-  95: #ffedea,
+/// Blue color palette to be used as primary, secondary, or tertiary palette.
+$blue-palette: (
+  0: #000000,
+  10: #00006e,
+  20: #0001ac,
+  25: #0001cd,
+  30: #0000ef,
+  35: #1a21ff,
+  40: #343dff,
+  50: #5a64ff,
+  60: #7c84ff,
+  70: #9da3ff,
+  80: #bec2ff,
+  90: #e0e0ff,
+  95: #f1efff,
+  98: #fbf8ff,
   99: #fffbff,
-  100: #fff,
-  neutral-variant: (
-    0: #000,
-    10: #251917,
-    20: #3b2d2b,
-    30: #534341,
-    40: #6c5a58,
-    50: #857370,
-    60: #a08c89,
-    70: #bca7a3,
-    80: #d8c2be,
-    90: #f5ddda,
-    95: #ffedea,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1b1b1f,
+    20: #303034,
+    25: #3c3b3f,
+    30: #47464a,
+    35: #535256,
+    40: #5f5e62,
+    50: #78767a,
+    60: #929094,
+    70: #adaaaf,
+    80: #c8c5ca,
+    90: #e5e1e6,
+    95: #f3eff4,
+    98: #fcf8fd,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
-
-/// Orange color palette to be used as primary, secondary, or tertiary palette.
-$orange-palette: (
-  0: #000,
-  10: #2a1700,
-  20: #462a00,
-  30: #653e00,
-  40: #855400,
-  50: #a66a00,
-  60: #c98100,
-  70: #ed9900,
-  80: #ffb95c,
-  90: #ffddb7,
-  95: #ffeede,
-  99: #fffbff,
-  100: #fff,
   neutral-variant: (
-    0: #000,
-    10: #221a10,
-    20: #382f24,
-    30: #504539,
-    40: #685c50,
-    50: #827568,
-    60: #9c8e80,
-    70: #b8a99a,
-    80: #d4c4b5,
-    90: #f0e0d0,
-    95: #ffeede,
+    0: #000000,
+    10: #1b1b23,
+    20: #303038,
+    25: #3b3b43,
+    30: #46464f,
+    35: #52515b,
+    40: #5e5d67,
+    50: #777680,
+    60: #91909a,
+    70: #acaab4,
+    80: #c7c5d0,
+    90: #e4e1ec,
+    95: #f2effa,
+    98: #fbf8ff,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
 );
 
-/// Yellow color palette to be used as primary, secondary, or tertiary palette.
-$yellow-palette: (
-  0: #000,
-  10: #1d1d00,
-  20: #323200,
-  30: #494900,
-  40: #626200,
-  50: #7b7b00,
-  60: #969600,
-  70: #b1b100,
-  80: #cdcd00,
-  90: #eaea00,
-  95: #f9f900,
-  99: #fffbff,
-  100: #fff,
+/// Cyan color palette to be used as primary, secondary, or tertiary palette.
+$cyan-palette: (
+  0: #000000,
+  10: #002020,
+  20: #003737,
+  25: #004343,
+  30: #004f4f,
+  35: #005c5c,
+  40: #006a6a,
+  50: #008585,
+  60: #00a1a1,
+  70: #00bebe,
+  80: #00dddd,
+  90: #00fbfb,
+  95: #adfffe,
+  98: #e2fffe,
+  99: #f1fffe,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5f,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1c1c11,
-    20: #313125,
-    30: #48473a,
-    40: #605f51,
-    50: #797869,
-    60: #939182,
-    70: #aeac9b,
-    80: #cac7b6,
-    90: #e6e3d1,
-    95: #f4f1df,
-    99: #fffbff,
-    100: #fff,
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7979,
+    60: #889392,
+    70: #a3adad,
+    80: #bec9c8,
+    90: #dae5e4,
+    95: #e9f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff,
   ),
 );
 
 /// Green color palette to be used as primary, secondary, or tertiary palette.
 $green-palette: (
-  0: #000,
+  0: #000000,
   10: #002200,
   20: #013a00,
+  25: #014600,
   30: #015300,
+  35: #026100,
   40: #026e00,
   50: #038b00,
   60: #03a800,
@@ -107,13 +125,16 @@ $green-palette: (
   80: #02e600,
   90: #77ff61,
   95: #cbffb8,
+  98: #edffe1,
   99: #f7ffee,
-  100: #fff,
-  neutral-variant: (
-    0: #000,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
     10: #1a1c18,
     20: #2f312d,
+    25: #3a3c38,
     30: #454743,
+    35: #51534e,
     40: #5d5f5a,
     50: #767872,
     60: #90918c,
@@ -121,131 +142,306 @@ $green-palette: (
     80: #c6c7c1,
     90: #e2e3dc,
     95: #f1f1eb,
+    98: #f9faf3,
     99: #fcfdf6,
-    100: #fff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181d15,
+    20: #2c3229,
+    25: #373d34,
+    30: #43483f,
+    35: #4e544a,
+    40: #5a6056,
+    50: #73796e,
+    60: #8d9387,
+    70: #a7ada1,
+    80: #c3c8bc,
+    90: #dfe4d7,
+    95: #edf3e5,
+    98: #f6fbee,
+    99: #f9fef1,
+    100: #ffffff,
   ),
 );
 
-/// Blue color palette to be used as primary, secondary, or tertiary palette.
-$blue-palette: (
-  0: #000,
-  10: #00006e,
-  20: #0001ac,
-  30: #0000ef,
-  40: #343dff,
-  50: #5a64ff,
-  60: #7c84ff,
-  70: #9da3ff,
-  80: #bec2ff,
-  90: #e0e0ff,
-  95: #f1efff,
+/// Magenta color palette to be used as primary, secondary, or tertiary palette.
+$magenta-palette: (
+  0: #000000,
+  10: #380038,
+  20: #5b005b,
+  25: #6e006e,
+  30: #810081,
+  35: #950094,
+  40: #a900a9,
+  50: #d200d2,
+  60: #fe00fe,
+  70: #ff76f6,
+  80: #ffabf3,
+  90: #ffd7f5,
+  95: #ffebf8,
+  98: #fff7f9,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1e1a1d,
+    20: #342f32,
+    25: #3f3a3d,
+    30: #4b4548,
+    35: #575154,
+    40: #635d60,
+    50: #7c7579,
+    60: #968f92,
+    70: #b1a9ad,
+    80: #cdc4c8,
+    90: #e9e0e4,
+    95: #f8eef2,
+    98: #fff7f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1b1b23,
-    20: #303038,
-    30: #46464f,
-    40: #5e5d67,
-    50: #777680,
-    60: #91909a,
-    70: #acaab4,
-    80: #c7c5d0,
-    90: #e4e1ec,
-    95: #f2effa,
+    0: #000000,
+    10: #21191f,
+    20: #372e34,
+    25: #423940,
+    30: #4e444b,
+    35: #5a4f57,
+    40: #665b63,
+    50: #80747c,
+    60: #9a8d95,
+    70: #b5a7b0,
+    80: #d1c2cb,
+    90: #eedee7,
+    95: #fcecf5,
+    98: #fff7f9,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
 );
 
-/// Indigo color palette to be used as primary, secondary, or tertiary palette.
-$indigo-palette: (
-  0: #000,
-  10: #2c0050,
-  20: #4a0080,
-  30: #622599,
-  40: #7b41b3,
-  50: #965bce,
-  60: #b175ea,
-  70: #cb93ff,
-  80: #ddb7ff,
-  90: #f0dbff,
-  95: #faecff,
+/// Orange color palette to be used as primary, secondary, or tertiary palette.
+$orange-palette: (
+  0: #000000,
+  10: #311300,
+  20: #502400,
+  25: #612d00,
+  30: #723600,
+  35: #843f00,
+  40: #964900,
+  50: #bc5d00,
+  60: #e37100,
+  70: #ff8e36,
+  80: #ffb787,
+  90: #ffdcc7,
+  95: #ffede4,
+  98: #fff8f5,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #201a17,
+    20: #362f2b,
+    25: #413a36,
+    30: #4d4541,
+    35: #59514d,
+    40: #655d58,
+    50: #7e7571,
+    60: #998f8a,
+    70: #b4a9a4,
+    80: #d0c4bf,
+    90: #ece0da,
+    95: #fbeee8,
+    98: #fff8f5,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1e1a22,
-    20: #342f37,
-    30: #4a454e,
-    40: #625c65,
-    50: #7c757e,
-    60: #968e98,
-    70: #b1a8b3,
-    80: #cdc4ce,
-    90: #e9dfeb,
-    95: #f7eef9,
+    0: #000000,
+    10: #241912,
+    20: #3a2e26,
+    25: #463931,
+    30: #52443c,
+    35: #5e4f47,
+    40: #6b5b52,
+    50: #84746a,
+    60: #9f8d83,
+    70: #baa79d,
+    80: #d7c3b8,
+    90: #f4ded3,
+    95: #ffede4,
+    98: #fff8f5,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
 );
 
-/// Violet color palette to be used as primary, secondary, or tertiary palette.
-$violet-palette: (
-  0: #000,
+/// Purple color palette to be used as primary, secondary, or tertiary palette.
+$purple-palette: (
+  0: #000000,
   10: #270057,
   20: #42008a,
-  30: #5e00c1,
+  25: #5000a4,
+  30: #5f00c0,
+  35: #6e00dc,
   40: #7d00fa,
-  50: #934bff,
+  50: #944aff,
   60: #a974ff,
   70: #bf98ff,
   80: #d5baff,
   90: #ecdcff,
   95: #f7edff,
+  98: #fef7ff,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1d1b1e,
+    20: #323033,
+    25: #3d3a3e,
+    30: #49464a,
+    35: #545155,
+    40: #605d61,
+    50: #7a767a,
+    60: #948f94,
+    70: #aeaaae,
+    80: #cac5ca,
+    90: #e6e1e6,
+    95: #f5eff4,
+    98: #fef8fc,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
+    0: #000000,
     10: #1d1a22,
     20: #332f37,
+    25: #3e3a42,
     30: #49454e,
+    35: #55515a,
     40: #615c66,
     50: #7b757f,
     60: #958e99,
-    70: #afa9b3,
+    70: #b0a9b3,
     80: #cbc4cf,
     90: #e8e0eb,
     95: #f6eef9,
+    98: #fef7ff,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
 );
 
-/// Gray palette used for backgrounds and surfaces.
-$neutral-palette: (
-  0: #000,
-  4: #0e0e11,
-  6: #141317,
-  10: #1c1b1f,
-  12: #201f23,
-  17: #2b292d,
-  20: #313033,
-  22: #313033,
-  24: #313033,
-  30: #484649,
-  40: #605d62,
-  50: #787579,
-  60: #939094,
-  70: #aeaaae,
-  80: #c9c5ca,
-  87: #ddd8dd,
-  90: #e6e1e5,
-  92: #ece7ec,
-  94: #f1ecf1,
-  95: #f4eff4,
-  96: #f7f2f7,
-  98: #fdf8fd,
-  99: #fffbfe,
-  100: #fff,
+/// Red color palette to be used as primary, secondary, or tertiary palette.
+$red-palette: (
+  0: #000000,
+  10: #410000,
+  20: #690100,
+  25: #7e0100,
+  30: #930100,
+  35: #a90100,
+  40: #c00100,
+  50: #ef0000,
+  60: #ff5540,
+  70: #ff8a78,
+  80: #ffb4a8,
+  90: #ffdad4,
+  95: #ffedea,
+  98: #fff8f6,
+  99: #fffbff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #201a19,
+    20: #362f2e,
+    25: #413a38,
+    30: #4d4544,
+    35: #59504f,
+    40: #655c5b,
+    50: #7f7573,
+    60: #998e8d,
+    70: #b4a9a7,
+    80: #d0c4c2,
+    90: #ede0dd,
+    95: #fbeeec,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #251917,
+    20: #3b2d2b,
+    25: #473836,
+    30: #534341,
+    35: #5f4f4c,
+    40: #6c5a58,
+    50: #857370,
+    60: #a08c89,
+    70: #bca7a3,
+    80: #d8c2be,
+    90: #f5ddda,
+    95: #ffedea,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+/// Yellow color palette to be used as primary, secondary, or tertiary palette.
+$yellow-palette: (
+  0: #000000,
+  10: #1d1d00,
+  20: #323200,
+  25: #3e3e00,
+  30: #494900,
+  35: #555500,
+  40: #626200,
+  50: #7b7b00,
+  60: #969600,
+  70: #b1b100,
+  80: #cdcd00,
+  90: #eaea00,
+  95: #f9f900,
+  98: #fffeac,
+  99: #fffbff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1c1c17,
+    20: #31312b,
+    25: #3c3c35,
+    30: #484741,
+    35: #54524c,
+    40: #605e58,
+    50: #797770,
+    60: #939189,
+    70: #aeaba3,
+    80: #c9c6be,
+    90: #e6e2d9,
+    95: #f4f0e8,
+    98: #fdf9f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1c1c11,
+    20: #313125,
+    25: #3d3c2f,
+    30: #48473a,
+    35: #545345,
+    40: #605f51,
+    50: #797869,
+    60: #939182,
+    70: #aeac9b,
+    80: #cac7b6,
+    90: #e6e3d1,
+    95: #f4f1df,
+    98: #fdfae7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
 );

package/theming/_m3-tokens.scss

@@ -65,7 +65,7 @@
 /// @param {String} $prefix The key prefix used to name the tokens
 /// @return {Map} A set of tokens for the given palette
 @function _generate-palette-tokens($palette, $prefix) {
-  $palette: map.remove($palette, neutral-variant);
+  $palette: map.remove($palette, neutral, neutral-variant);
   $result: ();
   @each $hue, $value in $palette {
     $result: map.set($result, '#{$prefix}#{$hue}', $value);
@@ -78,16 +78,15 @@
 /// @param {Map} $primary The primary palette
 /// @param {Map} $secondary The secondary palette
 /// @param {Map} $tertiary The tertiary palette
-/// @param {Map} $neutral The neutral palette
 /// @param {Map} $error The error palette
 /// @return {Map} A set of `md-ref-palette` tokens
-@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $neutral, $error) {
+@function _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error) {
   @return mat.private-merge-all(
       (black: #000, white: #fff),
       _generate-palette-tokens($primary, primary),
       _generate-palette-tokens($secondary, secondary),
       _generate-palette-tokens($tertiary, tertiary),
-      _generate-palette-tokens($neutral, neutral),
+      _generate-palette-tokens(map.get($primary, neutral), neutral),
       _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
       _generate-palette-tokens($error, error),
   );
@@ -168,82 +167,158 @@
   // TODO(mmalerba): Fill in remaining tokens.
   $result: mat.private-merge-all(
     // Add the system color & typography tokens (so we can give users access via an API).
-      (
-          (mdc, theme): map.get($systems, md-sys-color),
-          (mdc, typography): map.get($systems, md-sys-typescale),
-      ),
-      // Get the official MDC component tokens
-      _namespace-tokens(
-            (mdc, checkbox),
-          _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-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, outlined-card),
-          mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
-          $token-slots
-      ),
-      _namespace-tokens(
-            (mdc, slider),
-          mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
-          $token-slots
-      ),
-      _namespace-tokens(
-            (mdc, snackbar),
-          mdc-tokens.md-comp-snackbar-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, circular-progress),
-          mdc-tokens.md-comp-circular-progress-indicator-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, linear-progress),
-          mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
-          $token-slots),
-      // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
-      // values.
-      _namespace-tokens(
-            (mat, card),
-          custom-tokens.card($systems, $exclude-hardcoded),
-          $token-slots
-      ),
-      _namespace-tokens(
-            (mat, toolbar),
-          custom-tokens.toolbar($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, radio),
-          custom-tokens.radio($systems, $exclude-hardcoded),
-          $token-slots
-      ),
+    (
+      (mdc, theme): map.get($systems, md-sys-color),
+      (mdc, typography): map.get($systems, md-sys-typescale),
+    ),
+    // Get the official MDC component tokens
+    _namespace-tokens(
+      (mdc, checkbox),
+      _fix-checkbox-tokens(mdc-tokens.md-comp-checkbox-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, filled-text-field),
+      mdc-tokens.md-comp-filled-text-field-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, list),
+      mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-card),
+      mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, outlined-text-field),
+      mdc-tokens.md-comp-outlined-text-field-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, slider),
+      mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mdc, snackbar),
+      mdc-tokens.md-comp-snackbar-values($systems, $exclude-hardcoded),
+      $token-slots,
+    ),
+    _namespace-tokens(
+      (mdc, switch),
+      mdc-tokens.md-comp-switch-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, circular-progress),
+      mdc-tokens.md-comp-circular-progress-indicator-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, linear-progress),
+      mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (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, tab-indicator),
+      custom-tokens.tab-indicator($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, card),
+      custom-tokens.card($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, form-field),
+      custom-tokens.form-field($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,
+    ),
+    _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, radio),
+      custom-tokens.radio($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, ripple),
+      custom-tokens.ripple($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, sort),
+      custom-tokens.sort($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, stepper),
+      custom-tokens.stepper($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, tab-header),
+      custom-tokens.tab-header($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, table),
+      custom-tokens.table($systems, $exclude-hardcoded),
+      $token-slots
+    ),
+    _namespace-tokens(
+      (mat, tree),
+      custom-tokens.tree($systems, $exclude-hardcoded),
+      $token-slots
+    ),
   );
 
   // Strip out tokens that are systemized by our made up density system.
@@ -263,12 +338,11 @@
 /// @param {Map} $primary The primary palette
 /// @param {Map} $secondary The secondary palette
 /// @param {Map} $tertiary The tertiary palette
-/// @param {Map} $neutral The neutral palette
 /// @param {Map} $error The error palette
 /// @return {Map} A map of namespaced color tokens
-@function generate-color-tokens($type, $primary, $secondary, $tertiary, $neutral, $error) {
+@function generate-color-tokens($type, $primary, $secondary, $tertiary, $error) {
   $ref: (
-    md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $neutral, $error)
+    md-ref-palette: _generate-ref-palette-tokens($primary, $secondary, $tertiary, $error)
   );
   $sys-color: if($type == dark,
     mdc-tokens.md-sys-color-values-dark($ref),
@@ -276,6 +350,7 @@
   @return _generate-tokens((
     md-sys-color: $sys-color,
     md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
+    md-sys-state: mdc-tokens.md-sys-state-values(),
   ));
 }