Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
8.4 kB · 341 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342import {Platform} from 'react-native'
import {tokens} from '#/alf'import {type Palette} from '#/alf/themes'import {fontWeight} from '#/alf/tokens'import {colors} from './styles'import {type Theme} from './ThemeContext'
export const defaultTheme = ({ lightPalette, darkPalette,}: { lightPalette: Palette darkPalette: Palette}): Theme => ({ colorScheme: 'light', palette: { default: { background: lightPalette.white, backgroundLight: lightPalette.contrast_25, text: lightPalette.black, textLight: lightPalette.contrast_700, textInverted: lightPalette.white, link: lightPalette.primary_500, border: lightPalette.contrast_100, }, primary: { background: colors.blue3, backgroundLight: colors.blue2, text: colors.white, textLight: colors.blue0, textInverted: colors.blue3, link: colors.blue0, border: colors.blue4, }, secondary: { background: colors.green3, backgroundLight: colors.green2, text: colors.white, textLight: colors.green1, textInverted: colors.green4, link: colors.green1, border: colors.green4, }, inverted: { background: darkPalette.black, backgroundLight: darkPalette.contrast_50, text: darkPalette.white, textLight: darkPalette.contrast_700, textInverted: darkPalette.black, link: darkPalette.primary_500, border: darkPalette.contrast_100, }, error: { background: colors.red3, backgroundLight: colors.red2, text: colors.white, textLight: colors.red1, textInverted: colors.red3, link: colors.red1, border: colors.red4, }, }, shapes: { button: { // TODO }, bigButton: { // TODO }, smallButton: { // TODO }, }, typography: { '2xl-thin': { fontSize: 18, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, '2xl': { fontSize: 18, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, '2xl-medium': { fontSize: 18, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, '2xl-bold': { fontSize: 18, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, '2xl-heavy': { fontSize: 18, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, }, 'xl-thin': { fontSize: 17, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, xl: { fontSize: 17, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'xl-medium': { fontSize: 17, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'xl-bold': { fontSize: 17, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'xl-heavy': { fontSize: 17, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, }, 'lg-thin': { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, lg: { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'lg-medium': { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'lg-bold': { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'lg-heavy': { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, }, 'md-thin': { fontSize: 15, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, md: { fontSize: 15, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'md-medium': { fontSize: 15, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'md-bold': { fontSize: 15, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'md-heavy': { fontSize: 15, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, }, 'sm-thin': { fontSize: 14, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, sm: { fontSize: 14, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'sm-medium': { fontSize: 14, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'sm-bold': { fontSize: 14, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'sm-heavy': { fontSize: 14, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, }, 'xs-thin': { fontSize: 13, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, xs: { fontSize: 13, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'xs-medium': { fontSize: 13, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'xs-bold': { fontSize: 13, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'xs-heavy': { fontSize: 13, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.bold, },
'title-2xl': { fontSize: 34, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'title-xl': { fontSize: 28, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.semiBold, }, 'title-lg': { fontSize: 22, fontWeight: fontWeight.semiBold, }, title: { fontWeight: fontWeight.semiBold, fontSize: 20, letterSpacing: tokens.TRACKING, }, 'title-sm': { fontWeight: fontWeight.semiBold, fontSize: 17, letterSpacing: tokens.TRACKING, }, 'post-text': { fontSize: 16, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'post-text-lg': { fontSize: 20, letterSpacing: tokens.TRACKING, fontWeight: fontWeight.normal, }, 'button-lg': { fontWeight: fontWeight.semiBold, fontSize: 18, letterSpacing: tokens.TRACKING, }, button: { fontWeight: fontWeight.semiBold, fontSize: 14, letterSpacing: tokens.TRACKING, }, mono: { fontSize: 14, fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New', }, },})
export const darkTheme = ({ lightPalette, darkPalette,}: { lightPalette: Palette darkPalette: Palette}): Theme => ({ ...defaultTheme({lightPalette, darkPalette}), colorScheme: 'dark', palette: { ...defaultTheme({lightPalette, darkPalette}).palette, default: { background: darkPalette.contrast_0, backgroundLight: darkPalette.contrast_25, text: darkPalette.white, textLight: darkPalette.contrast_600, textInverted: darkPalette.black, link: darkPalette.primary_500, border: darkPalette.contrast_100, }, primary: { ...defaultTheme({lightPalette, darkPalette}).palette.primary, textInverted: colors.blue2, }, secondary: { ...defaultTheme({lightPalette, darkPalette}).palette.secondary, textInverted: colors.green2, }, inverted: { background: darkPalette.white, backgroundLight: lightPalette.contrast_50, text: lightPalette.black, textLight: lightPalette.contrast_700, textInverted: darkPalette.white, link: lightPalette.primary_500, border: lightPalette.contrast_100, }, },})
export const dimTheme = ({ lightPalette, darkPalette, dimPalette,}: { lightPalette: Palette darkPalette: Palette dimPalette: Palette}): Theme => ({ ...darkTheme({lightPalette, darkPalette}), palette: { ...darkTheme({lightPalette, darkPalette}).palette, default: { ...darkTheme({lightPalette, darkPalette}).palette.default, background: dimPalette.contrast_0, backgroundLight: dimPalette.contrast_25, text: dimPalette.white, textLight: dimPalette.contrast_700, textInverted: dimPalette.black, link: dimPalette.primary_500, border: dimPalette.contrast_100, }, },})