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

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/avatar/index.d.ts

@@ -156,7 +156,7 @@ declare function createStyles(props: AvatarProps): {
         lineHeight: undefined;
     };
     ribbon: {
-        backgroundColor: string;
+        backgroundColor: any;
         paddingHorizontal: number;
         paddingVertical: number;
     };

generatedTypes/components/button/index.d.ts

@@ -311,7 +311,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
     getContainerSizeStyle(): any;
     getOutlineStyle(): {
         borderWidth: number;
-        borderColor: string;
+        borderColor: any;
     } | undefined;
     getBorderRadiusStyle(): {
         borderRadius: number;

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/components/tabController/TabBarItem.d.ts

@@ -108,7 +108,7 @@ export default class TabBarItem extends PureComponent<Props> {
     getItemStyle(): any[];
     getLabelStyle(): (TextStyle | _.Dictionary<Reanimated.Node<number> | Reanimated.Node<string | number | boolean> | Reanimated.Node<"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"> | undefined> | undefined)[];
     getIconStyle(): {
-        tintColor: Reanimated.Node<string>;
+        tintColor: Reanimated.Node<any>;
     };
     render(): JSX.Element;
 }

generatedTypes/style/componentsColors.d.ts

@@ -1,5 +1,5 @@
 declare const ComponentsColors: {
-    CTA: string;
+    CTA: any;
     disabledText: string;
 };
 export default ComponentsColors;

generatedTypes/style/themeManager.d.ts

@@ -1,10 +1,10 @@
 export declare class ThemeManager {
     theme: {
-        primaryColor: string;
+        primaryColor: any;
         CTA: {
             textColor: string;
             disabledColor: string;
-            backgroundColor: string;
+            backgroundColor: any;
         };
         titleColor: string;
         subtitleColor: string;
@@ -16,11 +16,11 @@ export declare class ThemeManager {
     };
     setTheme(overrides: Dictionary<string>): void;
     getTheme(): {
-        primaryColor: string;
+        primaryColor: any;
         CTA: {
             textColor: string;
             disabledColor: string;
-            backgroundColor: string;
+            backgroundColor: any;
         };
         titleColor: string;
         subtitleColor: string;
@@ -33,10 +33,10 @@ export declare class ThemeManager {
     setComponentForcedTheme(componentName: string, overrides: Dictionary<any> | Function): void;
     get components(): Extendable;
     get forcedThemeComponents(): Extendable;
-    get primaryColor(): string;
+    get primaryColor(): any;
     get CTATextColor(): string;
     get CTADisabledColor(): string;
-    get CTABackgroundColor(): string;
+    get CTABackgroundColor(): any;
     get titleColor(): string;
     get subtitleColor(): string;
     get dividerColor(): string;

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
     }