wix · Inbal-Tish · Nov 23, 2022 · Nov 21, 2022
diff --git a/demo/src/screens/componentScreens/GridViewScreen.tsx b/demo/src/screens/componentScreens/GridViewScreen.tsx
@@ -153,7 +153,7 @@ class GridViewScreen extends Component {
             items={contacts}
             // viewWidth={300}
             numColumns={6}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={7}
           />
 
@@ -163,7 +163,7 @@ class GridViewScreen extends Component {
           <GridView
             items={products}
             numColumns={4}
-            lastItemOverlayColor={Colors.rgba(Colors.primary, 0.6)}
+            lastItemOverlayColor={Colors.rgba(Colors.$backgroundPrimaryHeavy, 0.6)}
             lastItemLabel={42}
             keepItemSize
           />

diff --git a/lib/components/WheelPicker/index.tsx b/lib/components/WheelPicker/index.tsx
@@ -50,7 +50,7 @@ class WheelPicker extends Component<WheelPickerProps> {
 
   static defaultProps = {
     labelStyle: {fontSize: Typography.text70?.fontSize, fontFamily: Typography.text70?.fontFamily},
-    color: Colors.primary
+    color: Colors.$textPrimary
   };
 
   static Item: typeof WheelPickerItem;

diff --git a/src/components/chipsInput/Presenter.ts b/src/components/chipsInput/Presenter.ts
@@ -8,7 +8,7 @@ export const hasInvalidChip = (chips: Array<ChipsInputChipProps>) => {
 export const getValidationBasedColor = (chips: Array<ChipsInputChipProps>, defaultChip?: ChipsInputChipProps) => {
   const dismissColor = defaultChip?.dismissColor || Colors.red30;
 
-  return hasInvalidChip(chips) ? dismissColor : Colors.primary;
+  return hasInvalidChip(chips) ? dismissColor : Colors.$backgroundPrimaryHeavy;
 };
 
 export const getCounterTextColor = (stateChips: Array<ChipsInputChipProps>, props: ChipsInputProps) => {

diff --git a/src/components/chipsInput/index.tsx b/src/components/chipsInput/index.tsx
@@ -572,7 +572,7 @@ const styles = StyleSheet.create({
   tag: {
     borderWidth: 0,
     paddingVertical: 5,
-    backgroundColor: Colors.primary
+    backgroundColor: Colors.$backgroundPrimaryHeavy
   },
   invalidTag: {
     borderWidth: 1,

diff --git a/src/components/drawer/index.tsx b/src/components/drawer/index.tsx
@@ -10,7 +10,7 @@ import View from '../view';
 import Swipeable, {SwipeableProps} from './Swipeable';
 import {LogService} from '../../services';
 
-const DEFAULT_BG = Colors.primary;
+const DEFAULT_BG = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_BOUNCINESS = 0;
 
 interface DrawerItemProps {

diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
@@ -34,7 +34,7 @@ describe('Hint Screen component test', () => {
   });
 
   it('Test Hint component background color', async () => {
-    const expectedColor = Colors.primary;
+    const expectedColor = Colors.$backgroundPrimaryHeavy;
     const component = <HintTestComponent showHint/>;
 
     const driver = new HintDriver({component, testID: 'Hint'});

diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
@@ -26,7 +26,7 @@ import TouchableOpacity from '../touchableOpacity';
 const sideTip = require('./assets/hintTipSide.png');
 const middleTip = require('./assets/hintTipMiddle.png');
 
-const DEFAULT_COLOR = Colors.primary;
+const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
 

diff --git a/src/components/loaderScreen/index.tsx b/src/components/loaderScreen/index.tsx
@@ -28,7 +28,7 @@ class LoaderScreen extends Component<LoaderScreenProps> {
             <ActivityIndicator
               size={'large'}
               animating
-              color={loaderColor || (Constants.isIOS ? Colors.grey60 : Colors.primary)}
+              color={loaderColor || (Constants.isIOS ? Colors.grey60 : Colors.$iconPrimary)}
               {...others}
             />
           )}

diff --git a/src/components/modal/TopBar.tsx b/src/components/modal/TopBar.tsx
@@ -81,7 +81,7 @@ type topBarButtonProp = {
 
 const TOP_BAR_HEIGHT = Constants.isIOS ? 44 : 56;
 const DEFAULT_BUTTON_PROPS = {
-  color: Colors.primary
+  color: Colors.$textPrimary
 };
 
 /**

diff --git a/src/components/modal/api/modalTopBar.api.json b/src/components/modal/api/modalTopBar.api.json
@@ -11,7 +11,7 @@
       "name": "doneButtonProps",
       "type": "ButtonProps",
       "description": "Done action props",
-      "default": "{color: Colors.primary}"
+      "default": "{color: Colors.$textPrimary}"
     },
     {"name": "doneLabel", "type": "string", "description": "Done action label", "default": "Save"},
     {"name": "doneIcon", "type": "ImageSource", "description": "Done action icon"},
@@ -20,7 +20,7 @@
       "name": "cancelButtonProps",
       "type": "ButtonProps",
       "description": "Cancel action props",
-      "default": "{color: Colors.primary}"
+      "default": "{color: Colors.$textPrimary}"
     },
     {"name": "cancelLabel", "type": "string", "description": "Cancel action label"},
     {

diff --git a/src/components/pageControl/index.tsx b/src/components/pageControl/index.tsx
@@ -8,7 +8,7 @@ import View from '../view';
 
 const MAX_SHOWN_PAGES = 7;
 const NUM_LARGE_INDICATORS = 3;
-const DEFAULT_INDICATOR_COLOR = Colors.primary;
+const DEFAULT_INDICATOR_COLOR = Colors.$iconPrimary;
 
 function getColorStyle(isCurrentPage: boolean, color?: string, inactiveColor?: string) {
   const activeColor = color || DEFAULT_INDICATOR_COLOR;

diff --git a/src/components/pageControl/pageControl.api.json b/src/components/pageControl/pageControl.api.json
@@ -26,7 +26,7 @@
       "name": "color",
       "type": "string",
       "description": "Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages",
-      "default": "Colors.primary"
+      "default": "Colors.$iconPrimary"
     },
     {
       "name": "inactiveColor",

diff --git a/src/components/radioButton/radioButton.api.json b/src/components/radioButton/radioButton.api.json
@@ -22,7 +22,7 @@
     },
     {"name": "onPress", "type": "(selected: boolean) => void", "description": "Invoked when pressing the button"},
     {"name": "disabled", "type": "boolean", "description": "Whether the radio button should be disabled"},
-    {"name": "color", "type": "string", "description": "The color of the radio button", "default": "Colors.primary"},
+    {"name": "color", "type": "string", "description": "The color of the radio button", "default": "Colors.$backgroundPrimaryHeavy"},
     {
       "name": "size",
       "type": "number",

diff --git a/src/components/stateScreen/index.tsx b/src/components/stateScreen/index.tsx
@@ -74,7 +74,7 @@ function createStyles(isRemoteImage: boolean) {
       marginTop: 12
     },
     ctaLabel: {
-      color: Colors.primary,
+      color: Colors.$textPrimary,
       ...Typography.text70
     }
   });

diff --git a/src/components/tabBar/TabBarItem.tsx b/src/components/tabBar/TabBarItem.tsx
@@ -19,7 +19,7 @@ import Image from '../image';
 import Badge, {BadgeProps} from '../badge';
 
 const INDICATOR_HEIGHT = 2;
-const INDICATOR_BG_COLOR = Colors.primary;
+const INDICATOR_BG_COLOR = Colors.$backgroundPrimaryHeavy;
 const HORIZONTAL_PADDING = Constants.isTablet ? Spacings.s7 : Spacings.s5;
 
 export interface TabBarItemProps {
@@ -262,11 +262,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: HORIZONTAL_PADDING
   },
   label: {
-    color: Colors.primary,
+    color: Colors.$textPrimary,
     ...Typography.text80
   },
   selectedLabel: {
-    color: Colors.primary,
+    color: Colors.$textPrimary,
     ...Typography.text80,
     fontWeight: 'bold'
   },

diff --git a/src/components/tabController/apis/tabBarItem.api.json b/src/components/tabController/apis/tabBarItem.api.json
@@ -13,7 +13,7 @@
       "name": "selectedLabelColor",
       "type": "string",
       "description": "The selected label color",
-      "default": "Colors.primary"
+      "default": "Colors.$textPrimary"
     },
     {"name": "icon", "type": "number", "description": "Icon of the tab"},
     {"name": "iconColor", "type": "string", "description": "Icon tint color"},

diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
@@ -29,12 +29,12 @@ const COLOR_BY_STATE = {
 };
 const UNDERLINE_COLOR_BY_STATE = {
   default: Colors.grey50,
-  focus: Colors.primary,
+  focus: Colors.$outlinePrimary,
   error: Colors.red30
 };
 const PLACEHOLDER_COLOR_BY_STATE = {
   default: Colors.grey30,
-  focus: Colors.primary
+  focus: Colors.$textPrimary
 };
 const CHAR_COUNTER_COLOR_BY_STATE = {
   default: Colors.grey30,
@@ -656,7 +656,7 @@ export default class TextField extends BaseInput {
             pointerEvents="none"
             source={iconSource}
             resizeMode={'contain'}
-            style={[this.styles.rightButtonImage, {tintColor: iconColor || Colors.primary}]}
+            style={[this.styles.rightButtonImage, {tintColor: iconColor || Colors.$iconPrimary}]}
           />
         </TouchableOpacity>
       );

diff --git a/src/components/toast/index.js b/src/components/toast/index.js
@@ -249,7 +249,7 @@ export default class Toast extends PureBaseComponent {
     }
 
     if (action) {
-      const actionBg = backgroundColor || Colors.rgba(Colors.primary, 0);
+      const actionBg = backgroundColor || Colors.rgba(Colors.$backgroundPrimaryHeavy, 0);
 
       return (
         <Button
@@ -315,7 +315,7 @@ export default class Toast extends PureBaseComponent {
       return null;
     }
 
-    const bg = backgroundColor || Colors.primary;
+    const bg = backgroundColor || Colors.$backgroundPrimaryHeavy;
     const isTop = position === 'top';
     const positionMultiplier = isTop ? -1 : 1;
     const translateY = this.toastAnim.interpolate({

diff --git a/src/components/wheelPickerDialog/index.js b/src/components/wheelPickerDialog/index.js
@@ -144,14 +144,14 @@ const styles = StyleSheet.create({
     marginLeft: 142
   },
   cancelButton: {
-    color: Colors.primary,
+    color: Colors.$textPrimary,
     width: 75,
     height: 36,
     textAlign: 'center',
     textAlignVertical: 'center'
   },
   okButton: {
-    color: Colors.primary,
+    color: Colors.$textPrimary,
     width: 47,
     height: 36,
     textAlign: 'center',

diff --git a/src/style/componentsColors.ts b/src/style/componentsColors.ts
@@ -1,7 +1,7 @@
 import Colors from './colors';
 
 const ComponentsColors = {
-  CTA: Colors.primary,
+  CTA: Colors.$backgroundPrimaryHeavy,
   disabledText: Colors.grey50
 };
 

diff --git a/src/style/themeManager.ts b/src/style/themeManager.ts
@@ -19,11 +19,11 @@ export class ThemeManager {
   private themeContext?: Context<any>;
 
   theme: Theme = {
-    primaryColor: Colors.primary,
+    primaryColor: Colors.$backgroundPrimaryHeavy,
     CTA: {
       textColor: Colors.white,
       disabledColor: Colors.grey60,
-      backgroundColor: Colors.primary
+      backgroundColor: Colors.$backgroundPrimaryHeavy
     },
     titleColor: Colors.grey10,
     subtitleColor: Colors.grey40,