react-mcu 1.0.4 → 1.0.6

package/README.md

@@ -17,8 +17,9 @@ import { Mcu } from "react-mcu";
   scheme="vibrant"
   contrast={0.5}
   customColors={[
-    { name: "myCustomColor1", hex: "#FF5733", blend: true },
-    { name: "myCustomColor2", hex: "#3498DB", blend: false },
+    { name: "myCustomColor1", hex: "#6C8A0C", blend: true },
+    { name: "myCustomColor2", hex: "#E126C6", blend: true },
+    { name: "myCustomColor3", hex: "#E126C6", blend: false },
   ]}
 >
   <p style={{
@@ -26,7 +27,7 @@ import { Mcu } from "react-mcu";
     color: "var(--mcu-on-surface)",
   }}>
     Hello, MCU <span style={{
-      backgroundColor: "var(--mcu-my-custom-color1)",
+      backgroundColor: "var(--mcu-my-custom-color-1)",
       color: "var(--mcu-my-custom-color2)",
     }}>colors<span>!
   </p>
@@ -54,7 +55,7 @@ return (
 Compatible with Tailwind through
 [theme variables](https://tailwindcss.com/docs/theme):
 
-https://github.com/abernier/react-mcu/blob/fdff00861e77067678076a97193a1a6f53eb3557/src/tailwind.css#L3-L51
+https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L3-L76
 
 Or simply:
 
@@ -62,6 +63,9 @@ Or simply:
 @import "react-mcu/tailwind.css";
 ```
 
+> [!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
 
 ## INSTALL

package/dist/index.d.ts

@@ -5,10 +5,14 @@ type HexCustomColor = Omit<CustomColor, "value"> & {
     hex: string;
 };
 type McuConfig = {
+    /** Source color in hex format (e.g., "#6750A4") used to generate the color scheme */
     source: string;
-    scheme: SchemeName;
-    contrast: number;
-    customColors: HexCustomColor[];
+    /** Color scheme variant. Default: "tonalSpot" */
+    scheme?: SchemeName;
+    /** Contrast level from -1.0 (reduced) to 1.0 (increased). Default: 0 (standard) */
+    contrast?: number;
+    /** Array of custom colors to include in the generated palette */
+    customColors?: HexCustomColor[];
 };
 declare const schemesMap: {
     readonly tonalSpot: typeof SchemeTonalSpot;
@@ -22,7 +26,7 @@ declare const schemesMap: {
 declare const schemeNames: (keyof typeof schemesMap)[];
 type SchemeName = (typeof schemeNames)[number];
 declare function Mcu({ source, scheme, contrast, customColors, children, }: McuConfig & {
-    children: React.ReactNode;
+    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"];
 type TokenName = (typeof tokenNames)[number];

package/dist/index.js

@@ -1,6 +1,7 @@
 // src/Mcu.tsx
 import {
   argbFromHex,
+  Blend,
   Hct,
   hexFromArgb as hexFromArgb2,
   MaterialDynamicColors,
@@ -10,9 +11,10 @@ import {
   SchemeMonochrome,
   SchemeNeutral,
   SchemeTonalSpot,
-  SchemeVibrant
+  SchemeVibrant,
+  TonalPalette
 } from "@material/material-color-utilities";
-import { kebabCase } from "lodash-es";
+import { kebabCase, upperFirst } from "lodash-es";
 import { useMemo as useMemo2 } from "react";
 
 // src/Mcu.context.tsx
@@ -102,12 +104,15 @@ var schemesMap = {
 var schemeNames = Object.keys(
   schemesMap
 );
+var DEFAULT_SCHEME = "tonalSpot";
+var DEFAULT_CONTRAST = 0;
+var DEFAULT_CUSTOM_COLORS = [];
 var mcuStyleId = "mcu-styles";
 function Mcu({
   source,
-  scheme,
-  contrast,
-  customColors,
+  scheme = DEFAULT_SCHEME,
+  contrast = DEFAULT_CONTRAST,
+  customColors = DEFAULT_CUSTOM_COLORS,
   children
 }) {
   const config = useMemo2(
@@ -194,16 +199,25 @@ function toRecord(arr, getEntry) {
     {}
   );
 }
-function mergeBaseAndCustomColors(scheme, customColors) {
+function mergeBaseAndCustomColors(scheme, customColors, sourceArgb) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
     const dynamicColor = MaterialDynamicColors[tokenName];
     const argb = dynamicColor.getArgb(scheme);
     return [tokenName, argb];
   });
-  const customVars = toRecord(customColors, (color) => [
-    color.name,
-    color.value
-  ]);
+  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 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
+    );
+  });
   return { ...baseVars, ...customVars };
 }
 var cssVar = (colorName, colorValue) => {
@@ -216,9 +230,9 @@ var toCssVars = (mergedColors) => {
 };
 function generateCss({
   source: hexSource,
-  customColors: hexCustomColors,
-  scheme,
-  contrast
+  customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
+  scheme = DEFAULT_SCHEME,
+  contrast = DEFAULT_CONTRAST
 }) {
   console.log("MCU generateCss");
   const sourceArgb = argbFromHex(hexSource);
@@ -230,8 +244,16 @@ function generateCss({
     ...rest,
     value: argbFromHex(hex)
   }));
-  const mergedColorsLight = mergeBaseAndCustomColors(lightScheme, customColors);
-  const mergedColorsDark = mergeBaseAndCustomColors(darkScheme, customColors);
+  const mergedColorsLight = mergeBaseAndCustomColors(
+    lightScheme,
+    customColors,
+    sourceArgb
+  );
+  const mergedColorsDark = mergeBaseAndCustomColors(
+    darkScheme,
+    customColors,
+    sourceArgb
+  );
   const lightVars = toCssVars(mergedColorsLight);
   const darkVars = toCssVars(mergedColorsDark);
   return {

package/dist/tailwind.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@theme {
+@theme inline {
   --color-background: var(--mcu-background);
   --color-on-background: var(--mcu-on-background);
   --color-surface: var(--mcu-surface);
@@ -48,4 +48,29 @@
   --color-on-error-container: var(--mcu-on-error-container);
   --color-scrim: var(--mcu-scrim);
   --color-shadow: var(--mcu-shadow);
+
+  /*
+   * Custom colors
+   */
+
+  --color-myCustomColor1: var(--mcu-my-custom-color-1);
+  --color-on-myCustomColor1: var(--mcu-on-my-custom-color-1);
+  --color-myCustomColor1-container: var(--mcu-my-custom-color-1-container);
+  --color-on-myCustomColor1-container: var(
+    --mcu-on-my-custom-color-1-container
+  );
+
+  --color-myCustomColor2: var(--mcu-my-custom-color-2);
+  --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
+  --color-myCustomColor2-container: var(--mcu-my-custom-color-2-container);
+  --color-on-myCustomColor2-container: var(
+    --mcu-on-my-custom-color-2-container
+  );
+
+  --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
+  );
 }

package/package.json

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

package/src/tailwind.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@theme {
+@theme inline {
   --color-background: var(--mcu-background);
   --color-on-background: var(--mcu-on-background);
   --color-surface: var(--mcu-surface);
@@ -48,4 +48,29 @@
   --color-on-error-container: var(--mcu-on-error-container);
   --color-scrim: var(--mcu-scrim);
   --color-shadow: var(--mcu-shadow);
+
+  /*
+   * Custom colors
+   */
+
+  --color-myCustomColor1: var(--mcu-my-custom-color-1);
+  --color-on-myCustomColor1: var(--mcu-on-my-custom-color-1);
+  --color-myCustomColor1-container: var(--mcu-my-custom-color-1-container);
+  --color-on-myCustomColor1-container: var(
+    --mcu-on-my-custom-color-1-container
+  );
+
+  --color-myCustomColor2: var(--mcu-my-custom-color-2);
+  --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
+  --color-myCustomColor2-container: var(--mcu-my-custom-color-2-container);
+  --color-on-myCustomColor2-container: var(
+    --mcu-on-my-custom-color-2-container
+  );
+
+  --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
+  );
 }