material-theme-builder 4.0.0 → 5.1.0

package/dist/index.js

@@ -13,19 +13,17 @@ import {
   SchemeNeutral,
   SchemeTonalSpot,
   SchemeVibrant,
-  TonalPalette as TonalPalette2
+  TonalPalette
 } from "@material/material-color-utilities";
 import { kebabCase as kebabCase4, upperFirst as upperFirst2 } from "lodash-es";
 
 // src/lib/builder.css.ts
-import {
-  hexFromArgb
-} from "@material/material-color-utilities";
+import { hexFromArgb } from "@material/material-color-utilities";
 import { kebabCase } from "lodash-es";
 function buildCss(ctx) {
   const {
     prefix,
-    allPalettes,
+    refPalettes,
     mergedColorsLight,
     mergedColorsDark,
     tokenToPalette,
@@ -33,10 +31,9 @@ function buildCss(ctx) {
   } = ctx;
   function buildRefPaletteLookup() {
     const lookup = {};
-    for (const [name, palette] of Object.entries(allPalettes)) {
-      const paletteName = kebabCase(name);
-      for (const tone of STANDARD_TONES) {
-        const hex = hexFromArgb(palette.tone(tone));
+    for (const [paletteName, tones] of Object.entries(refPalettes)) {
+      for (const { tone, argb } of tones) {
+        const hex = hexFromArgb(argb);
         if (!lookup[hex]) lookup[hex] = [];
         lookup[hex].push({ paletteName, tone });
       }
@@ -64,15 +61,12 @@ function buildCss(ctx) {
     const value = hexFromArgb(colorValue);
     return `${name}:${value};`;
   }
-  function generateTonalPaletteVars(paletteName, palette) {
-    return STANDARD_TONES.map((tone) => {
-      const color = palette.tone(tone);
-      return refPaletteVar(paletteName, tone, color);
-    }).join(" ");
+  function generateTonalPaletteVars(paletteName, tones) {
+    return tones.map(({ tone, argb }) => refPaletteVar(paletteName, tone, argb)).join(" ");
   }
   function generateTonalVars() {
-    return Object.entries(allPalettes).map(
-      ([name, palette]) => generateTonalPaletteVars(kebabCase(name), palette)
+    return Object.entries(refPalettes).map(
+      ([paletteName, tones]) => generateTonalPaletteVars(paletteName, tones)
     ).join(" ");
   }
   const refPaletteLookup = buildRefPaletteLookup();
@@ -374,29 +368,8 @@ import {
   DynamicScheme,
   Hct,
   hexFromArgb as hexFromArgb4,
-  MaterialDynamicColors,
-  TonalPalette
+  MaterialDynamicColors
 } from "@material/material-color-utilities";
-var MTB_TONES = [
-  0,
-  5,
-  10,
-  15,
-  20,
-  25,
-  30,
-  35,
-  40,
-  50,
-  60,
-  70,
-  80,
-  90,
-  95,
-  98,
-  99,
-  100
-];
 var FIXTURE_TOKEN_ORDER = [
   "primary",
   "surfaceTint",
@@ -451,7 +424,6 @@ var FIXTURE_TOKEN_ORDER = [
 function buildJson(ctx) {
   const {
     hexSource,
-    sourceHct,
     effectiveSourceArgb,
     primaryHct,
     SchemeClass,
@@ -462,34 +434,16 @@ function buildJson(ctx) {
     error,
     neutral,
     neutralVariant,
-    hexCustomColors
+    hexCustomColors,
+    refPalettes
   } = ctx;
-  const neuHct = neutral ? Hct.fromInt(argbFromHex(neutral)) : sourceHct;
-  const nvHct = neutralVariant ? Hct.fromInt(argbFromHex(neutralVariant)) : sourceHct;
-  const rawPalettes = {
-    primary: TonalPalette.fromInt(effectiveSourceArgb),
-    secondary: secondary ? TonalPalette.fromInt(argbFromHex(secondary)) : TonalPalette.fromHueAndChroma(sourceHct.hue, sourceHct.chroma / 3),
-    tertiary: tertiary ? TonalPalette.fromInt(argbFromHex(tertiary)) : TonalPalette.fromHueAndChroma(
-      (sourceHct.hue + 60) % 360,
-      sourceHct.chroma / 2
-    ),
-    neutral: TonalPalette.fromHueAndChroma(
-      neuHct.hue,
-      Math.min(neuHct.chroma / 12, 4)
-    ),
-    "neutral-variant": TonalPalette.fromHueAndChroma(
-      nvHct.hue,
-      Math.min(nvHct.chroma / 6, 8)
-    )
-  };
   function buildJsonSchemes() {
-    function extractSchemeColors(scheme2, backgroundScheme) {
+    function extractSchemeColors(scheme2) {
       const colors = {};
       for (const tokenName of FIXTURE_TOKEN_ORDER) {
         const dynamicColor = MaterialDynamicColors[tokenName];
-        const useScheme = backgroundScheme && (tokenName === "background" || tokenName === "onBackground") ? backgroundScheme : scheme2;
         colors[tokenName] = hexFromArgb4(
-          dynamicColor.getArgb(useScheme)
+          dynamicColor.getArgb(scheme2)
         ).toUpperCase();
       }
       return colors;
@@ -529,26 +483,18 @@ function buildJson(ctx) {
         neutralVariantPalette: nvPalette || baseScheme.neutralVariantPalette
       });
       if (errPalette) composedScheme.errorPalette = errPalette;
-      jsonSchemes[name] = extractSchemeColors(composedScheme, baseScheme);
+      jsonSchemes[name] = extractSchemeColors(composedScheme);
     }
     return jsonSchemes;
   }
-  function rawPalettesToJson() {
+  function refPalettesToJson() {
     const jsonPalettes = {};
-    const RAW_PALETTE_NAMES = [
-      "primary",
-      "secondary",
-      "tertiary",
-      "neutral",
-      "neutral-variant"
-    ];
-    for (const name of RAW_PALETTE_NAMES) {
-      const palette = rawPalettes[name];
-      const tones = {};
-      for (const tone of MTB_TONES) {
-        tones[tone.toString()] = hexFromArgb4(palette.tone(tone)).toUpperCase();
+    for (const [name, tones] of Object.entries(refPalettes)) {
+      const jsonTones = {};
+      for (const { tone, argb } of tones) {
+        jsonTones[tone.toString()] = hexFromArgb4(argb).toUpperCase();
       }
-      jsonPalettes[name] = tones;
+      jsonPalettes[name] = jsonTones;
     }
     return jsonPalettes;
   }
@@ -575,14 +521,14 @@ function buildJson(ctx) {
     name: c.name,
     color: c.hex.toUpperCase(),
     description: "",
-    harmonized: c.blend ?? DEFAULT_BLEND
+    harmonized: c.blend
   }));
   return {
     seed,
     coreColors,
     extendedColors,
     schemes: buildJsonSchemes(),
-    palettes: rawPalettesToJson()
+    palettes: refPalettesToJson()
   };
 }
 
@@ -922,51 +868,53 @@ function getPalette(palettes, colorName) {
   }
   return palette;
 }
-function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
-  const baseVars = toRecord(tokenNames, (tokenName) => {
-    const dynamicColor = MaterialDynamicColors2[tokenName];
-    const argb = dynamicColor.getArgb(scheme);
-    return [tokenName, argb];
-  });
-  const customVars = {};
-  customColors.forEach((color) => {
-    const colorname = color.name;
-    const getPaletteForColor = () => getPalette(colorPalettes, colorname);
-    const colorDynamicColor = new DynamicColor(
+function buildCustomColorRoles(colorname, palette) {
+  const getPaletteForColor = () => palette;
+  return {
+    [colorname]: new DynamicColor(
       colorname,
       getPaletteForColor,
       (s) => s.isDark ? 80 : 40,
       // Main color: lighter in dark mode, darker in light mode
       true
       // background
-    );
-    const onColorDynamicColor = new DynamicColor(
+    ),
+    [`on${upperFirst2(colorname)}`]: new DynamicColor(
       `on${upperFirst2(colorname)}`,
       getPaletteForColor,
       (s) => s.isDark ? 20 : 100,
       // Text on main color: high contrast (dark on light, light on dark)
       false
-    );
-    const containerDynamicColor = new DynamicColor(
+    ),
+    [`${colorname}Container`]: new DynamicColor(
       `${colorname}Container`,
       getPaletteForColor,
       (s) => s.isDark ? 30 : 90,
       // Container: subtle variant (darker in dark mode, lighter in light mode)
       true
       // background
-    );
-    const onContainerDynamicColor = new DynamicColor(
+    ),
+    [`on${upperFirst2(colorname)}Container`]: new DynamicColor(
       `on${upperFirst2(colorname)}Container`,
       getPaletteForColor,
       (s) => s.isDark ? 90 : 30,
       // Text on container: high contrast against container background
       false
-    );
-    customVars[colorname] = colorDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst2(colorname)}`] = onColorDynamicColor.getArgb(scheme);
-    customVars[`${colorname}Container`] = containerDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst2(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
+    )
+  };
+}
+function mergeBaseAndCustomColors(scheme, customColorRoles) {
+  const baseVars = toRecord(tokenNames, (tokenName) => {
+    const dynamicColor = MaterialDynamicColors2[tokenName];
+    const argb = dynamicColor.getArgb(scheme);
+    return [tokenName, argb];
   });
+  const customVars = {};
+  for (const roles of Object.values(customColorRoles)) {
+    for (const [tokenName, dynamicColor] of Object.entries(roles)) {
+      customVars[tokenName] = dynamicColor.getArgb(scheme);
+    }
+  }
   return { ...baseVars, ...customVars };
 }
 function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization) {
@@ -985,7 +933,17 @@ function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonizatio
   } else {
     targetChroma = baseScheme.primaryPalette.chroma;
   }
-  return TonalPalette2.fromHueAndChroma(hct.hue, targetChroma);
+  return TonalPalette.fromHueAndChroma(hct.hue, targetChroma);
+}
+function buildRefPalettes(allPalettes) {
+  const refPalettes = {};
+  for (const [name, palette] of Object.entries(allPalettes)) {
+    refPalettes[kebabCase4(name)] = STANDARD_TONES.map((tone) => ({
+      tone,
+      argb: palette.tone(tone)
+    }));
+  }
+  return refPalettes;
 }
 function buildTokenToPaletteMap(schemePalettes, scheme) {
   const result = {};
@@ -1014,7 +972,7 @@ function builder(hexSource, {
   neutral,
   neutralVariant,
   error,
-  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
+  customColors: customColorInputs = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
   const cores = {
@@ -1025,9 +983,12 @@ function builder(hexSource, {
     neutral: optionalHex(neutral),
     neutralVariant: optionalHex(neutralVariant)
   };
-  assertHexInputs(hexSource, cores, hexCustomColors);
+  assertHexInputs(hexSource, cores, customColorInputs);
+  const hexCustomColors = customColorInputs.map((c) => ({
+    ...c,
+    blend: c.blend ?? DEFAULT_BLEND
+  }));
   const sourceArgb = argbFromHex2(hexSource);
-  const sourceHct = Hct2.fromInt(sourceArgb);
   const effectiveSource = cores.primary || hexSource;
   const effectiveSourceArgb = argbFromHex2(effectiveSource);
   const effectiveSourceForHarmonization = cores.primary ? argbFromHex2(cores.primary) : sourceArgb;
@@ -1118,18 +1079,21 @@ function builder(hexSource, {
   };
   const customColors = definedColors.filter((c) => !c.core).map((c) => ({
     name: c.name,
-    blend: c.blend ?? DEFAULT_BLEND,
     value: argbFromHex2(c.hex)
   }));
+  const customColorRoles = Object.fromEntries(
+    customColors.map((color) => [
+      color.name,
+      buildCustomColorRoles(color.name, getPalette(colorPalettes, color.name))
+    ])
+  );
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
-    customColors,
-    colorPalettes
+    customColorRoles
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
-    customColors,
-    colorPalettes
+    customColorRoles
   );
   const schemePalettes = [
     ["primary", lightScheme.primaryPalette],
@@ -1140,6 +1104,7 @@ function builder(hexSource, {
     ["neutral-variant", lightScheme.neutralVariantPalette]
   ];
   const tokenToPalette = buildTokenToPaletteMap(schemePalettes, lightScheme);
+  const refPalettes = buildRefPalettes(allPalettes);
   const allPaletteNamesKebab = new Set(Object.keys(allPalettes).map(kebabCase4));
   const ctx = {
     hexSource,
@@ -1152,11 +1117,11 @@ function builder(hexSource, {
     neutralVariant,
     error,
     hexCustomColors,
-    sourceHct,
     effectiveSourceArgb,
     primaryHct,
     SchemeClass,
     allPalettes,
+    refPalettes,
     mergedColorsLight,
     mergedColorsDark,
     tokenToPalette,
@@ -1174,7 +1139,8 @@ function builder(hexSource, {
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
-    allPalettes
+    allPalettes,
+    customColorRoles
   };
 }
 export {

package/dist/react.d.ts

@@ -134,8 +134,13 @@ declare const tokenDescriptions: {
 type TokenName = keyof typeof tokenDescriptions;
 
 /** A custom color defined with a hex string instead of an ARGB integer. */
-type HexCustomColor = Omit<CustomColor, "value"> & {
+type HexCustomColor = Omit<CustomColor, "value" | "blend"> & {
     hex: string;
+    /**
+     * Harmonize the color with the source (or `primary`, when given) -- "Harmonize"
+     * in Material Theme Builder. Default: `DEFAULT_BLEND` (true).
+     */
+    blend?: boolean;
 };
 /** Available Material You color scheme variants. */
 declare const schemeNames: readonly ["tonalSpot", "monochrome", "neutral", "vibrant", "expressive", "fidelity", "content"];