@rific/auto-paper 0.7.0 → 0.8.0

package/README.md

@@ -7,6 +7,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - Color harmony palette from a single seed color (primary → secondary → tertiary) — 6 harmony modes available, defaulting to `split-complementary`
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
+- Fixed `success`/`warning`/`danger` semantic color roles (each with `on*`/`*Container` variants) alongside MD3's built-in `error`
 - Optional Redux slice for wiring appearance and color into your store
 - Wrapper components (`Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
@@ -228,13 +229,60 @@ set({ harmony: 'triadic' })
 
 ### `useComputedTheme(appearance, color, harmony?)`
 
-Returns `MD3Theme | null`. `null` on the first render while the theme computes.
+Returns `AutoPaperTheme | null` — `MD3Theme` plus `success`/`warning`/`danger` color roles (see below). `null` on the first render while the theme computes.
 
 ```ts
 const theme = useComputedTheme('system', '#6750a4')
 const theme = useComputedTheme('system', '#6750a4', 'triadic')
 ```
 
+Alongside the standard MD3 `primary`/`secondary`/`tertiary` roles derived from the seed color, `theme.colors` also carries three fixed semantic roles, each with the usual `color`/`onColor`/`Container`/`onContainer` quadruple (`success`, `onSuccess`, `successContainer`, `onSuccessContainer`, and likewise for `warning` and `danger`):
+
+| Role | Base color |
+|---|---|
+| `success` | `SEMANTIC_BASE_COLORS.success` (`#2E7D32`) |
+| `warning` | `SEMANTIC_BASE_COLORS.warning` (`#A15C00`) |
+| `danger` | `SEMANTIC_BASE_COLORS.danger` (`#B00020`) |
+
+These are fixed brand colors — like MD3's own `error`, which is left untouched — not derived from the seed; only their container blending adapts to light/dark mode. `danger` is deliberately separate from `error`: `react-native-paper` components (`TextInput`'s error state, `HelperText`, `Badge`) read `colors.error`/`colors.onError` directly, so redefining `error` itself would change form-validation colors app-wide.
+
+```ts
+import { SEMANTIC_BASE_COLORS } from '@rific/auto-paper'
+import type { AutoPaperTheme, SemanticColorRoles } from '@rific/auto-paper'
+```
+
+### `useAutoPaperTheme()`
+
+A typed alternative to `react-native-paper`'s own `useTheme()` that returns `AutoPaperTheme` — the same theme, with `colors.success`/`warning`/`danger` (and their `on*`/`*Container` variants) typed in, so you get autocomplete without redeclaring the generic yourself at every call site.
+
+```tsx
+import { useAutoPaperTheme } from '@rific/auto-paper'
+
+const { colors } = useAutoPaperTheme()
+
+<Text style={{ color: colors.warning }}>Check your connection</Text>
+```
+
+### `AppearancePicker`
+
+A thin wrapper around `react-native-paper`'s `SegmentedButtons` for switching between `system`/`light`/`dark` appearance.
+
+```tsx
+import { AppearancePicker, useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings: { appearance }, set } = useThemeSettings()
+  return <AppearancePicker value={appearance} onChange={(a) => set({ appearance: a })} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `ThemeAppearance` | Currently selected appearance |
+| `onChange` | `(appearance: ThemeAppearance) => void` | Called when a segment is tapped |
+| `showLabels` | `boolean` | Set `false` for icon-only segments — useful in tight layouts where "System" would truncate. `accessibilityLabel` is always set regardless, so screen readers still announce the full word. Defaults to `true` |
+| `icons` | `AppearanceIcons` | Per-value icon overrides — pass just the ones you want to change (e.g. `{ system: 'theme-light-dark' }`), merged over the defaults (`monitor` / `white-balance-sunny` / `weather-night`) |
+
 ### `Appbar`
 
 A thin wrapper around `react-native-paper`'s `Appbar` that automatically syncs `StatusBar` background color and bar style to the current theme surface color.
@@ -387,7 +435,7 @@ const appearance = useSelector((state: RootState) => selectThemeAppearance(state
 ### Color utilities
 
 ```ts
-import { getTriadicPalette, getBlendedColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
+import { getTriadicPalette, getBlendedColor, getColorRoles, getContrastColor, isDarkColor, getRgb, getHex, getTonalColor, getTintTextColor } from '@rific/auto-paper'
 import type { ColorHarmony } from '@rific/auto-paper'
 
 getTriadicPalette('#6750a4')                          // split-complementary (default)
@@ -397,7 +445,9 @@ getTriadicPalette('#6750a4', 'square')
 getTriadicPalette('#6750a4', 'complementary')
 getTriadicPalette('#6750a4', 'double-split')
 
-getBlendedColor('#ff0000', '#0000ff', 0.5)  // → '#800080'
+getBlendedColor('#ff0000', '#0000ff', 0.5)   // → '#800080'
+getColorRoles('#6750a4', '#fffbfe')          // → { color, onColor, container, onContainer } — the MD3 color/onColor/container/onContainer math, generalized (this is what useComputedTheme uses internally for every role)
+getContrastColor('#6750a4')                  // → '#ffffff' — black/white pick for content sitting on a fully saturated fill
 isDarkColor('#6750a4')                       // → true
 getRgb('coral')                              // → { r: 255, g: 127, b: 80 }
 getHex('rgb(255, 0, 0)')                     // → '#ff0000'

package/dist/index.d.mts

@@ -29,13 +29,38 @@ type TriadicPalette = {
 declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+declare const SEMANTIC_BASE_COLORS: {
+    success: string;
+    warning: string;
+    danger: string;
+};
+type SemanticColorRoles = {
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    danger: string;
+    onDanger: string;
+    dangerContainer: string;
+    onDangerContainer: string;
+};
+type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
+    colors: MD3Theme['colors'] & SemanticColorRoles;
+};
+declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): AutoPaperTheme | null;
 
