wix · ethanshar · Apr 5, 2022 · Apr 4, 2022
diff --git a/demo/src/screens/componentScreens/ColorPickerScreen.tsx b/demo/src/screens/componentScreens/ColorPickerScreen.tsx
@@ -12,7 +12,7 @@ interface State {
   paletteChange: boolean
 }
 
-const INITIAL_COLOR = Colors.blue30;
+const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
 const colors = [
   '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
   '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
@@ -28,7 +28,7 @@ const colors = [
 export default class ColorPickerScreen extends Component<Props, State> {
   state: State = {
     color: INITIAL_COLOR,
-    textColor: Colors.white,
+    textColor: Colors.$textDefaultLight,
     customColors: [],
     paletteChange: false
   };
@@ -63,17 +63,17 @@ export default class ColorPickerScreen extends Component<Props, State> {
 
     return (
       <ScrollView style={styles.container} contentContainerStyle={{paddingBottom: 20}}>
-        <View center bg-white marginV-10>
+        <View center bg-$backgroundDefault marginV-10>
           <Text text60 margin-10 style={{color}}>
             Selected Color: {color}
           </Text>
-          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}}>
+          <View center marginB-10 style={{height: 50, width: 200, backgroundColor: color}} >
             <Text text60 style={{color: textColor}}>
               {color}
             </Text>
           </View>
         </View>
-        <View bg-white>
+        <View bg-$backgroundDefault>
           <Text text60 marginL-20 marginB-4 marginT-24>
             Theme Color
           </Text>
@@ -93,7 +93,7 @@ export default class ColorPickerScreen extends Component<Props, State> {
           />
         </View>
 
-        <View marginV-10 bg-white>
+        <View marginV-10 bg-$backgroundDefault>
           <Text center text60 marginT-10>
             Color Name
           </Text>
@@ -117,6 +117,6 @@ export default class ColorPickerScreen extends Component<Props, State> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.grey80
+    backgroundColor: Colors.$backgroundNeutralLight
   }
 });
diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
+import {DateTimePicker, Text, TouchableOpacity} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
   getCustomInputValue = (value: string) => {
@@ -22,7 +22,7 @@ export default class DateTimePickerScreen extends Component {
         }}
       >
         <Text>Valid from</Text>
-        <Text absR color={Colors.primary} text80BO>
+        <Text absR $textPrimary text80BO>
           {this.getCustomInputValue(value)}
         </Text>
       </TouchableOpacity>

diff --git a/demo/src/screens/incubatorScreens/WheelPickerScreen.tsx b/demo/src/screens/incubatorScreens/WheelPickerScreen.tsx
@@ -53,8 +53,8 @@ export default () => {
           <Text h3>Months</Text>
           <Incubator.WheelPicker
             initialValue={'February'}
-            activeTextColor={Colors.primary}
-            inactiveTextColor={Colors.grey20}
+            activeTextColor={Colors.$textPrimary}
+            inactiveTextColor={Colors.$textNeutralHeavy}
             items={monthItems}
             textStyle={Typography.text60R}
             numberOfVisibleRows={3} 
@@ -76,7 +76,7 @@ export default () => {
         <Text body>
           Move the wheel programmatically
         </Text>
-        <Text bodySmall grey30>
+        <Text bodySmall $textNeutral>
           (by updating the initialValue prop)
         </Text>
         <View marginT-10 row>

diff --git a/src/components/colorPalette/index.tsx b/src/components/colorPalette/index.tsx
@@ -367,8 +367,8 @@ class ColorPalette extends PureComponent<Props, State> {
         </Carousel>
         <PageControl
           size={6}
-          color={Colors.grey10}
-          inactiveColor={Colors.grey50}
+          color={Colors.$backgroundInverted}
+          inactiveColor={Colors.$backgroundDisabled}
           spacing={8}
           numOfPages={colorGroups.length}
           currentPage={currentPage}
@@ -393,11 +393,11 @@ const styles = StyleSheet.create({
   },
   paginationContainer: {
     flex: 1,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundDefault,
     paddingBottom: VERTICAL_PADDING
   },
   scrollContainer: {
-    backgroundColor: Colors.white
+    backgroundColor: Colors.$backgroundDefault
   },
   page: {
     flexWrap: 'wrap'

diff --git a/src/components/colorPicker/ColorPickerDialog.tsx b/src/components/colorPicker/ColorPickerDialog.tsx
@@ -72,7 +72,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
   static displayName = 'ColorPicker';
 
   static defaultProps = {
-    initialColor: Colors.grey80
+    initialColor: Colors.$backgroundNeutralLight
   };
 
   constructor(props: Props) {
@@ -229,7 +229,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
         <Button
           link
           iconSource={Assets.icons.x}
-          iconStyle={{tintColor: Colors.grey10}}
+          iconStyle={{tintColor: Colors.$iconDefault}}
           onPress={this.onDismiss}
           accessibilityLabel={_.get(accessibilityLabels, 'dismissButton')}
         />
@@ -247,7 +247,7 @@ class ColorPickerDialog extends PureComponent<Props, State> {
 
   renderSliders() {
     const {keyboardHeight, color} = this.state;
-    const colorValue = color.a === 0 ? Colors.black : Colors.getHexString(color);
+    const colorValue = color.a === 0 ? Colors.$backgroundInverted : Colors.getHexString(color);
 
     return (
       <ColorSliderGroup

diff --git a/src/components/colorPicker/index.tsx b/src/components/colorPicker/index.tsx
@@ -104,8 +104,8 @@ class ColorPicker extends PureComponent<Props> {
         />
         <View style={styles.buttonContainer}>
           <Button
-            color={Colors.grey10}
-            outlineColor={Colors.grey10}
+            color={Colors.$textDefault}
+            outlineColor={Colors.$textDefault}
             style={styles.button}
             round
             outline
@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     justifyContent: 'center',
     paddingTop: 1,
-    backgroundColor: Colors.white
+    backgroundColor: Colors.$backgroundDefault
   },
   button: {
     width: SWATCH_SIZE,

diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
@@ -236,11 +236,11 @@ class DateTimePicker extends Component<DateTimePickerPropsInternal, DateTimePick
     const {headerStyle, useCustomTheme} = this.props;
 
     return (
-      <View row spread bg-white paddingH-20 style={[styles.header, headerStyle]}>
+      <View row spread bg-$backgroundDefault paddingH-20 style={[styles.header, headerStyle]}>
         <Button
           link
           iconSource={Assets.icons.x}
-          iconStyle={{tintColor: Colors.grey10}}
+          iconStyle={{tintColor: Colors.$iconDefault}}
           onPress={this.toggleExpandableOverlay}
         />
         <Button link iconSource={Assets.icons.check} useCustomTheme={useCustomTheme} onPress={this.onDonePressed}/>
@@ -306,10 +306,10 @@ const styles = StyleSheet.create({
   header: {
     height: 56,
     borderBottomWidth: 1,
-    borderBottomColor: Colors.grey80
+    borderBottomColor: Colors.$outlineNeutral
   },
   dialog: {
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundDefault,
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12
   }

diff --git a/src/components/picker/NativePicker.js b/src/components/picker/NativePicker.js
@@ -118,7 +118,7 @@ class NativePicker extends BaseComponent {
     const label = this.getLabel();
     return (
       <TextField
-        color={Colors.grey10}
+        color={Colors.$textDefault}
         {...textInputProps}
         value={label}
         expandable

diff --git a/src/components/picker/PickerDialog.android.js b/src/components/picker/PickerDialog.android.js
@@ -83,7 +83,7 @@ class PickerDialog extends BaseComponent {
 const styles = StyleSheet.create({
   dialog: {
     flex: 1,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundDefault,
     overflow: 'hidden',
     borderRadius: BorderRadiuses.br10,
     paddingHorizontal: 24

diff --git a/src/components/picker/PickerDialog.js b/src/components/picker/PickerDialog.js
@@ -43,7 +43,7 @@ class PickerDialog extends BaseComponent {
     const {panDirection} = this.props;
     return (
       <Dialog {...dialogProps} width="100%" bottom animationConfig={{duration: 300}} panDirection={panDirection}>
-        <View flex bg-white>
+        <View flex bg-$backgroundDefault>
           {this.renderHeader()}
           <View centerV flex>
             {this.props.children}
@@ -58,7 +58,7 @@ class PickerDialog extends BaseComponent {
 const styles = StyleSheet.create({
   header: {
     height: 44,
-    backgroundColor: Colors.grey80,
+    backgroundColor: Colors.$backgroundNeutralLight,
     paddingHorizontal: 17,
     flexDirection: 'row',
     justifyContent: 'space-between',

diff --git a/src/components/picker/PickerItem.tsx b/src/components/picker/PickerItem.tsx
@@ -24,7 +24,7 @@ const PickerItem = (props: PickerItemProps) => {
     labelStyle,
     disabled,
     selectedIcon = Assets.icons.check,
-    selectedIconColor = Colors.primary,
+    selectedIconColor = Colors.$iconPrimary,
     testID
   } = props;
   const context = useContext(PickerContext);
@@ -52,7 +52,7 @@ const PickerItem = (props: PickerItemProps) => {
 
   const selectedIndicator = useMemo(() => {
     if (isSelected) {
-      return <Image source={selectedIcon} tintColor={isItemDisabled ? Colors.grey60 : selectedIconColor}/>;
+      return <Image source={selectedIcon} tintColor={isItemDisabled ? Colors.$iconDisabled : selectedIconColor}/>;
     }
   }, [isSelected, isItemDisabled, selectedIcon, selectedIconColor]);
 
@@ -102,17 +102,17 @@ const styles = StyleSheet.create({
   container: {
     height: 56.5,
     paddingHorizontal: 23,
-    borderColor: Colors.rgba(Colors.grey10, 0.1),
+    borderColor: Colors.$outlineNeutral,
     borderBottomWidth: 1
   },
   labelText: {
     ...Typography.text70,
-    color: Colors.grey10,
+    color: Colors.$textDefault,
     flex: 1,
     textAlign: 'left'
   },
   labelTextDisabled: {
-    color: Colors.grey60
+    color: Colors.$textDisabled
   }
 });
 

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingLeft: 16,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Colors.grey60
+    borderBottomColor: Colors.$outlineNeutral
   },
   searchIcon: {
     marginRight: 12

diff --git a/src/incubator/WheelPicker/Item.tsx b/src/incubator/WheelPicker/Item.tsx
@@ -41,8 +41,8 @@ const WheelPickerItem = memo(({
   itemHeight,
   onSelect,
   offset,
-  activeColor = Colors.primary,
-  inactiveColor = Colors.grey20,
+  activeColor = Colors.$textPrimary,
+  inactiveColor = Colors.$textNeutralHeavy,
   style,
   testID,
   centerH = true,
@@ -86,7 +86,7 @@ const WheelPickerItem = memo(({
         {label}
       </AnimatedText>
       {fakeLabel && (
-        <Text marginL-s2 marginR-s5 text80M color={'white'} {...fakeLabelProps} style={fakeLabelStyle}>
+        <Text marginL-s2 marginR-s5 text80M $textDefaultLight {...fakeLabelProps} style={fakeLabelStyle}>
           {fakeLabel}
         </Text>
       )}

diff --git a/src/incubator/WheelPicker/index.tsx b/src/incubator/WheelPicker/index.tsx
@@ -84,7 +84,7 @@ const WheelPicker = ({
   items: propItems,
   itemHeight = 44,
   numberOfVisibleRows = 5,
-  activeTextColor = Colors.primary,
+  activeTextColor = Colors.$textPrimary,
   inactiveTextColor,
   textStyle,
   label,
@@ -255,7 +255,7 @@ const WheelPicker = ({
   }, []);
 
   return (
-    <View testID={testID} bg-white style={style}>
+    <View testID={testID} bg-$backgroundDefault style={style}>
       <View row centerH>
         <View flexG>
           <AnimatedFlatList
@@ -302,7 +302,7 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderBottomWidth: 1,
     height: Spacings.s9,
-    borderColor: Colors.grey60
+    borderColor: Colors.$outlineNeutral
   },
   label: {
     position: 'absolute',