Skip to content

Commit 3bf0e31

Browse files
amysortoamysorto
authored
fix(material/schematics): Add the missing neutral tones for the M3 color palettes (#29644)
1 parent a6835ef commit 3bf0e31

File tree

1 file changed

+132
-45
lines changed

1 file changed

+132
-45
lines changed

‎src/material/core/theming/_palettes.scss

Lines changed: 132 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,4 @@
1-
@use 'sass:color';
21
@use 'sass:map';
3-
@use 'sass:math';
4-
5-
/// Estimate a hue using the given previous and next hues.
6-
@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) {
7-
$weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%;
8-
@return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight);
9-
}
10-
11-
// TODO(mmalerba): Remove this and add correct values for these hues.
12-
/// The Material Design spec references some neutral hues that are not generated by
13-
/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
14-
/// by blending the nearest hues that are generated.
15-
/// Note: when updating, the corresponding logic in the theme generation schematic should be
16-
/// updated as well. See `src/material/schematics/ng-generate/m3-theme/index.ts#patchMissingHues`
17-
@function _patch-missing-hues($palette) {
18-
$neutral: map.get($palette, neutral);
19-
$palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));
20-
$palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10));
21-
$palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20));
22-
$palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20));
23-
$palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25));
24-
$palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25));
25-
$palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90));
26-
$palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95));
27-
$palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95));
28-
$palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98));
29-
@return $palette;
30-
}
312

323
/// Adds the error colors to the given palette.
334
@function _patch-error-palette($palette) {
@@ -56,12 +27,8 @@
5627
);
5728
}
5829

