react-mcu 1.0.6 → 1.0.7

package/README.md

@@ -28,12 +28,16 @@ import { Mcu } from "react-mcu";
   }}>
     Hello, MCU <span style={{
       backgroundColor: "var(--mcu-my-custom-color-1)",
-      color: "var(--mcu-my-custom-color2)",
+      color: "var(--mcu-on-my-custom-color-1)",
     }}>colors<span>!
   </p>
 </Mcu>
 ```
 
+> [!NOTE]
+>
+> CSS varnames are always kebab-cased, `myCustomColor1` → `--mcu-my-custom-color-1`
+
 https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
 
 A `useMcu` hook is also provided:
@@ -63,7 +67,9 @@ Or simply:
 @import "react-mcu/tailwind.css";
 ```
 
-> [!IMPORTANT] Do not forget to manually add your custom colors, as in:
+> [!IMPORTANT]
+>
+> Do not forget to manually add your custom colors, as in:
 > https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L52-L75
 
 # Dev

package/dist/index.d.ts

@@ -11,6 +11,25 @@ type McuConfig = {
     scheme?: SchemeName;
     /** Contrast level from -1.0 (reduced) to 1.0 (increased). Default: 0 (standard) */
     contrast?: number;
+    /** Primary color - the main brand color. Overrides the default palette generation. */
+    primary?: string;
+    /** Secondary color - accent color. Overrides the default palette generation. */
+    secondary?: string;
+    /** Tertiary color - additional accent color. Overrides the default palette generation. */
+    tertiary?: string;
+    /** Neutral color - used for surfaces. Overrides the default palette generation. */
+    neutral?: string;
+    /** Neutral variant color - used for surfaces with slight tint. Overrides the default palette generation. */
+    neutralVariant?: string;
+    /** Error color - used for error states. Overrides the default palette generation. */
+    error?: string;
+    /**
+     * Color match mode for core colors.
+     * 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.
+     */
+    colorMatch?: boolean;
     /** Array of custom colors to include in the generated palette */
     customColors?: HexCustomColor[];
 };
@@ -25,7 +44,7 @@ declare const schemesMap: {
 };
 declare const schemeNames: (keyof typeof schemesMap)[];
 type SchemeName = (typeof schemeNames)[number];
