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

@ -6,10 +6,10 @@ import {
View,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {Text} from '../util/Text'
import {Text} from '../util/text/Text'
import {useStores} from '../../../state'
import {s, colors, gradients} from '../../lib/styles'
import {ErrorMessage} from '../util/ErrorMessage'
import {ErrorMessage} from '../util/error/ErrorMessage'
export const snapPoints = ['50%']

View file

@ -9,8 +9,8 @@ import {
import LinearGradient from 'react-native-linear-gradient'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {AppBskyActorCreateScene} from '@atproto/api'
import {ErrorMessage} from '../util/ErrorMessage'
import {Text} from '../util/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Text} from '../util/text/Text'
import {useStores} from '../../../state'
import {s, colors, gradients} from '../../lib/styles'
import {

View file

@ -9,8 +9,8 @@ import {
import LinearGradient from 'react-native-linear-gradient'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {Image as PickedImage} from 'react-native-image-crop-picker'
import {Text} from '../util/Text'
import {ErrorMessage} from '../util/ErrorMessage'
import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {useStores} from '../../../state'
import {ProfileViewModel} from '../../../state/models/profile-view'
import {s, colors, gradients} from '../../lib/styles'

View file

@ -19,8 +19,8 @@ import {
import _omit from 'lodash.omit'
import {AtUri} from '../../../third-party/uri'
import {ProfileCard} from '../profile/ProfileCard'
import {ErrorMessage} from '../util/ErrorMessage'
import {Text} from '../util/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Text} from '../util/text/Text'
import {useStores} from '../../../state'
import * as apilib from '../../../state/lib/api'
import {ProfileViewModel} from '../../../state/models/profile-view'

View file

@ -9,8 +9,8 @@ import LinearGradient from 'react-native-linear-gradient'
import {useStores} from '../../../state'
import {s, colors, gradients} from '../../lib/styles'
import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
import {Text} from '../util/Text'
import {ErrorMessage} from '../util/ErrorMessage'
import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
const ITEMS: RadioGroupItem[] = [
{key: 'spam', label: 'Spam or excessive repeat posts'},

View file

@ -9,8 +9,8 @@ import LinearGradient from 'react-native-linear-gradient'
import {useStores} from '../../../state'
import {s, colors, gradients} from '../../lib/styles'
import {RadioGroup, RadioGroupItem} from '../util/forms/RadioGroup'
import {Text} from '../util/Text'
import {ErrorMessage} from '../util/ErrorMessage'
import {Text} from '../util/text/Text'
import {ErrorMessage} from '../util/error/ErrorMessage'
const ITEMS: RadioGroupItem[] = [
{key: 'spam', label: 'Spam or excessive repeat posts'},

View file

@ -2,7 +2,7 @@ import React, {useState} from 'react'
import {Platform, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {Text} from '../util/Text'
import {Text} from '../util/text/Text'
import {useStores} from '../../../state'
import {s, colors} from '../../lib/styles'
import {