about summary refs log tree commit diff
path: root/src/view/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/lib')
-rw-r--r--src/view/lib/ThemeContext.tsx46
-rw-r--r--src/view/lib/themes.ts173
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',
     },