Use Colors.primary in components and change primary color to violet30 (#1135)

* Use Colors.primary in components and change primary color to violet30

* Fix typings of primary color

* Fix blue30 to primary in some missed components

Author: ethanshar

demo/src/screens/MainScreen.js

@@ -181,7 +181,7 @@ class MainScreen extends Component {
           paddingV-s2
           onPress={() => this.openScreen(item)}
           onLongPress={() => this.setDefaultScreen(item)}
-          activeBackgroundColor={Colors.blue40}
+          activeBackgroundColor={Colors.primary}
           activeOpacity={1}
         >
           <Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>

demo/src/screens/componentScreens/ActionBarScreen.tsx

@@ -45,7 +45,7 @@ export default class ActionBarScreen extends Component {
 
           <View style={styles.page}>
             <ActionBar
-              backgroundColor={Colors.blue30}
+              backgroundColor={Colors.primary}
               actions={[
                 {label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
                 {label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},

demo/src/screens/componentScreens/ButtonsScreen.tsx

@@ -318,7 +318,7 @@ export default class ButtonsScreen extends Component {
 
             <Button
               style={{marginBottom: ButtonSpace}}
-              blue30
+              primary
               outline
               iconSource={plusIcon}
               label="Icon"
@@ -339,7 +339,7 @@ export default class ButtonsScreen extends Component {
               style={{marginBottom: ButtonSpace}}
             >
               <Image source={plusIcon} />
-              <Text style={{marginLeft: 10, color: Colors.blue30}}>
+              <Text marginL-10 primary>
                 Custom Icon
               </Text>
             </Button>

generatedTypes/components/badge/index.d.ts

@@ -108,7 +108,7 @@ declare function createStyles(props: BadgeProps): {
     badge: {
         alignSelf: "flex-start";
         borderRadius: number;
-        backgroundColor: any;
+        backgroundColor: string | undefined;
         alignItems: "center";
         justifyContent: "center";
         overflow: "hidden";

generatedTypes/components/card/index.d.ts

@@ -72,7 +72,8 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     } | undefined;
     activeBackgroundColor?: string | undefined;
     useNative?: boolean | undefined;
-    customValue?: any; /**
+    customValue?: any;
+    /**
      * card custom height
      */
     style?: false | {} | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | import("react-native").RecursiveArray<false | ViewStyle | import("react-native").RegisteredStyle<ViewStyle> | null | undefined> | {

generatedTypes/incubator/TextField/presets/default.d.ts

@@ -2,12 +2,12 @@ declare const _default: {
     enableErrors: boolean;
     validateOnBlur: boolean;
     floatingPlaceholderColor: {
-        focus: any;
+        focus: string;
         error: any;
         disabled: string;
     };
     labelColor: {
-        focus: any;
+        focus: string;
         error: any;
         disabled: string;
     };

generatedTypes/incubator/TextField/usePreset.d.ts

@@ -1015,7 +1015,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         error?: string | undefined;
         disabled?: string | undefined;
     } | {
-        focus: any;
+        focus: string;
         error: any;
         disabled: string;
     };
@@ -1061,7 +1061,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         error?: string | undefined;
         disabled?: string | undefined;
     } | {
-        focus: any;
+        focus: string;
         error: any;
         disabled: string;
     };

generatedTypes/style/colors.d.ts

@@ -125,5 +125,7 @@ declare const colorObject: Colors & {
     violet80: string;
     white: string;
     black: string;
+} & {
+    primary: string;
 };
 export default colorObject;

lib/components/WheelPicker/index.js

@@ -46,7 +46,7 @@ class WheelPicker extends Component {
 
   static defaultProps = {
     labelStyle: {fontSize: Typography.text70.fontSize, fontFamily: Typography.text70.fontFamily},
-    color: Colors.blue30
+    color: Colors.primary
   };
 
   constructor(props) {

src/components/actionBar/index.tsx

@@ -74,7 +74,7 @@ class ActionBar extends Component<ActionBarProps> {
         <View row centerV paddingH-20={!centered} style={[this.styles.container, style]} {...others}>
           {_.map(actions, (action, i) => (
             <View key={i} flex {...this.getAlignment(i)}>
-              <Button link size={Button.sizes.medium} blue30 {...action}/>
+              <Button link size={Button.sizes.medium} primary {...action}/>
             </View>
           ))}
         </View>

src/components/avatar/index.tsx

@@ -382,7 +382,7 @@ function createStyles(props: AvatarProps) {
       lineHeight: undefined
     },
     ribbon: {
-      backgroundColor: Colors.blue30,
+      backgroundColor: Colors.primary,
       paddingHorizontal: 6,
       paddingVertical: 3
     }