wix · lidord-wix · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021 · Sep 12, 2021
diff --git a/demo/src/screens/DemoScreen.js b/demo/src/screens/DemoScreen.js
@@ -54,7 +54,7 @@ export default class DemoScreen extends Component {
     if (PropTypes.bool === prop) {
       return (
         <View row spread key={propId} paddingV-10>
-          <Text test70 dark60>
+          <Text test70 grey60>
             {propId}
           </Text>
           <Switch

diff --git a/demo/src/screens/MainScreen.js b/demo/src/screens/MainScreen.js
@@ -207,10 +207,10 @@ class MainScreen extends Component {
           activeBackgroundColor={Colors.primary}
           activeOpacity={1}
         >
-          <Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>
+          <Text style={[item.deprecate && styles.entryTextDeprecated]} grey10 text50>
             {item.title}
           </Text>
-          <Image source={chevronIcon} style={{tintColor: Colors.dark10}} supportRTL/>
+          <Image source={chevronIcon} style={{tintColor: Colors.grey10}} supportRTL/>
         </TouchableOpacity>
       );
     } else {
@@ -284,7 +284,7 @@ class MainScreen extends Component {
         )}
         {showNoResults && (
           <View padding-20>
-            <Text dark40 text50>
+            <Text grey40 text50>
               Sorry, nothing was found. Try Button or something..
             </Text>
           </View>
@@ -304,7 +304,7 @@ const styles = StyleSheet.create({
   },
   searchField: {
     padding: 12,
-    backgroundColor: Colors.dark80,
+    backgroundColor: Colors.grey80,
     borderRadius: 8
   }
 });

diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
@@ -6,7 +6,7 @@ import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslin
 export default class PlaygroundScreen extends Component {
   render() {
     return (
-      <View bg-dark80 flex padding-20>
+      <View bg-grey80 flex padding-20>
         <View marginT-20>
           <TextField placeholder="Placeholder" />
         </View>

diff --git a/demo/src/screens/SettingsScreen.js b/demo/src/screens/SettingsScreen.js
@@ -83,9 +83,9 @@ class SettingsScreen extends Component {
             ))}
           </Picker>
 
-          <View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
+          <View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
-              <Text text80 dark20>Current layout direction</Text>
+              <Text text80 grey20>Current layout direction</Text>
             </View>
             <View center margin-5 padding-10>
               <Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
@@ -96,14 +96,14 @@ class SettingsScreen extends Component {
                 value={isRTL}
                 onValueChange={this.onDirectionChange}
               />
-              <Text text80 dark20>Force RTL</Text>
+              <Text text80 grey20>Force RTL</Text>
             </View>
           </View>
 
           {extraSettingsUI?.()}
         </View>
 
-        <Text text30 dark10>Settings</Text>
+        <Text text30 grey10>Settings</Text>
         <Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
       </View>
     );
@@ -112,8 +112,8 @@ class SettingsScreen extends Component {
 
 const styles = StyleSheet.create({
   block: {
-    borderColor: Colors.dark70,
-    backgroundColor: Colors.dark80
+    borderColor: Colors.grey70,
+    backgroundColor: Colors.grey80
   }
 });
 

diff --git a/demo/src/screens/componentScreens/ActionBarScreen.tsx b/demo/src/screens/componentScreens/ActionBarScreen.tsx
@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
 
   render() {
     return (
-      <View flex bg-dark80>
+      <View flex bg-grey80>
         <PageControl
           containerStyle={[styles.pageControl, styles.absoluteContainer]}
           numOfPages={6}
           currentPage={this.state.currentPage}
-          color={Colors.dark10}
+          color={Colors.grey10}
           size={15}
         />
         <Carousel
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
             <ActionBar
               centered
               actions={[
-                {label: 'Bold', labelStyle: {color: Colors.dark10, ...Typography.text60, fontWeight: '400'}},
-                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.dark10}},
-                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.dark10}}
+                {label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
+                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
+                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
               ]}
             />
           </View>

diff --git a/demo/src/screens/componentScreens/ActionSheetScreen.tsx b/demo/src/screens/componentScreens/ActionSheetScreen.tsx
@@ -40,7 +40,7 @@ export default class ActionSheetScreen extends Component {
                 size={Button.sizes.small}
                 text50
                 marginB-10
-                dark10
+                grey10
                 label={`> ${useCase.label}`}
                 onPress={() =>
                   this.setState({

diff --git a/demo/src/screens/componentScreens/AvatarsScreen.tsx b/demo/src/screens/componentScreens/AvatarsScreen.tsx
@@ -35,7 +35,7 @@ const examples = [
       uri:
         'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
     },
-    badgeProps: {size: 10, backgroundColor: Colors.dark50},
+    badgeProps: {size: 10, backgroundColor: Colors.grey50},
     badgePosition: 'BOTTOM_LEFT'
   },
   {
@@ -79,7 +79,7 @@ const examples = [
   {
     title: 'Invalid Gravatar (see logs)',
     label: '🤦',
-    backgroundColor: Colors.dark60,
+    backgroundColor: Colors.grey60,
     source: {uri: 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=404'},
     onImageLoadStart: () => console.log('AvatarScreen: Invalid avatar load STARTED...'), // eslint-disable-line
     onImageLoadEnd: () => console.log('AvatarScreen: Invalid avatar load ENDED'), // eslint-disable-line

diff --git a/demo/src/screens/componentScreens/BadgesScreen.tsx b/demo/src/screens/componentScreens/BadgesScreen.tsx
@@ -41,7 +41,7 @@ export default class BadgesScreen extends Component {
     );
 
     return (
-      <ScrollView style={{backgroundColor: Colors.dark70}} contentContainerStyle={styles.container}>
+      <ScrollView style={{backgroundColor: Colors.grey70}} contentContainerStyle={styles.container}>
         <Text text50 row center marginB-15>
           Badges
         </Text>
@@ -77,15 +77,15 @@ export default class BadgesScreen extends Component {
 
         <View row paddingT-20 marginB-15>
           <Button
-            bg-dark60
+            bg-grey60
             style={{width: 30, height: 30, borderWidth: 1, marginRight: 15}}
             iconSource={minusIcon}
             avoidMinWidth
             onPress={() => this.changeLabelValue(-1)}
             onLongPress={() => this.changeLabelValue(-10)}
           />
           <Button
-            bg-dark60
+            bg-grey60
             style={{width: 30, height: 30, borderWidth: 1}}
             iconSource={plusIcon}
             avoidMinWidth
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     padding: 20,
-    backgroundColor: Colors.dark70
+    backgroundColor: Colors.grey70
   },
   iconBadgeColumnContainer: {
     flex: 1,

diff --git a/demo/src/screens/componentScreens/BasicListScreen.tsx b/demo/src/screens/componentScreens/BasicListScreen.tsx
@@ -48,7 +48,7 @@ export default class BasicListScreen extends Component<{}, BasicListScreenState>
       <Animatable.View {...animationProps}>
         <ListItem
           // @ts-expect-error
-          activeBackgroundColor={Colors.dark60}
+          activeBackgroundColor={Colors.grey60}
           activeOpacity={0.3}
           height={77.5}
           onPress={() => Alert.alert(`pressed on order #${id + 1}`)}
@@ -58,18 +58,18 @@ export default class BasicListScreen extends Component<{}, BasicListScreenState>
           </ListItem.Part>
           <ListItem.Part middle column containerStyle={[styles.border, {paddingRight: 17}]}>
             <ListItem.Part containerStyle={{marginBottom: 3}}>
-              <Text dark10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>
+              <Text grey10 text70 style={{flex: 1, marginRight: 10}} numberOfLines={1}>
                 {row.name}
               </Text>
-              <Text dark10 text70 style={{marginTop: 2}}>
+              <Text grey10 text70 style={{marginTop: 2}}>
                 {row.formattedPrice}
               </Text>
             </ListItem.Part>
             <ListItem.Part>
               <Text
                 style={{flex: 1, marginRight: 10}}
                 text90
-                dark40
+                grey40
                 numberOfLines={1}
               >{`${row.inventory.quantity} item`}</Text>
               <Text text90 color={statusColor} numberOfLines={1}>
@@ -102,6 +102,6 @@ const styles = StyleSheet.create({
   },
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.dark70
+    borderColor: Colors.grey70
   }
 });
diff --git a/demo/src/screens/componentScreens/ButtonsScreen.tsx b/demo/src/screens/componentScreens/ButtonsScreen.tsx
@@ -175,8 +175,8 @@ export default class ButtonsScreen extends Component {
 
             <Button
               label="Outline with background"
-              outlineColor={Colors.dark10}
-              backgroundColor={Colors.dark40}
+              outlineColor={Colors.grey10}
+              backgroundColor={Colors.grey40}
               style={{marginBottom: ButtonSpace}}
             />
 
@@ -388,7 +388,7 @@ export default class ButtonsScreen extends Component {
 
           <View marginT-20>
             <View centerH marginB-10>
-              <Text text50 dark10>
+              <Text text50 grey10>
                 Full Width Buttons
               </Text>
             </View>
@@ -398,7 +398,7 @@ export default class ButtonsScreen extends Component {
               fullWidth
               size="medium"
               bg-red70
-              dark10
+              grey10
               label="Medium Size Full Width"
               marginB-10
             />
@@ -421,7 +421,7 @@ const SnippetBlock = ({snippet, onClose}) => {
     <View
       flex
       spread
-      bg-dark10
+      bg-grey10
       padding-15
       style={{...StyleSheet.absoluteFillObject, zIndex: 1}}
     >

diff --git a/demo/src/screens/componentScreens/CardScannerScreen.js b/demo/src/screens/componentScreens/CardScannerScreen.js
@@ -64,19 +64,19 @@ export default class CardScannerScreen extends Component {
           <Card containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
             <Card.Image height={115} source={post.coverImage}/>
             <View padding-20>
-              <Text text40 color={Colors.dark10}>
+              <Text text40 color={Colors.grey10}>
                 {post.title}
               </Text>
               <Text text90> | {post.timestamp}</Text>
               <Text text90 color={statusColor}>
                 {post.status}
               </Text>
 
-              <Text text70 color={Colors.dark10}>
+              <Text text70 color={Colors.grey10}>
                 {post.description}
               </Text>
 
-              <Text text90 color={Colors.dark50}>
+              <Text text90 color={Colors.grey50}>
                 {post.likes} Likes
               </Text>
               <View row spread>
@@ -94,13 +94,13 @@ export default class CardScannerScreen extends Component {
           </Card>
 
           {this.state.started && !this.state.isDone && (
-            <Text text70 dark10 style={{alignSelf: 'center', marginTop: 20}}>
+            <Text text70 grey10 style={{alignSelf: 'center', marginTop: 20}}>
               Publishing Post...
             </Text>
           )}
 
           {this.state.isDone && (
-            <Text text70 dark10 style={{alignSelf: 'center', marginTop: 20}}>
+            <Text text70 grey10 style={{alignSelf: 'center', marginTop: 20}}>
               Done!
             </Text>
           )}

diff --git a/demo/src/screens/componentScreens/CheckboxScreen.tsx b/demo/src/screens/componentScreens/CheckboxScreen.tsx
@@ -42,7 +42,7 @@ class CheckboxScreen extends Component {
               onValueChange={value3 => this.setState({value3})}
               borderRadius={5}
               size={18}
-              color={Colors.dark10}
+              color={Colors.grey10}
               iconColor={Colors.green10}
               style={{marginBottom: 20}}
             />
@@ -64,7 +64,7 @@ class CheckboxScreen extends Component {
               />
             </View>
           </View>
-          <Text text40 dark10>
+          <Text text40 grey10>
             Checkbox
           </Text>
         </View>

diff --git a/demo/src/screens/componentScreens/ColorPickerScreen.tsx b/demo/src/screens/componentScreens/ColorPickerScreen.tsx
@@ -117,6 +117,6 @@ export default class ColorPickerScreen extends Component<Props, State> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.dark80
+    backgroundColor: Colors.grey80
   }
 });
diff --git a/demo/src/screens/componentScreens/ColorSwatchScreen.tsx b/demo/src/screens/componentScreens/ColorSwatchScreen.tsx
@@ -34,9 +34,9 @@ export default class ColorSwatchScreen extends Component {
     const {color, color1, color2, selected} = this.state;
 
     return (
-      <ScrollView style={{backgroundColor: Colors.dark80}}>
+      <ScrollView style={{backgroundColor: Colors.grey80}}>
         <View flex center useSafeArea>
-          <Text margin-5 text60 dark10>Single ColorSwatch</Text>
+          <Text margin-5 text60 grey10>Single ColorSwatch</Text>
           <View row>
             <ColorSwatch selected={selected} onPress={this.onPress}/>
             <View>
@@ -45,22 +45,22 @@ export default class ColorSwatchScreen extends Component {
             </View>
           </View>
 
-          <Text marginT-20 text60 dark10>ColorPalette</Text>
+          <Text marginT-20 text60 grey10>ColorPalette</Text>
           <Text marginB-10 text70 style={{color}}>Selected Color: {color}</Text>
           <ColorPalette
             value={color}
             onValueChange={this.onValueChange}
             colors={this.colors}
           />
 
-          <Text margin-10 text60 dark10>Scrollable</Text>
+          <Text margin-10 text60 grey10>Scrollable</Text>
           <ColorPalette
             value={color1}
             onValueChange={this.onValueChange1}
             colors={this.mainColors}
           />
 
-          <Text margin-10 text60 dark10>Pagination</Text>
+          <Text margin-10 text60 grey10>Pagination</Text>
           <ColorPalette
             numberOfRows={!Constants.isTablet ? 4 : undefined}
             value={color2}

diff --git a/demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx b/demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx
@@ -29,7 +29,7 @@ export default class ConnectionStatusBarScreen extends Component<{}, ConnectionS
             textAlign: 'center',
             marginBottom: 10,
             ...Typography.text60,
-            color: Colors.dark40
+            color: Colors.grey40
           }}
         >
           Turn your wifi on/off to see the component in action

diff --git a/demo/src/screens/componentScreens/ContactsListScreen.js b/demo/src/screens/componentScreens/ContactsListScreen.js
@@ -69,6 +69,6 @@ export default class ContactsListScreen extends Component {
 const styles = StyleSheet.create({
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: Colors.dark70
+    borderColor: Colors.grey70
   }
 });