Skip to content

Commit

Permalink
fix(material/schematics): Add the missing neutral tones for the M3 co…
Browse files Browse the repository at this point in the history 
…lor palettes (#29644)
  • Loading branch information
@amysorto
amysorto committed Aug 27, 2024
1 parent a6835ef commit 3bf0e31
Showing 1 changed file with 132 additions and 45 deletions.
177 changes: 132 additions & 45 deletions src/material/core/theming/_palettes.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,4 @@
@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

/// Estimate a hue using the given previous and next hues.
@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) {
$weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%;
@return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight);
}

// TODO(mmalerba): Remove this and add correct values for these hues.
/// The Material Design spec references some neutral hues that are not generated by
/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
/// by blending the nearest hues that are generated.
/// Note: when updating, the corresponding logic in the theme generation schematic should be
/// updated as well. See `src/material/schematics/ng-generate/m3-theme/index.ts#patchMissingHues`
@function _patch-missing-hues($palette) {
$neutral: map.get($palette, neutral);
$palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));
$palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10));
$palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20));
$palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20));
$palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25));
$palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25));
$palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90));
$palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95));
$palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95));
$palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98));
@return $palette;
}

/// Adds the error colors to the given palette.
@function _patch-error-palette($palette) {
Expand Down Expand Up @@ -56,12 +27,8 @@
);
}

@function _apply-patches($palette) {
@return _patch-missing-hues(_patch-error-palette($palette));
}

