@rific/auto-paper 0.13.3 → 0.14.0

package/dist/index.js

@@ -51,13 +51,19 @@ __export(index_exports, {
   SEMANTIC_BASE_COLORS: () => SEMANTIC_BASE_COLORS,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
+  createChalkboardTone: () => createChalkboardTone,
   createThemeReducer: () => createThemeReducer,
   defaultColors: () => defaultColors,
   defaultThemeSettings: () => defaultThemeSettings,
   getBlendedColor: () => getBlendedColor,
+  getChalkboardColor: () => getChalkboardColor,
   getColorRoles: () => getColorRoles,
   getContrastColor: () => getContrastColor,
+  getContrastRatio: () => getContrastRatio,
   getHex: () => getHex,
+  getLuminance: () => getLuminance,
+  getOklch: () => getOklch,
+  getOklchHex: () => getOklchHex,
   getRgb: () => getRgb,
   getThirdColor: () => getThirdColor,
   getTintTextColor: () => getTintTextColor,
@@ -77,6 +83,7 @@ __export(index_exports, {
   useComputedTheme: () => useComputedTheme,
   useMaskedViewModule: () => useMaskedViewModule,
   useNavBarContext: () => useNavBarContext,
+  usePaletteTone: () => usePaletteTone,
   usePaperDefaults: () => usePaperDefaults,
   useReanimatedModule: () => useReanimatedModule,
   useThemeBridgeProps: () => useThemeBridgeProps,
@@ -330,13 +337,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;
 };
@@ -353,6 +360,21 @@ var getBlendedColor = (foreground, background, alpha) => {
   return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
 };
 
+// src/utils/getContrastRatio.ts
+var getLuminance = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return 0;
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var getContrastRatio = (a, b) => {
+  const [lighter, darker] = [getLuminance(a), getLuminance(b)].sort((x, y) => y - x);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
 // src/utils/getTonalColor.ts
 var getTonalColor = (color, lightness) => {
   const rgb = getRgb(color);
@@ -417,11 +439,13 @@ var isDarkColor = (value) => {
 };
 
 // src/utils/getColorRoles.ts
+var MIN_LIGHT_ON_COLOR_CONTRAST = 2.5;
 var getColorRoles = (base, surface, containerAlpha = 0.15) => {
   const container = getBlendedColor(base, surface, containerAlpha);
+  const lightOnColor = getTonalColor(base, 0.95);
   return {
     color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    onColor: getContrastRatio(lightOnColor, base) >= MIN_LIGHT_ON_COLOR_CONTRAST ? lightOnColor : getTonalColor(base, 0.08),
     container,
     onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
   };
@@ -501,11 +525,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
@@ -518,7 +542,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] = (0, import_react3.useState)(null);
   const primaryInput = typeof color === "string" ? color : color.primary;
   const secondaryInput = typeof color === "string" ? null : color.secondary;
@@ -551,7 +575,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;
@@ -584,7 +609,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]);
   (0, import_react3.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
@@ -605,15 +630,17 @@ var ReanimatedModuleContext = (0, import_react4.createContext)(void 0);
 var useReanimatedModule = () => (0, import_react4.useContext)(ReanimatedModuleContext);
 var MaskedViewModuleContext = (0, import_react4.createContext)(void 0);
 var useMaskedViewModule = () => (0, import_react4.useContext)(MaskedViewModuleContext);
+var PaletteToneContext = (0, import_react4.createContext)(void 0);
+var usePaletteTone = () => (0, import_react4.useContext)(PaletteToneContext);
 var StatusBarEnabledContext = (0, import_react4.createContext)(true);
 var useStatusBarEnabled = () => (0, import_react4.useContext)(StatusBarEnabledContext);
-function Provider({ children, defaults, expoBlur, fontFamily, initialValue, maskedView, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBar, statusBarProps, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ThemeSettingsProvider, { initialValue, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react4.useMemo)(() => {
     if (!computedTheme) return null;
     if (!fontFamily) return computedTheme;
@@ -629,7 +656,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, maskedVie
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_paper2.Provider, { theme, children: [
     statusBar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.StatusBar, { barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper2.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBarEnabledContext.Provider, { value: statusBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MaskedViewModuleContext.Provider, { value: maskedView, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaletteToneContext.Provider, { value: paletteTone, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper2.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) }) }) }) })
   ] });
 }
 var styles = import_react_native2.StyleSheet.create({
@@ -682,6 +709,10 @@ var AutoAppearancePicker = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
 };
 
+// src/components/AutoPalettePicker.tsx
+var import_react10 = require("react");
+var import_react_native_paper10 = require("react-native-paper");
+
 // src/utils/resolveSeedColor.ts
 var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
 
@@ -932,19 +963,25 @@ var buildWedges = (weights) => {
   ];
 };
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { 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 } = (0, import_react_native_paper9.useTheme)();
   const [open, setOpen] = (0, import_react9.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
+  const shade = (0, import_react9.useMemo)(
+    () => (palette) => previewColor ? { primary: previewColor(palette.primary), secondary: previewColor(palette.secondary), tertiary: previewColor(palette.tertiary) } : palette,
+    [previewColor]
+  );
+  const triggerPalette = shade(getTriadicPalette(value, harmony));
+  const swatchPalettes = (0, import_react9.useMemo)(() => colors.map(({ value: hex }) => shade(getTriadicPalette(hex, harmony))), [colors, harmony, shade]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.TouchableRipple, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { style: styles4.triggerContent, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: triggerPalette, weights }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(triggerPalette.primary, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "palette", size: 20, color: getContrastColor(triggerPalette.primary) }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog.Content, { children: [
       onHarmonyChange && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.harmonyRow, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         import_react_native7.TouchableOpacity,
         {
           onPress: () => {
@@ -953,8 +990,8 @@ var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmo
           },
           style: [styles4.swatch, { height: size, width: size }],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: swatchPalettes[index], weights, size }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(swatchPalettes[index].primary, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "check", size: 20, color: getContrastColor(swatchPalettes[index].primary) }) })
           ]
         },
         hex