+type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
 type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
 
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
@@ -240,10 +265,20 @@ type ProviderProps = {
 };
 declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
+declare const useAutoPaperTheme: () => AutoPaperTheme;
+
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
+type ColorRoles = {
+    color: string;
+    onColor: string;
+    container: string;
+    onContainer: string;
+};
+declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -254,10 +289,12 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getContrastColor: (color: string) => string;
+
 declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
 
 declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.d.ts

@@ -29,13 +29,38 @@ type TriadicPalette = {
 declare function getTriadicPalette(primaryColor: string, harmony?: ColorHarmony): TriadicPalette;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
-declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): MD3Theme | null;
+declare const SEMANTIC_BASE_COLORS: {
+    success: string;
+    warning: string;
+    danger: string;
+};
+type SemanticColorRoles = {
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+    danger: string;
+    onDanger: string;
+    dangerContainer: string;
+    onDangerContainer: string;
+};
+type AutoPaperTheme = Omit<MD3Theme, 'colors'> & {
+    colors: MD3Theme['colors'] & SemanticColorRoles;
+};
+declare function useComputedTheme(appearance: ThemeAppearance, color: string, harmony?: ColorHarmony): AutoPaperTheme | null;
 
+type AppearanceIcons = Partial<Record<ThemeAppearance, string>>;
 type Props$3 = {
     value: ThemeAppearance;
     onChange: (appearance: ThemeAppearance) => void;
+    showLabels?: boolean;
+    icons?: AppearanceIcons;
 };
-declare const AppearancePicker: ({ value, onChange }: Props$3) => react.JSX.Element;
+declare const AppearancePicker: ({ value, onChange, showLabels, icons }: Props$3) => react.JSX.Element;
 
 type ExpoBlurTint = 'light' | 'dark' | 'default' | 'extraLight' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
 type ExpoBlurMethod = 'none' | 'dimezisBlurView' | 'dimezisBlurViewSdk31Plus';
@@ -240,10 +265,20 @@ type ProviderProps = {
 };
 declare function Provider({ initialValue, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
+declare const useAutoPaperTheme: () => AutoPaperTheme;
+
 declare const useThemeSettings: () => ThemeSettingsContextType;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
+type ColorRoles = {
+    color: string;
+    onColor: string;
+    container: string;
+    onContainer: string;
+};
+declare const getColorRoles: (base: string, surface: string, containerAlpha?: number) => ColorRoles;
+
 declare const getHex: (value: string) => string | null;
 
 type RGB = {
@@ -254,10 +289,12 @@ type RGB = {
 };
 declare const getRgb: (value: string) => RGB | null;
 
+declare const getContrastColor: (color: string) => string;
+
 declare const getTintTextColor: (tintColor: string, backdropColor: string, tintOpacity: number) => string;
 
 declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, AppearancePicker, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type SeedColor, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useComputedTheme, usePaperDefaults, useThemeSettings };

package/dist/index.js

@@ -44,12 +44,15 @@ __export(index_exports, {
   Menu: () => Menu,
   PalettePicker: () => PalettePicker,
   Provider: () => Provider,
+  SEMANTIC_BASE_COLORS: () => SEMANTIC_BASE_COLORS,
   TextInput: () => TextInput,
   ThemeSettingsContext: () => ThemeSettingsContext,
   createThemeReducer: () => createThemeReducer,
   defaultColors: () => defaultColors,
   defaultThemeSettings: () => defaultThemeSettings,
   getBlendedColor: () => getBlendedColor,
+  getColorRoles: () => getColorRoles,
+  getContrastColor: () => getContrastColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
   getTintTextColor: () => getTintTextColor,
@@ -62,6 +65,7 @@ __export(index_exports, {
   selectThemeHarmony: () => selectThemeHarmony,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
+  useAutoPaperTheme: () => useAutoPaperTheme,
   useBlur: () => useBlur,
   useComputedTheme: () => useComputedTheme,
   usePaperDefaults: () => usePaperDefaults,
@@ -125,11 +129,19 @@ var Appbar = {
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var APPEARANCES = [
-  { label: "System", value: "system", icon: "brightness-auto" },
-  { label: "Light", value: "light", icon: "white-balance-sunny" },
-  { label: "Dark", value: "dark", icon: "weather-night" }
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
 ];
-var AppearancePicker = ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon })) });
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
+};
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : void 0, icon: resolvedIcons[a.value], accessibilityLabel: a.label })) });
+};
 
 // src/components/BlurView.tsx
 var import_react4 = require("react");
@@ -471,6 +483,27 @@ var getTonalColor = (color, lightness) => {
   return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
 };
 
