Infra/ migrate button components to design tokens

Author: lidord-wix

demo/src/screens/componentScreens/ActionBarScreen.tsx

@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
 
   render() {
     return (
-      <View flex bg-grey80>
+      <View flex bg-$backgroundNeutralLight>
         <PageControl
           containerStyle={[styles.pageControl, styles.absoluteContainer]}
           numOfPages={6}
           currentPage={this.state.currentPage}
-          color={Colors.grey10}
+          color={Colors.$backgroundInverted}
           size={15}
         />
         <Carousel
@@ -35,7 +35,7 @@ export default class ActionBarScreen extends Component {
           <View style={styles.page}>
             <ActionBar
               actions={[
-                {label: 'Delete', onPress: () => Alert.alert('delete'), red30: true},
+                {label: 'Delete', onPress: () => Alert.alert('delete'), $textDangerLight: true},
                 {label: 'Replace Photo', onPress: () => Alert.alert('replace photo')},
                 {label: 'Edit', onPress: () => Alert.alert('edit')}
               ]}
@@ -44,17 +44,17 @@ export default class ActionBarScreen extends Component {
 
           <View style={styles.page}>
             <ActionBar
-              backgroundColor={Colors.primary}
+              backgroundColor={Colors.$backgroundPrimaryHeavy}
               actions={[
-                {label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
-                {label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},
-                {label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true}
+                {label: 'Hide', onPress: () => Alert.alert('hide'), $textDefaultLight: true},
+                {label: 'Add Discount', onPress: () => Alert.alert('add discount'), $textDefaultLight: true},
+                {label: 'Duplicate', onPress: () => Alert.alert('duplicate'), $textDefaultLight: true}
               ]}
             />
           </View>
 
           <View style={styles.page}>
-            <ActionBar actions={[{label: 'Delete', red30: true}, {label: 'Edit'}]}/>
+            <ActionBar actions={[{label: 'Delete', $textDangerLight: true}, {label: 'Edit'}]}/>
           </View>
 
           <View style={styles.page}>
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
             <ActionBar
               centered
               actions={[
-                {label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
-                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
-                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
+                {label: 'Bold', labelStyle: {color: Colors.$textDefault, ...Typography.text60, fontWeight: '400'}},
+                {label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.$textDefault}},
+                {label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.$textDefault}}
               ]}
             />
           </View>

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -38,17 +38,17 @@ const SegmentedControlScreen = () => {
           />
           <SegmentedControl
             containerStyle={styles.container}
-            activeColor={Colors.red30}
+            activeColor={Colors.$textDangerLight}
             segments={segments.third}
           />
           <SegmentedControl
             containerStyle={styles.container}
             segments={segments.forth}
-            activeColor={Colors.grey10}
+            activeColor={Colors.$textDefault}
             borderRadius={BorderRadiuses.br20}
-            backgroundColor={Colors.grey10}
-            activeBackgroundColor={Colors.grey40}
-            inactiveColor={Colors.grey70}
+            backgroundColor={Colors.$backgroundInverted}
+            activeBackgroundColor={Colors.$backgroundNeutralIdle}
+            inactiveColor={Colors.$textDisabled}
           />
         </View>
         <SegmentedControl

src/components/actionBar/index.tsx

@@ -48,7 +48,7 @@ class ActionBar extends Component<ActionBarProps> {
 
   static defaultProps = {
     height: 48,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.$backgroundElevated,
     useSafeArea: true
   };
 
@@ -73,7 +73,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} primary {...action}/>
+              <Button link size={Button.sizes.medium} $textPrimary {...action}/>
             </View>
           ))}
         </View>

src/components/segmentedControl/index.tsx

@@ -92,11 +92,11 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     containerStyle,
     style,
     segments,
-    activeColor = Colors.primary,
+    activeColor = Colors.$textPrimary,
     borderRadius = BorderRadiuses.br100,
-    backgroundColor = Colors.grey80,
-    activeBackgroundColor = Colors.white,
-    inactiveColor = Colors.grey20,
+    backgroundColor = Colors.$backgroundNeutralLight,
+    activeBackgroundColor = Colors.$backgroundDefault,
+    inactiveColor = Colors.$textNeutralHeavy,
     outlineColor = activeColor,
     outlineWidth = BORDER_WIDTH,
     throttleTime = 0,
@@ -201,8 +201,8 @@ const SegmentedControl = (props: SegmentedControlProps) => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Colors.grey80,
-    borderColor: Colors.grey60,
+    backgroundColor: Colors.$backgroundNeutralMedium,
+    borderColor: Colors.$outlineNeutral,
     borderWidth: BORDER_WIDTH
   },
   selectedSegment: {

src/components/segmentedControl/segment.tsx

@@ -57,7 +57,7 @@ export type SegmentProps = SegmentedControlItemProps & {
  */
 const Segment = React.memo((props: SegmentProps) => {
   const {
-    activeColor = Colors.primary,
+    activeColor = Colors.$textPrimary,
     label,
     iconSource,
     iconStyle,