@@ -59,8 +59,8 @@ import { styles as s } from 'tachyons-react-native'
59
59
export default class App extends React .Component {
60
60
render () {
61
61
return (
62
- < View style= {[s .flex , s .alignCenter , s .justifyCenter , s .theme . primaryBg ]}>
63
- < Text style= {[s .tc , s .b , s .i , s .ba , s .theme . primaryText ]}> Open up App .js to start working on your app! < / Text >
62
+ < View style= {[s .flex , s .alignCenter , s .justifyCenter , s .primaryBg ]}>
63
+ < Text style= {[s .tc , s .b , s .i , s .ba , s .primaryText ]}> Open up App .js to start working on your app! < / Text >
64
64
< / View >
65
65
)
66
66
}
@@ -79,14 +79,11 @@ import { styles as s, withTheme } from 'tachyons-react-native'
79
79
export default withTheme (class App extends React .Component {
80
80
render () {
81
81
return (
82
- < View style= {[s .flex , s .flexColumn , s .alignCenter , s .justifyCenter , s .theme .primaryBg ]}>
83
- < Text style= {[s .tc , s .b , s .i , s .theme .primaryText ]}> Open up App .js to start working on your app! < / Text >
84
- < View style= {[s .flex1 , s .justifyCenter , s .mh5 , s .mv2 ]}>
85
- < TouchableOpacity style= {[s .pa2 , s .theme .accentBg ]}
86
- onPress= {() => this .props .setTheme (this .props .theme === ' dark' ? ' light' : ' dark' )}>
87
- < Text style= {[s .tc ]}> Toggle Theme< / Text >
88
- < / TouchableOpacity>
89
- < / View>
82
+ < View style= {[s .flex , s .alignCenter , s .justifyCenter , s .primaryBg ]}>
83
+ < Text style= {[s .tc , s .b , s .i , s .ba , s .primaryText ]}> Open up App .js to start working on your app! < / Text >
84
+ < TouchableOpacity onPress= {() => this .props .setTheme (this .props .theme === ' dark' ? ' light' : ' dark' )}>
85
+ < Text > Toggle Theme< / Text >
86
+ < / TouchableOpacity>
90
87
< / View >
91
88
)
92
89
}
@@ -97,33 +94,33 @@ export default withTheme(class App extends React.Component {
97
94
98
95
STYLE NAME | STYLES
99
96
|-------|---------------------------------
100
- theme. ${name} | {"color": ${color}}
101
- theme. ${name}TextShadow | {"textShadowColor": ${color}}
102
- theme. ${name}TextDecoration | {"textDecorationColor": ${color}}
103
- theme. ${name}Bg | {"backgroundColor": ${color}}
104
- theme. ${name}Ba | {"borderColor": ${color}}
105
- theme. ${name}Bt | {"borderTopColor": ${color}}
106
- theme. ${name}Br | { borderRightColor: ${color} }
107
- theme. ${name}Bb | {"borderBottomColor": ${color}}
108
- theme. ${name}Bl | {"borderLeftColor": ${color}}
109
- theme. ${name}Tint | {"tintColor": ${color}}
110
- theme. ${name}Overlay | {"overlayColor": ${color}}
97
+ ${name} | {"color": ${color}}
98
+ ${name}TextShadow | {"textShadowColor": ${color}}
99
+ ${name}TextDecoration | {"textDecorationColor": ${color}}
100
+ ${name}Bg | {"backgroundColor": ${color}}
101
+ ${name}Ba | {"borderColor": ${color}}
102
+ ${name}Bt | {"borderTopColor": ${color}}
103
+ ${name}Br | { borderRightColor: ${color} }
104
+ ${name}Bb | {"borderBottomColor": ${color}}
105
+ ${name}Bl | {"borderLeftColor": ${color}}
106
+ ${name}Tint | {"tintColor": ${color}}
107
+ ${name}Overlay | {"overlayColor": ${color}}
111
108
112
109
### Sample Styles (Primary)
113
110
114
111
STYLE NAME | STYLES
115
112
|-------|---------------------------------
116
- theme. primary | {"color": ${color}}
117
- theme. primaryTextShadow | {"textShadowColor": ${color}}
118
- theme. primaryTextDecoration | {"textDecorationColor": ${color}}
119
- theme. primaryBg | {"backgroundColor": ${color}}
120
- theme. primaryBa | {"borderColor": ${color}}
121
- theme. primaryBt | {"borderTopColor": ${color}}
122
- theme. primaryBr | { borderRightColor: ${color} }
123
- theme. primaryBb | {"borderBottomColor": ${color}}
124
- theme. primaryBl | {"borderLeftColor": ${color}}
125
- theme. primaryTint | {"tintColor": ${color}}
126
- theme. primaryOverlay | {"overlayColor": ${color}}
113
+ primary | {"color": ${color}}
114
+ primaryTextShadow | {"textShadowColor": ${color}}
115
+ primaryTextDecoration | {"textDecorationColor": ${color}}
116
+ primaryBg | {"backgroundColor": ${color}}
117
+ primaryBa | {"borderColor": ${color}}
118
+ primaryBt | {"borderTopColor": ${color}}
119
+ primaryBr | { borderRightColor: ${color} }
120
+ primaryBb | {"borderBottomColor": ${color}}
121
+ primaryBl | {"borderLeftColor": ${color}}
122
+ primaryTint | {"tintColor": ${color}}
123
+ primaryOverlay | {"overlayColor": ${color}}
127
124
128
125
# Style Guide
129
126
0 commit comments