Skip to content

bug(m3Theme) Invalid generation of secondar palette with @angular/material:m3Theme #29306

Closed
@markusahrweileramcon

Description

@markusahrweileramcon

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

When running the command to create a new theme, the secondary color option is ignored an always generating ... cyan?

// Note: Color palettes are generated from primary: #4b8ecf, secondary: #666666, tertiary: #253359
$_palettes: (
  primary: (
    0: #000000,
    10: #001d35,
    20: #003257,
    25: #003e69,
    30: #00497b,
    35: #00558e,
    40: #0062a1,
    50: #2f7bbd,
    60: #4e95d9,
    70: #6cb0f6,
    80: #9ccaff,
    90: #d0e4ff,
    95: #e9f1ff,
    98: #f8f9ff,
    99: #fdfcff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #001849,
    20: #002b75,
    25: #103683,
    30: #21428f,
    35: #2f4e9c,
    40: #3c5ba9,
    50: #5674c4,
    60: #718ee0,
    70: #8ba8fc,
    80: #b3c5ff,
    90: #dae1ff,
    95: #eef0ff,
    98: #faf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1a1c1e,
    20: #2f3033,
    25: #3a3b3e,
    30: #45474a,
    35: #515255,
    40: #5d5e61,
    50: #76777a,
    60: #909094,
    70: #ababae,
    80: #c6c6ca,
    90: #e2e2e6,
    95: #f1f0f4,
    98: #f9f9fc,
    99: #fdfcff,
    100: #ffffff,
    4: #0d0e11,
    6: #121316,
    12: #1e2022,
    17: #282a2d,
    22: #333538,
    24: #38393c,
    87: #dadadd,
    92: #e8e8eb,
    94: #eeedf1,
    96: #f4f3f7,
  ),
  neutral-variant: (
    0: #000000,
    10: #171c22,
    20: #2c3137,
    25: #373c42,
    30: #42474e,
    35: #4e535a,
    40: #5a5f66,
    50: #73777f,
    60: #8c9199,
    70: #a7abb3,
    80: #c2c7cf,
    90: #dfe3eb,
    95: #edf1f9,
    98: #f8f9ff,
    99: #fdfcff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

It should have created a color palette for #666666

Actual Behavior

It created a color palette for cyan

Environment

Angular CLI: 18.0.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: theming

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions