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

3 files changed, 78 insertions, 0 deletions

diff --git a/src/view/lib/hooks/useAnimatedValue.ts b/src/view/lib/hooks/useAnimatedValue.ts
new file mode 100644
index 000000000..1307ef952
--- /dev/null
+++ b/src/view/lib/hooks/useAnimatedValue.ts
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import {Animated} from 'react-native'
+
+export function useAnimatedValue(initialValue: number) {
+  const lazyRef = React.useRef<Animated.Value>()
+
+  if (lazyRef.current === undefined) {
+    lazyRef.current = new Animated.Value(initialValue)
+  }
+
+  return lazyRef.current as Animated.Value
+}
diff --git a/src/view/lib/hooks/useOnMainScroll.ts b/src/view/lib/hooks/useOnMainScroll.ts
new file mode 100644
index 000000000..c3c16ff83
--- /dev/null
+++ b/src/view/lib/hooks/useOnMainScroll.ts
@@ -0,0 +1,25 @@
+import {useState} from 'react'
+import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
+import {RootStoreModel} from '../../../state'
+
+export type OnScrollCb = (
+  event: NativeSyntheticEvent<NativeScrollEvent>,
+) => void
+
+export function useOnMainScroll(store: RootStoreModel) {
+  let [lastY, setLastY] = useState(0)
+  let isMinimal = store.shell.minimalShellMode
+  return function onMainScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const y = event.nativeEvent.contentOffset.y
+    const dy = y - (lastY || 0)
+    setLastY(y)
+
+    if (!isMinimal && y > 10 && dy > 10) {
+      store.shell.setMinimalShellMode(true)
+      isMinimal = true
+    } else if (isMinimal && (y <= 10 || dy < -10)) {
+      store.shell.setMinimalShellMode(false)
+      isMinimal = false
+    }
+  }
+}
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,
+    },
+  }
+}