Checkbox - to design tokens (#1920)

Author: Inbal-Tish

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
-import {Checkbox, Assets, Text, View, Colors, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
+import {StyleSheet} from 'react-native';
+import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
-class CheckboxScreen extends Component {
+export default class CheckboxScreen extends Component {
   state = {
     value1: false,
     value2: false,
@@ -14,63 +15,67 @@ class CheckboxScreen extends Component {
   render() {
     return (
       <View useSafeArea flex>
-        <View flex padding-20>
-          <View flex center>
-            <Checkbox
-              value={this.state.value1}
-              onValueChange={value1 => this.setState({value1})}
-              style={{marginBottom: 20}}
-            />
-            <Checkbox
-              value={this.state.value6}
-              label={'With label'}
-              color={Colors.green20}
-              onValueChange={value6 => this.setState({value6})}
-              containerStyle={{marginBottom: 20, marginLeft: 75}}
-            />
-            <Checkbox
-              value={this.state.value2}
-              onValueChange={value2 => this.setState({value2})}
-              borderRadius={2}
-              size={30}
-              color={Colors.purple30}
-              selectedIcon={Assets.icons.x}
-              style={{marginBottom: 20}}
-            />
-            <Checkbox
-              value={this.state.value3}
-              onValueChange={value3 => this.setState({value3})}
-              borderRadius={5}
-              size={18}
-              color={Colors.grey10}
-              iconColor={Colors.green10}
-              style={{marginBottom: 20}}
-            />
-            <View row marginB-20>
-              <Text text70 centerV>
-                Disabled:{' '}
-              </Text>
-              <Checkbox
-                disabled
-                value={this.state.value5}
-                onValueChange={value5 => this.setState({value5})}
-                style={{marginRight: 10}}
-              />
-              <Checkbox
-                disabled
-                value={!this.state.value5}
-                onValueChange={value5 => this.setState({value5})}
-                iconColor={Colors.green10}
-              />
-            </View>
-          </View>
-          <Text text40 grey10>
-            Checkbox
+        <Text text40 $textDefault margin-20>
+          Checkbox
+        </Text>
+        
+        <Checkbox
+          value={this.state.value1}
+          onValueChange={value1 => this.setState({value1})}
+          style={styles.checkbox}
+        />
+        <Checkbox
+          value={this.state.value6}
+          label={'With label'}
+          color={Colors.green20}
+          onValueChange={value6 => this.setState({value6})}
+          containerStyle={styles.checkbox}
+        />
+        <Checkbox
+          value={this.state.value2}
+          onValueChange={value2 => this.setState({value2})}
+          borderRadius={2}
+          size={30}
+          color={Colors.purple30}
+          selectedIcon={Assets.icons.x}
+          style={styles.checkbox}
+        />
+        <Checkbox
+          value={this.state.value3}
+          onValueChange={value3 => this.setState({value3})}
+          borderRadius={5}
+          size={18}
+          color={Colors.grey10}
+          iconColor={Colors.green10}
+          style={styles.checkbox}
+        />
+        <View row margin-20 style={styles.row}>
+          <Text $textDefault marginR-10>
+            Disabled:
           </Text>
+          <Checkbox
+            disabled
+            value={this.state.value5}
+            onValueChange={value5 => this.setState({value5})}
+            style={{marginRight: 10}}
+          />
+          <Checkbox
+            disabled
+            value={!this.state.value5}
+            onValueChange={value5 => this.setState({value5})}
+            iconColor={Colors.green10}
+          />
         </View>
       </View>
     );
   }
 }
 
-export default CheckboxScreen;
+const styles = StyleSheet.create({
+  checkbox: {
+    margin: 20
+  },
+  row: {
+    alignItems: 'center'
+  }
+});

src/components/checkbox/index.tsx

@@ -18,9 +18,9 @@ import Text, {TextProps} from '../text';
 import View from '../view';
 
 const DEFAULT_SIZE = 24;
-const DEFAULT_COLOR = Colors.primary;
-const DEFAULT_ICON_COLOR = Colors.white;
-const DEFAULT_DISABLED_COLOR = Colors.grey50;
+const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
+const DEFAULT_ICON_COLOR = Colors.$iconDefaultLight;
+const DEFAULT_DISABLED_COLOR = Colors.$backgroundDisabled;
 
 const DEFAULT_BORDER_WIDTH = 2;
 const DEFAULT_BORDER_RADIUS = 8;
@@ -188,9 +188,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         return iconColor || DEFAULT_COLOR;
       }
     } else if (disabled) {
-      return Colors.white;
+      return DEFAULT_ICON_COLOR;
     } else {
-      return iconColor || Colors.white;
+      return iconColor || DEFAULT_ICON_COLOR;
     }
   };
 
@@ -276,7 +276,8 @@ function createStyles(props: CheckboxProps) {
     },
     checkboxLabel: {
       marginLeft: Spacings.s3,
-      alignSelf: 'center'
+      alignSelf: 'center',
+      color: Colors.$textDefault
     }
   });
 }