Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(material/schematics): Add the missing neutral tones for the M3 color palettes #29644

Merged
merged 1 commit into from
Aug 27, 2024
Merged

fix(material/schematics): Add the missing neutral tones for the M3 color palettes #29644

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 132 additions & 45 deletions src/material/core/theming/_palettes.scss
View file
Open in desktop
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
Loading