55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
|
import { MD3DarkTheme, MD3LightTheme, type MD3Theme } from 'react-native-paper';
|
||
|
|
import { borderRadius } from './tokens';
|
||
|
|
import type { AppColors } from './palettes';
|
||
|
|
|
||
|
|
export function buildPaperTheme(colors: AppColors, isDark: boolean): MD3Theme {
|
||
|
|
const base = isDark ? MD3DarkTheme : MD3LightTheme;
|
||
|
|
return {
|
||
|
|
...base,
|
||
|
|
colors: {
|
||
|
|
...base.colors,
|
||
|
|
primary: colors.primary.main,
|
||
|
|
primaryContainer: colors.primary.light,
|
||
|
|
secondary: colors.secondary.main,
|
||
|
|
secondaryContainer: colors.secondary.light,
|
||
|
|
tertiary: colors.info.main,
|
||
|
|
tertiaryContainer: colors.info.light,
|
||
|
|
surface: colors.background.paper,
|
||
|
|
surfaceVariant: colors.background.default,
|
||
|
|
surfaceDisabled: colors.background.disabled,
|
||
|
|
background: colors.background.default,
|
||
|
|
error: colors.error.main,
|
||
|
|
errorContainer: colors.error.light,
|
||
|
|
onPrimary: colors.primary.contrast,
|
||
|
|
onPrimaryContainer: colors.primary.dark,
|
||
|
|
onSecondary: colors.text.inverse,
|
||
|
|
onSecondaryContainer: colors.secondary.dark,
|
||
|
|
onTertiary: colors.text.inverse,
|
||
|
|
onTertiaryContainer: colors.info.dark,
|
||
|
|
onSurface: colors.text.primary,
|
||
|
|
onSurfaceVariant: colors.text.secondary,
|
||
|
|
onSurfaceDisabled: colors.text.disabled,
|
||
|
|
onError: colors.text.inverse,
|
||
|
|
onErrorContainer: colors.error.dark,
|
||
|
|
onBackground: colors.text.primary,
|
||
|
|
outline: colors.divider,
|
||
|
|
outlineVariant: colors.divider,
|
||
|
|
inverseSurface: colors.text.primary,
|
||
|
|
inverseOnSurface: colors.text.inverse,
|
||
|
|
inversePrimary: colors.primary.light,
|
||
|
|
shadow: '#000000',
|
||
|
|
scrim: '#000000',
|
||
|
|
backdrop: 'rgba(0, 0, 0, 0.5)',
|
||
|
|
elevation: {
|
||
|
|
level0: 'transparent',
|
||
|
|
level1: colors.background.paper,
|
||
|
|
level2: colors.background.paper,
|
||
|
|
level3: colors.background.paper,
|
||
|
|
level4: colors.background.paper,
|
||
|
|
level5: colors.background.paper,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
roundness: borderRadius.md,
|
||
|
|
};
|
||
|
|
}
|