/// Red color palette to be used as primary or tertiary palette.
$red-palette: _apply-patches((
$red-palette: _patch-error-palette((
0: #000000,
10: #410000,
20: #690100,
Expand Down Expand Up @@ -113,6 +80,16 @@ $red-palette: _apply-patches((
98: #fff8f6,
99: #fffbff,
100: #ffffff,
4: #130d0c,
6: #181211,
12: #251e1d,
17: #302828,
22: #3b3332,
24: #3f3737,
87: #e4d7d6,
92: #f3e5e4,
94: #f9ebe9,
96: #fef1ef,
),
neutral-variant: (
0: #000000,
Expand All @@ -135,7 +112,7 @@ $red-palette: _apply-patches((
));

/// Green color palette to be used as primary or tertiary palette.
$green-palette: _apply-patches((
$green-palette: _patch-error-palette((
0: #000000,
10: #002200,
20: #013a00,
Expand Down Expand Up @@ -187,6 +164,16 @@ $green-palette: _apply-patches((
98: #f9faf3,
99: #fcfdf6,
100: #ffffff,
4: #0c0f0b,
6: #121410,
12: #1e201c,
17: #282b26,
22: #333531,
24: #383a35,
87: #dadbd3,
92: #e8e9e1,
94: #eeeee7,
96: #f3f4ed,
),
neutral-variant: (
0: #000000,
Expand All @@ -209,7 +196,7 @@ $green-palette: _apply-patches((
));

/// Blue color palette to be used as primary or tertiary palette.
$blue-palette: _apply-patches((
$blue-palette: _patch-error-palette((
0: #000000,
10: #00006e,
20: #0001ac,
Expand Down Expand Up @@ -261,6 +248,16 @@ $blue-palette: _apply-patches((
98: #fcf8fd,
99: #fffbff,
100: #ffffff,
4: #0e0e11,
6: #131316,
12: #201f22,
17: #2a292d,
22: #353438,
24: #3a393c,
87: #dcd9dd,
92: #ebe7eb,
94: #f0edf1,
96: #f6f2f7,
),
neutral-variant: (
0: #000000,
Expand All @@ -283,7 +280,7 @@ $blue-palette: _apply-patches((
));

/// Yellow color palette to be used as primary or tertiary palette.
$yellow-palette: _apply-patches((
$yellow-palette: _patch-error-palette((
0: #000000,
10: #1d1d00,
20: #323200,
Expand Down Expand Up @@ -335,6 +332,16 @@ $yellow-palette: _apply-patches((
98: #fdf9f0,
99: #fffbff,
100: #ffffff,
4: #0f0e0a,
6: #14140f,
12: #20201b,
17: #2b2a25,
22: #36352f,
24: #3a3933,
87: #dddad1,
92: #ece8df,
94: #f1ede5,
96: #f7f3ea,
),
neutral-variant: (
0: #000000,
Expand All @@ -357,7 +364,7 @@ $yellow-palette: _apply-patches((
));

/// Cyan color palette to be used as primary or tertiary palette.
$cyan-palette: _apply-patches((
$cyan-palette: _patch-error-palette((
0: #000000,
10: #002020,
20: #003737,
Expand Down Expand Up @@ -409,6 +416,16 @@ $cyan-palette: _apply-patches((
98: #f7faf9,
99: #fafdfc,
100: #ffffff,
4: #0b0f0e,
6: #101414,
12: #1c2020,
17: #272b2a,
22: #313635,
24: #363a39,
87: #d7dbd9,
92: #e6e9e7,
94: #ebefed,
96: #f1f4f3,
),
neutral-variant: (
0: #000000,
Expand All @@ -431,7 +448,7 @@ $cyan-palette: _apply-patches((
));

/// Magenta color palette to be used as primary or tertiary palette.
$magenta-palette: _apply-patches((
$magenta-palette: _patch-error-palette((
0: #000000,
10: #380038,
20: #5b005b,
Expand Down Expand Up @@ -483,6 +500,16 @@ $magenta-palette: _apply-patches((
98: #fff7f9,
99: #fffbff,
100: #ffffff,
4: #110d10,
6: #161215,
12: #231e22,
17: #2d292c,
22: #383337,
24: #3d383b,
87: #e1d7dc,
92: #efe6ea,
94: #f5ebf0,
96: #fbf1f5,
),
neutral-variant: (
0: #000000,
Expand All @@ -505,7 +532,7 @@ $magenta-palette: _apply-patches((
));

/// Orange color palette to be used as primary or tertiary palette.
$orange-palette: _apply-patches((
$orange-palette: _patch-error-palette((
0: #000000,
10: #311300,
20: #502400,
Expand Down Expand Up @@ -557,6 +584,16 @@ $orange-palette: _apply-patches((
98: #fff8f5,
99: #fffbff,
100: #ffffff,
4: #120d0b,
6: #181210,
12: #241e1b,
17: #2f2926,
22: #3a3330,
24: #3f3834,
87: #e3d8d3,
92: #f2e6e1,
94: #f8ebe6,
96: #fef1ec,
),
neutral-variant: (
0: #000000,
Expand All @@ -579,7 +616,7 @@ $orange-palette: _apply-patches((
));

/// Chartreuse color palette to be used as primary or tertiary palette.
$chartreuse-palette: _apply-patches((
$chartreuse-palette: _patch-error-palette((
0: #000000,
10: #0b2000,
20: #173800,
Expand Down Expand Up @@ -631,6 +668,16 @@ $chartreuse-palette: _apply-patches((
98: #fafaf2,
99: #fdfdf5,
100: #ffffff,
4: #0c0f0b,
6: #121410,
12: #1e201c,
17: #282b26,
22: #333531,
24: #383a35,
87: #dadbd3,
92: #e8e9e1,
94: #eeeee7,
96: #f3f4ed,
),
neutral-variant: (
0: #000000,
Expand All @@ -653,7 +700,7 @@ $chartreuse-palette: _apply-patches((
));

/// Spring Green color palette to be used as primary or tertiary palette.
$spring-green-palette: _apply-patches((
$spring-green-palette: _patch-error-palette((
0: #000000,
10: #00210b,
20: #003917,
Expand Down Expand Up @@ -705,6 +752,16 @@ $spring-green-palette: _apply-patches((
98: #f9faf4,
99: #fcfdf7,
100: #ffffff,
4: #0c0f0c,
6: #111411,
12: #1d201d,
17: #282b27,
22: #323632,
24: #373a36,
87: #d9dbd5,
92: #e7e9e3,
94: #edefe8,
96: #f2f4ee,
),
neutral-variant: (
0: #000000,
Expand All @@ -727,7 +784,7 @@ $spring-green-palette: _apply-patches((
));

/// Azure color palette to be used as primary or tertiary palette.
$azure-palette: _apply-patches((
$azure-palette: _patch-error-palette((
0: #000000,
10: #001b3f,
20: #002f65,
Expand Down Expand Up @@ -779,6 +836,16 @@ $azure-palette: _apply-patches((
98: #faf9fd,
99: #fdfbff,
100: #ffffff,
4: #0d0e11,
6: #121316,
12: #1f2022,
17: #292a2c,
22: #343537,
24: #38393c,
87: #dbd9dd,
92: #e9e7eb,
94: #efedf0,
96: #f4f3f6,
),
neutral-variant: (
0: #000000,
Expand All @@ -801,7 +868,7 @@ $azure-palette: _apply-patches((
));

/// Violet color palette to be used as primary or tertiary palette.
$violet-palette: _apply-patches((
$violet-palette: _patch-error-palette((
0: #000000,
10: #270057,
20: #42008a,
Expand Down Expand Up @@ -853,6 +920,16 @@ $violet-palette: _apply-patches((
98: #fef8fc,
99: #fffbff,
100: #ffffff,
4: #0f0d11,
6: #151316,
12: #211f22,
17: #2b292d,
22: #363437,
24: #3b383c,
87: #ded8dd,
92: #ede6eb,
94: #f2ecf1,
96: #f8f2f6,
),
neutral-variant: (
0: #000000,
Expand All @@ -875,7 +952,7 @@ $violet-palette: _apply-patches((
));

/// Rose color palette to be used as primary or tertiary palette.
$rose-palette: _apply-patches((
$rose-palette: _patch-error-palette((
0: #000000,
10: #3f001b,
20: #65002f,
Expand Down Expand Up @@ -927,6 +1004,16 @@ $rose-palette: _apply-patches((
98: #fff8f8,
99: #fffbff,
100: #ffffff,
4: #120d0e,
6: #171213,
12: #241e1f,
17: #2f2829,
22: #3a3334,
24: #3e3738,
87: #e3d7d8,
92: #f1e5e6,
94: #f7ebec,
96: #fdf1f2,
),
neutral-variant: (
0: #000000,
Expand Down

0 comments on commit 3bf0e31

Please sign in to comment.