@bug-on/m3-expressive 1.1.0 → 1.2.0

package/dist/core.mjs

@@ -2,7 +2,7 @@
 import * as React11 from 'react';
 import { createContext, useState, useEffect, useRef, useCallback, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
+import { hexFromArgb, Hct, SchemeExpressive, SchemeNeutral, SchemeMonochrome, SchemeContent, SchemeFidelity, SchemeVibrant, SchemeTonalSpot } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { LazyMotion, domMax, m, useMotionValue, animate, useAnimationFrame, AnimatePresence, useReducedMotion } from 'motion/react';
@@ -151,66 +151,110 @@ function resolveMode(mode) {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function generateM3Theme(sourceColorHex, mode = "light") {
-  const sourceColor = argbFromHex(sourceColorHex);
-  const theme = themeFromSourceColor(sourceColor);
-  const scheme = mode === "light" ? theme.schemes.light : theme.schemes.dark;
-  const palettes = theme.palettes;
-  const tone = (palette, t) => hexFromArgb(palette.tone(t));
+function createDynamicScheme(sourceColorHex, isDark, variant = "expressive", contrastLevel = 0) {
+  const hct = Hct.fromInt(argbFromHex(sourceColorHex));
+  const spec = "2025";
+  switch (variant) {
+    case "tonal_spot":
+      return new SchemeTonalSpot(hct, isDark, contrastLevel, spec);
+    case "vibrant":
+      return new SchemeVibrant(hct, isDark, contrastLevel, spec);
+    case "fidelity":
+      return new SchemeFidelity(hct, isDark, contrastLevel, spec);
+    case "content":
+      return new SchemeContent(hct, isDark, contrastLevel, spec);
+    case "monochrome":
+      return new SchemeMonochrome(hct, isDark, contrastLevel, spec);
+    case "neutral":
+      return new SchemeNeutral(hct, isDark, contrastLevel, spec);
+    default:
+      return new SchemeExpressive(hct, isDark, contrastLevel, spec);
+  }
+}
+function argbFromHex(hex) {
+  const sanitized = hex.replace(/^#/, "");
+  const r = Number.parseInt(sanitized.substring(0, 2), 16);
+  const g = Number.parseInt(sanitized.substring(2, 4), 16);
+  const b = Number.parseInt(sanitized.substring(4, 6), 16);
+  return (4278190080 | r << 16 | g << 8 | b) >>> 0;
+}
+function generateM3Theme(sourceColorHex, mode = "light", options = {}) {
+  const { variant = "expressive", contrastLevel = 0 } = options;
+  const isDark = mode === "dark";
+  const scheme = createDynamicScheme(
+    sourceColorHex,
+    isDark,
+    variant,
+    contrastLevel
+  );
+  const hex = (argb) => hexFromArgb(argb);
   return {
-    primary: hexFromArgb(scheme.primary),
-    onPrimary: hexFromArgb(scheme.onPrimary),
-    primaryContainer: hexFromArgb(scheme.primaryContainer),
-    onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
-    inversePrimary: hexFromArgb(scheme.inversePrimary),
-    primaryFixed: tone(palettes.primary, 90),
-    primaryFixedDim: tone(palettes.primary, 80),
-    onPrimaryFixed: tone(palettes.primary, 10),
-    onPrimaryFixedVariant: tone(palettes.primary, 30),
-    secondary: hexFromArgb(scheme.secondary),
-    onSecondary: hexFromArgb(scheme.onSecondary),
-    secondaryContainer: hexFromArgb(scheme.secondaryContainer),
-    onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
-    secondaryFixed: tone(palettes.secondary, 90),
-    secondaryFixedDim: tone(palettes.secondary, 80),
-    onSecondaryFixed: tone(palettes.secondary, 10),
-    onSecondaryFixedVariant: tone(palettes.secondary, 30),
-    tertiary: hexFromArgb(scheme.tertiary),
-    onTertiary: hexFromArgb(scheme.onTertiary),
-    tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
-    onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
-    tertiaryFixed: tone(palettes.tertiary, 90),
-    tertiaryFixedDim: tone(palettes.tertiary, 80),
-    onTertiaryFixed: tone(palettes.tertiary, 10),
-    onTertiaryFixedVariant: tone(palettes.tertiary, 30),
-    error: hexFromArgb(scheme.error),
-    onError: hexFromArgb(scheme.onError),
-    errorContainer: hexFromArgb(scheme.errorContainer),
-    onErrorContainer: hexFromArgb(scheme.onErrorContainer),
-    surface: hexFromArgb(scheme.surface),
-    onSurface: hexFromArgb(scheme.onSurface),
-    surfaceVariant: hexFromArgb(scheme.surfaceVariant),
-    onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
-    surfaceTint: hexFromArgb(scheme.primary),
-    // Surface container roles from neutral palette tones
-    surfaceContainerLowest: mode === "light" ? tone(palettes.neutral, 100) : tone(palettes.neutral, 4),
-    surfaceContainerLow: mode === "light" ? tone(palettes.neutral, 96) : tone(palettes.neutral, 10),
-    surfaceContainer: mode === "light" ? tone(palettes.neutral, 94) : tone(palettes.neutral, 12),
-    surfaceContainerHigh: mode === "light" ? tone(palettes.neutral, 92) : tone(palettes.neutral, 17),
-    surfaceContainerHighest: mode === "light" ? tone(palettes.neutral, 90) : tone(palettes.neutral, 22),
-    inverseSurface: hexFromArgb(scheme.inverseSurface),
-    inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
-    background: hexFromArgb(scheme.background),
-    onBackground: hexFromArgb(scheme.onBackground),
-    outline: hexFromArgb(scheme.outline),
-    outlineVariant: hexFromArgb(scheme.outlineVariant),
-    shadow: hexFromArgb(scheme.shadow),
-    scrim: hexFromArgb(scheme.scrim)
+    // Primary
+    primary: hex(scheme.primary),
+    onPrimary: hex(scheme.onPrimary),
+    primaryContainer: hex(scheme.primaryContainer),
+    onPrimaryContainer: hex(scheme.onPrimaryContainer),
+    inversePrimary: hex(scheme.inversePrimary),
+    primaryFixed: hex(scheme.primaryFixed),
+    primaryFixedDim: hex(scheme.primaryFixedDim),
+    onPrimaryFixed: hex(scheme.onPrimaryFixed),
+    onPrimaryFixedVariant: hex(scheme.onPrimaryFixedVariant),
+    primaryDim: hex(scheme.primaryDim),
+    // Secondary
+    secondary: hex(scheme.secondary),
+    onSecondary: hex(scheme.onSecondary),
+    secondaryContainer: hex(scheme.secondaryContainer),
+    onSecondaryContainer: hex(scheme.onSecondaryContainer),
+    secondaryFixed: hex(scheme.secondaryFixed),
+    secondaryFixedDim: hex(scheme.secondaryFixedDim),
+    onSecondaryFixed: hex(scheme.onSecondaryFixed),
+    onSecondaryFixedVariant: hex(scheme.onSecondaryFixedVariant),
+    secondaryDim: hex(scheme.secondaryDim),
+    // Tertiary
+    tertiary: hex(scheme.tertiary),
+    onTertiary: hex(scheme.onTertiary),
+    tertiaryContainer: hex(scheme.tertiaryContainer),
+    onTertiaryContainer: hex(scheme.onTertiaryContainer),
+    tertiaryFixed: hex(scheme.tertiaryFixed),
+    tertiaryFixedDim: hex(scheme.tertiaryFixedDim),
+    onTertiaryFixed: hex(scheme.onTertiaryFixed),
+    onTertiaryFixedVariant: hex(scheme.onTertiaryFixedVariant),
+    tertiaryDim: hex(scheme.tertiaryDim),
+    // Error
+    error: hex(scheme.error),
+    onError: hex(scheme.onError),
+    errorContainer: hex(scheme.errorContainer),
+    onErrorContainer: hex(scheme.onErrorContainer),
+    // Surface
+    surface: hex(scheme.surface),
+    onSurface: hex(scheme.onSurface),
+    surfaceVariant: hex(scheme.surfaceVariant),
+    onSurfaceVariant: hex(scheme.onSurfaceVariant),
+    surfaceTint: hex(scheme.surfaceTint),
+    surfaceDim: hex(scheme.surfaceDim),
+    surfaceBright: hex(scheme.surfaceBright),
+    surfaceContainerLowest: hex(scheme.surfaceContainerLowest),
+    surfaceContainerLow: hex(scheme.surfaceContainerLow),
+    surfaceContainer: hex(scheme.surfaceContainer),
+    surfaceContainerHigh: hex(scheme.surfaceContainerHigh),
+    surfaceContainerHighest: hex(scheme.surfaceContainerHighest),
+    // Inverse
+    inverseSurface: hex(scheme.inverseSurface),
+    inverseOnSurface: hex(scheme.inverseOnSurface),
+    // Background
+    background: hex(scheme.background),
+    onBackground: hex(scheme.onBackground),
+    // Outline
+    outline: hex(scheme.outline),
+    outlineVariant: hex(scheme.outlineVariant),
+    // Utility
+    shadow: hex(scheme.shadow),
+    scrim: hex(scheme.scrim)
   };
 }
-function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
+function applyTheme(sourceColorHex, mode = "light", root = document.documentElement, options = {}) {
   const resolved = resolveMode(mode);
-  const colors = generateM3Theme(sourceColorHex, resolved);
+  const colors = generateM3Theme(sourceColorHex, resolved, options);
   for (const [key, value] of Object.entries(colors)) {
     const kebabKey = key.replace(/[A-Z]/g, (m7) => `-${m7.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
@@ -2469,6 +2513,8 @@ function MD3ThemeProvider({
   sourceColor: initialSourceColor = "#6750A4",
   defaultMode = "light",
   persistToLocalStorage = false,
+  variant = "expressive",
+  contrastLevel = 0,
   typography: typographyProp,
   fontFamily,
   fontVariationAxes,
@@ -2477,6 +2523,17 @@ function MD3ThemeProvider({
   const [sourceColor, setSourceColor] = useState(initialSourceColor);
   const [mode, setMode] = useState(defaultMode);
   const [isHydrated, setIsHydrated] = useState(!persistToLocalStorage);
+  const [systemMode, setSystemMode] = useState("light");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateSystemMode = () => {
+      setSystemMode(mediaQuery.matches ? "dark" : "light");
+    };
+    updateSystemMode();
+    mediaQuery.addEventListener("change", updateSystemMode);
+    return () => mediaQuery.removeEventListener("change", updateSystemMode);
+  }, []);
   useEffect(() => {
     if (!persistToLocalStorage) return;
     const savedColor = localStorage.getItem(STORAGE_KEY_COLOR);
@@ -2488,25 +2545,37 @@ function MD3ThemeProvider({
       setMode(savedMode);
     setIsHydrated(true);
   }, [persistToLocalStorage]);
+  const effectiveMode = mode === "system" ? systemMode : mode;
   useEffect(() => {
     if (!isHydrated) return;
-    applyTheme(sourceColor, mode);
+    applyTheme(sourceColor, effectiveMode, document.documentElement, {
+      variant,
+      contrastLevel
+    });
     if (persistToLocalStorage) {
       localStorage.setItem(STORAGE_KEY_COLOR, sourceColor);
       localStorage.setItem(STORAGE_KEY_MODE, mode);
     }
-  }, [sourceColor, mode, persistToLocalStorage, isHydrated]);
-  useEffect(() => {
-    if (mode !== "system" || typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => applyTheme(sourceColor, "system");
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [mode, sourceColor]);
-  const effectiveMode = resolveMode(mode);
+  }, [
+    sourceColor,
+    mode,
+    effectiveMode,
+    persistToLocalStorage,
+    isHydrated,
+    variant,
+    contrastLevel
+  ]);
   const themeValue = useMemo(
-    () => ({ sourceColor, setSourceColor, mode, setMode, effectiveMode }),
-    [sourceColor, mode, effectiveMode]
+    () => ({
+      sourceColor,
+      setSourceColor,
+      mode,
+      setMode,
+      effectiveMode,
+      variant,
+      contrastLevel
+    }),
+    [sourceColor, mode, effectiveMode, variant, contrastLevel]
   );
   const typographyValue = useMemo(() => {
     if (typographyProp) return typographyProp;