Description
Cause
I did some digging.
This only happens when using a custom neutral color.
Description
I used the custom m3 schematic to generate a theme using
Color palettes are generated from primary: #0092E1, secondary: #0092E1, tertiary: #0092E1, neutral: #FBFCFD
Resulting in the following palette:
$_palettes: (
primary: (
0: #000000,
10: #001d32,
20: #003353,
25: #003e64,
30: #004a76,
35: #005688,
40: #00639a,
50: #007dc1,
60: #1697e7,
70: #50b2ff,
80: #96ccff,
90: #cee5ff,
95: #e8f2ff,
98: #f7f9ff,
99: #fcfcff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #001d32,
20: #003353,
25: #003e64,
30: #004a76,
35: #005688,
40: #00639a,
50: #007dc1,
60: #1697e7,
70: #50b2ff,
80: #96ccff,
90: #cee5ff,
95: #e8f2ff,
98: #f7f9ff,
99: #fcfcff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #001d32,
20: #003353,
25: #003e64,
30: #004a76,
35: #005688,
40: #00639a,
50: #007dc1,
60: #1697e7,
70: #50b2ff,
80: #96ccff,
90: #cee5ff,
95: #e8f2ff,
98: #f7f9ff,
99: #fcfcff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #001f27,
20: #003641,
25: #00424f,
30: #004e5d,
35: #005b6c,
40: #00687b,
50: #00829b,
60: #009ebb,
70: #30bad9,
80: #57d6f6,
90: #afecff,
95: #daf5ff,
98: #f1fbff,
99: #f9fdff,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #171c22,
20: #2c3137,
25: #373c42,
30: #42474e,
35: #4e535a,
40: #5a5f66,
50: #72777f,
60: #8c9198,
70: #a7acb3,
80: #c2c7cf,
90: #dee3eb,
95: #ecf1f9,
98: #f7f9ff,
99: #fcfcff,
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,
),
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
),
typography: (
brand-family: (
"Open Sans",
sans-serif,
),
),
density: (
scale: 0,
),
)
);This results in transparent options in a select form field
Using a pre-built palette, such as
$light-theme: mat.define-theme(
(
color: (
theme-type: light,
primary: mat.$blue-palette,
tertiary: mat.$blue-palette,
),
typography: (
brand-family: (
"Open Sans",
sans-serif,
),
),
)
);Does not produce this issue, the options in the select have a background.
Which in turn leads me to believe that a prebuilt palettes applies stylings that are not included in the schematic and ALSO are not documented to be included anywhere.
Reproduction
Stackblitz reproduction did not work, it said that define-theme was not a valid function.
Expected Behavior
The select options have a background / the schematic produces a palette that includes styling for the select background
Actual Behavior
The select options are missing background stylings.
Environment
- Angular: 18.0.2
- CDK/Material: 18.0.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10