@rific/auto-paper 0.6.4 → 0.8.0

package/README.md

@@ -7,8 +7,9 @@ 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`, `TextInput`) with prop defaults via context
+- 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
 
 ## Installation
@@ -111,7 +112,7 @@ import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
 </AutoPaperProvider>
 ```
 
-Available wrapper components: `Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+Available wrapper components: `Appbar`, `AppearancePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
 
 ### With Redux
 
@@ -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.
@@ -309,6 +357,28 @@ import { IconButton } from '@rific/auto-paper'
 
 `IconButtonProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `IconButtonProps` with the `variant` field. Use `PaperIconButtonProps` if you need the base paper type.
 
+### `PalettePicker`
+
+Like `ColorPicker`, but each swatch — and the trigger itself — renders the seed's full triadic palette as a 3-wedge pie instead of a flat color, so you see the whole result before picking.
+
+```tsx
+import { PalettePicker, useThemeSettings } from '@rific/auto-paper'
+
+function SettingsScreen() {
+  const { settings: { color, harmony }, set } = useThemeSettings()
+  return <PalettePicker value={color} harmony={harmony} onChange={(c) => set({ color: c })} />
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `value` | `string` | Currently selected seed color |
+| `onChange` | `(color: string) => void` | Called with the seed color when a swatch is tapped |
+| `harmony` | `ColorHarmony` | Harmony used to compute each swatch's preview palette. Defaults to `'split-complementary'` |
+| `weights` | `PaletteWeights` | Relative size of each wedge — `{ primary, secondary, tertiary }`. Defaults to `{ primary: 2, secondary: 1, tertiary: 1 }` (primary half the pie, secondary/tertiary a quarter each). Values are normalized, so any positive ratio works; keep each share at or under half the total so its wedge stays a single slice |
+| `colors` | `SeedColor[]` | Seed color swatches to offer. Defaults to the same set as `ColorPicker` |
+| `blur` | `boolean` | Overrides the ambient blur setting for this component's dialog |
+
 ### `PaperDefaults` / `usePaperDefaults`
 
 `PaperDefaults` is the type for the `defaults` prop on `Provider`:
@@ -365,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)
@@ -375,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 Props$2 = {
+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$2) => 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';
@@ -86,18 +111,19 @@ type SeedColor = {
     value: string;
 };
 declare const defaultColors: SeedColor[];
-type Props$1 = {
+type Props$2 = {
     value: string;
     onChange: (color: string) => void;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
-type DialogProps = DialogProps$1 & {
+type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
+    style?: StyleProp<ViewStyle>;
 };
-declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -108,12 +134,12 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props = {
+type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     blur?: boolean;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -127,6 +153,21 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
@@ -224,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 = {
@@ -238,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, 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 Props$2 = {
+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$2) => 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';
@@ -86,18 +111,19 @@ type SeedColor = {
     value: string;
 };
 declare const defaultColors: SeedColor[];
-type Props$1 = {
+type Props$2 = {
     value: string;
     onChange: (color: string) => void;
     colors?: SeedColor[];
     blur?: boolean;
 };
-declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$1) => react.JSX.Element;
+declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
-type DialogProps = DialogProps$1 & {
+type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
+    style?: StyleProp<ViewStyle>;
 };
-declare function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -108,12 +134,12 @@ declare const Dialog: typeof DialogComponent;
 
 declare function FAB(props: FABProps): react.JSX.Element;
 
-type Props = {
+type Props$1 = {
     value: ColorHarmony;
     onChange: (harmony: ColorHarmony) => void;
     blur?: boolean;
 };
-declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props) => react.JSX.Element;
+declare const HarmonyPicker: ({ value, onChange, blur: blurProp }: Props$1) => react.JSX.Element;
 
 type IconButtonProps = IconButtonProps$1 & {
     variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
@@ -127,6 +153,21 @@ declare const Menu: (({ blur: blurProp, children, ...props }: MenuProps) => reac
     Item: react__default.FC<MenuItemProps>;
 };
 
+type PaletteWeights = {
+    primary: number;
+    secondary: number;
+    tertiary: number;
+};
+type Props = {
+    value: string;
+    onChange: (color: string) => void;
+    harmony?: ColorHarmony;
+    weights?: PaletteWeights;
+    colors?: SeedColor[];
+    blur?: boolean;
+};
+declare const PalettePicker: ({ value, onChange, harmony, weights, colors, blur: blurProp }: Props) => react.JSX.Element;
+
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
 
 type PaperDefaults = {
@@ -224,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 = {
@@ -238,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, 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 };