bug(material/core): Theme configuration checks should allow extra slots in color palettes

[rgylesbedford]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The Material Theme Builder generates slots 5 and 15 in the color palettes.

These should be allowed to be included in the color palettes even if they are not used by Angular Material.

However when I try to include those slots in a theme for Angular Material, the sass complier errors with "Expected $config.primary to be a valid M3 palette". The error is generated by

components/src/material/core/theming/_config-validation.scss

Line 38 in c4337d6

@if validation.validate-allowed-values($keys, $expected-keys...) or

and

components/src/material/core/theming/_config-validation.scss

Line 44 in c4337d6

@if validation.validate-allowed-values($nv-keys, $expected-nv-keys...) or

The validation checks should only fail on required (i.e. used by Angular Material) slots.

Reproduction

StackBlitz link:
Steps to reproduce:

1. Generate a theme using ng generate @angular/material:theme-color
2. In any of the color palettes, add an extra value to the map, e.g. 5: #1e0037.
3. ng build

Expected Behavior

The build completes without error.

Actual Behavior

The build failed with error.

✘ [ERROR] (Expected $config.primary to be a valid M3 palette. Got: (0: #000000, 5: #1e0037, ... )))
51 │             definition.define-colors($color));
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@angular/material/core/tokens/_m3-system.scss 51:13  theme()

Environment

• Angular: 19.2.5
• CDK/Material: 19.2.7

[melroy89]

Is it just me.. or can I also not set secondary as a color in mat.theme?

[rgylesbedford]

@melroy89 the theming system is "strange" and "confusing" to put it mildly.

The "primary" theme you provide on mat.theme actually has primary, secondary, neutral, neutral-variant, and error all included.
The "tertiary" theme you provide on mat.theme actually has tertiary, secondary, neutral, neutral-variant, and error all included.

The differences are how the primary and tertiary color palettes are exposed compared to the other palettes when passed into mat.theme

The data structure is:

theme = {
  [numberedSlots]: string
  secondary: {
    [numberedSlots]: string
  },
  neutral: {
    [numberedSlots]: string
  },
  natural-variant: {
    [numberedSlots]: string
  },
  error: {
    [numberedSlots]: string
  },
}

This could (and should in my opinion) be simplified to:

theme = {
  somePaletteName: {
    [numberedSlots]: string
  },
  ...repeat for each "required" palette and allow custom palette names...
}