@rific/auto-paper 0.5.1 → 0.6.0

package/src/redux/themeSlice.ts

@@ -0,0 +1,59 @@
+import { ThemeAppearance } from '../useComputedTheme'
+import type { ColorHarmony } from '../utils/getTriadicPalette'
+
+export type { ThemeAppearance }
+
+export type ThemeState = {
+  appearance: ThemeAppearance
+  blur: boolean
+  color: string
+  harmony: ColorHarmony
+}
+
+const defaultInitialState: ThemeState = {
+  appearance: 'system',
+  blur: true,
+  color: '#6750a4',
+  harmony: 'split-complementary'
+}
+
+// Hand-rolled slice — no @reduxjs/toolkit dependency. Action types and creator
+// behavior match the previous createSlice implementation exactly, so this works
+// with RTK stores, vanilla Redux, or any reducer-based state container.
+type PayloadAction<P> = { payload: P; type: string }
+
+const createAction = <P>(type: string) => {
+  const actionCreator = (payload: P): PayloadAction<P> => ({ payload, type })
+  actionCreator.type = type
+  actionCreator.match = (action: { type: string }): action is PayloadAction<P> => action.type === type
+  return actionCreator
+}
+
+const initialize = createAction<Partial<ThemeState>>('theme/initialize')
+const setAppearance = createAction<ThemeAppearance>('theme/setAppearance')
+const setBlur = createAction<boolean>('theme/setBlur')
+const setColor = createAction<string>('theme/setColor')
+const setHarmony = createAction<ColorHarmony>('theme/setHarmony')
+
+export const themeActions = { initialize, setAppearance, setBlur, setColor, setHarmony }
+
+const reduce = (state: ThemeState, action: { type: string }): ThemeState => {
+  if (initialize.match(action)) return { ...state, ...action.payload }
+  if (setAppearance.match(action)) return { ...state, appearance: action.payload }
+  if (setBlur.match(action)) return { ...state, blur: action.payload }
+  if (setColor.match(action)) return { ...state, color: action.payload }
+  if (setHarmony.match(action)) return { ...state, harmony: action.payload }
+  return state
+}
+
+export function createThemeReducer(initialState?: Partial<ThemeState>) {
+  const initial = { ...defaultInitialState, ...initialState }
+  return (state: ThemeState = initial, action: { type: string }): ThemeState => reduce(state, action)
+}
+
+export const themeReducer = (state: ThemeState = defaultInitialState, action: { type: string }): ThemeState => reduce(state, action)
+
+export const selectThemeAppearance = (state: ThemeState) => state.appearance
+export const selectThemeBlur = (state: ThemeState) => state.blur
+export const selectThemeColor = (state: ThemeState) => state.color
+export const selectThemeHarmony = (state: ThemeState) => state.harmony

