fix(material/schematics): Generate more accurate tonal palettes for M…

…3 schematic (#29536) (cherry picked from commit dd8477c)
angular · Aug 12, 2024 · f5566c8 · f5566c8
1 parent 4731803
commit f5566c8
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 146 deletions.
diff --git a/src/material/schematics/ng-generate/m3-theme/index.spec.ts b/src/material/schematics/ng-generate/m3-theme/index.spec.ts
@@ -115,7 +115,6 @@ describe('material-m3-theme-schematic', () => {
     );
 
     expect(generatedSCSS).toBe(testSCSS);
-    expect(transpileTheme(generatedSCSS)).toBe(transpileTheme(testSCSS));
   });
 
   it('should generate dark theme when provided a primary color', async () => {
@@ -277,30 +276,30 @@ describe('material-m3-theme-schematic', () => {
       [
         `  neutral: (`,
         `    0: #000000,`,
-        `    4: #000527,`,
-        `    6: #00073a,`,
-        `    10: #000c61,`,
-        `    12: #051166,`,
-        `    17: #121e71,`,
-        `    20: #1a2678,`,
-        `    22: #1f2b7d,`,
-        `    24: #243082,`,
-        `    25: #273384,`,
-        `    30: #333f90,`,
-        `    35: #404b9c,`,
-        `    40: #4c57a9,`,
-        `    50: #6570c4,`,
-        `    60: #7f8ae0,`,
-        `    70: #9aa5fd,`,
-        `    80: #bcc2ff,`,
-        `    87: #d5d7ff,`,
-        `    90: #dfe0ff,`,
-        `    92: #e6e6ff,`,
-        `    94: #edecff,`,
-        `    95: #f0efff,`,
-        `    96: #f4f2ff,`,
-        `    98: #fbf8ff,`,
-        `    99: #fffbff,`,
+        `    4: #0b0b0c,`,
+        `    6: #111012,`,
+        `    10: #1c1b1e,`,
+        `    12: #201f22,`,
+        `    17: #2b2a2d,`,
+        `    20: #313033,`,
+        `    22: #353437,`,
+        `    24: #3a393c,`,
+        `    25: #3c3b3e,`,
+        `    30: #474649,`,
+        `    35: #535255,`,
+        `    40: #5f5e61,`,
+        `    50: #787679,`,
+        `    60: #929093,`,
+        `    70: #adaaad,`,
+        `    80: #c8c5c9,`,
+        `    87: #dcd9dd,`,
+        `    90: #e5e1e5,`,
+        `    92: #ebe7eb,`,
+        `    94: #f0edf0,`,
+        `    95: #f3f0f3,`,
+        `    96: #f6f3f6,`,
+        `    98: #fcf8fb,`,
+        `    99: #fffbfe,`,
         `    100: #ffffff,`,
         `  ),`,
       ].join('\n'),
@@ -337,16 +336,16 @@ $_palettes: (
   ),
   secondary: (
     0: #000000,
-    10: #2b151c,
-    20: #422931,
-    25: #4e343c,
-    30: #5a3f47,
-    35: #674b53,
-    40: #74565f,
-    50: #8e6f77,
-    60: #aa8891,
-    70: #c6a2ab,
-    80: #e2bdc6,
+    10: #31101d,
+    20: #4a2531,
+    25: #56303c,
+    30: #633b48,
+    35: #704653,
+    40: #7e525f,
+    50: #996a78,
+    60: #b58392,
+    70: #d29dac,
+    80: #efb8c7,
     90: #ffd9e2,
     95: #ffecf0,
     98: #fff8f8,
@@ -355,63 +354,63 @@ $_palettes: (
   ),
   tertiary: (
     0: #000000,
-    10: #2e1500,
-    20: #48290c,
-    25: #543416,
-    30: #623f20,
-    35: #6f4a2a,
-    40: #7c5635,
-    50: #986e4b,
-    60: #b48862,
-    70: #d1a27b,
-    80: #efbd94,
-    90: #ffdcc2,
-    95: #ffeee2,
-    98: #fff8f5,
+    10: #331200,
+    20: #532200,
+    25: #642a00,
+    30: #763300,
+    35: #883d03,
+    40: #974810,
+    50: #b66028,
+    60: #d6783e,
+    70: #f69256,
+    80: #ffb68e,
+    90: #ffdbc9,
+    95: #ffede5,
+    98: #fff8f6,
     99: #fffbff,
     100: #ffffff,
   ),
   neutral: (
     0: #000000,
-    10: #201a1b,
-    20: #352f30,
-    25: #413a3b,
-    30: #4c4546,
-    35: #585052,
-    40: #645c5e,
-    50: #7e7576,
-    60: #988e90,
-    70: #b3a9aa,
-    80: #cfc4c5,
-    90: #ebe0e1,
-    95: #faeeef,
+    10: #22191c,
+    20: #372e30,
+    25: #43393b,
+    30: #4f4446,
+    35: #5b5052,
+    40: #675b5e,
+    50: #807477,
+    60: #9b8d90,
+    70: #b6a8aa,
+    80: #d2c3c5,
+    90: #efdfe1,
+    95: #fdedef,
     98: #fff8f8,
     99: #fffbff,
     100: #ffffff,
-    4: #120d0e,
-    6: #171213,
-    12: #241e1f,
-    17: #2f282a,
-    22: #3a3334,
-    24: #3e3739,
-    87: #e3d7d9,
-    92: #f1e5e7,
-    94: #f7ebec,
-    96: #fdf1f2,
+    4: #140c0e,
+    6: #191113,
+    12: #261d20,
+    17: #31282a,
+    22: #3c3235,
+    24: #413739,
+    87: #e6d6d9,
+    92: #f5e4e7,
+    94: #faeaed,
+    96: #fff0f2,
   ),
   neutral-variant: (
     0: #000000,
-    10: #24191c,
-    20: #3a2d30,
-    25: #45383b,
-    30: #514347,
-    35: #5d4f52,
-    40: #6a5b5e,
-    50: #837377,
-    60: #9e8c90,
-    70: #b9a7ab,
-    80: #d5c2c6,
-    90: #f2dde2,
+    10: #25181c,
+    20: #3c2c31,
+    25: #47373b,
+    30: #534247,
+    35: #604e52,
+    40: #6c5a5e,
+    50: #867277,
+    60: #a18b90,
+    70: #bca5ab,
+    80: #d9c0c6,
+    90: #f6dce2,
     95: #ffecf0,
     98: #fff8f8,
     99: #fffbff,
@@ -492,16 +491,16 @@ function getPaletteMap() {
       'secondary',
       new Map<number, string>([
         [0, '#000000'],
-        [10, '#2b151c'],
-        [20, '#422931'],
-        [25, '#4e343c'],
-        [30, '#5a3f47'],
-        [35, '#674b53'],
-        [40, '#74565f'],
-        [50, '#8e6f77'],
-        [60, '#aa8891'],
-        [70, '#c6a2ab'],
-        [80, '#e2bdc6'],
+        [10, '#31101d'],
+        [20, '#4a2531'],
+        [25, '#56303c'],
+        [30, '#633b48'],
+        [35, '#704653'],
+        [40, '#7e525f'],
+        [50, '#996a78'],
+        [60, '#b58392'],
+        [70, '#d29dac'],
+        [80, '#efb8c7'],
         [90, '#ffd9e2'],
         [95, '#ffecf0'],
         [98, '#fff8f8'],
@@ -513,19 +512,19 @@ function getPaletteMap() {
       'tertiary',
       new Map<number, string>([
         [0, '#000000'],
-        [10, '#2e1500'],
-        [20, '#48290c'],
-        [25, '#543416'],
-        [30, '#623f20'],
-        [35, '#6f4a2a'],
-        [40, '#7c5635'],
-        [50, '#986e4b'],
-        [60, '#b48862'],
-        [70, '#d1a27b'],
-        [80, '#efbd94'],
-        [90, '#ffdcc2'],
-        [95, '#ffeee2'],
-        [98, '#fff8f5'],
+        [10, '#331200'],
+        [20, '#532200'],
+        [25, '#642a00'],
+        [30, '#763300'],
+        [35, '#883d03'],
+        [40, '#974810'],
+        [50, '#b66028'],
+        [60, '#d6783e'],
+        [70, '#f69256'],
+        [80, '#ffb68e'],
+        [90, '#ffdbc9'],
+        [95, '#ffede5'],
+        [98, '#fff8f6'],
         [99, '#fffbff'],
         [100, '#ffffff'],
       ]),
@@ -534,48 +533,48 @@ function getPaletteMap() {
       'neutral',
       new Map<number, string>([
         [0, '#000000'],
-        [10, '#201a1b'],
-        [20, '#352f30'],
-        [25, '#413a3b'],
-        [30, '#4c4546'],
-        [35, '#585052'],
-        [40, '#645c5e'],
-        [50, '#7e7576'],
-        [60, '#988e90'],
-        [70, '#b3a9aa'],
-        [80, '#cfc4c5'],
-        [90, '#ebe0e1'],
-        [95, '#faeeef'],
+        [10, '#22191c'],
+        [20, '#372e30'],
+        [25, '#43393b'],
+        [30, '#4f4446'],
+        [35, '#5b5052'],
+        [40, '#675b5e'],
+        [50, '#807477'],
+        [60, '#9b8d90'],
+        [70, '#b6a8aa'],
+        [80, '#d2c3c5'],
+        [90, '#efdfe1'],
+        [95, '#fdedef'],
         [98, '#fff8f8'],
         [99, '#fffbff'],
         [100, '#ffffff'],
-        [4, '#120d0e'],
-        [6, '#171213'],
-        [12, '#241e1f'],
-        [17, '#2f282a'],
-        [22, '#3a3334'],
-        [24, '#3e3739'],
-        [87, '#e3d7d9'],
-        [92, '#f1e5e7'],
-        [94, '#f7ebec'],
-        [96, '#fdf1f2'],
+        [4, '#140c0e'],
+        [6, '#191113'],
+        [12, '#261d20'],
+        [17, '#31282a'],
+        [22, '#3c3235'],
+        [24, '#413739'],
+        [87, '#e6d6d9'],
+        [92, '#f5e4e7'],
+        [94, '#faeaed'],
+        [96, '#fff0f2'],
       ]),
     ],
     [
       'neutral-variant',
       new Map<number, string>([
         [0, '#000000'],
-        [10, '#24191c'],
-        [20, '#3a2d30'],
-        [25, '#45383b'],
-        [30, '#514347'],
-        [35, '#5d4f52'],
-        [40, '#6a5b5e'],
-        [50, '#837377'],
-        [60, '#9e8c90'],
-        [70, '#b9a7ab'],
-        [80, '#d5c2c6'],
-        [90, '#f2dde2'],
+        [10, '#25181c'],
+        [20, '#3c2c31'],
+        [25, '#47373b'],
+        [30, '#534247'],
+        [35, '#604e52'],
+        [40, '#6c5a5e'],
+        [50, '#867277'],
+        [60, '#a18b90'],
+        [70, '#bca5ab'],
+        [80, '#d9c0c6'],
+        [90, '#f6dce2'],
         [95, '#ffecf0'],
         [98, '#fff8f8'],
         [99, '#fffbff'],

diff --git a/src/material/schematics/ng-generate/m3-theme/index.ts b/src/material/schematics/ng-generate/m3-theme/index.ts
@@ -10,9 +10,10 @@ import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 import {Schema} from './schema';
 import {
   argbFromHex,
-  themeFromSourceColor,
   hexFromArgb,
   TonalPalette,
+  Hct,
+  SchemeContent,
 } from '@material/material-color-utilities';
 
 // For each color tonal palettes are created using the following hue tones. The
@@ -54,14 +55,20 @@ function getMaterialTonalPalettes(color: string): {
 } {
   try {
     let argbColor = argbFromHex(color);
-    const theme = themeFromSourceColor(argbColor, [
-      {
-        name: 'm3-theme',
-        value: argbColor,
-        blend: true,
-      },
-    ]);
-    return theme.palettes;
+    const scheme = new SchemeContent(
+      Hct.fromInt(argbColor),
+      false, // Tonal palettes are the same for light and dark themes
+      0.0,
+    );
+
+    return {
+      primary: scheme.primaryPalette,
+      secondary: scheme.secondaryPalette,
+      tertiary: scheme.tertiaryPalette,
+      neutral: scheme.neutralPalette,
+      neutralVariant: scheme.neutralVariantPalette,
+      error: scheme.errorPalette,
+    };
   } catch (e) {
     throw new Error(
       'Cannot parse the specified color ' +