From 7e31645e9a355f2a0b3c8d62430a53dbb4714674 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 28 Dec 2022 14:06:01 -0600
Subject: 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
---
 src/view/lib/ThemeContext.tsx | 70 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/view/lib/ThemeContext.tsx

(limited to 'src/view/lib/ThemeContext.tsx')

diff --git a/src/view/lib/ThemeContext.tsx b/src/view/lib/ThemeContext.tsx
new file mode 100644
index 000000000..57f758c53
--- /dev/null
+++ b/src/view/lib/ThemeContext.tsx
@@ -0,0 +1,70 @@
+import React, {createContext, useContext, useMemo} from 'react'
+import {TextStyle, useColorScheme, ViewStyle} from 'react-native'
+import {darkTheme, defaultTheme} from './themes'
+
+export type ColorScheme = 'light' | 'dark'
+
+export type PaletteColorName =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'inverted'
+  | 'error'
+export type PaletteColor = {
+  isLowContrast: boolean
+  background: string
+  backgroundLight: string
+  text: string
+  textLight: string
+  textInverted: string
+  link: string
+  border: string
+  icon: string
+}
+export type Palette = Record<PaletteColorName, PaletteColor>
+
+export type ShapeName = 'button' | 'bigButton' | 'smallButton'
+export type Shapes = Record<ShapeName, ViewStyle>
+
+export type TypographyVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'button'
+  | 'caption'
+  | 'overline'
+export type Typography = Record<TypographyVariant, TextStyle>
+
+export interface Theme {
+  colorScheme: ColorScheme
+  palette: Palette
+  shapes: Shapes
+  typography: Typography
+}
+
+export interface ThemeProviderProps {
+  theme?: ColorScheme
+}
+
+export const ThemeContext = createContext<Theme>(defaultTheme)
+
+export const useTheme = () => useContext(ThemeContext)
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  children,
+}) => {
+  const colorScheme = useColorScheme()
+
+  const value = useMemo(
+    () => ((theme || colorScheme) === 'dark' ? darkTheme : defaultTheme),
+    [colorScheme, theme],
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
-- 
cgit 1.4.1