TabController - design tokens - fixes (#1935)

* TabController - design tokens - fixes

* Fader color will be handled within Fader

* Revert

Author: M-i-k-e-l

demo/src/screens/MainScreen.js

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

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -174,7 +174,7 @@ class TabControllerScreen extends Component<{}, State> {
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             enableShadow
-            activeBackgroundColor={Colors.blue60}
+            activeBackgroundColor={Colors.$backgroundGeneralLight}
             centerSelected={centerSelected}
           >
             {/* {this.renderTabItems()} */}

src/components/tabController/TabBar.tsx

@@ -121,7 +121,7 @@ interface Props extends TabControllerBarProps, BaseComponentInjectedProps, Forwa
   children?: ChildProps[] | ChildProps;
 }
 
-const FADER_PROPS = {size: 76, tintColor: Colors.$backgroundDefault};
+const FADER_PROPS = {size: 76, tintColor: Colors.$backgroundElevated};
 
 /**
  * @description: TabController's TabBar component
@@ -285,7 +285,7 @@ const TabBar = (props: Props) => {
   }, [containerWidth]);
 
   return (
-    <View style={_containerStyle} key={key}>
+    <View style={_containerStyle} key={key} bg-$backgroundElevated>
       <FadedScrollView
         // @ts-expect-error
         ref={tabBar}

src/components/tabController/TabBarItem.tsx

@@ -192,6 +192,7 @@ export default function TabBarItem({
       // @ts-expect-error
       ref={itemRef}
       style={_style}
+      bg-$backgroundElevated
       onLayout={onLayout}
       activeBackgroundColor={activeBackgroundColor}
       activeOpacity={activeOpacity}