+// src/utils/isDarkColor.ts
+var isDarkColor = (value) => {
+  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;
+};
+
+// src/utils/getColorRoles.ts
+var getColorRoles = (base, surface, containerAlpha = 0.15) => {
+  const container = getBlendedColor(base, surface, containerAlpha);
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  };
+};
+
 // src/utils/getTriadicPalette.ts
 var HARMONY_OFFSETS = {
   analogous: [1 / 12, 2 / 12],
@@ -552,17 +585,12 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// src/utils/isDarkColor.ts
-var isDarkColor = (value) => {
-  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;
-};
-
 // src/useComputedTheme.ts
+var SEMANTIC_BASE_COLORS = {
+  success: "#2E7D32",
+  warning: "#A15C00",
+  danger: "#B00020"
+};
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
   const [theme, setTheme] = (0, import_react5.useState)(null);
   const computeTheme = (0, import_react5.useCallback)(() => {
@@ -570,27 +598,45 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     if (resolved === "system") resolved = import_react_native3.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
     const base = resolved === "dark" ? import_react_native_paper4.MD3DarkTheme : import_react_native_paper4.MD3LightTheme;
+    const surface = base.colors.surface;
+    const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface);
+    const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface);
+    const dangerRoles = getColorRoles(SEMANTIC_BASE_COLORS.danger, surface);
     const _theme = {
       ...base,
       colors: {
         ...base.colors,
-        elevation: { ...base.colors.elevation }
+        elevation: { ...base.colors.elevation },
+        success: successRoles.color,
+        onSuccess: successRoles.onColor,
+        successContainer: successRoles.container,
+        onSuccessContainer: successRoles.onContainer,
+        warning: warningRoles.color,
+        onWarning: warningRoles.onColor,
+        warningContainer: warningRoles.container,
+        onWarningContainer: warningRoles.onContainer,
+        danger: dangerRoles.color,
+        onDanger: dangerRoles.onColor,
+        dangerContainer: dangerRoles.container,
+        onDangerContainer: dangerRoles.onContainer
       }
     };
     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 primaryRoles = getColorRoles(palette.primary, surface);
+    _theme.colors.primary = primaryRoles.color;
+    _theme.colors.onPrimary = primaryRoles.onColor;
+    _theme.colors.primaryContainer = primaryRoles.container;
+    _theme.colors.onPrimaryContainer = primaryRoles.onContainer;
+    const secondaryRoles = getColorRoles(palette.secondary, surface);
+    _theme.colors.secondary = secondaryRoles.color;
+    _theme.colors.onSecondary = secondaryRoles.onColor;
+    _theme.colors.secondaryContainer = secondaryRoles.container;
+    _theme.colors.onSecondaryContainer = secondaryRoles.onContainer;
+    const tertiaryRoles = getColorRoles(palette.tertiary, surface);
+    _theme.colors.tertiary = tertiaryRoles.color;
+    _theme.colors.onTertiary = tertiaryRoles.onColor;
+    _theme.colors.tertiaryContainer = tertiaryRoles.container;
+    _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer;
     const blended = getBlendedColor(color, palette.secondary, 0.5);
     const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
     _theme.colors.background = base.dark ? "#0F0F0F" : "#F0F0F0";
@@ -714,6 +760,15 @@ function useSwatchSize(fallback) {
   return { onLayout, size };
 }
 
+// src/utils/getSwatchContrast.ts
+var RING_WIDTH = 1;
+var SELECTED_RING_WIDTH = 3;
+var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
+var getSwatchRing = (color, selected, outlineColor) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+});
+
 // src/components/Dialog.tsx
 var import_react9 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
@@ -805,10 +860,11 @@ var defaultColors = [
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = (0, import_react_native_paper10.useTheme)();
   const [open, setOpen] = (0, import_react10.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: "white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_react_native7.TouchableOpacity,
       {
@@ -816,15 +872,14 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
           onChange(hex);
           setOpen(false);
         },
-        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles3.selected],
-        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: "white" })
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
+        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
   ] });
 };
 var styles3 = import_react_native7.StyleSheet.create({
-  selected: { borderColor: "white", borderWidth: 3 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
@@ -926,12 +981,13 @@ var buildWedges = (weights) => {
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
 var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = (0, import_react_native_paper15.useTheme)();
   const [open, setOpen] = (0, import_react12.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TouchableRipple, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native9.View, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: styles5.triggerIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: "white" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       import_react_native9.TouchableOpacity,
@@ -943,7 +999,7 @@ var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights
         style: [styles5.swatch, { height: size, width: size }],
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.selectedRing, { borderRadius: size / 2 }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: "white" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
         ]
       },
       hex
@@ -955,7 +1011,7 @@ var styles5 = import_react_native9.StyleSheet.create({
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
   rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
-  selectedRing: { alignItems: "center", borderColor: "white", borderWidth: 3, bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -1010,6 +1066,10 @@ var selectThemeBlur = (state) => state.blur;
 var selectThemeColor = (state) => state.color;
 var selectThemeHarmony = (state) => state.harmony;
 
+// src/useTheme.ts
+var import_react_native_paper17 = require("react-native-paper");
+var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
+
 // src/useThemeSettings.ts
 var import_react14 = require("react");
 var useThemeSettings = () => (0, import_react14.useContext)(ThemeSettingsContext);
@@ -1035,12 +1095,15 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   Menu,
   PalettePicker,
   Provider,
+  SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getColorRoles,
+  getContrastColor,
   getHex,
   getRgb,
   getTintTextColor,
@@ -1053,6 +1116,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   selectThemeHarmony,
   themeActions,
   themeReducer,
+  useAutoPaperTheme,
   useBlur,
   useComputedTheme,
   usePaperDefaults,

package/dist/index.mjs

@@ -61,11 +61,19 @@ var Appbar = {
 import { SegmentedButtons } from "react-native-paper";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var APPEARANCES = [
-  { label: "System", value: "system", icon: "brightness-auto" },
-  { label: "Light", value: "light", icon: "white-balance-sunny" },
-  { label: "Dark", value: "dark", icon: "weather-night" }
+  { label: "System", value: "system" },
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" }
 ];
-var AppearancePicker = ({ value, onChange }) => /* @__PURE__ */ jsx2(SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon })) });
+var DEFAULT_ICONS = {
+  system: "monitor",
+  light: "white-balance-sunny",
+  dark: "weather-night"
+};
+var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons };
+  return /* @__PURE__ */ jsx2(SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : void 0, icon: resolvedIcons[a.value], accessibilityLabel: a.label })) });
+};
 
 // src/components/BlurView.tsx
 import { useContext as useContext3 } from "react";
