diff options
Diffstat (limited to 'src/view/lib')
-rw-r--r-- | src/view/lib/ThemeContext.tsx | 46 | ||||
-rw-r--r-- | src/view/lib/themes.ts | 173 |
2 files changed, 167 insertions, 52 deletions
diff --git a/src/view/lib/ThemeContext.tsx b/src/view/lib/ThemeContext.tsx index 28edf1fc2..54ae71277 100644 --- a/src/view/lib/ThemeContext.tsx +++ b/src/view/lib/ThemeContext.tsx @@ -27,21 +27,39 @@ export type ShapeName = 'button' | 'bigButton' | 'smallButton' export type Shapes = Record<ShapeName, ViewStyle> export type TypographyVariant = - | 'h1' - | 'h2' - | 'h3' - | 'h4' - | 'h5' - | 'h6' - | 'subtitle1' - | 'subtitle2' - | 'body1' - | 'body2' + | 'xl-thin' + | 'xl' + | 'xl-medium' + | 'xl-bold' + | 'xl-heavy' + | 'lg-thin' + | 'lg' + | 'lg-medium' + | 'lg-bold' + | 'lg-heavy' + | 'md-thin' + | 'md' + | 'md-medium' + | 'md-bold' + | 'md-heavy' + | 'sm-thin' + | 'sm' + | 'sm-medium' + | 'sm-bold' + | 'sm-heavy' + | 'xs-thin' + | 'xs' + | 'xs-medium' + | 'xs-bold' + | 'xs-heavy' + | 'title-xl' + | 'title-lg' + | 'title' + | 'title-sm' + | 'post-text-lg' + | 'post-text' | 'button' - | 'caption' - | 'overline1' - | 'overline2' - | 'mono1' + | 'mono' export type Typography = Record<TypographyVariant, TextStyle> export interface Theme { diff --git a/src/view/lib/themes.ts b/src/view/lib/themes.ts index d25fe58fd..451631e9b 100644 --- a/src/view/lib/themes.ts +++ b/src/view/lib/themes.ts @@ -75,70 +75,167 @@ export const defaultTheme: Theme = { }, }, typography: { - h1: { - fontSize: 48, + 'xl-thin': { + fontSize: 17, + letterSpacing: 0.25, + fontWeight: '300', + }, + xl: { + fontSize: 17, + letterSpacing: 0.25, + fontWeight: '400', + }, + 'xl-medium': { + fontSize: 17, + letterSpacing: 0.25, + fontWeight: '500', + }, + 'xl-bold': { + fontSize: 17, + letterSpacing: 0.25, + fontWeight: '700', + }, + 'xl-heavy': { + fontSize: 17, + letterSpacing: 0.25, + fontWeight: '800', + }, + 'lg-thin': { + fontSize: 16, + letterSpacing: 0.25, + fontWeight: '300', + }, + lg: { + fontSize: 16, + letterSpacing: 0.25, + fontWeight: '400', + }, + 'lg-medium': { + fontSize: 16, + letterSpacing: 0.25, + fontWeight: '500', + }, + 'lg-bold': { + fontSize: 16, + letterSpacing: 0.25, + fontWeight: '700', + }, + 'lg-heavy': { + fontSize: 16, + letterSpacing: 0.25, + fontWeight: '800', + }, + 'md-thin': { + fontSize: 15, + letterSpacing: 0.25, + fontWeight: '300', + }, + md: { + fontSize: 15, + letterSpacing: 0.25, + fontWeight: '400', + }, + 'md-medium': { + fontSize: 15, + letterSpacing: 0.25, + fontWeight: '500', + }, + 'md-bold': { + fontSize: 15, + letterSpacing: 0.25, + fontWeight: '700', + }, + 'md-heavy': { + fontSize: 15, + letterSpacing: 0.25, + fontWeight: '800', + }, + 'sm-thin': { + fontSize: 14, + letterSpacing: 0.25, + fontWeight: '300', + }, + sm: { + fontSize: 14, + letterSpacing: 0.25, + fontWeight: '400', + }, + 'sm-medium': { + fontSize: 14, + letterSpacing: 0.25, fontWeight: '500', }, - h2: { + 'sm-bold': { + fontSize: 14, + letterSpacing: 0.25, + fontWeight: '700', + }, + 'sm-heavy': { + fontSize: 14, + letterSpacing: 0.25, + fontWeight: '800', + }, + 'xs-thin': { + fontSize: 13, + letterSpacing: 0.25, + fontWeight: '300', + }, + xs: { + fontSize: 13, + letterSpacing: 0.25, + fontWeight: '400', + }, + 'xs-medium': { + fontSize: 13, + letterSpacing: 0.25, + fontWeight: '500', + }, + 'xs-bold': { + fontSize: 13, + letterSpacing: 0.25, + fontWeight: '700', + }, + 'xs-heavy': { + fontSize: 13, + letterSpacing: 0.25, + fontWeight: '800', + }, + + 'title-xl': { fontSize: 34, letterSpacing: 0.25, fontWeight: '500', }, - h3: { + 'title-lg': { fontSize: 24, fontWeight: '500', }, - h4: { + title: { fontWeight: '500', fontSize: 20, letterSpacing: 0.15, }, - h5: { + 'title-sm': { fontWeight: 'bold', fontSize: 17, letterSpacing: 0.15, }, - h6: { - fontWeight: '400', - fontSize: 15, - letterSpacing: 0.15, - }, - subtitle1: { + 'post-text': { fontSize: 16, - letterSpacing: 0.15, - }, - subtitle2: { - fontWeight: '500', - fontSize: 14, - letterSpacing: 0.1, - }, - body1: { - fontSize: 17, letterSpacing: 0.2, + fontWeight: '400', }, - body2: { - fontSize: 14, - letterSpacing: 0.25, + 'post-text-lg': { + fontSize: 24, + letterSpacing: 0.4, + fontWeight: '400', }, button: { fontWeight: '500', fontSize: 14, letterSpacing: 0.5, }, - caption: { - fontSize: 12, - letterSpacing: 0.4, - }, - overline1: { - fontSize: 10, - letterSpacing: 1.5, - textTransform: 'uppercase', - }, - overline2: { - fontSize: 14, - fontWeight: '600', - }, - mono1: { + mono: { fontSize: 14, fontFamily: Platform.OS === 'android' ? 'monospace' : 'Courier New', }, |