Skip to content

Commit fb7dae5

Browse files
amysortoamysorto
committed
fix(material/schematics): Add the missing neutral tones for the M3 color palettes
1 parent 64ed7ca commit fb7dae5

File tree

1 file changed

+132
-43
lines changed

1 file changed

+132
-43
lines changed

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

Lines changed: 132 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,6 @@
22
@use 'sass:map';
33
@use 'sass:math';
44

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-
}
31-
325
/// Adds the error colors to the given palette.
336
@function _patch-error-palette($palette) {
347
@return map.merge(
@@ -56,12 +29,8 @@
5629
);
5730
}
5831

59-
@function _apply-patches($palette) {
60-
@return _patch-missing-hues(_patch-error-palette($palette));
61-
}
62-
6332
/// Red color palette to be used as primary or tertiary palette.
64-
$red-palette: _apply-patches((
33+
$red-palette: _patch-error-palette((
6534
0: #000000,
6635
10: #410000,
6736
20: #690100,
@@ -113,6 +82,16 @@ $red-palette: _apply-patches((
11382
98: #fff8f6,
11483
99: #fffbff,
11584
100: #ffffff,
85+
4: #130d0c,
86+
6: #181211,
87+
12: #251e1d,
88+
17: #302828,
89+
22: #3b3332,
90+
24: #3f3737,
91+
87: #e4d7d6,
92+
92: #f3e5e4,
93+
94: #f9ebe9,
94+
96: #fef1ef,
11695
),
11796
neutral-variant: (
11897
0: #000000,
@@ -135,7 +114,7 @@ $red-palette: _apply-patches((
135114
));
136115

137116
/// Green color palette to be used as primary or tertiary palette.
138-
$green-palette: _apply-patches((
117+
$green-palette: _patch-error-palette((
139118
0: #000000,
140119
10: #002200,
141120
20: #013a00,
@@ -187,6 +166,16 @@ $green-palette: _apply-patches((
187166
98: #f9faf3,
188167
99: #fcfdf6,
189168
100: #ffffff,
169+
4: #0c0f0b,
170+
6: #121410,
171+
12: #1e201c,
172+
17: #282b26,
173+
22: #333531,
174+
24: #383a35,
175+
87: #dadbd3,
176+
92: #e8e9e1,
177+
94: #eeeee7,
178+
96: #f3f4ed,
190179
),
191180
neutral-variant: (
192181
0: #000000,
@@ -209,7 +198,7 @@ $green-palette: _apply-patches((
209198
));
210199

211200
/// Blue color palette to be used as primary or tertiary palette.
212-
$blue-palette: _apply-patches((
201+
$blue-palette: _patch-error-palette((
213202
0: #000000,
214203
10: #00006e,
215204
20: #0001ac,
@@ -261,6 +250,16 @@ $blue-palette: _apply-patches((
261250
98: #fcf8fd,
262251
99: #fffbff,
263252
100: #ffffff,
253+
4: #0e0e11,
254+
6: #131316,
255+
12: #201f22,
256+
17: #2a292d,
257+
22: #353438,
258+
24: #3a393c,
259+
87: #dcd9dd,
260+
92: #ebe7eb,
261+
94: #f0edf1,
262+
96: #f6f2f7,
264263
),
265264
neutral-variant: (
266265
0: #000000,
@@ -283,7 +282,7 @@ $blue-palette: _apply-patches((
283282
));
284283

285284
/// Yellow color palette to be used as primary or tertiary palette.
286-
$yellow-palette: _apply-patches((
285+
$yellow-palette: _patch-error-palette((
287286
0: #000000,
288287
10: #1d1d00,
289288
20: #323200,
@@ -335,6 +334,16 @@ $yellow-palette: _apply-patches((
335334
98: #fdf9f0,
336335
99: #fffbff,
337336
100: #ffffff,
337+
4: #0f0e0a,
338+
6: #14140f,
339+
12: #20201b,
340+
17: #2b2a25,
341+
22: #36352f,
342+
24: #3a3933,
343+
87: #dddad1,
344+
92: #ece8df,
345+
94: #f1ede5,
346+
96: #f7f3ea,
338347
),
339348
neutral-variant: (
340349
0: #000000,
@@ -357,7 +366,7 @@ $yellow-palette: _apply-patches((
357366
));
358367

359368
/// Cyan color palette to be used as primary or tertiary palette.
360-
$cyan-palette: _apply-patches((
369+
$cyan-palette: _patch-error-palette((
361370
0: #000000,
362371
10: #002020,
363372
20: #003737,
@@ -409,6 +418,16 @@ $cyan-palette: _apply-patches((
409418
98: #f7faf9,
410419
99: #fafdfc,
411420
100: #ffffff,
421+
4: #0b0f0e,
422+
6: #101414,
423+
12: #1c2020,
424+
17: #272b2a,
425+
22: #313635,
426+
24: #363a39,
427+
87: #d7dbd9,
428+
92: #e6e9e7,
429+
94: #ebefed,
430+
96: #f1f4f3,
412431
),
413432
neutral-variant: (
414433
0: #000000,
@@ -431,7 +450,7 @@ $cyan-palette: _apply-patches((
431450
));
432451

433452
/// Magenta color palette to be used as primary or tertiary palette.
434-
$magenta-palette: _apply-patches((
453+
$magenta-palette: _patch-error-palette((
435454
0: #000000,
436455
10: #380038,
437456
20: #5b005b,
@@ -483,6 +502,16 @@ $magenta-palette: _apply-patches((
483502
98: #fff7f9,
484503
99: #fffbff,
485504
100: #ffffff,
505+
4: #110d10,
506+
6: #161215,
507+
12: #231e22,
508+
17: #2d292c,
509+
22: #383337,
510+
24: #3d383b,
511+
87: #e1d7dc,
512+
92: #efe6ea,
513+
94: #f5ebf0,
514+
96: #fbf1f5,
486515
),
487516
neutral-variant: (
488517
0: #000000,
@@ -505,7 +534,7 @@ $magenta-palette: _apply-patches((
505534
));
506535

507536
/// Orange color palette to be used as primary or tertiary palette.
508-
$orange-palette: _apply-patches((
537+
$orange-palette: _patch-error-palette((
509538
0: #000000,
510539
10: #311300,
511540
20: #502400,
@@ -557,6 +586,16 @@ $orange-palette: _apply-patches((
557586
98: #fff8f5,
558587
99: #fffbff,
559588
100: #ffffff,
589+
4: #120d0b,
590+
6: #181210,
591+
12: #241e1b,
592+
17: #2f2926,
593+
22: #3a3330,
594+
24: #3f3834,
595+
87: #e3d8d3,
596+
92: #f2e6e1,
597+
94: #f8ebe6,
598+
96: #fef1ec,
560599
),
561600
neutral-variant: (
562601
0: #000000,
@@ -579,7 +618,7 @@ $orange-palette: _apply-patches((
579618
));
580619

581620
/// Chartreuse color palette to be used as primary or tertiary palette.
582-
$chartreuse-palette: _apply-patches((
621+
$chartreuse-palette: _patch-error-palette((
583622
0: #000000,
584623
10: #0b2000,
585624
20: #173800,
@@ -631,6 +670,16 @@ $chartreuse-palette: _apply-patches((
631670
98: #fafaf2,
632671
99: #fdfdf5,
633672
100: #ffffff,
673+
4: #0c0f0b,
674+
6: #121410,
675+
12: #1e201c,
676+
17: #282b26,
677+
22: #333531,
678+
24: #383a35,
679+
87: #dadbd3,
680+
92: #e8e9e1,
681+
94: #eeeee7,
682+
96: #f3f4ed,
634683
),
635684
neutral-variant: (
636685
0: #000000,
@@ -653,7 +702,7 @@ $chartreuse-palette: _apply-patches((
653702
));
654703

655704
/// Spring Green color palette to be used as primary or tertiary palette.
656-
$spring-green-palette: _apply-patches((
705+
$spring-green-palette: _patch-error-palette((
657706
0: #000000,
658707
10: #00210b,
659708
20: #003917,
@@ -705,6 +754,16 @@ $spring-green-palette: _apply-patches((
705754
98: #f9faf4,
706755
99: #fcfdf7,
707756
100: #ffffff,
757+
4: #0c0f0c,
758+
6: #111411,
759+
12: #1d201d,
760+
17: #282b27,
761+
22: #323632,
762+
24: #373a36,
763+
87: #d9dbd5,
764+
92: #e7e9e3,
765+
94: #edefe8,
766+
96: #f2f4ee,
708767
),
709768
neutral-variant: (
710769
0: #000000,
@@ -727,7 +786,7 @@ $spring-green-palette: _apply-patches((
727786
));
728787

729788
/// Azure color palette to be used as primary or tertiary palette.
730-
$azure-palette: _apply-patches((
789+
$azure-palette: _patch-error-palette((
731790
0: #000000,
732791
10: #001b3f,
733792
20: #002f65,
@@ -779,6 +838,16 @@ $azure-palette: _apply-patches((
779838
98: #faf9fd,
780839
99: #fdfbff,
781840
100: #ffffff,
841+
4: #0d0e11,
842+
6: #121316,
843+
12: #1f2022,
844+
17: #292a2c,
845+
22: #343537,
846+
24: #38393c,
847+
87: #dbd9dd,
848+
92: #e9e7eb,
849+
94: #efedf0,
850+
96: #f4f3f6,
782851
),
783852
neutral-variant: (
784853
0: #000000,
@@ -801,7 +870,7 @@ $azure-palette: _apply-patches((
801870
));
802871

803872
/// Violet color palette to be used as primary or tertiary palette.
804-
$violet-palette: _apply-patches((
873+
$violet-palette: _patch-error-palette((
805874
0: #000000,
806875
10: #270057,
807876
20: #42008a,
@@ -853,6 +922,16 @@ $violet-palette: _apply-patches((
853922
98: #fef8fc,
854923
99: #fffbff,
855924
100: #ffffff,
925+
4: #0f0d11,
926+
6: #151316,
927+
12: #211f22,
928+
17: #2b292d,
929+
22: #363437,
930+
24: #3b383c,
931+
87: #ded8dd,
932+
92: #ede6eb,
933+
94: #f2ecf1,
934+
96: #f8f2f6,
856935
),
857936
neutral-variant: (
858937
0: #000000,
@@ -875,7 +954,7 @@ $violet-palette: _apply-patches((
875954
));
876955

877956
/// Rose color palette to be used as primary or tertiary palette.
878-
$rose-palette: _apply-patches((
957+
$rose-palette: _patch-error-palette((
879958
0: #000000,
880959
10: #3f001b,
881960
20: #65002f,
@@ -927,6 +1006,16 @@ $rose-palette: _apply-patches((
9271006
98: #fff8f8,
9281007
99: #fffbff,
9291008
100: #ffffff,
1009+
4: #120d0e,
1010+
6: #171213,
1011+
12: #241e1f,
1012+
17: #2f2829,
1013+
22: #3a3334,
1014+
24: #3e3738,
1015+
87: #e3d7d8,
1016+
92: #f1e5e6,
1017+
94: #f7ebec,
1018+
96: #fdf1f2,
9301019
),
9311020
neutral-variant: (
9321021
0: #000000,

0 commit comments

Comments
 (0)