@@ -407,6 +415,27 @@ var getTonalColor = (color, lightness) => {
   return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
 };
 
+// src/utils/isDarkColor.ts
+var isDarkColor = (value) => {
+  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;
+};
+
+// src/utils/getColorRoles.ts
+var getColorRoles = (base, surface, containerAlpha = 0.15) => {
+  const container = getBlendedColor(base, surface, containerAlpha);
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  };
+};
+
 // src/utils/getTriadicPalette.ts
 var HARMONY_OFFSETS = {
   analogous: [1 / 12, 2 / 12],
@@ -488,17 +517,12 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-// src/utils/isDarkColor.ts
-var isDarkColor = (value) => {
-  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;
-};
-
 // src/useComputedTheme.ts
+var SEMANTIC_BASE_COLORS = {
+  success: "#2E7D32",
+  warning: "#A15C00",
+  danger: "#B00020"
+};
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
   const [theme, setTheme] = useState(null);
   const computeTheme = useCallback(() => {
@@ -506,27 +530,45 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     if (resolved === "system") resolved = Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
     const base = resolved === "dark" ? MD3DarkTheme : MD3LightTheme;
+    const surface = base.colors.surface;
+    const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface);
+    const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface);
+    const dangerRoles = getColorRoles(SEMANTIC_BASE_COLORS.danger, surface);
     const _theme = {
       ...base,
       colors: {
         ...base.colors,
-        elevation: { ...base.colors.elevation }
+        elevation: { ...base.colors.elevation },
+        success: successRoles.color,
+        onSuccess: successRoles.onColor,
+        successContainer: successRoles.container,
+        onSuccessContainer: successRoles.onContainer,
+        warning: warningRoles.color,
+        onWarning: warningRoles.onColor,
+        warningContainer: warningRoles.container,
+        onWarningContainer: warningRoles.onContainer,
+        danger: dangerRoles.color,
+        onDanger: dangerRoles.onColor,
+        dangerContainer: dangerRoles.container,
+        onDangerContainer: dangerRoles.onContainer
       }
     };
     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 primaryRoles = getColorRoles(palette.primary, surface);
+    _theme.colors.primary = primaryRoles.color;
+    _theme.colors.onPrimary = primaryRoles.onColor;
+    _theme.colors.primaryContainer = primaryRoles.container;
+    _theme.colors.onPrimaryContainer = primaryRoles.onContainer;
+    const secondaryRoles = getColorRoles(palette.secondary, surface);
+    _theme.colors.secondary = secondaryRoles.color;
+    _theme.colors.onSecondary = secondaryRoles.onColor;
+    _theme.colors.secondaryContainer = secondaryRoles.container;
+    _theme.colors.onSecondaryContainer = secondaryRoles.onContainer;
+    const tertiaryRoles = getColorRoles(palette.tertiary, surface);
+    _theme.colors.tertiary = tertiaryRoles.color;
+    _theme.colors.onTertiary = tertiaryRoles.onColor;
+    _theme.colors.tertiaryContainer = tertiaryRoles.container;
+    _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer;
     const blended = getBlendedColor(color, palette.secondary, 0.5);
     const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
     _theme.colors.background = base.dark ? "#0F0F0F" : "#F0F0F0";
@@ -637,7 +679,7 @@ function Chip({ variant, style, selectedColor, ...props }) {
 // src/components/ColorPicker.tsx
 import { useState as useState5 } from "react";
 import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "react-native";
-import { Icon, TouchableRipple } from "react-native-paper";
+import { Icon, TouchableRipple, useTheme as useTheme6 } from "react-native-paper";
 
 // src/useSwatchGrid.ts
 import { useState as useState3 } from "react";
@@ -650,6 +692,15 @@ function useSwatchSize(fallback) {
   return { onLayout, size };
 }
 
+// src/utils/getSwatchContrast.ts
+var RING_WIDTH = 1;
+var SELECTED_RING_WIDTH = 3;
+var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
+var getSwatchRing = (color, selected, outlineColor) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+});
+
 // src/components/Dialog.tsx
 import React2, { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
@@ -741,10 +792,11 @@ var defaultColors = [
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = useTheme6();
   const [open, setOpen] = useState5(false);
   const { onLayout, size } = useSwatchSize(SIZE);
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }], borderless: true, children: /* @__PURE__ */ jsx9(Icon, { source: "palette", size: 20, color: "white" }) }),
+    /* @__PURE__ */ jsx9(TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ jsx9(Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
     /* @__PURE__ */ jsx9(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx9(Dialog.Content, { children: /* @__PURE__ */ jsx9(View4, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsx9(
       TouchableOpacity,
       {
@@ -752,15 +804,14 @@ var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp })
           onChange(hex);
           setOpen(false);
         },
-        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles3.selected],
-        children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: "white" })
+        style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
+        children: value === hex && /* @__PURE__ */ jsx9(Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
   ] });
 };
 var styles3 = StyleSheet4.create({
-  selected: { borderColor: "white", borderWidth: 3 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
@@ -831,11 +882,11 @@ var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
 };
 
 // src/components/IconButton.tsx
-import { IconButton as PaperIconButton, useTheme as useTheme6 } from "react-native-paper";
+import { IconButton as PaperIconButton, useTheme as useTheme7 } from "react-native-paper";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function IconButton({ variant, iconColor, containerColor, ...props }) {
   const defaults = usePaperDefaults();
-  const { colors } = useTheme6();
+  const { colors } = useTheme7();
   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__ */ jsx13(PaperIconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
@@ -844,7 +895,7 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 // src/components/PalettePicker.tsx
 import { useState as useState7 } from "react";
 import { StyleSheet as StyleSheet6, TouchableOpacity as TouchableOpacity2, View as View5 } from "react-native";
-import { Icon as Icon2, TouchableRipple as TouchableRipple2 } from "react-native-paper";
+import { Icon as Icon2, TouchableRipple as TouchableRipple2, useTheme as useTheme8 } from "react-native-paper";
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIZE2 = 48;
 var defaultWeights = { primary: 2, secondary: 1, tertiary: 1 };
@@ -862,12 +913,13 @@ var buildWedges = (weights) => {
 var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ jsx14(View5, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: styles5.halfMask, children: /* @__PURE__ */ jsx14(View5, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ jsx14(View5, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
 var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
+  const { colors: themeColors } = useTheme8();
   const [open, setOpen] = useState7(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx14(TouchableRipple2, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ jsxs6(View5, { style: styles5.triggerContent, children: [
       /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(value, harmony), weights }),
-      /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: styles5.triggerIcon, children: /* @__PURE__ */ jsx14(Icon2, { source: "palette", size: 20, color: "white" }) })
+      /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ jsx14(Icon2, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
     /* @__PURE__ */ jsx14(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ jsx14(Dialog.Content, { children: /* @__PURE__ */ jsx14(View5, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ jsxs6(
       TouchableOpacity2,
@@ -879,7 +931,7 @@ var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights
         style: [styles5.swatch, { height: size, width: size }],
         children: [
           /* @__PURE__ */ jsx14(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          value === hex && /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.selectedRing, { borderRadius: size / 2 }], children: /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: "white" }) })
+          /* @__PURE__ */ jsx14(View5, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ jsx14(Icon2, { source: "check", size: 20, color: getContrastColor(hex) }) })
         ]
       },
       hex
@@ -891,7 +943,7 @@ var styles5 = StyleSheet6.create({
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
   rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
-  selectedRing: { alignItems: "center", borderColor: "white", borderWidth: 3, bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
+  ring: { alignItems: "center", bottom: 0, justifyContent: "center", left: 0, position: "absolute", right: 0, top: 0 },
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE2 / 2, height: SIZE2, justifyContent: "center", width: SIZE2 },
@@ -946,6 +998,10 @@ var selectThemeBlur = (state) => state.blur;
 var selectThemeColor = (state) => state.color;
 var selectThemeHarmony = (state) => state.harmony;
 
+// src/useTheme.ts
+import { useTheme as usePaperTheme } from "react-native-paper";
+var useAutoPaperTheme = () => usePaperTheme();
+
 // src/useThemeSettings.ts
 import { useContext as useContext5 } from "react";
 var useThemeSettings = () => useContext5(ThemeSettingsContext);
@@ -970,12 +1026,15 @@ export {
   Menu,
   PalettePicker,
   Provider,
+  SEMANTIC_BASE_COLORS,
   TextInput,
   ThemeSettingsContext,
   createThemeReducer,
   defaultColors,
   defaultThemeSettings,
   getBlendedColor,
+  getColorRoles,
+  getContrastColor,
   getHex,
   getRgb,
   getTintTextColor,
@@ -988,6 +1047,7 @@ export {
   selectThemeHarmony,
   themeActions,
   themeReducer,
+  useAutoPaperTheme,
   useBlur,
   useComputedTheme,
   usePaperDefaults,

package/package.json

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

package/src/components/AppearancePicker.tsx

@@ -2,15 +2,35 @@ import { SegmentedButtons } from 'react-native-paper'
 
 import type { ThemeAppearance } from '../useComputedTheme'
 
-const APPEARANCES: { label: string; value: ThemeAppearance; icon: string }[] = [
-  { label: 'System', value: 'system', icon: 'brightness-auto' },
-  { label: 'Light', value: 'light', icon: 'white-balance-sunny' },
-  { label: 'Dark', value: 'dark', icon: 'weather-night' }
+const APPEARANCES: { label: string; value: ThemeAppearance }[] = [
+  { label: 'System', value: 'system' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' }
 ]
 
+export type AppearanceIcons = Partial<Record<ThemeAppearance, string>>
+
+// 'monitor' (a plain device/screen glyph) reads more clearly as "match my device" than
+// 'brightness-auto' (an exposure/brightness symbol) — swap via the `icons` prop for a different
+// convention, e.g. `theme-light-dark`'s half-sun/half-moon.
+const DEFAULT_ICONS: Record<ThemeAppearance, string> = {
+  system: 'monitor',
+  light: 'white-balance-sunny',
+  dark: 'weather-night'
+}
+
 type Props = {
   value: ThemeAppearance
   onChange: (appearance: ThemeAppearance) => void
+  // Hides the text label, leaving just the icon per segment — useful in tight layouts where
+  // "System" truncates. accessibilityLabel is always set regardless, so screen readers still
+  // announce the full word either way.
+  showLabels?: boolean
+  // Per-value icon overrides, merged over DEFAULT_ICONS — pass just the ones you want to change.
+  icons?: AppearanceIcons
 }
 
-export const AppearancePicker = ({ value, onChange }: Props) => <SegmentedButtons value={value} onValueChange={(v) => onChange(v as ThemeAppearance)} buttons={APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon }))} />
+export const AppearancePicker = ({ value, onChange, showLabels = true, icons }: Props) => {
+  const resolvedIcons = { ...DEFAULT_ICONS, ...icons }
+  return <SegmentedButtons value={value} onValueChange={(v) => onChange(v as ThemeAppearance)} buttons={APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : undefined, icon: resolvedIcons[a.value], accessibilityLabel: a.label }))} />
+}

package/src/components/ColorPicker.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Icon, TouchableRipple } from 'react-native-paper'
+import { Icon, TouchableRipple, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
 import { SWATCH_GRID_GAP, useSwatchSize } from '../useSwatchGrid'
+import { getContrastColor, getSwatchRing } from '../utils/getSwatchContrast'
 import { Dialog } from './Dialog'
 
 const SIZE = 48
@@ -42,13 +43,14 @@ type Props = {
 
 export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
+  const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
   const { onLayout, size } = useSwatchSize(SIZE)
 
   return (
     <>
-      <TouchableRipple onPress={() => setOpen(true)} style={[styles.trigger, { backgroundColor: value }]} borderless>
-        <Icon source='palette' size={20} color='white' />
+      <TouchableRipple onPress={() => setOpen(true)} style={[styles.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)]} borderless>
+        <Icon source='palette' size={20} color={getContrastColor(value)} />
       </TouchableRipple>
 
       <Dialog blur={blur} visible={open} onDismiss={() => setOpen(false)}>
@@ -61,9 +63,9 @@ export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blu
                   onChange(hex)
                   setOpen(false)
                 }}
-                style={[styles.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, value === hex && styles.selected]}
+                style={[styles.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)]}
               >
-                {value === hex && <Icon source='check' size={20} color='white' />}
+                {value === hex && <Icon source='check' size={20} color={getContrastColor(hex)} />}
               </TouchableOpacity>
             ))}
           </View>
@@ -74,7 +76,6 @@ export const ColorPicker = ({ value, onChange, colors = defaultColors, blur: blu
 }
 
 const styles = StyleSheet.create({
-  selected: { borderColor: 'white', borderWidth: 3 },
   swatch: { alignItems: 'center', justifyContent: 'center' },
   swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE }

package/src/components/PalettePicker.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Icon, TouchableRipple } from 'react-native-paper'
+import { Icon, TouchableRipple, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
 import { SWATCH_GRID_GAP, useSwatchSize } from '../useSwatchGrid'
+import { getContrastColor, getSwatchRing } from '../utils/getSwatchContrast'
 import type { ColorHarmony, TriadicPalette } from '../utils/getTriadicPalette'
 import { getTriadicPalette } from '../utils/getTriadicPalette'
 import type { SeedColor } from './ColorPicker'
@@ -61,6 +62,7 @@ type Props = {
 
 export const PalettePicker = ({ value, onChange, harmony = 'split-complementary', weights, colors = defaultColors, blur: blurProp }: Props) => {
   const blur = useBlur(blurProp)
+  const { colors: themeColors } = useTheme()
   const [open, setOpen] = useState(false)
   const { onLayout, size } = useSwatchSize(SIZE)
 
@@ -69,8 +71,8 @@ export const PalettePicker = ({ value, onChange, harmony = 'split-complementary'
       <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}>
-            <Icon source='palette' size={20} color='white' />
+          <View pointerEvents='none' style={[styles.triggerIcon, { borderRadius: SIZE / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)]}>
+            <Icon source='palette' size={20} color={getContrastColor(value)} />
           </View>
         </View>
       </TouchableRipple>
@@ -88,11 +90,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} />
-                {value === hex && (
-                  <View pointerEvents='none' style={[styles.selectedRing, { borderRadius: size / 2 }]}>
-                    <Icon source='check' size={20} color='white' />
-                  </View>
-                )}
+                <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)} />}
+                </View>
               </TouchableOpacity>
             ))}
           </View>
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
   innerRotator: { height: '100%', left: '-100%', overflow: 'hidden', position: 'absolute', top: 0, width: '200%' },
   pie: { overflow: 'hidden' },
   rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },
-  selectedRing: { alignItems: 'center', borderColor: 'white', borderWidth: 3, bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
+  ring: { alignItems: 'center', bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
   swatch: { alignItems: 'center', justifyContent: 'center' },
   swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE },

package/src/index.ts

@@ -1,5 +1,6 @@
 export { useBlur } from './BlurContext'
 export { Appbar } from './components/Appbar'
+export type { AppearanceIcons } from './components/AppearancePicker'
 export { AppearancePicker } from './components/AppearancePicker'
 export type { BlurViewProps } from './components/BlurView'
 export { BlurView } from './components/BlurView'
@@ -28,13 +29,17 @@ export type { ProviderProps } from './ThemeProvider'
 export { Provider } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
-export type { ThemeAppearance } from './useComputedTheme'
-export { useComputedTheme } from './useComputedTheme'
+export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'
+export { SEMANTIC_BASE_COLORS, useComputedTheme } from './useComputedTheme'
+export { useAutoPaperTheme } from './useTheme'
 export { useThemeSettings } from './useThemeSettings'
 export { getBlendedColor } from './utils/getBlendedColor'
+export type { ColorRoles } from './utils/getColorRoles'
+export { getColorRoles } from './utils/getColorRoles'
 export { getHex } from './utils/getHex'
 export type { RGB } from './utils/getRgb'
 export { getRgb } from './utils/getRgb'
+export { getContrastColor } from './utils/getSwatchContrast'
 export { getTintTextColor } from './utils/getTintTextColor'
 export { getTonalColor } from './utils/getTonalColor'
 export type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'

package/src/useComputedTheme.ts

@@ -3,46 +3,112 @@ import { Appearance } from 'react-native'
 import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper'
 
 import { getBlendedColor } from './utils/getBlendedColor'
-import { getTonalColor } from './utils/getTonalColor'
+import { getColorRoles } from './utils/getColorRoles'
 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)
+// Fixed hue/saturation, like MD3's own `error` role (see LightTheme.tsx/DarkTheme.tsx — error is a
+// static Material palette constant, never derived from the seed color either). A "warning" amber
+// shouldn't drift toward the app's accent hue any more than the built-in danger red does; only
+// lightness adapts per light/dark mode below, via getColorRoles. #A15C00 (not the more obvious
+// goldenrod #B8860B) was picked because its onWarning text fails WCAG AA (3.05:1) against the base
+// color itself — see getColorRoles.test.ts's "onColor" caveat: the onColor heuristic (isDarkColor-
+// based binary lightness pick) isn't a verified guarantee like onContainer is, so the base hex
+// itself has to be chosen to land safely, not assumed to.
+//
+// `danger` is deliberately a separate namespace from MD3's own `error` (below, untouched) rather
+// than a fourth tier folded into it — react-native-paper's own components (TextInput's error state,
+// HelperText, Badge) read theme.colors.error/onError directly, so a consumer that wants a
+// getColorRoles-derived "high severity" color without changing what those components render needs
+// its own name. #B00020 already clears WCAG AA for both onDanger-vs-danger (6.16:1) and
+// dangerContainer/onDangerContainer (12–17:1 across modes) — verified the same way as warning's
+// base above.
+export const SEMANTIC_BASE_COLORS = {
+  success: '#2E7D32',
+  warning: '#A15C00',
+  danger: '#B00020'
+}
+
+export type SemanticColorRoles = {
+  success: string
+  onSuccess: string
+  successContainer: string
+  onSuccessContainer: string
+  warning: string
+  onWarning: string
+  warningContainer: string
+  onWarningContainer: string
+  danger: string
+  onDanger: string
+  dangerContainer: string
+  onDangerContainer: string
+}
+
+// MD3Theme's `colors` is a closed `type` (not an `interface`), so it can't be widened via
+// TypeScript's declare-module augmentation — this is the extension point instead, meant to be used
+// 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, harmony: ColorHarmony = 'split-complementary'): AutoPaperTheme | null {
+  const [theme, setTheme] = useState<AutoPaperTheme | 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 surface = base.colors.surface
 
-    const _theme: MD3Theme = {
+    // error/onError/errorContainer/onErrorContainer are deliberately left untouched below (not run
+    // through getColorRoles like success/warning/primary/secondary/tertiary are) — they're a fixed,
+    // Google-verified Material palette that react-native-paper's own components (TextInput's error
+    // state, HelperText, Badge) read directly, so re-deriving them would change form-validation
+    // colors across every consuming app and risk diverging from a contrast guarantee that's already
+    // correct as shipped.
+    const successRoles = getColorRoles(SEMANTIC_BASE_COLORS.success, surface)
+    const warningRoles = getColorRoles(SEMANTIC_BASE_COLORS.warning, surface)
+    const dangerRoles = getColorRoles(SEMANTIC_BASE_COLORS.danger, surface)
+
+    const _theme: AutoPaperTheme = {
       ...base,
       colors: {
         ...base.colors,
-        elevation: { ...base.colors.elevation }
+        elevation: { ...base.colors.elevation },
+        success: successRoles.color,
+        onSuccess: successRoles.onColor,
+        successContainer: successRoles.container,
+        onSuccessContainer: successRoles.onContainer,
+        warning: warningRoles.color,
+        onWarning: warningRoles.onColor,
+        warningContainer: warningRoles.container,
+        onWarningContainer: warningRoles.onContainer,
+        danger: dangerRoles.color,
+        onDanger: dangerRoles.onColor,
+        dangerContainer: dangerRoles.container,
+        onDangerContainer: dangerRoles.onContainer
       }
     }
 
     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 primaryRoles = getColorRoles(palette.primary, surface)
+    _theme.colors.primary = primaryRoles.color
+    _theme.colors.onPrimary = primaryRoles.onColor
+    _theme.colors.primaryContainer = primaryRoles.container
+    _theme.colors.onPrimaryContainer = primaryRoles.onContainer
+
+    const secondaryRoles = getColorRoles(palette.secondary, surface)
+    _theme.colors.secondary = secondaryRoles.color
+    _theme.colors.onSecondary = secondaryRoles.onColor
+    _theme.colors.secondaryContainer = secondaryRoles.container
+    _theme.colors.onSecondaryContainer = secondaryRoles.onContainer
+
+    const tertiaryRoles = getColorRoles(palette.tertiary, surface)
+    _theme.colors.tertiary = tertiaryRoles.color
+    _theme.colors.onTertiary = tertiaryRoles.onColor
+    _theme.colors.tertiaryContainer = tertiaryRoles.container
+    _theme.colors.onTertiaryContainer = tertiaryRoles.onContainer
 
     const blended = getBlendedColor(color, palette.secondary, 0.5)
     const tintSurface = (alpha: number) => getBlendedColor(blended, surface, alpha)

package/src/useTheme.ts

@@ -0,0 +1,11 @@
+import { useTheme as usePaperTheme } from 'react-native-paper'
+
+import type { AutoPaperTheme } from './useComputedTheme'
+
+// react-native-paper's own useTheme is generic (`useTheme<T = MD3Theme>()`) specifically so
+// consumers can extend MD3Theme with their own fields — this is that extension point, so any
+// component can read theme.colors.success/warning (and their onX/Container variants) with full
+// type safety, without redeclaring the type parameter at every call site. Named distinctly from
+// react-native-paper's own `useTheme` (not re-exported under the same name) to avoid the two being
+// silently interchangeable at an import statement.
+export const useAutoPaperTheme = (): AutoPaperTheme => usePaperTheme<AutoPaperTheme>()

package/src/utils/getColorRoles.ts

@@ -0,0 +1,29 @@
+import { getBlendedColor } from './getBlendedColor'
+import { getTonalColor } from './getTonalColor'
+import { isDarkColor } from './isDarkColor'
+
+export type ColorRoles = {
+  color: string
+  onColor: string
+  container: string
+  onContainer: string
+}
+
+// The MD3 "color / onColor / container / onContainer" quadruple, generalized from the math
+// useComputedTheme already uses for primary/secondary/tertiary: onColor is tuned to sit on the
+// vivid color itself, container is base blended toward the theme's real surface (so it inherits
+// that surface's actual lightness rather than a fixed light/dark guess), and onContainer is tuned
+// against the *computed* container rather than a light/dark assumption — so it stays readable
+// whatever surface color it's handed. onContainer also reads safely directly on `surface` itself
+// (not just on `container`), since container is only lightly blended toward it.
+export const getColorRoles = (base: string, surface: string, containerAlpha = 0.15): ColorRoles => {
+  const container = getBlendedColor(base, surface, containerAlpha)
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  }
+}
+
+export default getColorRoles

package/src/utils/getSwatchContrast.ts

@@ -0,0 +1,26 @@
+import { isDarkColor } from './isDarkColor'
+
+// Width of the outline every swatch carries so its edge is defined against the surface behind it.
+const RING_WIDTH = 1
+// The selected swatch trades that outline for a thicker one in a contrasting colour.
+const SELECTED_RING_WIDTH = 3
+
+// Colour for content sitting directly on a fill of `color` — a check mark or a 20px icon. Plain
+// white/black rather than a tinted tone from getTonalColor, because this has to stay legible on
+// fully saturated fills and on pure black/white alike.
+export const getContrastColor = (color: string): string => (isDarkColor(color) ? '#ffffff' : '#000000')
+
+// Two different jobs, which is why the unselected and selected rings resolve against different
+// things:
+//
+// - Unselected: separate the swatch from the *surface* it sits on. A white swatch on a light
+//   dialog and a black swatch on a dark one are otherwise edgeless — invisible, not just subtle.
+//   The theme's outline colour tracks the surface, so it works in both appearances.
+// - Selected: read as a marker against the *swatch's own fill*. A hardcoded white ring vanished on
+//   the white swatch, so picking white gave no feedback that anything had been picked.
+export const getSwatchRing = (color: string, selected: boolean, outlineColor: string) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+})
+
+export default getContrastColor