package/src/useComputedTheme.ts

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Appearance } from 'react-native'
+import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'
+
+import { getBlendedColor } from './utils/getBlendedColor'
+import { getTonalColor } from './utils/getTonalColor'
+import { type ColorHarmony, getTriadicPalette } from './utils/getTriadicPalette'
+import { isDarkColor } from './utils/isDarkColor'
+
+export type ThemeAppearance = 'system' | 'light' | 'dark'
+
+export function useComputedTheme(appearance: ThemeAppearance, color: string, harmony: ColorHarmony = 'split-complementary'): MD3Theme | null {
+  const [theme, setTheme] = useState<MD3Theme | null>(null)
+
+  const computeTheme = useCallback(() => {
+    let resolved: string | null | undefined = appearance
+    if (resolved === 'system') resolved = Appearance.getColorScheme()
+    if (resolved === 'no-preference' || !resolved) resolved = 'light'
+    const base = resolved === 'dark' ? MD3DarkTheme : MD3LightTheme
+
+    const _theme: MD3Theme = {
+      ...base,
+      colors: {
+        ...base.colors,
+        elevation: { ...base.colors.elevation }
+      }
+    }
+
+    const palette = getTriadicPalette(color, harmony)
+    const surface = base.colors.surface
+
+    _theme.colors.primary = palette.primary
+    _theme.colors.onPrimary = getTonalColor(palette.primary, isDarkColor(palette.primary) ? 0.95 : 0.08)
+    _theme.colors.primaryContainer = getBlendedColor(palette.primary, surface, 0.15)
+    _theme.colors.onPrimaryContainer = getTonalColor(palette.primary, isDarkColor(_theme.colors.primaryContainer) ? 0.92 : 0.12)
+
+    _theme.colors.secondary = palette.secondary
+    _theme.colors.onSecondary = getTonalColor(palette.secondary, isDarkColor(palette.secondary) ? 0.95 : 0.08)
+    _theme.colors.secondaryContainer = getBlendedColor(palette.secondary, surface, 0.15)
+    _theme.colors.onSecondaryContainer = getTonalColor(palette.secondary, isDarkColor(_theme.colors.secondaryContainer) ? 0.92 : 0.12)
+
+    _theme.colors.tertiary = palette.tertiary
+    _theme.colors.onTertiary = getTonalColor(palette.tertiary, isDarkColor(palette.tertiary) ? 0.95 : 0.08)
+    _theme.colors.tertiaryContainer = getBlendedColor(palette.tertiary, surface, 0.15)
+    _theme.colors.onTertiaryContainer = getTonalColor(palette.tertiary, isDarkColor(_theme.colors.tertiaryContainer) ? 0.92 : 0.12)
+
+    const blended = getBlendedColor(color, palette.secondary, 0.5)
+    const tintSurface = (alpha: number) => getBlendedColor(blended, surface, alpha)
+
+    _theme.colors.background = base.dark ? '#0F0F0F' : '#F0F0F0'
+    _theme.colors.surface = surface
+    _theme.colors.surfaceVariant = tintSurface(0.2)
+    _theme.colors.outline = getBlendedColor(color, base.colors.outline, 0.45)
+
+    const grey = base.dark ? '#424242' : '#c2c2c2'
+    const blendedGrey = getBlendedColor(blended, grey, 0.05)
+    _theme.colors.elevation = {
+      ..._theme.colors.elevation,
+      level1: _theme.colors.surface,
+      level2: getBlendedColor(blendedGrey, _theme.colors.surface, 0.25),
+      level3: getBlendedColor(blendedGrey, _theme.colors.surface, 0.4),
+      level4: getBlendedColor(blendedGrey, _theme.colors.surface, 0.55),
+      level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
+    }
+
+    setTheme(_theme)
+  }, [appearance, color, harmony])
+
+  useEffect(() => {
+    computeTheme()
+  }, [computeTheme])
+
+  useEffect(() => {
+    const subscription = Appearance.addChangeListener(computeTheme)
+    return subscription.remove
+  }, [computeTheme])
+
+  return theme
+}

package/src/useThemeSettings.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react'
+
+import { ThemeSettingsContext } from './ThemeSettingsContext'
+
+export const useThemeSettings = () => useContext(ThemeSettingsContext)

package/src/utils/colorNames.ts

@@ -0,0 +1,151 @@
+export const colorNames: Record<string, string> = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgrey: '#a9a9a9',
+  darkgreen: '#006400',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  grey: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgrey: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  transparent: 'transparent',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32'
+}

package/src/utils/getBlendedColor.ts

@@ -0,0 +1,15 @@
+import { getHex } from './getHex'
+import { getRgb } from './getRgb'
+
+export const getBlendedColor = (foreground: string, background: string, alpha: number): string => {
+  const fg = getRgb(foreground)
+  const bg = getRgb(background)
+  if (!fg || !bg) return background
+  const safeAlpha = Math.min(1, Math.max(0, alpha))
+  const r = Math.round(fg.r * safeAlpha + bg.r * (1 - safeAlpha))
+  const g = Math.round(fg.g * safeAlpha + bg.g * (1 - safeAlpha))
+  const b = Math.round(fg.b * safeAlpha + bg.b * (1 - safeAlpha))
+  return getHex(`rgb(${r}, ${g}, ${b})`) ?? background
+}
+
+export default getBlendedColor

