Update posts in feed to use the theming system

4 files changed, 46 insertions, 19 deletions

diff --git a/src/view/lib/ThemeContext.tsx b/src/view/lib/ThemeContext.tsx
index 57f758c53..f51983cb5 100644
--- a/src/view/lib/ThemeContext.tsx
+++ b/src/view/lib/ThemeContext.tsx
@@ -11,7 +11,6 @@ export type PaletteColorName =
   | 'inverted'
   | 'error'
 export type PaletteColor = {
-  isLowContrast: boolean
   background: string
   backgroundLight: string
   text: string
@@ -20,6 +19,7 @@ export type PaletteColor = {
   link: string
   border: string
   icon: string
+  [k: string]: string
 }
 export type Palette = Record<PaletteColorName, PaletteColor>
 
@@ -31,13 +31,16 @@ export type TypographyVariant =
   | 'h2'
   | 'h3'
   | 'h4'
+  | 'h5'
+  | 'h6'
   | 'subtitle1'
   | 'subtitle2'
   | 'body1'
   | 'body2'
   | 'button'
   | 'caption'
-  | 'overline'
+  | 'overline1'
+  | 'overline2'
 export type Typography = Record<TypographyVariant, TextStyle>
 
 export interface Theme {
diff --git a/src/view/lib/hooks/usePalette.ts b/src/view/lib/hooks/usePalette.ts
index e9af4ae16..698b7fba4 100644
--- a/src/view/lib/hooks/usePalette.ts
+++ b/src/view/lib/hooks/usePalette.ts
@@ -23,19 +23,15 @@ export function usePalette(color: PaletteColorName): UsePaletteValue {
     },
     text: {
       color: palette.text,
-      fontWeight: palette.isLowContrast ? '500' : undefined,
     },
     textLight: {
       color: palette.textLight,
-      fontWeight: palette.isLowContrast ? '500' : undefined,
     },
     textInverted: {
       color: palette.textInverted,
-      fontWeight: palette.isLowContrast ? '500' : undefined,
     },
     link: {
       color: palette.link,
-      fontWeight: palette.isLowContrast ? '500' : undefined,
     },
   }
 }
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts
index 26d33f6cb..8933a8d8e 100644
--- a/src/view/lib/styles.ts
+++ b/src/view/lib/styles.ts
@@ -1,4 +1,5 @@
-import {StyleSheet} from 'react-native'
+import {StyleSheet, TextStyle} from 'react-native'
+import {Theme, TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
 export const colors = {
@@ -191,3 +192,13 @@ export const s = StyleSheet.create({
   green4: {color: colors.green4},
   green5: {color: colors.green5},
 })
+
+export function lh(
+  theme: Theme,
+  type: TypographyVariant,
+  height: number,
+): TextStyle {
+  return {
+    lineHeight: (theme.typography[type].lineHeight || 16) * height,
+  }
+}
diff --git a/src/view/lib/themes.ts b/src/view/lib/themes.ts
index 722c79df0..1dedd049e 100644
--- a/src/view/lib/themes.ts
+++ b/src/view/lib/themes.ts
@@ -5,18 +5,21 @@ export const defaultTheme: Theme = {
   colorScheme: 'light',
   palette: {
     default: {
-      isLowContrast: false,
       background: colors.white,
       backgroundLight: colors.gray2,
       text: colors.black,
       textLight: colors.gray5,
       textInverted: colors.white,
       link: colors.blue3,
-      border: colors.gray3,
+      border: colors.gray2,
       icon: colors.gray2,
+
+      // non-standard
+      actionLabel: colors.gray4,
+      replyLine: colors.gray2,
+      replyLineDot: colors.gray3,
     },
     primary: {
-      isLowContrast: true,
       background: colors.blue3,
       backgroundLight: colors.blue2,
       text: colors.white,
@@ -27,7 +30,6 @@ export const defaultTheme: Theme = {
       icon: colors.blue4,
     },
     secondary: {
-      isLowContrast: true,
       background: colors.green3,
       backgroundLight: colors.green2,
       text: colors.white,
@@ -38,7 +40,6 @@ export const defaultTheme: Theme = {
       icon: colors.green4,
     },
     inverted: {
-      isLowContrast: true,
       background: colors.black,
       backgroundLight: colors.gray6,
       text: colors.white,
@@ -49,7 +50,6 @@ export const defaultTheme: Theme = {
       icon: colors.gray5,
     },
     error: {
-      isLowContrast: true,
       background: colors.red3,
       backgroundLight: colors.red2,
       text: colors.white,
@@ -90,6 +90,16 @@ export const defaultTheme: Theme = {
       fontSize: 20,
       letterSpacing: 0.15,
     },
+    h5: {
+      fontWeight: 'bold',
+      fontSize: 17,
+      letterSpacing: 0.15,
+    },
+    h6: {
+      fontWeight: '400',
+      fontSize: 15,
+      letterSpacing: 0.15,
+    },
     subtitle1: {
       fontSize: 16,
       letterSpacing: 0.15,
@@ -116,11 +126,15 @@ export const defaultTheme: Theme = {
       fontSize: 12,
       letterSpacing: 0.4,
     },
-    overline: {
+    overline1: {
       fontSize: 10,
       letterSpacing: 1.5,
       textTransform: 'uppercase',
     },
+    overline2: {
+      fontSize: 14,
+      fontWeight: '600',
+    },
   },
 }
 
@@ -130,15 +144,19 @@ export const darkTheme: Theme = {
   palette: {
     ...defaultTheme.palette,
     default: {
-      isLowContrast: true,
-      background: colors.black,
+      background: colors.gray8,
       backgroundLight: colors.gray6,
       text: colors.white,
       textLight: colors.gray3,
       textInverted: colors.black,
-      link: colors.blue2,
-      border: colors.gray3,
+      link: colors.blue3,
+      border: colors.gray6,
       icon: colors.gray5,
+
+      // non-standard
+      actionLabel: colors.gray3,
+      replyLine: colors.gray5,
+      replyLineDot: colors.gray6,
     },
     primary: {
       ...defaultTheme.palette.primary,
@@ -149,7 +167,6 @@ export const darkTheme: Theme = {
       textInverted: colors.green2,
     },
     inverted: {
-      isLowContrast: false,
       background: colors.white,
       backgroundLight: colors.gray2,
       text: colors.black,