-declare function Mcu({ source, scheme, contrast, customColors, children, }: McuConfig & {
+declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, children, }: McuConfig & {
     children?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare const tokenNames: readonly ["background", "onBackground", "surface", "surfaceDim", "surfaceBright", "surfaceContainerLowest", "surfaceContainerLow", "surfaceContainer", "surfaceContainerHigh", "surfaceContainerHighest", "onSurface", "onSurfaceVariant", "outline", "outlineVariant", "inverseSurface", "inverseOnSurface", "primary", "onPrimary", "primaryContainer", "onPrimaryContainer", "primaryFixed", "primaryFixedDim", "onPrimaryFixed", "onPrimaryFixedVariant", "inversePrimary", "primaryFixed", "primaryFixedDim", "onPrimaryFixed", "onPrimaryFixedVariant", "secondary", "onSecondary", "secondaryContainer", "onSecondaryContainer", "secondaryFixed", "secondaryFixedDim", "onSecondaryFixed", "onSecondaryFixedVariant", "tertiary", "onTertiary", "tertiaryContainer", "onTertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "onTertiaryFixed", "onTertiaryFixedVariant", "error", "onError", "errorContainer", "onErrorContainer", "scrim", "shadow"];

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/Mcu.tsx
 import {
   argbFromHex,
-  Blend,
+  CorePalette,
+  customColor,
+  DynamicScheme,
   Hct,
   hexFromArgb as hexFromArgb2,
   MaterialDynamicColors,
@@ -11,8 +13,7 @@ import {
   SchemeMonochrome,
   SchemeNeutral,
   SchemeTonalSpot,
-  SchemeVibrant,
-  TonalPalette
+  SchemeVibrant
 } from "@material/material-color-utilities";
 import { kebabCase, upperFirst } from "lodash-es";
 import { useMemo as useMemo2 } from "react";
@@ -106,12 +107,40 @@ var schemeNames = Object.keys(
 );
 var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
+var DEFAULT_COLOR_MATCH = false;
 var DEFAULT_CUSTOM_COLORS = [];
+var Variant = {
+  MONOCHROME: 0,
+  NEUTRAL: 1,
+  TONAL_SPOT: 2,
+  VIBRANT: 3,
+  EXPRESSIVE: 4,
+  FIDELITY: 5,
+  CONTENT: 6,
+  RAINBOW: 7,
+  FRUIT_SALAD: 8
+};
+var schemeToVariant = {
+  tonalSpot: Variant.TONAL_SPOT,
+  monochrome: Variant.MONOCHROME,
+  neutral: Variant.NEUTRAL,
+  vibrant: Variant.VIBRANT,
+  expressive: Variant.EXPRESSIVE,
+  fidelity: Variant.FIDELITY,
+  content: Variant.CONTENT
+};
 var mcuStyleId = "mcu-styles";
 function Mcu({
   source,
   scheme = DEFAULT_SCHEME,
   contrast = DEFAULT_CONTRAST,
+  primary,
+  secondary,
+  tertiary,
+  neutral,
+  neutralVariant,
+  error,
+  colorMatch = DEFAULT_COLOR_MATCH,
   customColors = DEFAULT_CUSTOM_COLORS,
   children
 }) {
@@ -120,9 +149,28 @@ function Mcu({
       source,
       scheme,
       contrast,
+      primary,
+      secondary,
+      tertiary,
+      neutral,
+      neutralVariant,
+      error,
+      colorMatch,
       customColors
     }),
-    [contrast, customColors, scheme, source]
+    [
+      contrast,
+      customColors,
+      scheme,
+      source,
+      primary,
+      secondary,
+      tertiary,
+      neutral,
+      neutralVariant,
+      error,
+      colorMatch
+    ]
   );
   const { css } = useMemo2(() => generateCss(config), [config]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -208,15 +256,13 @@ function mergeBaseAndCustomColors(scheme, customColors, sourceArgb) {
   const customVars = {};
   const isDark = scheme.isDark;
   customColors.forEach((color) => {
-    const colorValue = color.blend ? Blend.harmonize(color.value, sourceArgb) : color.value;
-    const palette = TonalPalette.fromInt(colorValue);
+    const customColorGroup = customColor(sourceArgb, color);
+    const colorGroup = isDark ? customColorGroup.dark : customColorGroup.light;
     const colorname = color.name;
-    customVars[colorname] = palette.tone(isDark ? 80 : 40);
-    customVars[`on${upperFirst(colorname)}`] = palette.tone(isDark ? 20 : 100);
-    customVars[`${colorname}Container`] = palette.tone(isDark ? 30 : 90);
-    customVars[`on${upperFirst(colorname)}Container`] = palette.tone(
-      isDark ? 90 : 10
-    );
+    customVars[colorname] = colorGroup.color;
+    customVars[`on${upperFirst(colorname)}`] = colorGroup.onColor;
+    customVars[`${colorname}Container`] = colorGroup.colorContainer;
+    customVars[`on${upperFirst(colorname)}Container`] = colorGroup.onColorContainer;
   });
   return { ...baseVars, ...customVars };
 }
@@ -230,16 +276,53 @@ var toCssVars = (mergedColors) => {
 };
 function generateCss({
   source: hexSource,
-  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
   scheme = DEFAULT_SCHEME,
-  contrast = DEFAULT_CONTRAST
+  contrast = DEFAULT_CONTRAST,
+  primary,
+  secondary,
+  tertiary,
+  neutral,
+  neutralVariant,
+  error,
+  colorMatch = DEFAULT_COLOR_MATCH,
+  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
 }) {
-  console.log("MCU generateCss");
+  const hasCoreColors = primary ?? secondary ?? tertiary ?? neutral ?? neutralVariant ?? error;
+  console.log("MCU generateCss", { hasCoreColors });
   const sourceArgb = argbFromHex(hexSource);
-  const hct = Hct.fromInt(sourceArgb);
-  const SchemeClass = schemesMap[scheme];
-  const lightScheme = new SchemeClass(hct, false, contrast);
-  const darkScheme = new SchemeClass(hct, true, contrast);
+  const createSchemes = (baseConfig) => [
+    new DynamicScheme({ ...baseConfig, isDark: false }),
+    new DynamicScheme({ ...baseConfig, isDark: true })
+  ];
+  let lightScheme;
+  let darkScheme;
+  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
+    };
+    const 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);
+  }
   const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
     ...rest,
     value: argbFromHex(hex)
@@ -258,9 +341,9 @@ function generateCss({
   const darkVars = toCssVars(mergedColorsDark);
   return {
     css: `
-    :root { ${lightVars} }
-    .dark { ${darkVars} }
-    `,
+:root { ${lightVars} }
+.dark { ${darkVars} }
+`,
     mergedColorsLight,
     mergedColorsDark
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A React component library",
   "keywords": [
     "react",
@@ -32,6 +32,8 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
     "@changesets/cli": "^2.27.7",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
     "@storybook/react-vite": "^10.1.11",
     "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/dom": "^10.4.1",