package/src/utils/getHex.ts

@@ -0,0 +1,21 @@
+import { getRgb } from './getRgb'
+
+export const getHex = (value: string): string | null => {
+  const rgb = getRgb(value)
+  if (!rgb) return null
+
+  const toHex = (n: number) => {
+    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)}`
+
+  if (rgb.a !== undefined) {
+    return `${hexString}${toHex(rgb.a * 255)}`
+  }
+
+  return hexString
+}
+
+export default getHex

package/src/utils/getRgb.ts

@@ -0,0 +1,65 @@
+import { colorNames } from './colorNames'
+
+export type RGB = {
+  r: number
+  g: number
+  b: number
+  a?: number
+}
+
+export const getRgb = (value: string): RGB | null => {
+  if (!value) return null
+
+  let trimmed = value.trim().toLowerCase()
+
+  const namedColor = colorNames[trimmed]
+  if (namedColor) trimmed = namedColor
+
+  const hexMatch = trimmed.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i)
+
+  if (hexMatch) {
+    const hex = hexMatch[1]
+    let normalized = hex
+
+    if (hex.length === 3) {
+      normalized = hex
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    } else if (hex.length === 8) {
+      const alpha = parseInt(hex.substring(6, 8), 16)
+      normalized = hex.substring(0, 6)
+      const intVal = parseInt(normalized, 16)
+      return {
+        r: (intVal >> 16) & 255,
+        g: (intVal >> 8) & 255,
+        b: intVal & 255,
+        a: alpha / 255
+      }
+    }
+
+    const intVal = parseInt(normalized, 16)
+    return {
+      r: (intVal >> 16) & 255,
+      g: (intVal >> 8) & 255,
+      b: intVal & 255
+    }
+  }
+
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([0-9.]+))?\s*\)$/i)
+  if (rgbMatch) {
+    const result: RGB = {
+      r: Number(rgbMatch[1]),
+      g: Number(rgbMatch[2]),
+      b: Number(rgbMatch[3])
+    }
+    if (rgbMatch[4] !== undefined) {
+      result.a = Number(rgbMatch[4])
+    }
+    return result
+  }
+
+  return null
+}
+
+export default getRgb

package/src/utils/getTintTextColor.ts

@@ -0,0 +1,13 @@
+import { getBlendedColor } from './getBlendedColor'
+import { getTonalColor } from './getTonalColor'
+import { isDarkColor } from './isDarkColor'
+
+// Computes a contrast-safe text color for content sitting on a BlurView tintColor,
+// accounting for the tint being blended over the backdrop at the given opacity
+// (same approach useComputedTheme uses to derive onPrimaryContainer from primaryContainer).
+export const getTintTextColor = (tintColor: string, backdropColor: string, tintOpacity: number): string => {
+  const blended = getBlendedColor(tintColor, backdropColor, tintOpacity)
+  return getTonalColor(tintColor, isDarkColor(blended) ? 0.92 : 0.12)
+}
+
+export default getTintTextColor

package/src/utils/getTonalColor.ts

@@ -0,0 +1,67 @@
+import { getHex } from './getHex'
+import { getRgb } from './getRgb'
+
+// Returns the color with lightness clamped to the given target (0–1), preserving hue and saturation.
+export const getTonalColor = (color: string, lightness: number): string => {
+  const rgb = getRgb(color)
+  if (!rgb) return color
+
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+
+  let h = 0
+  if (delta !== 0) {
+    if (max === r) h = ((g - b) / delta) % 6
+    else if (max === g) h = (b - r) / delta + 2
+    else h = (r - g) / delta + 4
+    h = (h * 60 + 360) % 360
+  }
+
+  const l = (max + min) / 2
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+
+  // Rebuild with new lightness
+  const targetL = Math.min(1, Math.max(0, lightness))
+  const c = (1 - Math.abs(2 * targetL - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = targetL - c / 2
+
+  let r2 = 0,
+    g2 = 0,
+    b2 = 0
+  if (h < 60) {
+    r2 = c
+    g2 = x
+    b2 = 0
+  } else if (h < 120) {
+    r2 = x
+    g2 = c
+    b2 = 0
+  } else if (h < 180) {
+    r2 = 0
+    g2 = c
+    b2 = x
+  } else if (h < 240) {
+    r2 = 0
+    g2 = x
+    b2 = c
+  } else if (h < 300) {
+    r2 = x
+    g2 = 0
+    b2 = c
+  } else {
+    r2 = c
+    g2 = 0
+    b2 = x
+  }
+
+  const toInt = (n: number) => Math.round((n + m) * 255)
+  return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color
+}
+
+export default getTonalColor

package/src/utils/getTriadicPalette.ts

@@ -0,0 +1,103 @@
+import { getHex } from './getHex'
+import { getRgb } from './getRgb'
+
+export type ColorHarmony = 'triadic' | 'split-complementary' | 'analogous' | 'square' | 'complementary' | 'double-split'
+
+export type TriadicPalette = {
+  primary: string
+  secondary: string
+  tertiary: string
+}
+
+const HARMONY_OFFSETS: Record<ColorHarmony, [number, number]> = {
+  analogous: [1 / 12, 2 / 12],
+  complementary: [1 / 4, 1 / 2],
+  'double-split': [1 / 12, 11 / 12],
+  'split-complementary': [5 / 12, 7 / 12],
+  square: [1 / 4, 3 / 4],
+  triadic: [1 / 3, 2 / 3]
+}
+
+export function getTriadicPalette(primaryColor: string, harmony: ColorHarmony = 'split-complementary'): TriadicPalette {
+  const rgb = getRgb(primaryColor)
+  if (!rgb) throw new Error(`Invalid color format: ${primaryColor}`)
+
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  let h = 0
+  let s = 0
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+        break
+      case g:
+        h = ((b - r) / d + 2) / 6
+        break
+      case b:
+        h = ((r - g) / d + 4) / 6
+        break
+    }
+  }
+
+  const [o1, o2] = HARMONY_OFFSETS[harmony]
+
+  return {
+    primary: getHex(primaryColor) ?? primaryColor,
+    secondary: hslToHex((h + o1) % 1, s, l),
+    tertiary: hslToHex((h + o2) % 1, s, l)
+  }
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h * 6) % 2) - 1))
+  const m = l - c / 2
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  if (h < 1 / 6) {
+    r = c
+    g = x
+    b = 0
+  } else if (h < 2 / 6) {
+    r = x
+    g = c
+    b = 0
+  } else if (h < 3 / 6) {
+    r = 0
+    g = c
+    b = x
+  } else if (h < 4 / 6) {
+    r = 0
+    g = x
+    b = c
+  } else if (h < 5 / 6) {
+    r = x
+    g = 0
+    b = c
+  } else {
+    r = c
+    g = 0
+    b = x
+  }
+
+  const toHex = (value: number) => {
+    const hex = Math.round((value + m) * 255).toString(16)
+    return hex.length === 1 ? `0${hex}` : hex
+  }
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}

package/src/utils/isDarkColor.ts

@@ -0,0 +1,14 @@
+import { getRgb } from './getRgb'
+
+export const isDarkColor = (value: string): boolean => {
+  const rgb = getRgb(value)
+  if (!rgb) return false
+
+  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
+  const [rs, gs, bs] = [r, g, b].map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)))
+  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+
+  return luminance < 0.5
+}
+
+export default isDarkColor