@gocodingnow/rn-better-boilerplate

import { DefaultTheme } from '@react-navigation/native' import { createTheme } from '@shopify/restyle' import { palette } from './palette' import { typography } from './typography' import { s, vs, mvs } from '@lib/react-native-size-matters' export const theme = createTheme({ navigation: { dark: false, colors: { ...DefaultTheme.colors, primary: palette.orange, background: palette.white, card: palette.white, text: palette.shipGray, notification: palette.black, border: palette.shipGray, }, }, colors: { text: palette.black, white: palette.white, black: palette.black, transparent: 'transparent', primary: palette.orange, error: palette.red, link: palette.blue, border: palette.shipGray, placeholder: palette.grey[600], }, spacing: { none: 0, 's-0.5': s(2), 's-0.75': s(3), 's-1': s(4), 's-1.25': s(5), 's-1.5': s(6), 's-1.75': s(7), 's-2': s(8), 's-2.25': s(9), 's-2.5': s(10), 's-3': s(12), 's-3.5': s(14), 's-4': s(16), 's-4.25': s(17), 's-4.5': s(18), 's-4.75': s(19), 's-5': s(20), 's-5.25': s(21), 's-5.5': s(22), 's-6': s(24), 's-7': s(28), 's-7.5': s(30), 's-8': s(32), 's-8.5': s(34), 's-9': s(36), 's-9.5': s(38), 's-10': s(40), 's-10.5': s(42), 's-11': s(44), 's-12': s(48), 's-13': s(50), 's-13.5': s(52), 's-14': s(56), 's-15': s(60), 's-16': s(64), 's-17': s(68), 's-17.5': s(68), 's-17.75': s(70), 's-18': s(72), 's-20': s(80), 's-24': s(96), 'vs-0.5': vs(2), 'vs-0.75': vs(3), 'vs-1': vs(4), 'vs-1.5': vs(6), 'vs-1.75': vs(5), 'vs-2': vs(8), 'vs-2.25': s(9), 'vs-2.5': vs(10), 'vs-3': vs(12), 'vs-3.5': vs(14), 'vs-3.75': vs(15), 'vs-4': vs(16), 'vs-4.5': vs(18), 'vs-5': vs(20), 'vs-5.25': vs(21), 'vs-5.5': vs(22), 'vs-5.75': vs(23), 'vs-6': vs(24), 'vs-6.5': vs(26), 'vs-7': vs(28), 'vs-7.5': vs(30), 'vs-8': vs(32), 'vs-8.5': vs(34), 'vs-9': vs(36), 'vs-9.5': vs(38), 'vs-10': vs(40), 'vs-10.5': vs(42), 'vs-11': vs(44), 'vs-12': vs(48), 'vs-13': vs(50), 'vs-13.5': vs(52), 'vs-14': vs(56), 'vs-15': vs(60), 'vs-15.5': vs(62), 'vs-15.75': vs(64), 'vs-16.5': vs(66), 'vs-17': vs(68), 'vs-17.5': vs(68), 'vs-18': vs(72), 'vs-20': vs(80), 'vs-23.5': vs(94), 'vs-25': vs(100), 'vs-30': vs(120), 'vs-32': vs(128), 'vs-35': vs(140), }, borderRadii: { none: 0, 's-0.25': s(1), 's-0.5': s(2), 's-1': s(4), 's-1.25': s(5), 's-1.5': s(6), 's-2': s(8), 's-2.5': s(10), 's-3': s(12), 's-3.5': s(14), 's-4': s(16), 's-4.5': s(18), 's-5': s(20), 's-5.5': s(22), 's-6': s(24), 's-7.5': s(30), 's-8': s(32), 's-9': s(36), 's-10': s(40), 's-10.5': s(42), 's-12': s(48), 's-18': s(72), full: 100000, }, breakpoints: { phone: 0, tablet: 768, }, textVariants: { // common regularXSS: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.tinyS, color: 'text', }, regularXS: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.tiny, color: 'text', }, regularS: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.small, color: 'text', }, regularSL: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.smallL, color: 'text', }, regular: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.regular, color: 'text', }, regularXL: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.regularXL, color: 'text', }, regularM: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.medium, color: 'text', }, semiBoldXSS: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.tinyS, color: 'text', }, semiBold: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.regular, color: 'text', }, semiBoldM: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.medium, color: 'text', lineHeight: 30, }, semiBoldXS: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.tiny, color: 'text', }, semiBoldS: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.small, color: 'text', }, semiBoldXL: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.regularXL, color: 'text', }, bold: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.regular, color: 'text', }, boldS: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.small, color: 'text', }, boldXL: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.regularXL, color: 'text', }, boldM: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.medium, color: 'text', }, boldL: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.largeL, color: 'black', }, // header: { fontFamily: typography.fontFamily.primary.semiBold, fontSize: typography.fontSize.medium, color: 'text', textTransform: 'capitalize', }, button: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.medium, color: 'text', textTransform: 'uppercase', }, buttonSolid: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.small, color: 'white', textTransform: 'uppercase', }, buttonOutline: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.medium, color: 'primary', textTransform: 'uppercase', }, buttonClear: { fontFamily: typography.fontFamily.primary.bold, fontSize: typography.fontSize.medium, color: 'text', textTransform: 'uppercase', }, input: { fontFamily: typography.fontFamily.primary.regular, fontSize: typography.fontSize.tiny, color: 'text', }, }, buttonVariants: { solid: { paddingHorizontal: 's-13', borderRadius: 's-3', minHeight: mvs(48), alignItems: 'center', justifyContent: 'center', backgroundColor: 'primary', paddingVertical: 0, paddingTop: 0, paddingBottom: 0, }, clear: { padding: 0, paddingVertical: 0, margin: 0, backgroundColor: 'transparent', }, outline: { paddingHorizontal: 's-13', minHeight: mvs(48), borderRadius: 's-3', alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent', borderColor: 'primary', borderWidth: 1, paddingVertical: 0, }, }, inputVariants: { default: { borderRadius: 's-1.25', backgroundColor: 'white', borderColor: 'border', borderWidth: 1, }, underline: { borderBottomWidth: 2, borderBottomColor: 'border', }, none: { borderBottomWidth: 0, }, }, fontSize: typography.fontSize, fontFamily: { 'primary-bold': typography.fontFamily.primary.bold, 'primary-regular': typography.fontFamily.primary.regular, 'primary-semi': typography.fontFamily.primary.semiBold, }, }) export type Theme = typeof theme export const darkTheme: Theme = { ...theme, }