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:
parent
cc63660982
commit
7e31645e9a
78 changed files with 1431 additions and 375 deletions
41
src/view/lib/hooks/usePalette.ts
Normal file
41
src/view/lib/hooks/usePalette.ts
Normal 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,
|
||||
},
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue