react-mcu 1.3.2 → 2.0.0

package/dist/index.js

@@ -22,13 +22,6 @@ import {
   TonalPalette
 } from "@material/material-color-utilities";
 import { kebabCase, startCase, upperFirst } from "lodash-es";
-function adjustToneForContrast(baseTone, contrastLevel, adjustmentFactor = DEFAULT_CONTRAST_ADJUSTMENT_FACTOR) {
-  if (contrastLevel === 0) return baseTone;
-  const distanceToCenter = baseTone - 50;
-  const delta = distanceToCenter * contrastLevel * adjustmentFactor;
-  const adjustedTone = baseTone + delta;
-  return Math.max(0, Math.min(100, adjustedTone));
-}
 var schemesMap = {
   tonalSpot: SchemeTonalSpot,
   monochrome: SchemeMonochrome,
@@ -41,11 +34,39 @@ var schemesMap = {
 var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
 var DEFAULT_CUSTOM_COLORS = [];
-var DEFAULT_CONTRAST_ALL_COLORS = false;
-var DEFAULT_ADAPTIVE_SHADES = false;
 var DEFAULT_BLEND = true;
-var DEFAULT_CONTRAST_ADJUSTMENT_FACTOR = 0.2;
+var DEFAULT_PREFIX = "md";
 var STANDARD_TONES = [
+  0,
+  4,
+  5,
+  6,
+  10,
+  12,
+  15,
+  17,
+  20,
+  22,
+  24,
+  25,
+  30,
+  35,
+  40,
+  50,
+  60,
+  70,
+  80,
+  87,
+  90,
+  92,
+  94,
+  95,
+  96,
+  98,
+  99,
+  100
+];
+var MTB_TONES = [
   0,
   5,
   10,
@@ -85,57 +106,60 @@ var schemeToVariant = {
   fidelity: Variant.FIDELITY,
   content: Variant.CONTENT
 };
-var tokenNames = [
-  "background",
-  "error",
-  "errorContainer",
-  "inverseOnSurface",
-  "inversePrimary",
-  "inverseSurface",
-  "onBackground",
-  "onError",
-  "onErrorContainer",
-  "onPrimary",
-  "onPrimaryContainer",
-  "onPrimaryFixed",
-  "onPrimaryFixedVariant",
-  "onSecondary",
-  "onSecondaryContainer",
-  "onSecondaryFixed",
-  "onSecondaryFixedVariant",
-  "onSurface",
-  "onSurfaceVariant",
-  "onTertiary",
-  "onTertiaryContainer",
-  "onTertiaryFixed",
-  "onTertiaryFixedVariant",
-  "outline",
-  "outlineVariant",
-  "primary",
-  "primaryContainer",
-  "primaryFixed",
-  "primaryFixedDim",
-  "scrim",
-  "secondary",
-  "secondaryContainer",
-  "secondaryFixed",
-  "secondaryFixedDim",
-  "shadow",
-  "surface",
-  "surfaceBright",
-  "surfaceContainer",
-  "surfaceContainerHigh",
-  "surfaceContainerHighest",
-  "surfaceContainerLow",
-  "surfaceContainerLowest",
-  "surfaceDim",
-  "surfaceTint",
-  "surfaceVariant",
-  "tertiary",
-  "tertiaryContainer",
-  "tertiaryFixed",
-  "tertiaryFixedDim"
-];
+var tokenDescriptions = {
+  background: "Default background color for screens and large surfaces.",
+  error: "Color for error states, used on elements like error text and icons.",
+  errorContainer: "Fill color for error container elements like error banners.",
+  inverseOnSurface: "Color for text and icons on inverse surface backgrounds.",
+  inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.",
+  inverseSurface: "Background for elements that require reverse contrast, such as snackbars.",
+  onBackground: "Color for text and icons displayed on the background.",
+  onError: "Color for text and icons on error-colored elements.",
+  onErrorContainer: "Color for text and icons on error container elements.",
+  onPrimary: "Color for text and icons on primary-colored elements like filled buttons.",
+  onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.",
+  onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.",
+  onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.",
+  onSecondary: "Color for text and icons on secondary-colored elements.",
+  onSecondaryContainer: "Color for text and icons on secondary container elements.",
+  onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.",
+  onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.",
+  onSurface: "High-emphasis color for text and icons on surface backgrounds.",
+  onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.",
+  onTertiary: "Color for text and icons on tertiary-colored elements.",
+  onTertiaryContainer: "Color for text and icons on tertiary container elements.",
+  onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.",
+  onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.",
+  outline: "Subtle color for borders and dividers to create visual separation.",
+  outlineVariant: "Lower-emphasis border color used for decorative dividers.",
+  primary: "Main brand color, used for key components like filled buttons and active states.",
+  primaryContainer: "Fill color for large primary elements like cards and tonal buttons.",
+  primaryFixed: "Fixed primary color that stays the same in light and dark themes.",
+  primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.",
+  scrim: "Color overlay for modals and dialogs to obscure background content.",
+  secondary: "Accent color for less prominent elements like filter chips and selections.",
+  secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.",
+  secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.",
+  secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.",
+  shadow: "Color for elevation shadows applied to surfaces and components.",
+  surface: "Default surface color for cards, sheets, and dialogs.",
+  surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.",
+  surfaceContainer: "Middle-emphasis container color for grouping related content.",
+  surfaceContainerHigh: "Higher-emphasis container color for elements like cards.",
+  surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.",
+  surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.",
+  surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.",
+  surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.",
+  surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.",
+  surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.",
+  tertiary: "Third accent color for complementary elements that balance primary and secondary.",
+  tertiaryContainer: "Fill color for tertiary container elements like complementary cards.",
+  tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
+  tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
+};
+var tokenNames = Object.keys(
+  tokenDescriptions
+);
 function toRecord(arr, getEntry) {
   return Object.fromEntries(arr.map(getEntry));
 }
@@ -148,7 +172,7 @@ function getPalette(palettes, colorName) {
   }
   return palette;
 }
-function mergeBaseAndCustomColors(scheme, customColors, colorPalettes, contrastAllColors) {
+function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
     const dynamicColor = MaterialDynamicColors[tokenName];
     const argb = dynamicColor.getArgb(scheme);
@@ -158,9 +182,8 @@ function mergeBaseAndCustomColors(scheme, customColors, colorPalettes, contrastA
   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);
+    const getTone = (baseTone) => (_s) => {
+      return baseTone;
     };
     const colorDynamicColor = new DynamicColor(
       colorname,
@@ -227,8 +250,7 @@ function builder(hexSource, {
   neutralVariant,
   error,
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
-  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS,
-  adaptiveShades = DEFAULT_ADAPTIVE_SHADES
+  prefix = DEFAULT_PREFIX
 } = {}) {
   const sourceArgb = argbFromHex(hexSource);
   const sourceHct = Hct.fromInt(sourceArgb);
@@ -328,15 +350,49 @@ function builder(hexSource, {
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
     customColors,
-    colorPalettes,
-    contrastAllColors
+    colorPalettes
   );
   const mergedColorsDark = mergeBaseAndCustomColors(
     darkScheme,
     customColors,
-    colorPalettes,
-    contrastAllColors
+    colorPalettes
   );
+  const schemePalettes = [
+    ["primary", lightScheme.primaryPalette],
+    ["secondary", lightScheme.secondaryPalette],
+    ["tertiary", lightScheme.tertiaryPalette],
+    ["error", lightScheme.errorPalette],
+    ["neutral", lightScheme.neutralPalette],
+    ["neutral-variant", lightScheme.neutralVariantPalette]
+  ];
+  function buildTokenToPaletteMap(schemePalettes2, scheme2) {
+    const result = {};
+    for (const propName of Object.getOwnPropertyNames(MaterialDynamicColors)) {
+      const dc = MaterialDynamicColors[propName];
+      if (!(dc instanceof DynamicColor)) continue;
+      const palette = dc.palette(scheme2);
+      for (const [palName, pal] of schemePalettes2) {
+        if (palette === pal) {
+          result[propName] = palName;
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  const tokenToPalette = buildTokenToPaletteMap(schemePalettes, lightScheme);
+  const allPaletteNamesKebab = new Set(Object.keys(allPalettes).map(kebabCase));
+  function deriveCustomPaletteName(tokenName) {
+    let baseName = tokenName;
+    if (/^on[A-Z]/.test(baseName) && baseName.length > 2) {
+      baseName = baseName.charAt(2).toLowerCase() + baseName.slice(3);
+    }
+    if (baseName.endsWith("Container")) {
+      baseName = baseName.slice(0, -"Container".length);
+    }
+    const kebab = kebabCase(baseName);
+    return allPaletteNamesKebab.has(kebab) ? kebab : void 0;
+  }
   return {
     //
     //  ██████ ███████ ███████
@@ -346,45 +402,55 @@ function builder(hexSource, {
     //  ██████ ███████ ███████
     //
     toCss() {
-      function cssVar(colorName, colorValue) {
-        const name = `--mcu-${kebabCase(colorName)}`;
+      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));
+            if (!lookup[hex]) lookup[hex] = [];
+            lookup[hex].push({ paletteName, tone });
+          }
+        }
+        return lookup;
+      }
+      function sysColorVar(colorName, colorValue, lookup) {
+        const name = `--${prefix}-sys-color-${kebabCase(colorName)}`;
+        const hex = hexFromArgb(colorValue);
+        const matches = lookup[hex];
+        if (matches && matches.length > 0) {
+          const preferred = tokenToPalette[colorName] ?? deriveCustomPaletteName(colorName);
+          const match = (preferred ? matches.find((m) => m.paletteName === preferred) : void 0) ?? matches[0];
+          return `${name}:var(--${prefix}-ref-palette-${match.paletteName}-${match.tone});`;
+        }
+        return `${name}:${hex};`;
+      }
+      function toCssVars(mergedColors, lookup) {
+        return Object.entries(mergedColors).map(([name, value]) => sysColorVar(name, value, lookup)).join(" ");
+      }
+      function refPaletteVar(paletteName, tone, colorValue) {
+        const name = `--${prefix}-ref-palette-${paletteName}-${tone}`;
         const value = hexFromArgb(colorValue);
         return `${name}:${value};`;
       }
-      function toCssVars(mergedColors) {
-        return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
-      }
-      function generateTonalPaletteVars(paletteName, palette, scheme2, applyContrast, adaptiveShades2) {
+      function generateTonalPaletteVars(paletteName, palette) {
         return STANDARD_TONES.map((tone) => {
-          let toneToUse = tone;
-          if (adaptiveShades2 && scheme2.isDark) {
-            toneToUse = 100 - tone;
-          }
-          if (applyContrast) {
-            toneToUse = adjustToneForContrast(toneToUse, scheme2.contrastLevel);
-          }
-          const color = palette.tone(toneToUse);
-          return cssVar(`${paletteName}-${tone}`, color);
+          const color = palette.tone(tone);
+          return refPaletteVar(paletteName, tone, color);
         }).join(" ");
       }
-      function generateTonalVars(s) {
+      function generateTonalVars() {
         return Object.entries(allPalettes).map(
-          ([name, palette]) => generateTonalPaletteVars(
-            kebabCase(name),
-            palette,
-            s,
-            contrastAllColors,
-            adaptiveShades
-          )
+          ([name, palette]) => generateTonalPaletteVars(kebabCase(name), palette)
         ).join(" ");
       }
-      const lightVars = toCssVars(mergedColorsLight);
-      const darkVars = toCssVars(mergedColorsDark);
-      const lightTonalVars = generateTonalVars(lightScheme);
-      const darkTonalVars = generateTonalVars(darkScheme);
+      const refPaletteLookup = buildRefPaletteLookup();
+      const lightVars = toCssVars(mergedColorsLight, refPaletteLookup);
+      const darkVars = toCssVars(mergedColorsDark, refPaletteLookup);
+      const tonalVars = generateTonalVars();
       return `
-:root { ${lightVars} ${lightTonalVars} }
-.dark { ${darkVars} ${adaptiveShades ? darkTonalVars : lightTonalVars} }
+:root { ${lightVars} ${tonalVars} }
+.dark { ${darkVars} ${tonalVars} }
 `;
     },
     //
@@ -527,7 +593,7 @@ function builder(hexSource, {
         for (const name of RAW_PALETTE_NAMES) {
           const palette = rawPalettes[name];
           const tones = {};
-          for (const tone of STANDARD_TONES) {
+          for (const tone of MTB_TONES) {
             tones[tone.toString()] = hexFromArgb(
               palette.tone(tone)
             ).toUpperCase();
@@ -599,44 +665,82 @@ function builder(hexSource, {
           }
         };
       }
-      function buildFigmaSchemeTokens(mergedColors) {
-        const tokens = {};
-        for (const [name, argb] of Object.entries(mergedColors)) {
-          tokens[startCase(name)] = figmaToken(argb);
-        }
-        return tokens;
-      }
-      function buildFigmaPaletteTokens(isDark) {
+      function buildRefPaletteTokens() {
         const palettes = {};
         for (const [name, palette] of Object.entries(allPalettes)) {
           const tones = {};
           for (const tone of STANDARD_TONES) {
-            let toneToUse = tone;
-            if (adaptiveShades && isDark) {
-              toneToUse = 100 - tone;
-            }
-            if (contrastAllColors) {
-              toneToUse = adjustToneForContrast(toneToUse, contrast);
-            }
-            const argb = palette.tone(toneToUse);
+            const argb = palette.tone(tone);
             tones[tone.toString()] = figmaToken(argb);
           }
           palettes[startCase(name)] = tones;
         }
         return palettes;
       }
-      function buildModeFile(modeName, mergedColors, isDark) {
+      function findToneInPalette(hex, paletteName, tones) {
+        for (const [tone, token] of Object.entries(tones)) {
+          if (token.$value.hex === hex) {
+            return `{ref.palette.${paletteName}.${tone}}`;
+          }
+        }
+        return null;
+      }
+      function findAlias(hex, tokenName, refPalettes2) {
+        const preferredPaletteKebab = tokenToPalette[tokenName] ?? deriveCustomPaletteName(tokenName);
+        const preferredPalette = preferredPaletteKebab ? startCase(preferredPaletteKebab) : void 0;
+        if (preferredPalette && refPalettes2[preferredPalette]) {
+          const match = findToneInPalette(
+            hex,
+            preferredPalette,
+            refPalettes2[preferredPalette]
+          );
+          if (match) return match;
+        }
+        for (const [palName, tones] of Object.entries(refPalettes2)) {
+          const match = findToneInPalette(hex, palName, tones);
+          if (match) return match;
+        }
+        return null;
+      }
+      function resolveModeValue(argb, tokenName, refPalettes2) {
+        const hex = hexFromArgb(argb).toUpperCase();
+        return findAlias(hex, tokenName, refPalettes2) ?? argbToFigmaColorValue(argb);
+      }
+      function buildSysColorTokens(mergedColors, refPalettes2) {
+        const tokens = {};
+        for (const [name, argb] of Object.entries(mergedColors)) {
+          const description = tokenDescriptions[name];
+          const cssVar = `--${prefix}-sys-color-${kebabCase(name)}`;
+          const value = resolveModeValue(argb, name, refPalettes2);
+          tokens[startCase(name)] = {
+            $type: "color",
+            $value: value,
+            ...description ? { $description: description } : {},
+            $extensions: {
+              "com.figma.scopes": ["ALL_SCOPES"],
+              "css.variable": cssVar
+            }
+          };
+        }
+        return tokens;
+      }
+      const refPalettes = buildRefPaletteTokens();
+      function buildModeFile(modeName, mergedColors) {
         return {
-          Schemes: buildFigmaSchemeTokens(mergedColors),
-          Palettes: buildFigmaPaletteTokens(isDark),
+          ref: {
+            palette: refPalettes
+          },
+          sys: {
+            color: buildSysColorTokens(mergedColors, refPalettes)
+          },
           $extensions: {
             "com.figma.modeName": modeName
           }
         };
       }
       return {
-        "Light.tokens.json": buildModeFile("Light", mergedColorsLight, false),
-        "Dark.tokens.json": buildModeFile("Dark", mergedColorsDark, true)
+        "Light.tokens.json": buildModeFile("Light", mergedColorsLight),
+        "Dark.tokens.json": buildModeFile("Dark", mergedColorsDark)
       };
     },
     //
@@ -742,8 +846,7 @@ function Mcu({
   error,
   colorMatch = DEFAULT_COLOR_MATCH,
   customColors = DEFAULT_CUSTOM_COLORS,
-  contrastAllColors = DEFAULT_CONTRAST_ALL_COLORS,
-  adaptiveShades = DEFAULT_ADAPTIVE_SHADES,
+  prefix = DEFAULT_PREFIX,
   children
 }) {
   const config = useMemo2(
@@ -759,9 +862,7 @@ function Mcu({
       error,
       colorMatch,
       customColors,
-      // extras features
-      contrastAllColors,
-      adaptiveShades
+      prefix
     }),
     [
       contrast,
@@ -775,8 +876,7 @@ function Mcu({
       neutralVariant,
       error,
       colorMatch,
-      contrastAllColors,
-      adaptiveShades
+      prefix
     ]
   );
   return /* @__PURE__ */ jsx2(McuProvider, { ...config, styleId: mcuStyleId, children });