@rific/auto-paper 0.13.4 → 0.14.0

package/dist/index.mjs

@@ -244,13 +244,13 @@ var getRgb = (value) => {
 var getHex = (value) => {
   const rgb = getRgb(value);
   if (!rgb) return null;
-  const toHex = (n) => {
+  const toHex2 = (n) => {
     const hex = Math.round(n).toString(16);
     return hex.length === 1 ? "0" + hex : hex;
   };
-  const hexString = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+  const hexString = `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}`;
   if (rgb.a !== void 0) {
-    return `${hexString}${toHex(rgb.a * 255)}`;
+    return `${hexString}${toHex2(rgb.a * 255)}`;
   }
   return hexString;
 };
@@ -432,11 +432,11 @@ function hslToHex(h, s, l) {
     g = 0;
     b = x;
   }
-  const toHex = (value) => {
+  const toHex2 = (value) => {
     const hex = Math.round((value + m) * 255).toString(16);
     return hex.length === 1 ? `0${hex}` : hex;
   };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  return `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
 }
 
 // src/useComputedTheme.ts
@@ -449,7 +449,7 @@ var SEMANTIC_BASE_COLORS = {
   warning: "#A15C00",
   danger: "#B00020"
 };
-function useComputedTheme(appearance, color, harmony = "split-complementary") {
+function useComputedTheme(appearance, color, harmony = "split-complementary", paletteTone) {
   const [theme, setTheme] = useState(null);
   const primaryInput = typeof color === "string" ? color : color.primary;
   const secondaryInput = typeof color === "string" ? null : color.secondary;
@@ -482,7 +482,8 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
         onDangerContainer: dangerRoles.onContainer
       }
     };
-    const palette = secondaryInput !== null && tertiaryInput !== null ? { primary: normalizeExplicitColor(primaryInput), secondary: normalizeExplicitColor(secondaryInput), tertiary: normalizeExplicitColor(tertiaryInput) } : getTriadicPalette(primaryInput, harmony);
+    const untoned = secondaryInput !== null && tertiaryInput !== null ? { primary: normalizeExplicitColor(primaryInput), secondary: normalizeExplicitColor(secondaryInput), tertiary: normalizeExplicitColor(tertiaryInput) } : getTriadicPalette(primaryInput, harmony);
+    const palette = paletteTone ? { primary: paletteTone(untoned.primary, base.dark), secondary: paletteTone(untoned.secondary, base.dark), tertiary: paletteTone(untoned.tertiary, base.dark) } : untoned;
     const primaryRoles = getColorRoles(palette.primary, surface);
     _theme.colors.primary = primaryRoles.color;
     _theme.colors.onPrimary = primaryRoles.onColor;
@@ -515,7 +516,7 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
       level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
     };
     setTheme(_theme);
-  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
+  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony, paletteTone]);
   useEffect(() => {
     computeTheme();
   }, [computeTheme]);
@@ -536,15 +537,17 @@ var ReanimatedModuleContext = createContext2(void 0);
 var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
 var MaskedViewModuleContext = createContext2(void 0);
 var useMaskedViewModule = () => useContext3(MaskedViewModuleContext);
+var PaletteToneContext = createContext2(void 0);
+var usePaletteTone = () => useContext3(PaletteToneContext);
 var StatusBarEnabledContext = createContext2(true);
 var useStatusBarEnabled = () => useContext3(StatusBarEnabledContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }) {
-  return /* @__PURE__ */ jsx(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style, children }) });
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, paletteTone, reanimated, statusBar, statusBarProps, style }) {
+  return /* @__PURE__ */ jsx(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ jsx(ThemeProviderBody, { defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, paletteTone, reanimated, statusBar, statusBarProps, style, children }) });
 }
 var ThemeSettingsProvider = themeSettingsProvider;
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar = true, statusBarProps, style }) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, paletteTone, reanimated, statusBar = true, statusBarProps, style }) {
   const { settings } = useThemeSettingsInternal();
-  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony, paletteTone);
   const theme = useMemo(() => {
     if (!computedTheme) return null;
     if (!fontFamily) return computedTheme;
@@ -560,7 +563,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
   if (!theme) return null;
   return /* @__PURE__ */ jsxs(PaperProvider, { theme, children: [
     statusBar && /* @__PURE__ */ jsx(StatusBar, { barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ jsx(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx(Portal.Host, { children: /* @__PURE__ */ jsx(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
+    /* @__PURE__ */ jsx(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ jsx(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ jsx(PaletteToneContext.Provider, { value: paletteTone, children: /* @__PURE__ */ jsx(Portal.Host, { children: /* @__PURE__ */ jsx(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) }) })
   ] });
 }
 var styles = StyleSheet.create({
@@ -613,11 +616,15 @@ var AutoAppearancePicker = (props) => {
   return /* @__PURE__ */ jsx4(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
 };
 
+// src/components/AutoPalettePicker.tsx
+import { useCallback as useCallback2 } from "react";
+import { useTheme as useTheme6 } from "react-native-paper";
+
 // src/utils/resolveSeedColor.ts
 var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
 
 // src/components/PalettePicker.tsx
-import { useState as useState5 } from "react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 import { StyleSheet as StyleSheet5, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
 import { Icon as Icon2, TouchableRipple as TouchableRipple2, useTheme as useTheme5 } from "react-native-paper";
 
@@ -863,19 +870,25 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ jsx9(View5, { style: [styles4.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ jsx9(View5, { style: [styles4.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ jsx9(View5, { style: styles4.halfMask, children: /* @__PURE__ */ jsx9(View5, { style: [styles4.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ jsx9(View5, { style: [styles4.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp, previewColor }) => {
   const blur = useBlur(blurProp);
   const { colors: themeColors } = useTheme5();
   const [open, setOpen] = useState5(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
+  const shade = useMemo2(
+    () => (palette) => previewColor ? { primary: previewColor(palette.primary), secondary: previewColor(palette.secondary), tertiary: previewColor(palette.tertiary) } : palette,
+    [previewColor]
+  );
+  const triggerPalette = shade(getTriadicPalette(value, harmony));
+  const swatchPalettes = useMemo2(() => colors.map(({ value: hex }) => shade(getTriadicPalette(hex, harmony))), [colors, harmony, shade]);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx9(TouchableRipple2, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles4.triggerContent, children: [
-      /* @__PURE__ */ jsx9(Pie, { palette: getTriadicPalette(value, harmony), weights }),
-      /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx9(Icon2, { source: "palette", size: 20, color: getContrastColor(value) }) })
+      /* @__PURE__ */ jsx9(Pie, { palette: triggerPalette, weights }),
+      /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(triggerPalette.primary, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx9(Icon2, { source: "palette", size: 20, color: getContrastColor(triggerPalette.primary) }) })
     ] }) }),
     /* @__PURE__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsxs6(Dialog.Content, { children: [
       onHarmonyChange && /* @__PURE__ */ jsx9(View5, { style: styles4.harmonyRow, children: /* @__PURE__ */ jsx9(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
-      /* @__PURE__ */ jsx9(View5, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
+      /* @__PURE__ */ jsx9(View5, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }, index) => /* @__PURE__ */ jsxs6(
         TouchableOpacity2,
         {
           onPress: () => {
@@ -884,8 +897,8 @@ var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmo
           },
           style: [styles4.swatch, { height: size, width: size }],
           children: [
-            /* @__PURE__ */ jsx9(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-            /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx9(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
+            /* @__PURE__ */ jsx9(Pie, { palette: swatchPalettes[index], weights, size }),
+            /* @__PURE__ */ jsx9(View5, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(swatchPalettes[index].primary, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx9(Icon2, { source: "check", size: 20, color: getContrastColor(swatchPalettes[index].primary) }) })
           ]
         },
         hex
@@ -912,13 +925,16 @@ var styles4 = StyleSheet5.create({
 import { jsx as jsx10 } from "react/jsx-runtime";
 var AutoPalettePicker = (props) => {
   const { settings, set } = useThemeSettings();
-  return /* @__PURE__ */ jsx10(PalettePicker, { ...props, value: resolveSeedColor(settings.color), onChange: (color) => set({ color }), harmony: settings.harmony, onHarmonyChange: (harmony) => set({ harmony }) });
+  const tone = usePaletteTone();
+  const { dark } = useTheme6();
+  const toned = useCallback2((color) => tone(color, dark), [tone, dark]);
+  return /* @__PURE__ */ jsx10(PalettePicker, { ...props, value: resolveSeedColor(settings.color), onChange: (color) => set({ color }), harmony: settings.harmony, onHarmonyChange: (harmony) => set({ harmony }), previewColor: tone ? toned : void 0 });
 };
 
 // src/components/BottomNavigation.tsx
 import { useEffect as useEffect4 } from "react";
 import { Platform as Platform3 } from "react-native";
-import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
+import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme7 } from "react-native-paper";
 
 // src/navigation-bar.ts
 var setNavigationBarStyle = (navigationBar, dark) => {
@@ -929,7 +945,7 @@ var setNavigationBarStyle = (navigationBar, dark) => {
 // src/components/BottomNavigation.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 function useNavigationBarSync() {
-  const theme = useTheme6();
+  const theme = useTheme7();
   const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect4(() => {
     if (Platform3.OS !== "android") return;
@@ -959,11 +975,11 @@ function Button(props) {
 }
 
 // src/components/Chip.tsx
-import { Chip as PaperChip, useTheme as useTheme7 } from "react-native-paper";
+import { Chip as PaperChip, useTheme as useTheme8 } from "react-native-paper";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function Chip({ variant, style, selectedColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = useTheme7();
+  const { colors } = useTheme8();
   const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
   const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
   return /* @__PURE__ */ jsx13(PaperChip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
@@ -978,7 +994,7 @@ function FAB(props) {
 }
 
 // src/components/FadingScrollView.tsx
-import { useCallback as useCallback2, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback as useCallback3, useRef as useRef2, useState as useState6 } from "react";
 import { Platform as Platform4, ScrollView, StyleSheet as StyleSheet6, View as View6 } from "react-native";
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var SCROLL_FADE_HEIGHT = 24;
@@ -986,7 +1002,7 @@ function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, on
   const MaskedView = useMaskedViewModule();
   const sizes = useRef2({ viewport: 0, content: 0, offset: 0 });
   const [edges, setEdges] = useState6(NO_EDGES);
-  const update = useCallback2(() => {
+  const update = useCallback3(() => {
     const { viewport, content, offset } = sizes.current;
     const above = offset > 1;
     const below = content - viewport - offset > 1;
@@ -1060,11 +1076,11 @@ var styles5 = StyleSheet6.create({
 });
 
 // src/components/IconButton.tsx
-import { IconButton as PaperIconButton, useTheme as useTheme8 } from "react-native-paper";
+import { IconButton as PaperIconButton, useTheme as useTheme9 } from "react-native-paper";
 import { jsx as jsx16 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = useTheme8();
+  const { colors } = useTheme9();
   const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
   const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
   return /* @__PURE__ */ jsx16(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
@@ -1073,7 +1089,7 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 // src/components/Menu.tsx
 import { useEffect as useEffect5, useState as useState7 } from "react";
 import { Animated as Animated2, Easing as Easing2, Platform as Platform5, StyleSheet as StyleSheet7 } from "react-native";
-import { Menu as PaperMenu, useTheme as useTheme9 } from "react-native-paper";
+import { Menu as PaperMenu, useTheme as useTheme10 } from "react-native-paper";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var ANIMATION_DURATION2 = 250;
 var EASING = Easing2.bezier(0.4, 0, 0.2, 1);
@@ -1082,7 +1098,7 @@ var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
 var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
 var AnimatedBlurView2 = Animated2.createAnimatedComponent(BlurView);
 var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
-  const { animation, roundness } = useTheme9(themeOverrides);
+  const { animation, roundness } = useTheme10(themeOverrides);
   const [opacity] = useState7(() => new Animated2.Value(0));
   const [closing, setClosing] = useState7(false);
   if (!visible && !closing) setClosing(true);
@@ -1140,12 +1156,95 @@ import { useTheme as usePaperTheme } from "react-native-paper";
 var useAutoPaperTheme = () => usePaperTheme();
 
 // src/useThemeBridgeProps.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return useMemo2(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return useMemo3(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
+// src/utils/getOklch.ts
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+var linearToOklab = ([r, g, b]) => {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s];
+};
+var oklabToLinear = ([L, a, b]) => {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s];
+};
+var inGamut = (rgb) => rgb.every((v) => v >= -1e-6 && v <= 1 + 1e-6);
+var clamp01 = (v) => Math.min(1, Math.max(0, v));
+var toHex = (rgb) => `#${rgb.map(
+  (v) => Math.round(clamp01(toGamma(clamp01(v))) * 255).toString(16).padStart(2, "0")
+).join("")}`;
+var getOklch = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return null;
+  const [l, a, b] = linearToOklab([toLinear(rgb.r / 255), toLinear(rgb.g / 255), toLinear(rgb.b / 255)]);
+  return { l, c: Math.hypot(a, b), h: (Math.atan2(b, a) * 180 / Math.PI + 360) % 360 };
+};
+var getOklchHex = ({ l, c, h }) => {
+  const lightness = Math.min(1, Math.max(0, l));
+  const radians = h * Math.PI / 180;
+  const atChroma = (chroma) => oklabToLinear([lightness, chroma * Math.cos(radians), chroma * Math.sin(radians)]);
+  const direct = atChroma(Math.max(0, c));
+  if (inGamut(direct)) return toHex(direct);
+  let low = 0;
+  let high = c;
+  for (let i = 0; i < 24; i++) {
+    const mid = (low + high) / 2;
+    if (inGamut(atChroma(mid))) low = mid;
+    else high = mid;
+  }
+  return toHex(atChroma(low));
+};
+
+// src/utils/getChalkboardColor.ts
+var MARKER = { maxLightness: 0.6, chroma: 0.85 };
+var CHALK = { lightness: 0.86, lift: 0.5, chroma: 0.8, minLuminance: 0.5 };
+var CACHE_LIMIT = 512;
+var createChalkboardTone = (options = {}) => {
+  const marker = { ...MARKER, ...options.marker };
+  const chalk = { ...CHALK, ...options.chalk };
+  const cache = /* @__PURE__ */ new Map();
+  const toMarker = (color) => {
+    const oklch = getOklch(color);
+    if (!oklch) return color;
+    return getOklchHex({ l: Math.min(oklch.l, marker.maxLightness), c: oklch.c * marker.chroma, h: oklch.h });
+  };
+  const toChalk = (color) => {
+    const oklch = getOklch(color);
+    if (!oklch) return color;
+    const c = oklch.c * chalk.chroma;
+    const lifted = oklch.l < chalk.lightness ? oklch.l + (chalk.lightness - oklch.l) * chalk.lift : oklch.l;
+    const result = getOklchHex({ l: lifted, c, h: oklch.h });
+    if (getLuminance(result) >= chalk.minLuminance) return result;
+    let low = lifted;
+    let high = 1;
+    for (let i = 0; i < 20; i++) {
+      const mid = (low + high) / 2;
+      if (getLuminance(getOklchHex({ l: mid, c, h: oklch.h })) >= chalk.minLuminance) high = mid;
+      else low = mid;
+    }
+    return getOklchHex({ l: high, c, h: oklch.h });
+  };
+  return (color, dark) => {
+    const key = `${dark ? "d" : "l"}${color}`;
+    const cached = cache.get(key);
+    if (cached !== void 0) return cached;
+    const result = dark ? toChalk(color) : toMarker(color);
+    if (cache.size >= CACHE_LIMIT) cache.clear();
+    cache.set(key, result);
+    return result;
+  };
+};
+var getChalkboardColor = createChalkboardTone();
+
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1249,15 +1348,19 @@ export {
   SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
+  createChalkboardTone,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getChalkboardColor,
   getColorRoles,
   getContrastColor,
   getContrastRatio,
   getHex,
   getLuminance,
+  getOklch,
+  getOklchHex,
   getRgb,
   getThirdColor,
   getTintTextColor,
@@ -1277,6 +1380,7 @@ export {
   useComputedTheme,
   useMaskedViewModule,
   useNavBarContext,
+  usePaletteTone,
   usePaperDefaults,
   useReanimatedModule,
   useThemeBridgeProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.13.4",
+  "version": "0.14.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

package/src/ThemeProvider.tsx

@@ -9,6 +9,7 @@ import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
 import { type ThemeSettings, themeSettingsProvider, useThemeSettingsInternal } from './ThemeSettingsContext'
 import { useComputedTheme } from './useComputedTheme'
+import type { PaletteTone } from './utils/getChalkboardColor'
 
 // expo-navigation-bar/expo-blur are no longer auto-detected via require() - Metro doesn't
 // rewrite a require()-in-try/catch call into its module graph inside an ESM (.mjs) build, so
@@ -28,6 +29,10 @@ export const useReanimatedModule = () => useContext(ReanimatedModuleContext)
 const MaskedViewModuleContext = createContext<MaskedViewModule | undefined>(undefined)
 export const useMaskedViewModule = () => useContext(MaskedViewModuleContext)
 
+// The Provider's `paletteTone`, for AutoPalettePicker to preview swatches the way the theme will draw them.
+const PaletteToneContext = createContext<PaletteTone | undefined>(undefined)
+export const usePaletteTone = () => useContext(PaletteToneContext)
+
 // Whether this package's own components (Provider, Appbar.Header) render a React Native StatusBar - see `statusBar` below.
 const StatusBarEnabledContext = createContext(true)
 export const useStatusBarEnabled = () => useContext(StatusBarEnabledContext)
@@ -51,6 +56,15 @@ export type ProviderProps = {
   onChange?: (settings: ThemeSettings) => void
   onNavBarChange?: (color: string, dark: boolean) => void
   onReady?: () => void
+  /** Maps each palette color (primary, secondary and tertiary, after the harmony rotation) before the
+   * theme derives anything from it, for an app that wants its whole palette toned, e.g.
+   * `getChalkboardColor` (marker in light mode, chalk in dark). The stored seed stays the player's
+   * raw pick, so nothing compounds on save, and `AutoPalettePicker` previews its swatches through
+   * the same tone. onColor/onContainer follow the toned colors by the usual light/dark split, so a
+   * tone decides their polarity: chalk's luminance floor is what gives its pastels dark text.
+   * Signal colors (success, warning, danger, MD3's error) are never toned. Must be referentially stable (a module-level
+   * function): the theme recomputes whenever it changes. Omit for the untoned palette. */
+  paletteTone?: PaletteTone
   /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
   reanimated?: ReanimatedModule
   /** Renders React Native's `StatusBar`, styled from the theme (here and in `Appbar.Header`). Default true. Pass false
@@ -68,10 +82,10 @@ export type ProviderProps = {
 // wrapper for the settings half; ThemeProviderBody (an actual descendant, reached via
 // useThemeSettingsInternal()) does all the theme-computation/gating work the single combined
 // component used to do directly.
-export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, paletteTone, reanimated, statusBar, statusBarProps, style }: ProviderProps) {
   return (
     <ThemeSettingsProvider initialValue={initialValue} onChange={onChange}>
-      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} maskedView={maskedView} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBar={statusBar} statusBarProps={statusBarProps} style={style}>
+      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} maskedView={maskedView} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} paletteTone={paletteTone} reanimated={reanimated} statusBar={statusBar} statusBarProps={statusBarProps} style={style}>
         {children}
       </ThemeProviderBody>
     </ThemeSettingsProvider>
@@ -82,10 +96,10 @@ const ThemeSettingsProvider = themeSettingsProvider
 
 type ThemeProviderBodyProps = Omit<ProviderProps, 'initialValue' | 'onChange'>
 
-function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, reanimated, statusBar = true, statusBarProps, style }: ThemeProviderBodyProps) {
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedView, navigationBar, onNavBarChange, onReady, paletteTone, reanimated, statusBar = true, statusBarProps, style }: ThemeProviderBodyProps) {
   const { settings } = useThemeSettingsInternal()
 
-  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony, paletteTone)
   // Layered on top of useComputedTheme's own output rather than folded into it - that hook only
   // ever recomputes for a color/appearance/harmony change, and fontFamily is a completely
   // independent axis; merging it there would mean either re-running the whole color computation on
@@ -116,17 +130,19 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
             <BlurModuleContext.Provider value={expoBlur}>
               <ReanimatedModuleContext.Provider value={reanimated}>
                 <MaskedViewModuleContext.Provider value={maskedView}>
-                  {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
+                  <PaletteToneContext.Provider value={paletteTone}>
+                    {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
                   Portal only carries its theme and settings across, so anything rendered through a
                   Portal (this package's Dialog, Paper's Menu and Tooltip, or anything an app wraps
-                  in <Portal> itself) would otherwise lose expoBlur, reanimated, maskedView, defaults, statusBar and the nav
+                  in <Portal> itself) would otherwise lose expoBlur, reanimated, maskedView, paletteTone, defaults, statusBar and the nav
                   bar hooks: Dialog/Menu's blur silently fell back to solid. This nested host is the
                   nearest one for every Portal under Provider, so their content mounts inside all of
                   these contexts instead. It wraps the styled View, not the other way round, so
                   portals still cover the full area regardless of `style`. */}
-                  <Portal.Host>
-                    <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
-                  </Portal.Host>
+                    <Portal.Host>
+                      <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+                    </Portal.Host>
+                  </PaletteToneContext.Provider>
                 </MaskedViewModuleContext.Provider>
               </ReanimatedModuleContext.Provider>
             </BlurModuleContext.Provider>

package/src/components/AutoPalettePicker.tsx

@@ -1,3 +1,7 @@
+import { useCallback } from 'react'
+import { useTheme } from 'react-native-paper'
+
+import { usePaletteTone } from '../ThemeProvider'
 import { useThemeSettings } from '../useThemeSettings'
 import { resolveSeedColor } from '../utils/resolveSeedColor'
 import type { SeedColor } from './ColorPicker'
@@ -14,8 +18,13 @@ type Props = {
 // `value`/`onChange`/`harmony`/`onHarmonyChange` - reads/writes useThemeSettings() itself
 // (resolveSeedColor narrows ThemeSettings.color's `string | TriadicPalette` down to the plain
 // string PalettePicker's own `value` wants). Reach for the plain PalettePicker instead when it
-// needs to be controlled by something other than the global theme.
+// needs to be controlled by something other than the global theme. It also previews the swatches
+// through the Provider's `paletteTone`, if there is one, in the current appearance, so they match
+// the theme they'd produce.
 export const AutoPalettePicker = (props: Props) => {
   const { settings, set } = useThemeSettings()
-  return <PalettePicker {...props} value={resolveSeedColor(settings.color)} onChange={(color) => set({ color })} harmony={settings.harmony} onHarmonyChange={(harmony) => set({ harmony })} />
+  const tone = usePaletteTone()
+  const { dark } = useTheme()
+  const toned = useCallback((color: string) => tone!(color, dark), [tone, dark])
+  return <PalettePicker {...props} value={resolveSeedColor(settings.color)} onChange={(color) => set({ color })} harmony={settings.harmony} onHarmonyChange={(harmony) => set({ harmony })} previewColor={tone ? toned : undefined} />
 }

package/src/components/PalettePicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import { Icon, TouchableRipple, useTheme } from 'react-native-paper'
 
@@ -65,21 +65,35 @@ type Props = {
   weights?: PaletteWeights
   colors?: SeedColor[]
   blur?: boolean
+  // Opt-in: maps each wedge's color (after the harmony rotation) to what's actually drawn, so the
+  // swatches preview a toned theme (see Provider's `paletteTone`; AutoPalettePicker wires it from
+  // there). Display only: `value`, the check mark's match and onChange stay the raw seed hex.
+  previewColor?: (color: string) => string
 }
 
-export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', onHarmonyChange, weights, colors = defaultColors, blur: blurProp }: Props) => {
+export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', onHarmonyChange, weights, colors = defaultColors, blur: blurProp, previewColor }: Props) => {
   const blur = useBlur(blurProp)
   const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
   const { onLayout, size } = useSwatchSize(SIZE)
+  // What each pie draws. The rings and check marks contrast with the drawn primary, not the raw
+  // seed, since a toned swatch can be much lighter or darker than its seed.
+  const shade = useMemo(
+    () =>
+      (palette: TriadicPalette): TriadicPalette =>
+        previewColor ? { primary: previewColor(palette.primary), secondary: previewColor(palette.secondary), tertiary: previewColor(palette.tertiary) } : palette,
+    [previewColor]
+  )
+  const triggerPalette = shade(getTriadicPalette(value, harmony))
+  const swatchPalettes = useMemo(() => colors.map(({ value: hex }) => shade(getTriadicPalette(hex, harmony))), [colors, harmony, shade])
 
   return (
     <>
       <TouchableRipple onPress={() => setOpen(true)} style={styles.trigger} borderless>
         <View style={styles.triggerContent}>
-          <Pie palette={getTriadicPalette(value, harmony)} weights={weights} />
-          <View pointerEvents='none' style={[styles.triggerIcon, { borderRadius: SIZE / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)]}>
-            <Icon source='palette' size={20} color={getContrastColor(value)} />
+          <Pie palette={triggerPalette} weights={weights} />
+          <View pointerEvents='none' style={[styles.triggerIcon, { borderRadius: SIZE / 2 }, getSwatchRing(triggerPalette.primary, false, themeColors.outlineVariant)]}>
+            <Icon source='palette' size={20} color={getContrastColor(triggerPalette.primary)} />
           </View>
         </View>
       </TouchableRipple>
@@ -92,7 +106,7 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
             </View>
           )}
           <View style={styles.swatches} onLayout={onLayout}>
-            {colors.map(({ value: hex }) => (
+            {colors.map(({ value: hex }, index) => (
               <TouchableOpacity
                 key={hex}
                 onPress={() => {
@@ -101,9 +115,9 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
                 }}
                 style={[styles.swatch, { height: size, width: size }]}
               >
-                <Pie palette={getTriadicPalette(hex, harmony)} weights={weights} size={size} />
-                <View pointerEvents='none' style={[styles.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)]}>
-                  {value === hex && <Icon source='check' size={20} color={getContrastColor(hex)} />}
+                <Pie palette={swatchPalettes[index]} weights={weights} size={size} />
+                <View pointerEvents='none' style={[styles.ring, { borderRadius: size / 2 }, getSwatchRing(swatchPalettes[index].primary, value === hex, themeColors.outlineVariant)]}>
+                  {value === hex && <Icon source='check' size={20} color={getContrastColor(swatchPalettes[index].primary)} />}
                 </View>
               </TouchableOpacity>
             ))}

package/src/index.ts

@@ -31,7 +31,7 @@ export { usePaperDefaults } from './PaperDefaultsContext'
 export type { ThemeState } from './redux/themeSlice'
 export { createThemeReducer, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer } from './redux/themeSlice'
 export type { ProviderProps } from './ThemeProvider'
-export { Provider, useBlurModule, useMaskedViewModule, useNavBarContext, useReanimatedModule } from './ThemeProvider'
+export { Provider, useBlurModule, useMaskedViewModule, useNavBarContext, usePaletteTone, useReanimatedModule } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'
@@ -41,10 +41,14 @@ export type { ThemeBridgeProps } from './useThemeBridgeProps'
 export { useThemeBridgeProps } from './useThemeBridgeProps'
 export { useThemeSettings } from './useThemeSettings'
 export { getBlendedColor } from './utils/getBlendedColor'
+export type { ChalkboardToneOptions, PaletteTone } from './utils/getChalkboardColor'
+export { createChalkboardTone, getChalkboardColor } from './utils/getChalkboardColor'
 export type { ColorRoles } from './utils/getColorRoles'
 export { getColorRoles } from './utils/getColorRoles'
 export { getContrastRatio, getLuminance } from './utils/getContrastRatio'
 export { getHex } from './utils/getHex'
+export type { Oklch } from './utils/getOklch'
+export { getOklch, getOklchHex } from './utils/getOklch'
 export type { RGB } from './utils/getRgb'
 export { getRgb } from './utils/getRgb'
 export { getContrastColor } from './utils/getSwatchContrast'

package/src/useComputedTheme.ts

@@ -3,6 +3,7 @@ import { Appearance } from 'react-native'
 import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'
 
 import { getBlendedColor } from './utils/getBlendedColor'
+import type { PaletteTone } from './utils/getChalkboardColor'
 import { getColorRoles } from './utils/getColorRoles'
 import { getHex } from './utils/getHex'
 import { getRgb } from './utils/getRgb'
@@ -57,7 +58,9 @@ export type SemanticColorRoles = {
 // with react-native-paper's own `useTheme<T>()` generic (see useTheme.ts's useAutoPaperTheme).
 export type AutoPaperTheme = Omit<MD3Theme, 'colors'> & { colors: MD3Theme['colors'] & SemanticColorRoles }
 
-export function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony: ColorHarmony = 'split-complementary'): AutoPaperTheme | null {
+// `paletteTone` (optional, see Provider's prop of the same name) maps each resolved palette color
+// before anything is derived from it. It must be referentially stable: it's a dependency.
+export function useComputedTheme(appearance: ThemeAppearance, color: string | TriadicPalette, harmony: ColorHarmony = 'split-complementary', paletteTone?: PaletteTone): AutoPaperTheme | null {
   const [theme, setTheme] = useState<AutoPaperTheme | null>(null)
 
   // Destructured to primitives (rather than depending on `color` itself below) so that passing a
@@ -104,7 +107,12 @@ export function useComputedTheme(appearance: ThemeAppearance, color: string | Tr
       }
     }
 
-    const palette: TriadicPalette = secondaryInput !== null && tertiaryInput !== null ? { primary: normalizeExplicitColor(primaryInput), secondary: normalizeExplicitColor(secondaryInput), tertiary: normalizeExplicitColor(tertiaryInput) } : getTriadicPalette(primaryInput, harmony)
+    const untoned: TriadicPalette = secondaryInput !== null && tertiaryInput !== null ? { primary: normalizeExplicitColor(primaryInput), secondary: normalizeExplicitColor(secondaryInput), tertiary: normalizeExplicitColor(tertiaryInput) } : getTriadicPalette(primaryInput, harmony)
+    // Toned per member, after the harmony rotation: a tone that moves lightness doesn't commute
+    // with rotating hue, so toning the seed first would give secondary and tertiary colors the
+    // pickers never showed. Everything below (roles, containers, outline, surfaceVariant,
+    // elevation) derives from the toned palette; the semantic roles above never pass through it.
+    const palette: TriadicPalette = paletteTone ? { primary: paletteTone(untoned.primary, base.dark), secondary: paletteTone(untoned.secondary, base.dark), tertiary: paletteTone(untoned.tertiary, base.dark) } : untoned
 
     const primaryRoles = getColorRoles(palette.primary, surface)
     _theme.colors.primary = primaryRoles.color
@@ -144,7 +152,7 @@ export function useComputedTheme(appearance: ThemeAppearance, color: string | Tr
     }
 
     setTheme(_theme)
-  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony])
+  }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony, paletteTone])
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: first render must stay theme-less (README's onReady/splash-screen contract) and Appearance must not be read during render (SSR/hydration risk)