material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
419 stars 30 forks source link

Theme builder produces different palette compared to Material Color Utilities #260

Closed kelvin2200 closed 9 months ago

kelvin2200 commented 9 months ago

Describe the bug Using Material Color Utilities to create a theme from a source color, results in a different palette than the one generated by the theme builder (https://material-foundation.github.io/material-theme-builder/)

Steps to reproduce the behavior: PART I

  1. Go to https://material-foundation.github.io/material-theme-builder/
  2. Click on Custom (leave the colors unchanged)
  3. Make sure your primary color is #6750A4 (should be the default)
  4. Click "Export" -> Material Theme (JSON)
  5. Should produce the following primary palette:
    {
    "0": "#000000",
    "5": "#00102B",
    "10": "#001B3E",
    "15": "#002551",
    "20": "#002F64",
    "25": "#033A77",
    "30": "#194683",
    "35": "#285290",
    "40": "#365E9D",
    "50": "#5177B8",
    "60": "#6B91D3",
    "70": "#86ACF0",
    "80": "#AAC7FF",
    "90": "#D6E3FF",
    "95": "#ECF0FF",
    "98": "#F9F9FF",
    "99": "#FDFBFF",
    "100": "#FFFFFF"
    }

PART II

import {
    argbFromHex,
    hexFromArgb,
    themeFromSourceColor,
} from '@material/material-color-utilities';

const sourceColor = argbFromHex('#6750A4');
const theme = themeFromSourceColor(sourceColor);

console.log(
    'primary palette',
    [0, 5, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100].reduce((all, n) => {
        all[n] = hexFromArgb(theme.palettes.primary.tone(n)).toUpperCase();
        return all;
    }, {} as any)
);

produces the following primary palette

{
    "0": "#000000",
    "5": "#160041",
    "15": "#2D1067",
    "20": "#381E72",
    "25": "#432B7E",
    "30": "#4F378A",
    "35": "#5B4397",
    "40": "#6750A4", //maps correctly and aligns with the schema
    "50": "#8069BF",
    "60": "#9A83DB",
    "70": "#B69DF8",
    "80": "#CFBCFF",
    "90": "#E9DDFF",
    "95": "#F6EEFF",
    "98": "#FDF7FF",
    "99": "#FFFBFF",
    "100": "#FFFFFF"
}

I'm fairly confident this is related to #240

Expected behavior For the output to be identical

Please advise which of the 2 outputs should be used, and why are they different. The palette generated by the MCU seems to be the one to go for.

margeeta commented 9 months ago

Yes, this is a duplicate of issue #240 The color scheme colors are correctly generated per variant used. Palettes are only for reference. Closing