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
This commit is contained in:
Paul Frazee 2022-12-28 14:06:01 -06:00 committed by GitHub
parent cc63660982
commit 7e31645e9a
78 changed files with 1431 additions and 375 deletions

View file

@ -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,
},
}
}