migrate floatingButton and exampleScreenPresenter to designTokens (#1934)

Author: lidord-wix

demo/src/screens/ExampleScreenPresenter.tsx

@@ -24,7 +24,7 @@ interface RadioGroupOptions {
 
 export function renderHeader(title: string, others: TextProps) {
   return (
-    <Text text30 grey10 {...others}>
+    <Text text30 $textDefault {...others}>
       {title}
     </Text>
   );
@@ -35,7 +35,7 @@ export function renderBooleanOption(title: string, key: string) {
   const value = this.state[key];
   return (
     <View row centerV spread marginB-s4 key={key}>
-      <Text flex>{title}</Text>
+      <Text $textDefault flex>{title}</Text>
       <Switch
         useCustomTheme
         key={key}
@@ -51,7 +51,7 @@ export function renderBooleanOption(title: string, key: string) {
 export function renderBooleanGroup(title: string, options: string[]) {
   return (
     <View marginB-s2>
-      <Text text70M marginB-s2>
+      <Text text70M $textDefault marginB-s2>
         {title}
       </Text>
       <View row style={styles.rowWrap}>
@@ -69,7 +69,7 @@ export function renderBooleanGroup(title: string, options: string[]) {
                 // @ts-ignore
                 onValueChange={value => this.setState({[key]: value})}
               />
-              <Text text70 marginR-s3 marginB-s2>
+              <Text text70 marginR-s3 $textDefault marginB-s2>
                 {key}
               </Text>
             </View>
@@ -89,7 +89,7 @@ export function renderRadioGroup(title: string,
   return (
     <View marginB-s2>
       {!_.isUndefined(title) && (
-        <Text text70M marginB-s2>
+        <Text text70M $textDefault marginB-s2>
           {title}
         </Text>
       )}
@@ -125,7 +125,7 @@ export function renderColorOption(title: string,
   const value = this.state[key];
   return (
     <View marginV-s2>
-      <Text text70M>{title}</Text>
+      <Text text70M $textDefault>{title}</Text>
       <ColorPalette
         value={value}
         colors={colors}
@@ -143,7 +143,7 @@ export function renderSliderOption(title: string,
   const value = this.state[key] || initial;
   return (
     <View marginV-s2>
-      <Text marginB-s1 text70M>
+      <Text marginB-s1 text70M $textDefault>
         {title}
       </Text>
       <View row centerV>
@@ -157,7 +157,7 @@ export function renderSliderOption(title: string,
           // @ts-ignore
           onValueChange={value => this.setState({[key]: value})}
         />
-        <Text marginL-s4 text70 style={styles.text}>
+        <Text marginL-s4 text70 $textDefault style={styles.text}>
           {sliderText}
           {value}
         </Text>
@@ -173,7 +173,7 @@ export function renderMultipleSegmentOptions(title: string, key: string, options
 
   return (
     <View row centerV spread marginB-s4 key={key}>
-      {!!title && <Text marginR-s2>{title}</Text>}
+      {!!title && <Text $textDefault marginR-s2>{title}</Text>}
       <SegmentedControl
         initialIndex={index}
         segments={options}

demo/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -28,18 +28,18 @@ export default class FloatingButtonScreen extends Component<{}, State> {
     const {showSecondary} = this.state;
     return (
       <View style={styles.container}>
-        <Text text60 center marginB-s4>
+        <Text text60 center $textDefault marginB-s4>
           Trigger Floating Button
         </Text>
         {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
-            <Text text70 style={{fontWeight: 'bold'}}>
+            <Text text70 $textDefault style={{fontWeight: 'bold'}}>
               Scroll behind a FloatingButton
             </Text>
-            <Text text80 marginT-10 style={{lineHeight: 24}}>
+            <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
               Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
               industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
               scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
@@ -70,7 +70,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
               ? {
                 label: 'Not now',
                 onPress: this.notNow,
-                color: Colors.red30
+                color: Colors.$textDangerLight
               }
               : undefined
           }
@@ -88,6 +88,6 @@ const styles = StyleSheet.create({
     padding: 30,
     paddingBottom: 0,
     flex: 1,
-    backgroundColor: Colors.white
+    backgroundColor: Colors.$backgroundDefault
   }
 });

src/components/floatingButton/index.tsx

@@ -115,6 +115,7 @@ class FloatingButton extends PureComponent<FloatingButtonProps> {
             style={styles.image}
             source={gradientImage()}
             resizeMode={'stretch'}
+            tintColor={Colors.$backgroundDefault}
           />
         </View>
       );
@@ -177,7 +178,7 @@ const styles = StyleSheet.create({
     height: '100%'
   },
   shadow: {
-    shadowColor: Colors.grey40,
+    shadowColor: Colors.$backgroundNeutralIdle,
     shadowOffset: {height: 5, width: 0},
     shadowOpacity: 0.35,
     shadowRadius: 12,