@angular/material-experimental 17.0.0 → 17.0.2

package/theming/_m3-palettes.scss

@@ -1,105 +1,152 @@
-/// Red color palette to be used as primary, secondary, or tertiary palette.
-$red-palette: (
-  0: #000,
-  10: #410000,
-  20: #690100,
-  30: #930100,
-  40: #c00100,
-  50: #ef0000,
-  60: #ff5540,
-  70: #ff8a78,
-  80: #ffb4a8,
-  90: #ffdad4,
-  95: #ffedea,
+@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.
+@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;
+}
+
+/// Blue color palette to be used as primary, secondary, or tertiary palette.
+$blue-palette: _patch-missing-hues((
+  0: #000000,
+  10: #00006e,
+  20: #0001ac,
+  25: #0001cd,
+  30: #0000ef,
+  35: #1a21ff,
+  40: #343dff,
+  50: #5a64ff,
+  60: #7c84ff,
+  70: #9da3ff,
+  80: #bec2ff,
+  90: #e0e0ff,
+  95: #f1efff,
+  98: #fbf8ff,
   99: #fffbff,
-  100: #fff,
-  neutral-variant: (
-    0: #000,
-    10: #251917,
-    20: #3b2d2b,
-    30: #534341,
-    40: #6c5a58,
-    50: #857370,
-    60: #a08c89,
-    70: #bca7a3,
-    80: #d8c2be,
-    90: #f5ddda,
-    95: #ffedea,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1b1b1f,
+    20: #303034,
+    25: #3c3b3f,
+    30: #47464a,
+    35: #535256,
+    40: #5f5e62,
+    50: #78767a,
+    60: #929094,
+    70: #adaaaf,
+    80: #c8c5ca,
+    90: #e5e1e6,
+    95: #f3eff4,
+    98: #fcf8fd,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
-
-/// Orange color palette to be used as primary, secondary, or tertiary palette.
-$orange-palette: (
-  0: #000,
-  10: #2a1700,
-  20: #462a00,
-  30: #653e00,
-  40: #855400,
-  50: #a66a00,
-  60: #c98100,
-  70: #ed9900,
-  80: #ffb95c,
-  90: #ffddb7,
-  95: #ffeede,
-  99: #fffbff,
-  100: #fff,
   neutral-variant: (
-    0: #000,
-    10: #221a10,
-    20: #382f24,
-    30: #504539,
-    40: #685c50,
-    50: #827568,
-    60: #9c8e80,
-    70: #b8a99a,
-    80: #d4c4b5,
-    90: #f0e0d0,
-    95: #ffeede,
+    0: #000000,
+    10: #1b1b23,
+    20: #303038,
+    25: #3b3b43,
+    30: #46464f,
+    35: #52515b,
+    40: #5e5d67,
+    50: #777680,
+    60: #91909a,
+    70: #acaab4,
+    80: #c7c5d0,
+    90: #e4e1ec,
+    95: #f2effa,
+    98: #fbf8ff,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
+));
 
-/// Yellow color palette to be used as primary, secondary, or tertiary palette.
-$yellow-palette: (
-  0: #000,
-  10: #1d1d00,
-  20: #323200,
-  30: #494900,
-  40: #626200,
-  50: #7b7b00,
-  60: #969600,
-  70: #b1b100,
-  80: #cdcd00,
-  90: #eaea00,
-  95: #f9f900,
-  99: #fffbff,
-  100: #fff,
+/// Cyan color palette to be used as primary, secondary, or tertiary palette.
+$cyan-palette: _patch-missing-hues((
+  0: #000000,
+  10: #002020,
+  20: #003737,
+  25: #004343,
+  30: #004f4f,
+  35: #005c5c,
+  40: #006a6a,
+  50: #008585,
+  60: #00a1a1,
+  70: #00bebe,
+  80: #00dddd,
+  90: #00fbfb,
+  95: #adfffe,
+  98: #e2fffe,
+  99: #f1fffe,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5f,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1c1c11,
-    20: #313125,
-    30: #48473a,
-    40: #605f51,
-    50: #797869,
-    60: #939182,
-    70: #aeac9b,
-    80: #cac7b6,
-    90: #e6e3d1,
-    95: #f4f1df,
-    99: #fffbff,
-    100: #fff,
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7979,
+    60: #889392,
+    70: #a3adad,
+    80: #bec9c8,
+    90: #dae5e4,
+    95: #e9f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff,
   ),
-);
+));
 
 /// Green color palette to be used as primary, secondary, or tertiary palette.
-$green-palette: (
-  0: #000,
+$green-palette: _patch-missing-hues((
+  0: #000000,
   10: #002200,
   20: #013a00,
+  25: #014600,
   30: #015300,
+  35: #026100,
   40: #026e00,
   50: #038b00,
   60: #03a800,
@@ -107,13 +154,16 @@ $green-palette: (
   80: #02e600,
   90: #77ff61,
   95: #cbffb8,
+  98: #edffe1,
   99: #f7ffee,
-  100: #fff,
-  neutral-variant: (
-    0: #000,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
     10: #1a1c18,
     20: #2f312d,
+    25: #3a3c38,
     30: #454743,
+    35: #51534e,
     40: #5d5f5a,
     50: #767872,
     60: #90918c,
@@ -121,131 +171,306 @@ $green-palette: (
     80: #c6c7c1,
     90: #e2e3dc,
     95: #f1f1eb,
+    98: #f9faf3,
     99: #fcfdf6,
-    100: #fff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #181d15,
+    20: #2c3229,
+    25: #373d34,
+    30: #43483f,
+    35: #4e544a,
+    40: #5a6056,
+    50: #73796e,
+    60: #8d9387,
+    70: #a7ada1,
+    80: #c3c8bc,
+    90: #dfe4d7,
+    95: #edf3e5,
+    98: #f6fbee,
+    99: #f9fef1,
+    100: #ffffff,
   ),
-);
+));
 
-/// Blue color palette to be used as primary, secondary, or tertiary palette.
-$blue-palette: (
-  0: #000,
-  10: #00006e,
-  20: #0001ac,
-  30: #0000ef,
-  40: #343dff,
-  50: #5a64ff,
-  60: #7c84ff,
-  70: #9da3ff,
-  80: #bec2ff,
-  90: #e0e0ff,
-  95: #f1efff,
+/// Magenta color palette to be used as primary, secondary, or tertiary palette.
+$magenta-palette: _patch-missing-hues((
+  0: #000000,
+  10: #380038,
+  20: #5b005b,
+  25: #6e006e,
+  30: #810081,
+  35: #950094,
+  40: #a900a9,
+  50: #d200d2,
+  60: #fe00fe,
+  70: #ff76f6,
+  80: #ffabf3,
+  90: #ffd7f5,
+  95: #ffebf8,
+  98: #fff7f9,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1e1a1d,
+    20: #342f32,
+    25: #3f3a3d,
+    30: #4b4548,
+    35: #575154,
+    40: #635d60,
+    50: #7c7579,
+    60: #968f92,
+    70: #b1a9ad,
+    80: #cdc4c8,
+    90: #e9e0e4,
+    95: #f8eef2,
+    98: #fff7f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1b1b23,
-    20: #303038,
-    30: #46464f,
-    40: #5e5d67,
-    50: #777680,
-    60: #91909a,
-    70: #acaab4,
-    80: #c7c5d0,
-    90: #e4e1ec,
-    95: #f2effa,
+    0: #000000,
+    10: #21191f,
+    20: #372e34,
+    25: #423940,
+    30: #4e444b,
+    35: #5a4f57,
+    40: #665b63,
+    50: #80747c,
+    60: #9a8d95,
+    70: #b5a7b0,
+    80: #d1c2cb,
+    90: #eedee7,
+    95: #fcecf5,
+    98: #fff7f9,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
+));
 
-/// Indigo color palette to be used as primary, secondary, or tertiary palette.
-$indigo-palette: (
-  0: #000,
-  10: #2c0050,
-  20: #4a0080,
-  30: #622599,
-  40: #7b41b3,
-  50: #965bce,
-  60: #b175ea,
-  70: #cb93ff,
-  80: #ddb7ff,
-  90: #f0dbff,
-  95: #faecff,
+/// Orange color palette to be used as primary, secondary, or tertiary palette.
+$orange-palette: _patch-missing-hues((
+  0: #000000,
+  10: #311300,
+  20: #502400,
+  25: #612d00,
+  30: #723600,
+  35: #843f00,
+  40: #964900,
+  50: #bc5d00,
+  60: #e37100,
+  70: #ff8e36,
+  80: #ffb787,
+  90: #ffdcc7,
+  95: #ffede4,
+  98: #fff8f5,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #201a17,
+    20: #362f2b,
+    25: #413a36,
+    30: #4d4541,
+    35: #59514d,
+    40: #655d58,
+    50: #7e7571,
+    60: #998f8a,
+    70: #b4a9a4,
+    80: #d0c4bf,
+    90: #ece0da,
+    95: #fbeee8,
+    98: #fff8f5,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
-    10: #1e1a22,
-    20: #342f37,
-    30: #4a454e,
-    40: #625c65,
-    50: #7c757e,
-    60: #968e98,
-    70: #b1a8b3,
-    80: #cdc4ce,
-    90: #e9dfeb,
-    95: #f7eef9,
+    0: #000000,
+    10: #241912,
+    20: #3a2e26,
+    25: #463931,
+    30: #52443c,
+    35: #5e4f47,
+    40: #6b5b52,
+    50: #84746a,
+    60: #9f8d83,
+    70: #baa79d,
+    80: #d7c3b8,
+    90: #f4ded3,
+    95: #ffede4,
+    98: #fff8f5,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
+));
 
-/// Violet color palette to be used as primary, secondary, or tertiary palette.
-$violet-palette: (
-  0: #000,
+/// Purple color palette to be used as primary, secondary, or tertiary palette.
+$purple-palette: _patch-missing-hues((
+  0: #000000,
   10: #270057,
   20: #42008a,
-  30: #5e00c1,
+  25: #5000a4,
+  30: #5f00c0,
+  35: #6e00dc,
   40: #7d00fa,
-  50: #934bff,
+  50: #944aff,
   60: #a974ff,
   70: #bf98ff,
   80: #d5baff,
   90: #ecdcff,
   95: #f7edff,
+  98: #fef7ff,
   99: #fffbff,
-  100: #fff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1d1b1e,
+    20: #323033,
+    25: #3d3a3e,
+    30: #49464a,
+    35: #545155,
+    40: #605d61,
+    50: #7a767a,
+    60: #948f94,
+    70: #aeaaae,
+    80: #cac5ca,
+    90: #e6e1e6,
+    95: #f5eff4,
+    98: #fef8fc,
+    99: #fffbff,
+    100: #ffffff,
+  ),
   neutral-variant: (
-    0: #000,
+    0: #000000,
     10: #1d1a22,
     20: #332f37,
+    25: #3e3a42,
     30: #49454e,
+    35: #55515a,
     40: #615c66,
     50: #7b757f,
     60: #958e99,
-    70: #afa9b3,
+    70: #b0a9b3,
     80: #cbc4cf,
     90: #e8e0eb,
     95: #f6eef9,
+    98: #fef7ff,
     99: #fffbff,
-    100: #fff,
+    100: #ffffff,
   ),
-);
+));
 
-/// Gray palette used for backgrounds and surfaces.
-$neutral-palette: (
-  0: #000,
-  4: #0e0e11,
-  6: #141317,
-  10: #1c1b1f,
-  12: #201f23,
-  17: #2b292d,
-  20: #313033,
-  22: #313033,
-  24: #313033,
-  30: #484649,
-  40: #605d62,
-  50: #787579,
-  60: #939094,
-  70: #aeaaae,
-  80: #c9c5ca,
-  87: #ddd8dd,
-  90: #e6e1e5,
-  92: #ece7ec,
-  94: #f1ecf1,
-  95: #f4eff4,
-  96: #f7f2f7,
-  98: #fdf8fd,
-  99: #fffbfe,
-  100: #fff,
-);
+/// Red color palette to be used as primary, secondary, or tertiary palette.
+$red-palette: _patch-missing-hues((
+  0: #000000,
+  10: #410000,
+  20: #690100,
+  25: #7e0100,
+  30: #930100,
+  35: #a90100,
+  40: #c00100,
+  50: #ef0000,
+  60: #ff5540,
+  70: #ff8a78,
+  80: #ffb4a8,
+  90: #ffdad4,
+  95: #ffedea,
+  98: #fff8f6,
+  99: #fffbff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #201a19,
+    20: #362f2e,
+    25: #413a38,
+    30: #4d4544,
+    35: #59504f,
+    40: #655c5b,
+    50: #7f7573,
+    60: #998e8d,
+    70: #b4a9a7,
+    80: #d0c4c2,
+    90: #ede0dd,
+    95: #fbeeec,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #251917,
+    20: #3b2d2b,
+    25: #473836,
+    30: #534341,
+    35: #5f4f4c,
+    40: #6c5a58,
+    50: #857370,
+    60: #a08c89,
+    70: #bca7a3,
+    80: #d8c2be,
+    90: #f5ddda,
+    95: #ffedea,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+));
+
+/// Yellow color palette to be used as primary, secondary, or tertiary palette.
+$yellow-palette: _patch-missing-hues((
+  0: #000000,
+  10: #1d1d00,
+  20: #323200,
+  25: #3e3e00,
+  30: #494900,
+  35: #555500,
+  40: #626200,
+  50: #7b7b00,
+  60: #969600,
+  70: #b1b100,
+  80: #cdcd00,
+  90: #eaea00,
+  95: #f9f900,
+  98: #fffeac,
+  99: #fffbff,
+  100: #ffffff,
+  neutral: (
+    0: #000000,
+    10: #1c1c17,
+    20: #31312b,
+    25: #3c3c35,
+    30: #484741,
+    35: #54524c,
+    40: #605e58,
+    50: #797770,
+    60: #939189,
+    70: #aeaba3,
+    80: #c9c6be,
+    90: #e6e2d9,
+    95: #f4f0e8,
+    98: #fdf9f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1c1c11,
+    20: #313125,
+    25: #3d3c2f,
+    30: #48473a,
+    35: #545345,
+    40: #605f51,
+    50: #797869,
+    60: #939182,
+    70: #aeac9b,
+    80: #cac7b6,
+    90: #e6e3d1,
+    95: #f4f1df,
+    98: #fdfae7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+));