@@ -981,13 +1018,16 @@ var styles4 = import_react_native7.StyleSheet.create({
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var AutoPalettePicker = (props) => {
   const { settings, set } = useThemeSettings();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PalettePicker, { ...props, value: resolveSeedColor(settings.color), onChange: (color) => set({ color }), harmony: settings.harmony, onHarmonyChange: (harmony) => set({ harmony }) });
+  const tone = usePaletteTone();
+  const { dark } = (0, import_react_native_paper10.useTheme)();
+  const toned = (0, import_react10.useCallback)((color) => tone(color, dark), [tone, dark]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_native8 = require("react-native");
-var import_react_native_paper10 = require("react-native-paper");
+var import_react_native_paper11 = require("react-native-paper");
 
 // src/navigation-bar.ts
 var setNavigationBarStyle = (navigationBar, dark) => {
@@ -998,9 +1038,9 @@ var setNavigationBarStyle = (navigationBar, dark) => {
 // src/components/BottomNavigation.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function useNavigationBarSync() {
-  const theme = (0, import_react_native_paper10.useTheme)();
+  const theme = (0, import_react_native_paper11.useTheme)();
   const { navigationBar, onNavBarChange } = useNavBarContext();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (import_react_native8.Platform.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
@@ -1009,53 +1049,53 @@ function useNavigationBarSync() {
 function BottomNavigationComponent(props) {
   const defaults = usePaperDefaults();
   useNavigationBarSync();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper10.BottomNavigation, { ...defaults.BottomNavigation, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper11.BottomNavigation, { ...defaults.BottomNavigation, ...props });
 }
 function Bar(props) {
   useNavigationBarSync();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper10.BottomNavigation.Bar, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper11.BottomNavigation.Bar, { ...props });
 }
 BottomNavigationComponent.Bar = Bar;
-BottomNavigationComponent.SceneMap = import_react_native_paper10.BottomNavigation?.SceneMap;
+BottomNavigationComponent.SceneMap = import_react_native_paper11.BottomNavigation?.SceneMap;
 var BottomNavigation = BottomNavigationComponent;
 
 // src/components/Button.tsx
-var import_react_native_paper11 = require("react-native-paper");
+var import_react_native_paper12 = require("react-native-paper");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function Button(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper11.Button, { ...defaults.Button, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper12.Button, { ...defaults.Button, ...props });
 }
 
 // src/components/Chip.tsx
-var import_react_native_paper12 = require("react-native-paper");
+var import_react_native_paper13 = require("react-native-paper");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Chip({ variant, style, selectedColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper12.useTheme)();
+  const { colors } = (0, import_react_native_paper13.useTheme)();
   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__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper12.Chip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper13.Chip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
 }
 
 // src/components/FAB.tsx
-var import_react_native_paper13 = require("react-native-paper");
+var import_react_native_paper14 = require("react-native-paper");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function FAB(props) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper13.FAB, { ...defaults.FAB, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper14.FAB, { ...defaults.FAB, ...props });
 }
 
 // src/components/FadingScrollView.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native9 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var SCROLL_FADE_HEIGHT = 24;
 function FadingScrollView({ style, fadeHeight = SCROLL_FADE_HEIGHT, onScroll, onLayout, onContentSizeChange, scrollEventThrottle = 16, children, ...rest }) {
   const MaskedView = useMaskedViewModule();
-  const sizes = (0, import_react11.useRef)({ viewport: 0, content: 0, offset: 0 });
-  const [edges, setEdges] = (0, import_react11.useState)(NO_EDGES);
-  const update = (0, import_react11.useCallback)(() => {
+  const sizes = (0, import_react12.useRef)({ viewport: 0, content: 0, offset: 0 });
+  const [edges, setEdges] = (0, import_react12.useState)(NO_EDGES);
+  const update = (0, import_react12.useCallback)(() => {
     const { viewport, content, offset } = sizes.current;
     const above = offset > 1;
     const below = content - viewport - offset > 1;
@@ -1129,20 +1169,20 @@ var styles5 = import_react_native9.StyleSheet.create({
 });
 
 // src/components/IconButton.tsx
-var import_react_native_paper14 = require("react-native-paper");
+var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper14.useTheme)();
+  const { colors } = (0, import_react_native_paper15.useTheme)();
   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__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
 }
 
 // src/components/Menu.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_native10 = require("react-native");
-var import_react_native_paper15 = require("react-native-paper");
+var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var ANIMATION_DURATION2 = 250;
 var EASING = import_react_native10.Easing.bezier(0.4, 0, 0.2, 1);
@@ -1151,11 +1191,11 @@ var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
 var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
 var AnimatedBlurView2 = import_react_native10.Animated.createAnimatedComponent(BlurView);
 var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
-  const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
-  const [opacity] = (0, import_react12.useState)(() => new import_react_native10.Animated.Value(0));
-  const [closing, setClosing] = (0, import_react12.useState)(false);
+  const { animation, roundness } = (0, import_react_native_paper16.useTheme)(themeOverrides);
+  const [opacity] = (0, import_react13.useState)(() => new import_react_native10.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react13.useState)(false);
   if (!visible && !closing) setClosing(true);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     import_react_native10.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
   }, [animation.scale, closing, opacity]);
   const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
@@ -1164,10 +1204,10 @@ var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visibl
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
   const web = import_react_native10.Platform.OS === "web";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles6.content, web && styles6.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlurView, { blur, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.Menu, { ...props, contentStyle: [styles6.content, web && styles6.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
-  Item: import_react_native_paper15.Menu.Item
+  Item: import_react_native_paper16.Menu.Item
 });
 var styles6 = import_react_native10.StyleSheet.create({
   content: { backgroundColor: "transparent", paddingVertical: 0 },
@@ -1175,12 +1215,12 @@ var styles6 = import_react_native10.StyleSheet.create({
 });
 
 // src/components/TextInput.tsx
-var import_react13 = require("react");
-var import_react_native_paper16 = require("react-native-paper");
+var import_react14 = require("react");
+var import_react_native_paper17 = require("react-native-paper");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react14.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_paper17.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -1205,16 +1245,99 @@ var selectThemeColor = themeSlice.selectors.selectColor;
 var selectThemeHarmony = themeSlice.selectors.selectHarmony;
 
 // src/useTheme.ts
-var import_react_native_paper17 = require("react-native-paper");
-var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
+var import_react_native_paper18 = require("react-native-paper");
+var useAutoPaperTheme = () => (0, import_react_native_paper18.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react14.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react15.useMemo)(() => ({ 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;
@@ -1319,13 +1442,19 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
+  createChalkboardTone,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getChalkboardColor,
   getColorRoles,
   getContrastColor,
+  getContrastRatio,
   getHex,
+  getLuminance,
+  getOklch,
+  getOklchHex,
   getRgb,
   getThirdColor,
   getTintTextColor,
@@ -1345,6 +1474,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useComputedTheme,
   useMaskedViewModule,
   useNavBarContext,
+  usePaletteTone,
   usePaperDefaults,
   useReanimatedModule,
   useThemeBridgeProps,