TabController - move to design tokens (#1850)

* TabController - move to design tokens

* Fix

Author: M-i-k-e-l

src/components/tabController/TabBar.tsx

@@ -15,7 +15,7 @@ import {orientations} from '../../commons/Constants';
 import {useDidUpdate} from 'hooks';
 
 const DEFAULT_HEIGHT = 48;
-const DEFAULT_BACKGROUND_COLOR = Colors.white;
+const DEFAULT_BACKGROUND_COLOR = Colors.$backgroundElevated;
 
 const DEFAULT_LABEL_STYLE = {
   ...Typography.text80M,
@@ -323,19 +323,19 @@ const styles = StyleSheet.create({
     left: 0,
     width: 70,
     height: 2,
-    backgroundColor: Colors.primary
+    backgroundColor: Colors.$backgroundPrimaryHeavy
   },
   containerShadow: {
     ...Platform.select({
       ios: {
-        shadowColor: Colors.grey10,
+        shadowColor: Colors.black,
         shadowOpacity: 0.05,
         shadowRadius: 2,
         shadowOffset: {height: 6, width: 0}
       },
       android: {
         elevation: 5,
-        backgroundColor: Colors.white
+        backgroundColor: Colors.$backgroundElevated
       }
     })
   },

src/components/tabController/TabBarItem.tsx

@@ -10,8 +10,8 @@ import TabBarContext from './TabBarContext';
 
 const TouchableOpacity = Reanimated.createAnimatedComponent(_TouchableOpacity);
 
-const DEFAULT_LABEL_COLOR = Colors.black;
-const DEFAULT_SELECTED_LABEL_COLOR = Colors.primary;
+const DEFAULT_LABEL_COLOR = Colors.$textDefault;
+const DEFAULT_SELECTED_LABEL_COLOR = Colors.$textPrimary;
 
 export interface TabControllerItemProps {
   /**
@@ -212,7 +212,7 @@ export default function TabBarItem({
         </Reanimated.Text>
       )}
       {badge && (
-        <Badge backgroundColor={Colors.red30} size={20} {...badge} containerStyle={styles.badge}/>
+        <Badge backgroundColor={Colors.$backgroundDangerHeavy} size={20} {...badge} containerStyle={styles.badge}/>
       )}
       {trailingAccessory}
     </TouchableOpacity>