react-mcu 1.1.1 → 1.2.0

package/README.md

@@ -15,6 +15,27 @@ m3 references:
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [<img width="2836" height="2266" alt="CleanShot 2026-01-14 at 08 58 40@2x" src="https://github.com/user-attachments/assets/e4b47c00-716f-4b08-b393-de306d5ce302" />](https://material-foundation.github.io/material-theme-builder/) | [<img width="2836" height="2266" alt="CleanShot 2026-01-14 at 09 01 23@2x" src="https://github.com/user-attachments/assets/826e502d-e173-43c4-807a-53d0ba075a88" />](https://m3.material.io/styles/color/roles) |
 
+Support for:
+
+Base (like in the Builder):
+
+- [x] light/dark mode
+- [x] source color
+- [x] scheme
+- [x] contrast
+- [x] core-colors overrides: primary, secondary, tertiary, error, neutral,
+      neutralVariant
+- [x] custom-colors (aka. "Extended colors")
+  - [x] Harmonization (aka. `blend`) -- with effective color: `source` or
+        `primary` if defined
+- [x] Shades (aka. "tonals")
+- [ ] colorMatch
+
+Extra:
+
+- [x] `contrastAllColors`: contrast also applies to custom-colors and shades
+      (not only the core-colors)
+
 # Usage
 
 ```tsx

package/dist/index.d.ts

@@ -45,6 +45,13 @@ type McuConfig = {
      * ```
      */
     customColors?: HexCustomColor[];
+    /**
+     * When true, applies the contrast level to all colors including custom colors and tonal palette shades.
+     * When false (default), only core colors are affected by the contrast level.
+     *
+     * @default false
+     */
+    contrastAllColors?: boolean;
 };
 declare const schemesMap: {
     readonly tonalSpot: typeof SchemeTonalSpot;
@@ -57,7 +64,7 @@ declare const schemesMap: {
 };
 declare const schemeNames: (keyof typeof schemesMap)[];
 type SchemeName = (typeof schemeNames)[number];
-declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, children, }: McuConfig & {
+declare function Mcu({ source, scheme, contrast, primary, secondary, tertiary, neutral, neutralVariant, error, colorMatch, customColors, contrastAllColors, 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

@@ -52,6 +52,7 @@ var McuProvider = ({
   scheme: initialScheme,
   contrast: initialContrast,
   customColors: initialCustomColors,
+  contrastAllColors: initialContrastAllColors,
   styleId,
   children
 }) => {
@@ -59,7 +60,8 @@ var McuProvider = ({
     source: initialSource,
     scheme: initialScheme,
     contrast: initialContrast,
-    customColors: initialCustomColors
+    customColors: initialCustomColors,
+    contrastAllColors: initialContrastAllColors
   }));
   const [mcuConfig, setMcuConfig] = useState(initials);
   const { css, mergedColorsLight, mergedColorsDark } = useMemo(
@@ -96,6 +98,16 @@ var McuProvider = ({
 
 // src/Mcu.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function adjustToneForContrast(baseTone, contrastLevel, isDark, adjustmentFactor = DEFAULT_CONTRAST_ADJUSTMENT_FACTOR) {
+  if (contrastLevel === 0) return baseTone;
+  let adjustedTone;
+  if (isDark) {
+    adjustedTone = baseTone + contrastLevel * (100 - baseTone) * adjustmentFactor;
+  } else {
+    adjustedTone = baseTone - contrastLevel * baseTone * adjustmentFactor;
+  }
+  return Math.max(0, Math.min(100, adjustedTone));
+}
 var schemesMap = {
   tonalSpot: SchemeTonalSpot,
   monochrome: SchemeMonochrome,
@@ -112,6 +124,9 @@ var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
 var DEFAULT_COLOR_MATCH = false;
 var DEFAULT_CUSTOM_COLORS = [];
+var DEFAULT_CONTRAST_ALL_COLORS = false;
+var DEFAULT_BLEND = true;
+var DEFAULT_CONTRAST_ADJUSTMENT_FACTOR = 0.2;
 var STANDARD_TONES = [
   0,
   5,
@@ -165,6 +180,7 @@ function Mcu({
   error,
   colorMatch = DEFAULT_COLOR_MATCH,
   customColors = DEFAULT_CUSTOM_COLORS,
+  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS,
   children
 }) {
   const config = useMemo2(
@@ -179,7 +195,9 @@ function Mcu({
       neutralVariant,
       error,
       colorMatch,
-      customColors
+      customColors,
+      // extras features
+      contrastAllColors
     }),
     [
       contrast,
@@ -192,7 +210,8 @@ function Mcu({
       neutral,
       neutralVariant,
       error,
-      colorMatch
+      colorMatch,
+      contrastAllColors
     ]
   );
   const { css } = useMemo2(() => generateCss(config), [config]);
@@ -279,7 +298,7 @@ function getPalette(palettes, colorName) {
   }
   return palette;
 }
-function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
+function mergeBaseAndCustomColors(scheme, customColors, colorPalettes, contrastAllColors) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
     const dynamicColor = MaterialDynamicColors[tokenName];
     const argb = dynamicColor.getArgb(scheme);
@@ -288,32 +307,39 @@ function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
   const customVars = {};
   customColors.forEach((color) => {
     const colorname = color.name;
+    const getPaletteForColor = (s) => getPalette(colorPalettes, colorname);
+    const getTone = (baseTone) => (s) => {
+      if (!contrastAllColors) return baseTone;
+      return adjustToneForContrast(baseTone, s.contrastLevel, s.isDark);
+    };
     const colorDynamicColor = new DynamicColor(
       colorname,
-      (s) => getPalette(colorPalettes, colorname),
-      (s) => s.isDark ? 80 : 40,
-      // Same as primary
-      false
+      getPaletteForColor,
+      (s) => getTone(s.isDark ? 80 : 40)(s),
+      // Main color: lighter in dark mode, darker in light mode
+      true
+      // background
     );
     const onColorDynamicColor = new DynamicColor(
       `on${upperFirst(colorname)}`,
-      (s) => getPalette(colorPalettes, colorname),
-      (s) => s.isDark ? 20 : 100,
-      // Same as onPrimary
+      getPaletteForColor,
+      (s) => getTone(s.isDark ? 20 : 100)(s),
+      // Text on main color: high contrast (dark on light, light on dark)
       false
     );
     const containerDynamicColor = new DynamicColor(
       `${colorname}Container`,
-      (s) => getPalette(colorPalettes, colorname),
-      (s) => s.isDark ? 30 : 90,
-      // Same as primaryContainer
-      false
+      getPaletteForColor,
+      (s) => getTone(s.isDark ? 30 : 90)(s),
+      // Container: subtle variant (darker in dark mode, lighter in light mode)
+      true
+      // background
     );
     const onContainerDynamicColor = new DynamicColor(
       `on${upperFirst(colorname)}Container`,
-      (s) => getPalette(colorPalettes, colorname),
-      (s) => s.isDark ? 90 : 30,
-      // Same as onPrimaryContainer
+      getPaletteForColor,
+      (s) => getTone(s.isDark ? 90 : 30)(s),
+      // Text on container: high contrast against container background
       false
     );
     customVars[colorname] = colorDynamicColor.getArgb(scheme);
@@ -328,9 +354,17 @@ var cssVar = (colorName, colorValue) => {
   const value = hexFromArgb2(colorValue);
   return `${name}:${value};`;
 };
-var generateTonalPaletteVars = (paletteName, palette) => {
+var generateTonalPaletteVars = (paletteName, palette, scheme, applyContrast = false) => {
   return STANDARD_TONES.map((tone) => {
-    const color = palette.tone(tone);
+    let toneToUse = tone;
+    if (applyContrast && scheme) {
+      toneToUse = adjustToneForContrast(
+        tone,
+        scheme.contrastLevel,
+        scheme.isDark
+      );
+    }
+    const color = palette.tone(toneToUse);
     return cssVar(`${paletteName}-${tone}`, color);
   }).join(" ");
 };
@@ -366,7 +400,8 @@ function generateCss({
   neutralVariant,
   error,
   colorMatch = DEFAULT_COLOR_MATCH,
-  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS
+  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
+  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS
 }) {
   const sourceArgb = argbFromHex(hexSource);
   const effectiveSource = primary || hexSource;
@@ -449,36 +484,70 @@ function generateCss({
   }
   const customColors = definedColors.filter((c) => !c.core).map((c) => ({
     name: c.name,
-    blend: c.blend ?? false,
+    blend: c.blend ?? DEFAULT_BLEND,
     value: argbFromHex(c.hex)
   }));
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
     customColors,
-    colorPalettes
+    colorPalettes,
+    contrastAllColors
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
     customColors,
-    colorPalettes
+    colorPalettes,
+    contrastAllColors
   );
   const lightVars = toCssVars(mergedColorsLight);
   const darkVars = toCssVars(mergedColorsDark);
   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(
+      "primary",
+      lightScheme.primaryPalette,
+      lightScheme,
+      contrastAllColors
+    ),
+    generateTonalPaletteVars(
+      "secondary",
+      lightScheme.secondaryPalette,
+      lightScheme,
+      contrastAllColors
+    ),
+    generateTonalPaletteVars(
+      "tertiary",
+      lightScheme.tertiaryPalette,
+      lightScheme,
+      contrastAllColors
+    ),
+    generateTonalPaletteVars(
+      "error",
+      lightScheme.errorPalette,
+      lightScheme,
+      contrastAllColors
+    ),
+    generateTonalPaletteVars(
+      "neutral",
+      lightScheme.neutralPalette,
+      lightScheme,
+      contrastAllColors
+    ),
     generateTonalPaletteVars(
       "neutral-variant",
-      lightScheme.neutralVariantPalette
+      lightScheme.neutralVariantPalette,
+      lightScheme,
+      contrastAllColors
     ),
     // Custom colors from our unified palette map
     ...customColors.map((customColorObj) => {
       const palette = getPalette(colorPalettes, customColorObj.name);
-      return generateTonalPaletteVars(kebabCase(customColorObj.name), palette);
+      return generateTonalPaletteVars(
+        kebabCase(customColorObj.name),
+        palette,
+        lightScheme,
+        contrastAllColors
+      );
     })
   ].join(" ");
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A React component library",
   "keywords": [
     "react",