Add a design system (#34)

* Add theming system

* Add standard Button control and update RadioButtons

* Unify radiobutton with design system

* Update debug screen to have multiple views

* Add ToggleButton

* Update error controls to use design system

* Add typography to <Text> element

* Move DropdownButton into the design system

* Clean out old code

* Move Text into design system

* Add 'inverted' color palette

* Move LoadingPlaceholder into the design system

1 files changed, 41 insertions, 0 deletions

diff --git a/src/view/lib/hooks/usePalette.ts b/src/view/lib/hooks/usePalette.ts
new file mode 100644
index 000000000..e9af4ae16
--- /dev/null
+++ b/src/view/lib/hooks/usePalette.ts
@@ -0,0 +1,41 @@
+import {TextStyle, ViewStyle} from 'react-native'
+import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext'
+
+export interface UsePaletteValue {
+  colors: PaletteColor
+  view: ViewStyle
+  border: ViewStyle
+  text: TextStyle
+  textLight: TextStyle
+  textInverted: TextStyle
+  link: TextStyle
+}
+export function usePalette(color: PaletteColorName): UsePaletteValue {
+  const palette = useTheme().palette[color]
+  return {
+    colors: palette,
+    view: {
+      backgroundColor: palette.background,
+    },
+    border: {
+      borderWidth: 1,
+      borderColor: palette.border,
+    },
+    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,
+    },
+  }
+}