Skip to content

Commit 63ed5ab

Browse files
Inbal-TishInbal-Tish
authored
Colors new presets (#1546)
* change color palette to more accessible colors; Remove DARKS palette and replacing usage with GREYS * update tests * types * pr comments
1 parent 4a3300c commit 63ed5ab

File tree

133 files changed

+488
-534
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

133 files changed

+488
-534
lines changed

‎demo/src/screens/DemoScreen.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default class DemoScreen extends Component {
5454
if (PropTypes.bool === prop) {
5555
return (
5656
<View row spread key={propId} paddingV-10>
57-
<Text test70 dark60>
57+
<Text test70 grey60>
5858
{propId}
5959
</Text>
6060
<Switch

‎demo/src/screens/MainScreen.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,10 @@ class MainScreen extends Component {
207207
activeBackgroundColor={Colors.primary}
208208
activeOpacity={1}
209209
>
210-
<Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>
210+
<Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
211211
{item.title}
212212
</Text>
213-
<Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
213+
<Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
214214
</TouchableOpacity>
215215
);
216216
} else {
@@ -284,7 +284,7 @@ class MainScreen extends Component {
284284
)}
285285
{showNoResults && (
286286
<View padding-20>
287-
<Text dark40 text50>
287+
<Text grey40 text50>
288288
Sorry, nothing was found. Try Button or something..
289289
</Text>
290290
</View>
@@ -304,7 +304,7 @@ const styles = StyleSheet.create({
304304
},
305305
searchField: {
306306
padding: 12,
307-
backgroundColor: Colors.dark80,
307+
backgroundColor: Colors.grey80,
308308
borderRadius: 8
309309
}
310310
});

‎demo/src/screens/PlaygroundScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslin
66
export default class PlaygroundScreen extends Component {
77
render() {
88
return (
9-
<View bg-dark80 flex padding-20>
9+
<View bg-grey80 flex padding-20>
1010
<View marginT-20>
1111
<TextField placeholder="Placeholder" />
1212
</View>

‎demo/src/screens/SettingsScreen.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ class SettingsScreen extends Component {
8383
))}
8484
</Picker>
8585

86-
<View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
86+
<View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
8787
<View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
88-
<Text text80 dark20>Current layout direction</Text>
88+
<Text text80 grey20>Current layout direction</Text>
8989
</View>
9090
<View center margin-5 padding-10>
9191
<Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
@@ -96,14 +96,14 @@ class SettingsScreen extends Component {
9696
value={isRTL}
9797
onValueChange={this.onDirectionChange}
9898
/>
99-
<Text text80 dark20>Force RTL</Text>
99+
<Text text80 grey20>Force RTL</Text>
100100
</View>
101101
</View>
102102

103103
{extraSettingsUI?.()}
104104
</View>
105105

106-
<Text text30 dark10>Settings</Text>
106+
<Text text30 grey10>Settings</Text>
107107
<Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
108108
</View>
109109
);
@@ -112,8 +112,8 @@ class SettingsScreen extends Component {
112112

113113
const styles = StyleSheet.create({
114114
block: {
115-
borderColor: Colors.dark70,
116-
backgroundColor: Colors.dark80
115+
borderColor: Colors.grey70,
116+
backgroundColor: Colors.grey80
117117
}
118118
});
119119

‎demo/src/screens/componentScreens/ActionBarScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
1919

2020
render() {
2121
return (
22-
<View flex bg-dark80>
22+
<View flex bg-grey80>
2323
<PageControl
2424
containerStyle={[styles.pageControl, styles.absoluteContainer]}
2525
numOfPages={6}
2626
currentPage={this.state.currentPage}
27-
color={Colors.dark10}
27+
color={Colors.grey10}
2828
size={15}
2929
/>
3030
<Carousel
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
6565
<ActionBar
6666
centered
6767
actions={[
68-
{label: 'Bold', labelStyle: {color: Colors.dark10, ...Typography.text60, fontWeight: '400'}},
69-
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.dark10}},
70-
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.dark10}}
68+
{label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
69+
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
70+
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
7171
]}
7272
/>
7373
</View>

‎demo/src/screens/componentScreens/ActionSheetScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default class ActionSheetScreen extends Component {
4040
size={Button.sizes.small}
4141
text50
4242
marginB-10
43-
dark10
43+
grey10
4444
label={`> ${useCase.label}`}
4545
onPress={() =>
4646
this.setState({

‎demo/src/screens/componentScreens/AvatarsScreen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const examples = [
3535
uri:
3636
'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
3737
},
38-
badgeProps: {size: 10, backgroundColor: Colors.dark50},
38+
badgeProps: {size: 10, backgroundColor: Colors.grey50},
3939
badgePosition: 'BOTTOM_LEFT'
4040
},
4141
{
@@ -79,7 +79,7 @@ const examples = [
7979
{
8080
title: 'Invalid Gravatar (see logs)',
8181
label: '🤦',
82-
backgroundColor: Colors.dark60,
82+
backgroundColor: Colors.grey60,
8383
source: {uri: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=404'},
8484
onImageLoadStart: () => console.log('AvatarScreen: Invalid avatar load STARTED...'), // eslint-disable-line
8585
onImageLoadEnd: () => console.log('AvatarScreen: Invalid avatar load ENDED'), // eslint-disable-line

‎demo/src/screens/componentScreens/BadgesScreen.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default class BadgesScreen extends Component {
4141
);
4242

4343
return (
44-
<ScrollView style={{backgroundColor: Colors.dark70}} contentContainerStyle={styles.container}>
44+
<ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
4545
<Text text50 row center marginB-15>
4646
Badges
4747
</Text>
@@ -77,15 +77,15 @@ export default class BadgesScreen extends Component {
7777

7878
<View row paddingT-20 marginB-15>
7979
<Button
80-
bg-dark60
80+
bg-grey60
8181
style={{width: 30, height: 30, borderWidth: 1, marginRight: 15}}
8282
iconSource={minusIcon}
8383
avoidMinWidth
8484
onPress={() => this.changeLabelValue(-1)}
8585
onLongPress={() => this.changeLabelValue(-10)}
8686
/>
8787
<Button
88-
bg-dark60
88+
bg-grey60
8989
style={{width: 30, height: 30, borderWidth: 1}}
9090
iconSource={plusIcon}
9191
avoidMinWidth
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
175175
container: {
176176
alignItems: 'center',
177177
padding: 20,
178-
backgroundColor: Colors.dark70
178+
backgroundColor: Colors.grey70
179179
},
180180
iconBadgeColumnContainer: {
181181
flex: 1,

‎demo/src/screens/componentScreens/BasicListScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default class BasicListScreen extends Component {
1515
<View>
1616
<ListItem
1717
// @ts-expect-error
18-
activeBackgroundColor={Colors.dark60}
18+
activeBackgroundColor={Colors.grey60}
1919
activeOpacity={0.3}
2020
height={77.5}
2121
onPress={() => Alert.alert(`pressed on order #${id + 1}`)}
@@ -25,18 +25,18 @@ export default class BasicListScreen extends Component {
2525
</ListItem.Part>
2626
<ListItem.Part middle column containerStyle={[styles.border, {paddingRight: 17}]}>
2727
<ListItem.Part containerStyle={{marginBottom: 3}}>
28-
<Text dark10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>
28+
<Text grey10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>
2929
{row.name}
3030
</Text>
31-
<Text dark10 text70 style={{marginTop: 2}}>
31+
<Text grey10 text70 style={{marginTop: 2}}>
3232
{row.formattedPrice}
3333
</Text>
3434
</ListItem.Part>
3535
<ListItem.Part>
3636
<Text
3737
style={{flex: 1, marginRight: 10}}
3838
text90
39-
dark40
39+
grey40
4040
numberOfLines={1}
4141
>{`${row.inventory.quantity} item`}</Text>
4242
<Text text90 color={statusColor} numberOfLines={1}>
@@ -69,6 +69,6 @@ const styles = StyleSheet.create({
6969
},
7070
border: {
7171
borderBottomWidth: StyleSheet.hairlineWidth,
72-
borderColor: Colors.dark70
72+
borderColor: Colors.grey70
7373
}
7474
});

‎demo/src/screens/componentScreens/ButtonsScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,8 +175,8 @@ export default class ButtonsScreen extends Component {
175175

176176
<Button
177177
label="Outline with background"
178-
outlineColor={Colors.dark10}
179-
backgroundColor={Colors.dark40}
178+
outlineColor={Colors.grey10}
179+
backgroundColor={Colors.grey40}
180180
style={{marginBottom: ButtonSpace}}
181181
/>
182182

@@ -388,7 +388,7 @@ export default class ButtonsScreen extends Component {
388388

389389
<View marginT-20>
390390
<View centerH marginB-10>
391-
<Text text50 dark10>
391+
<Text text50 grey10>
392392
Full Width Buttons
393393
</Text>
394394
</View>
@@ -398,7 +398,7 @@ export default class ButtonsScreen extends Component {
398398
fullWidth
399399
size="medium"
400400
bg-red70
401-
dark10
401+
grey10
402402
label="Medium Size Full Width"
403403
marginB-10
404404
/>
@@ -421,7 +421,7 @@ const SnippetBlock = ({snippet, onClose}) => {
421421
<View
422422
flex
423423
spread
424-
bg-dark10
424+
bg-grey10
425425
padding-15
426426
style={{...StyleSheet.absoluteFillObject, zIndex: 1}}
427427
>

‎demo/src/screens/componentScreens/CardScannerScreen.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,19 @@ export default class CardScannerScreen extends Component {
6464
<Card containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
6565
<Card.Image height={115} source={post.coverImage}/>
6666
<View padding-20>
67-
<Text text40 color={Colors.dark10}>
67+
<Text text40 color={Colors.grey10}>
6868
{post.title}
6969
</Text>
7070
<Text text90> | {post.timestamp}</Text>
7171
<Text text90 color={statusColor}>
7272
{post.status}
7373
</Text>
7474

75-
<Text text70 color={Colors.dark10}>
75+
<Text text70 color={Colors.grey10}>
7676
{post.description}
7777
</Text>
7878

79-
<Text text90 color={Colors.dark50}>
79+
<Text text90 color={Colors.grey50}>
8080
{post.likes} Likes
8181
</Text>
8282
<View row spread>
@@ -94,13 +94,13 @@ export default class CardScannerScreen extends Component {
9494
</Card>
9595

9696
{this.state.started && !this.state.isDone && (
97-
<Text text70 dark10 style={{alignSelf: 'center', marginTop: 20}}>
97+
<Text text70 grey10 style={{alignSelf: 'center', marginTop: 20}}>
9898
Publishing Post...
9999
</Text>
100100
)}
101101

102102
{this.state.isDone && (
103-
<Text text70 dark10 style={{alignSelf: 'center', marginTop: 20}}>
103+
<Text text70 grey10 style={{alignSelf: 'center', marginTop: 20}}>
104104
Done!
105105
</Text>
106106
)}

‎demo/src/screens/componentScreens/CheckboxScreen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class CheckboxScreen extends Component {
4242
onValueChange={value3 => this.setState({value3})}
4343
borderRadius={5}
4444
size={18}
45-
color={Colors.dark10}
45+
color={Colors.grey10}
4646
iconColor={Colors.green10}
4747
style={{marginBottom: 20}}
4848
/>
@@ -64,7 +64,7 @@ class CheckboxScreen extends Component {
6464
/>
6565
</View>
6666
</View>
67-
<Text text40 dark10>
67+
<Text text40 grey10>
6868
Checkbox
6969
</Text>
7070
</View>

‎demo/src/screens/componentScreens/ColorPickerScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,6 @@ export default class ColorPickerScreen extends Component<Props, State> {
117117
const styles = StyleSheet.create({
118118
container: {
119119
flex: 1,
120-
backgroundColor: Colors.dark80
120+
backgroundColor: Colors.grey80
121121
}
122122
});

‎demo/src/screens/componentScreens/ColorSwatchScreen.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default class ColorSwatchScreen extends Component {
3434
const {color, color1, color2, selected} = this.state;
3535

3636
return (
37-
<ScrollView style={{backgroundColor: Colors.dark80}}>
37+
<ScrollView style={{backgroundColor: Colors.grey80}}>
3838
<View flex center useSafeArea>
39-
<Text margin-5 text60 dark10>Single ColorSwatch</Text>
39+
<Text margin-5 text60 grey10>Single ColorSwatch</Text>
4040
<View row>
4141
<ColorSwatch selected={selected} onPress={this.onPress}/>
4242
<View>
@@ -45,22 +45,22 @@ export default class ColorSwatchScreen extends Component {
4545
</View>
4646
</View>
4747

48-
<Text marginT-20 text60 dark10>ColorPalette</Text>
48+
<Text marginT-20 text60 grey10>ColorPalette</Text>
4949
<Text marginB-10 text70 style={{color}}>Selected Color: {color}</Text>
5050
<ColorPalette
5151
value={color}
5252
onValueChange={this.onValueChange}
5353
colors={this.colors}
5454
/>
5555

56-
<Text margin-10 text60 dark10>Scrollable</Text>
56+
<Text margin-10 text60 grey10>Scrollable</Text>
5757
<ColorPalette
5858
value={color1}
5959
onValueChange={this.onValueChange1}
6060
colors={this.mainColors}
6161
/>
6262

63-
<Text margin-10 text60 dark10>Pagination</Text>
63+
<Text margin-10 text60 grey10>Pagination</Text>
6464
<ColorPalette
6565
numberOfRows={!Constants.isTablet ? 4 : undefined}
6666
value={color2}

‎demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default class ConnectionStatusBarScreen extends Component<{}, ConnectionS
2929
textAlign: 'center',
3030
marginBottom: 10,
3131
...Typography.text60,
32-
color: Colors.dark40
32+
color: Colors.grey40
3333
}}
3434
>
3535
Turn your wifi on/off to see the component in action

‎demo/src/screens/componentScreens/ContactsListScreen.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,6 @@ export default class ContactsListScreen extends Component {
4646
const styles = StyleSheet.create({
4747
border: {
4848
borderBottomWidth: StyleSheet.hairlineWidth,
49-
borderColor: Colors.dark70
49+
borderColor: Colors.grey70
5050
}
5151
});

0 commit comments

Comments
 (0)