react-mcu 1.1.0 → 1.1.1

package/dist/index.d.ts

@@ -28,9 +28,22 @@ type McuConfig = {
      * When true, stays true to input colors without harmonization.
      * When false (default), colors may be adjusted for better harmonization.
      * Corresponds to "Color match - Stay true to my color inputs" in Material Theme Builder.
+     *
+     * @default false
+     * @deprecated Not yet implemented. This prop is currently ignored.
      */
     colorMatch?: boolean;
-    /** Array of custom colors to include in the generated palette */
+    /**
+     * Array of custom colors to include in the generated palette.
+     *
+     * @example
+     * ```ts
+     * customColors={[
+     *   { name: "brand", hex: "#FF5733", blend: true },
+     *   { name: "success", hex: "#28A745", blend: false }
+     * ]}
+     * ```
+     */
     customColors?: HexCustomColor[];
 };
 declare const schemesMap: {

package/dist/index.js

@@ -3,8 +3,8 @@
 // src/Mcu.tsx
 import {
   argbFromHex,
-  CorePalette,
-  customColor,
+  Blend,
+  DynamicColor,
   DynamicScheme,
   Hct,
   hexFromArgb as hexFromArgb2,
@@ -270,22 +270,56 @@ function toRecord(arr, getEntry) {
     {}
   );
 }
-function mergeBaseAndCustomColors(scheme, customColors, sourceArgb) {
+function getPalette(palettes, colorName) {
+  const palette = palettes[colorName];
+  if (!palette) {
+    throw new Error(
+      `Custom color palette not found for '${colorName}'. This is likely a bug in the implementation.`
+    );
+  }
+  return palette;
+}
+function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
     const dynamicColor = MaterialDynamicColors[tokenName];
     const argb = dynamicColor.getArgb(scheme);
     return [tokenName, argb];
   });
   const customVars = {};