59-
@function _apply-patches($palette) {
60-
@return _patch-missing-hues(_patch-error-palette($palette));
61-
}
62-
6330
/// Red color palette to be used as primary or tertiary palette.
64-
$red-palette: _apply-patches((
31+
$red-palette: _patch-error-palette((
6532
0: #000000,
6633
10: #410000,
6734
20: #690100,
@@ -113,6 +80,16 @@ $red-palette: _apply-patches((
11380
98: #fff8f6,
11481
99: #fffbff,
11582
100: #ffffff,
83+
4: #130d0c,
84+
6: #181211,
85+
12: #251e1d,
86+
17: #302828,
87+
22: #3b3332,
88+
24: #3f3737,
89+
87: #e4d7d6,
90+
92: #f3e5e4,
91+
94: #f9ebe9,
92+
96: #fef1ef,
11693
),
11794
neutral-variant: (
11895
0: #000000,
@@ -135,7 +112,7 @@ $red-palette: _apply-patches((
135112
));
136113

137114
/// Green color palette to be used as primary or tertiary palette.
138-
$green-palette: _apply-patches((
115+
$green-palette: _patch-error-palette((
139116
0: #000000,
140117
10: #002200,
141118
20: #013a00,
@@ -187,6 +164,16 @@ $green-palette: _apply-patches((
187164
98: #f9faf3,
188165
99: #fcfdf6,
189166
100: #ffffff,
167+
4: #0c0f0b,
168+
6: #121410,
169+
12: #1e201c,
170+
17: #282b26,
171+
22: #333531,
172+
24: #383a35,
173+
87: #dadbd3,
174+
92: #e8e9e1,
175+
94: #eeeee7,
176+
96: #f3f4ed,
190177
),
191178
neutral-variant: (
192179
0: #000000,
@@ -209,7 +196,7 @@ $green-palette: _apply-patches((
209196
));
210197

211198
/// Blue color palette to be used as primary or tertiary palette.
212-
$blue-palette: _apply-patches((
199+
$blue-palette: _patch-error-palette((
213200
0: #000000,
214201
10: #00006e,
215202
20: #0001ac,
@@ -261,6 +248,16 @@ $blue-palette: _apply-patches((
261248
98: #fcf8fd,
262249
99: #fffbff,
263250
100: #ffffff,
251+
4: #0e0e11,
252+
6: #131316,
253+
12: #201f22,
254+
17: #2a292d,
255+
22: #353438,
256+
24: #3a393c,
257+
87: #dcd9dd,
258+
92: #ebe7eb,
259+
94: #f0edf1,
260+
96: #f6f2f7,
264261
),
265262
neutral-variant: (
266263
0: #000000,
@@ -283,7 +280,7 @@ $blue-palette: _apply-patches((
283280
));
284281

285282
/// Yellow color palette to be used as primary or tertiary palette.
286-
$yellow-palette: _apply-patches((
283+
$yellow-palette: _patch-error-palette((
287284
0: #000000,
288285
10: #1d1d00,
289286
20: #323200,
@@ -335,6 +332,16 @@ $yellow-palette: _apply-patches((
335332
98: #fdf9f0,
336333
99: #fffbff,
337334
100: #ffffff,
335+
4: #0f0e0a,
336+
6: #14140f,
337+
12: #20201b,
338+
17: #2b2a25,
339+
22: #36352f,
340+
24: #3a3933,
341+
87: #dddad1,
342+
92: #ece8df,
343+
94: #f1ede5,
344+
96: #f7f3ea,
338345
),
339346
neutral-variant: (
340347
0: #000000,
@@ -357,7 +364,7 @@ $yellow-palette: _apply-patches((
357364
));
358365

359366
/// Cyan color palette to be used as primary or tertiary palette.
360-
$cyan-palette: _apply-patches((
367+
$cyan-palette: _patch-error-palette((
361368
0: #000000,
362369
10: #002020,
363370
20: #003737,
@@ -409,6 +416,16 @@ $cyan-palette: _apply-patches((
409416
98: #f7faf9,
410417
99: #fafdfc,
411418
100: #ffffff,
419+
4: #0b0f0e,
420+
6: #101414,
421+
12: #1c2020,
422+
17: #272b2a,
423+
22: #313635,
424+
24: #363a39,
425+
87: #d7dbd9,
426+
92: #e6e9e7,
427+
94: #ebefed,
428+
96: #f1f4f3,
412429
),
413430
neutral-variant: (
414431
0: #000000,
@@ -431,7 +448,7 @@ $cyan-palette: _apply-patches((
431448
));
432449

433450
/// Magenta color palette to be used as primary or tertiary palette.
434-
$magenta-palette: _apply-patches((
451+
$magenta-palette: _patch-error-palette((
435452
0: #000000,
436453
10: #380038,
437454
20: #5b005b,
@@ -483,6 +500,16 @@ $magenta-palette: _apply-patches((
483500
98: #fff7f9,
484501
99: #fffbff,
485502
100: #ffffff,
503+
4: #110d10,
504+
6: #161215,
505+
12: #231e22,
506+
17: #2d292c,
507+
22: #383337,
508+
24: #3d383b,
509+
87: #e1d7dc,
510+
92: #efe6ea,
511+
94: #f5ebf0,
512+
96: #fbf1f5,
486513
),
487514
neutral-variant: (
488515
0: #000000,
@@ -505,7 +532,7 @@ $magenta-palette: _apply-patches((
505532
));
506533

507534
/// Orange color palette to be used as primary or tertiary palette.
508-
$orange-palette: _apply-patches((
535+
$orange-palette: _patch-error-palette((
509536
0: #000000,
510537
10: #311300,
511538
20: #502400,
@@ -557,6 +584,16 @@ $orange-palette: _apply-patches((
557584
98: #fff8f5,
558585
99: #fffbff,
559586
100: #ffffff,
587+
4: #120d0b,
588+
6: #181210,
589+
12: #241e1b,
590+
17: #2f2926,
591+
22: #3a3330,
592+
24: #3f3834,
593+
87: #e3d8d3,
594+
92: #f2e6e1,
595+
94: #f8ebe6,
596+
96: #fef1ec,
560597
),
561598
neutral-variant: (
562599
0: #000000,
@@ -579,7 +616,7 @@ $orange-palette: _apply-patches((
579616
));
580617

581618
/// Chartreuse color palette to be used as primary or tertiary palette.
582-
$chartreuse-palette: _apply-patches((
619+
$chartreuse-palette: _patch-error-palette((
583620
0: #000000,
584621
10: #0b2000,
585622
20: #173800,
@@ -631,6 +668,16 @@ $chartreuse-palette: _apply-patches((
631668
98: #fafaf2,
632669
99: #fdfdf5,
633670
100: #ffffff,
671+
4: #0c0f0b,
672+
6: #121410,
673+
12: #1e201c,
674+
17: #282b26,
675+
22: #333531,
676+
24: #383a35,
677+
87: #dadbd3,
678+
92: #e8e9e1,
679+
94: #eeeee7,
680+
96: #f3f4ed,
634681
),
635682
neutral-variant: (
636683
0: #000000,
@@ -653,7 +700,7 @@ $chartreuse-palette: _apply-patches((
653700
));
654701

655702
/// Spring Green color palette to be used as primary or tertiary palette.
656-
$spring-green-palette: _apply-patches((
703+
$spring-green-palette: _patch-error-palette((
657704
0: #000000,
658705
10: #00210b,
659706
20: #003917,
@@ -705,6 +752,16 @@ $spring-green-palette: _apply-patches((
705752
98: #f9faf4,
706753
99: #fcfdf7,
707754
100: #ffffff,
755+
4: #0c0f0c,
756+
6: #111411,
757+
12: #1d201d,
758+
17: #282b27,
759+
22: #323632,
760+
24: #373a36,
761+
87: #d9dbd5,
762+
92: #e7e9e3,
763+
94: #edefe8,
764+
96: #f2f4ee,
708765
),
709766
neutral-variant: (
710767
0: #000000,
@@ -727,7 +784,7 @@ $spring-green-palette: _apply-patches((
727784
));
728785

729786
/// Azure color palette to be used as primary or tertiary palette.
730-
$azure-palette: _apply-patches((
787+
$azure-palette: _patch-error-palette((
731788
0: #000000,
732789
10: #001b3f,
733790
20: #002f65,
@@ -779,6 +836,16 @@ $azure-palette: _apply-patches((
779836
98: #faf9fd,
780837
99: #fdfbff,
781838
100: #ffffff,
839+
4: #0d0e11,
840+
6: #121316,
841+
12: #1f2022,
842+
17: #292a2c,
843+
22: #343537,
844+
24: #38393c,
845+
87: #dbd9dd,
846+
92: #e9e7eb,
847+
94: #efedf0,
848+
96: #f4f3f6,
782849
),
783850
neutral-variant: (
784851
0: #000000,
@@ -801,7 +868,7 @@ $azure-palette: _apply-patches((
801868
));
802869

803870
/// Violet color palette to be used as primary or tertiary palette.
804-
$violet-palette: _apply-patches((
871+
$violet-palette: _patch-error-palette((
805872
0: #000000,
806873
10: #270057,
807874
20: #42008a,
@@ -853,6 +920,16 @@ $violet-palette: _apply-patches((
853920
98: #fef8fc,
854921
99: #fffbff,
855922
100: #ffffff,
923+
4: #0f0d11,
924+
6: #151316,
925+
12: #211f22,
926+
17: #2b292d,
927+
22: #363437,
928+
24: #3b383c,
929+
87: #ded8dd,
930+
92: #ede6eb,
931+
94: #f2ecf1,
932+
96: #f8f2f6,
856933
),
857934
neutral-variant: (
858935
0: #000000,
@@ -875,7 +952,7 @@ $violet-palette: _apply-patches((
875952
));
876953

877954
/// Rose color palette to be used as primary or tertiary palette.
878-
$rose-palette: _apply-patches((
955+
$rose-palette: _patch-error-palette((
879956
0: #000000,
880957
10: #3f001b,
881958
20: #65002f,
@@ -927,6 +1004,16 @@ $rose-palette: _apply-patches((
9271004
98: #fff8f8,
9281005
99: #fffbff,
9291006
100: #ffffff,
1007+
4: #120d0e,
1008+
6: #171213,
1009+
12: #241e1f,
1010+
17: #2f2829,
1011+
22: #3a3334,
1012+
24: #3e3738,
1013+
87: #e3d7d8,
1014+
92: #f1e5e6,
1015+
94: #f7ebec,
1016+
96: #fdf1f2,
9301017
),
9311018
neutral-variant: (
9321019
0: #000000,

0 commit comments

Comments
 (0)