-  const isDark = scheme.isDark;
   customColors.forEach((color) => {
-    const customColorGroup = customColor(sourceArgb, color);
-    const colorGroup = isDark ? customColorGroup.dark : customColorGroup.light;
     const colorname = color.name;
-    customVars[colorname] = colorGroup.color;
-    customVars[`on${upperFirst(colorname)}`] = colorGroup.onColor;
-    customVars[`${colorname}Container`] = colorGroup.colorContainer;
-    customVars[`on${upperFirst(colorname)}Container`] = colorGroup.onColorContainer;
+    const colorDynamicColor = new DynamicColor(
+      colorname,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 80 : 40,
+      // Same as primary
+      false
+    );
+    const onColorDynamicColor = new DynamicColor(
+      `on${upperFirst(colorname)}`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 20 : 100,
+      // Same as onPrimary
+      false
+    );
+    const containerDynamicColor = new DynamicColor(
+      `${colorname}Container`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 30 : 90,
+      // Same as primaryContainer
+      false
+    );
+    const onContainerDynamicColor = new DynamicColor(
+      `on${upperFirst(colorname)}Container`,
+      (s) => getPalette(colorPalettes, colorname),
+      (s) => s.isDark ? 90 : 30,
+      // Same as onPrimaryContainer
+      false
+    );
+    customVars[colorname] = colorDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst(colorname)}`] = onColorDynamicColor.getArgb(scheme);
+    customVars[`${colorname}Container`] = containerDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
   });
   return { ...baseVars, ...customVars };
 }
@@ -300,6 +334,24 @@ var generateTonalPaletteVars = (paletteName, palette) => {
     return cssVar(`${paletteName}-${tone}`, color);
   }).join(" ");
 };
+function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization) {
+  const colorArgb = argbFromHex(colorDef.hex);
+  const harmonizedArgb = colorDef.blend ? Blend.harmonize(colorArgb, effectiveSourceForHarmonization) : colorArgb;
+  const hct = Hct.fromInt(harmonizedArgb);
+  let targetChroma;
+  if (colorDef.core && colorDef.chromaSource) {
+    if (colorDef.chromaSource === "neutral") {
+      targetChroma = baseScheme.neutralPalette.chroma;
+    } else if (colorDef.chromaSource === "neutralVariant") {
+      targetChroma = baseScheme.neutralVariantPalette.chroma;
+    } else {
+      targetChroma = baseScheme.primaryPalette.chroma;
+    }
+  } else {
+    targetChroma = baseScheme.primaryPalette.chroma;
+  }
+  return TonalPalette.fromHueAndChroma(hct.hue, targetChroma);
+}
 var toCssVars = (mergedColors) => {
   return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
 };
@@ -316,74 +368,122 @@ function generateCss({
   colorMatch = DEFAULT_COLOR_MATCH,
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
 }) {
-  const hasCoreColors = primary ?? secondary ?? tertiary ?? neutral ?? neutralVariant ?? error;
   const sourceArgb = argbFromHex(hexSource);
+  const effectiveSource = primary || hexSource;
+  const effectiveSourceArgb = argbFromHex(effectiveSource);
+  const effectiveSourceForHarmonization = primary ? argbFromHex(primary) : sourceArgb;
+  const SchemeClass = schemesMap[scheme];
+  const primaryHct = Hct.fromInt(effectiveSourceArgb);
+  const baseScheme = new SchemeClass(primaryHct, false, contrast);
+  const allColors = [
+    // Core colors (hex may be undefined)
+    {
+      name: "primary",
+      hex: primary,
+      core: true,
+      chromaSource: "primary"
+    },
+    {
+      name: "secondary",
+      hex: secondary,
+      core: true,
+      chromaSource: "primary"
+    },
+    {
+      name: "tertiary",
+      hex: tertiary,
+      core: true,
+      chromaSource: "primary"
+    },
+    { name: "error", hex: error, core: true, chromaSource: "primary" },
+    {
+      name: "neutral",
+      hex: neutral,
+      core: true,
+      chromaSource: "neutral"
+    },
+    {
+      name: "neutralVariant",
+      hex: neutralVariant,
+      core: true,
+      chromaSource: "neutralVariant"
+    },
+    //
+    // Custom colors
+    //
+    ...hexCustomColors.map((c) => ({
+      name: c.name,
+      hex: c.hex,
+      blend: c.blend,
+      core: false
+    }))
+  ];
+  const definedColors = allColors.filter(
+    (c) => c.hex !== void 0
+  );
+  const colorPalettes = Object.fromEntries(
+    definedColors.map((colorDef) => [
+      colorDef.name,
+      createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization)
+    ])
+  );
   const createSchemes = (baseConfig) => [
     new DynamicScheme({ ...baseConfig, isDark: false }),
     new DynamicScheme({ ...baseConfig, isDark: true })
   ];
-  let lightScheme;
-  let darkScheme;
-  let corePalette;
-  if (hasCoreColors) {
-    const coreColorsArgb = {
-      primary: primary ? argbFromHex(primary) : sourceArgb,
-      secondary: secondary ? argbFromHex(secondary) : void 0,
-      tertiary: tertiary ? argbFromHex(tertiary) : void 0,
-      neutral: neutral ? argbFromHex(neutral) : void 0,
-      neutralVariant: neutralVariant ? argbFromHex(neutralVariant) : void 0,
-      error: error ? argbFromHex(error) : void 0
-    };
-    corePalette = colorMatch ? CorePalette.fromColors(coreColorsArgb) : CorePalette.contentFromColors(coreColorsArgb);
-    const variant = schemeToVariant[scheme];
-    [lightScheme, darkScheme] = createSchemes({
-      sourceColorArgb: sourceArgb,
-      variant,
-      contrastLevel: contrast,
-      primaryPalette: corePalette.a1,
-      secondaryPalette: corePalette.a2,
-      tertiaryPalette: corePalette.a3,
-      neutralPalette: corePalette.n1,
-      neutralVariantPalette: corePalette.n2
-    });
-  } else {
-    const SchemeClass = schemesMap[scheme];
-    const hct = Hct.fromInt(sourceArgb);
-    lightScheme = new SchemeClass(hct, false, contrast);
-    darkScheme = new SchemeClass(hct, true, contrast);
-    corePalette = CorePalette.of(sourceArgb);
+  const variant = schemeToVariant[scheme];
+  const [lightScheme, darkScheme] = createSchemes({
+    sourceColorArgb: effectiveSourceArgb,
+    variant,
+    contrastLevel: contrast,
+    primaryPalette: colorPalettes["primary"] || baseScheme.primaryPalette,
+    secondaryPalette: colorPalettes["secondary"] || baseScheme.secondaryPalette,
+    tertiaryPalette: colorPalettes["tertiary"] || baseScheme.tertiaryPalette,
+    neutralPalette: colorPalettes["neutral"] || baseScheme.neutralPalette,
+    neutralVariantPalette: colorPalettes["neutralVariant"] || baseScheme.neutralVariantPalette
+  });
+  const errorPalette = colorPalettes["error"];
+  if (errorPalette) {
+    lightScheme.errorPalette = errorPalette;
+    darkScheme.errorPalette = errorPalette;
   }
-  const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
-    ...rest,
-    value: argbFromHex(hex)
+  const customColors = definedColors.filter((c) => !c.core).map((c) => ({
+    name: c.name,
+    blend: c.blend ?? false,
+    value: argbFromHex(c.hex)
   }));
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
     customColors,
-    sourceArgb
+    colorPalettes
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
     customColors,
-    sourceArgb
+    colorPalettes
   );
   const lightVars = toCssVars(mergedColorsLight);
   const darkVars = toCssVars(mergedColorsDark);
-  const coreColorsTonalVars = [
-    generateTonalPaletteVars("primary", corePalette.a1),
-    generateTonalPaletteVars("secondary", corePalette.a2),
-    generateTonalPaletteVars("tertiary", corePalette.a3),
-    generateTonalPaletteVars("neutral", corePalette.n1),
-    generateTonalPaletteVars("neutral-variant", corePalette.n2),
-    generateTonalPaletteVars("error", corePalette.error)
+  const allTonalVars = [
+    // Core colors from the scheme
+    generateTonalPaletteVars("primary", lightScheme.primaryPalette),
+    generateTonalPaletteVars("secondary", lightScheme.secondaryPalette),
+    generateTonalPaletteVars("tertiary", lightScheme.tertiaryPalette),
+    generateTonalPaletteVars("error", lightScheme.errorPalette),
+    generateTonalPaletteVars("neutral", lightScheme.neutralPalette),
+    generateTonalPaletteVars(
+      "neutral-variant",
+      lightScheme.neutralVariantPalette
+    ),
+    // Custom colors from our unified palette map
+    ...customColors.map((customColorObj) => {
+      const palette = getPalette(colorPalettes, customColorObj.name);
+      return generateTonalPaletteVars(kebabCase(customColorObj.name), palette);
+    })
   ].join(" ");
-  const customColorTonalVars = customColors.map((customColorObj) => {
-    const palette = TonalPalette.fromInt(customColorObj.value);
-    return generateTonalPaletteVars(kebabCase(customColorObj.name), palette);
-  }).join(" ");
   return {
     css: `
-:root { ${lightVars} ${coreColorsTonalVars} ${customColorTonalVars} }
+:root { ${lightVars} ${allTonalVars} }
 .dark { ${darkVars} }
 `,
     mergedColorsLight,

package/dist/tailwind.css

@@ -164,23 +164,4 @@
   --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
   --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
   --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
-
-  --color-myCustomColor3: var(--mcu-my-custom-color-3);
-  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
-  --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
-  --color-on-myCustomColor3-container: var(
-    --mcu-on-my-custom-color-3-container
-  );
-  /* Shades */
-  --color-myCustomColor3-50: var(--mcu-my-custom-color-3-95);
-  --color-myCustomColor3-100: var(--mcu-my-custom-color-3-90);
-  --color-myCustomColor3-200: var(--mcu-my-custom-color-3-80);
-  --color-myCustomColor3-300: var(--mcu-my-custom-color-3-70);
-  --color-myCustomColor3-400: var(--mcu-my-custom-color-3-60);
-  --color-myCustomColor3-500: var(--mcu-my-custom-color-3-50);
-  --color-myCustomColor3-600: var(--mcu-my-custom-color-3-40);
-  --color-myCustomColor3-700: var(--mcu-my-custom-color-3-30);
-  --color-myCustomColor3-800: var(--mcu-my-custom-color-3-20);
-  --color-myCustomColor3-900: var(--mcu-my-custom-color-3-10);
-  --color-myCustomColor3-950: var(--mcu-my-custom-color-3-5);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A React component library",
   "keywords": [
     "react",
@@ -66,14 +66,14 @@
   },
   "scripts": {
     "build": "tsup",
-    "ci": "pnpm run build && pnpm run check-format && pnpm run check-exports && pnpm run lint && pnpm run test",
-    "lint": "tsc",
+    "lgtm": "pnpm run build && pnpm run check-format && pnpm run check-exports && pnpm run typecheck && pnpm run test",
+    "typecheck": "tsc",
     "test": "vitest run",
     "format": "prettier --write .",
     "check-format": "prettier --check .",
     "check-exports": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution",
     "release": "pnpm run build && changeset publish",
-    "local-release": "pnpm run ci && changeset version && changeset publish",
+    "local-release": "pnpm run lgtm && changeset version && changeset publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",

package/src/tailwind.css

@@ -164,23 +164,4 @@
   --color-myCustomColor2-800: var(--mcu-my-custom-color-2-20);
   --color-myCustomColor2-900: var(--mcu-my-custom-color-2-10);
   --color-myCustomColor2-950: var(--mcu-my-custom-color-2-5);
-
-  --color-myCustomColor3: var(--mcu-my-custom-color-3);
-  --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
-  --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
-  --color-on-myCustomColor3-container: var(
-    --mcu-on-my-custom-color-3-container
-  );
-  /* Shades */
-  --color-myCustomColor3-50: var(--mcu-my-custom-color-3-95);
-  --color-myCustomColor3-100: var(--mcu-my-custom-color-3-90);
-  --color-myCustomColor3-200: var(--mcu-my-custom-color-3-80);
-  --color-myCustomColor3-300: var(--mcu-my-custom-color-3-70);
-  --color-myCustomColor3-400: var(--mcu-my-custom-color-3-60);
-  --color-myCustomColor3-500: var(--mcu-my-custom-color-3-50);
-  --color-myCustomColor3-600: var(--mcu-my-custom-color-3-40);
-  --color-myCustomColor3-700: var(--mcu-my-custom-color-3-30);
-  --color-myCustomColor3-800: var(--mcu-my-custom-color-3-20);
-  --color-myCustomColor3-900: var(--mcu-my-custom-color-3-10);
-  --color-myCustomColor3-950: var(--mcu-my-custom-color-3-5);
 }