Infra/design tokens color swatch (#2029)

* Design Tokens - ColorSwatch - not final

* Add border to transparent

* Fix ColorPalette fader color

Author: M-i-k-e-l

demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -4,7 +4,12 @@ import {ScrollView} from 'react-native';
 import {Constants, Colors, View, Text, ColorSwatch, ColorPalette} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class ColorSwatchScreen extends Component {
-  colors = ['transparent', Colors.green30, Colors.yellow30, Colors.red30];
+  colors = [
+    'transparent',
+    Colors.$backgroundSuccessHeavy,
+    Colors.$backgroundWarningHeavy,
+    Colors.$backgroundDangerHeavy
+  ];
   mainColors = [
     '#66737C',
     '#459FED',
@@ -50,15 +55,15 @@ export default class ColorSwatchScreen extends Component {
     const {color, color1, color2, selected} = this.state;
 
     return (
-      <ScrollView style={{backgroundColor: Colors.grey80}}>
+      <ScrollView style={{backgroundColor: Colors.$backgroundNeutralLight}}>
         <View flex center useSafeArea>
           <Text margin-5 text60 grey10>
             Single ColorSwatch
           </Text>
           <View row>
             <ColorSwatch selected={selected} onPress={this.onPress}/>
             <View>
-              <ColorSwatch selected color={Colors.orange60}/>
+              <ColorSwatch selected color={Colors.$backgroundMajor}/>
               <Text>Disabled</Text>
             </View>
           </View>

src/components/colorPalette/index.tsx

@@ -347,6 +347,7 @@ class ColorPalette extends PureComponent<Props, State> {
         height={SCROLLABLE_HEIGHT}
         containerProps={{width: !scrollable ? contentWidth : undefined}}
         gradientHeight={SCROLLABLE_HEIGHT - 12}
+        gradientColor={Colors.$backgroundDefault}
       >
         {this.renderPalette(others, styles.scrollContent, this.colors, 0)}
       </ScrollBar>

src/components/colorSwatch/index.tsx

@@ -1,13 +1,12 @@
 import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import Assets from '../../assets';
-import {Colors} from '../../style';
+import {BorderRadiuses, Colors} from '../../style';
 import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 
-
 interface Props {
   /**
    * The identifier value of the ColorSwatch in a ColorSwatch palette.
@@ -110,9 +109,9 @@ class ColorSwatch extends PureComponent<Props> {
   getTintColor(color?: string) {
     if (color) {
       if (Colors.isTransparent(color)) {
-        return Colors.black;
+        return Colors.$iconDefault;
       }
-      return Colors.isDark(color) ? Colors.white : Colors.black;
+      return Colors.isDark(color) ? Colors.$iconDefaultLight : Colors.$iconDefault;
     }
   }
 
@@ -192,7 +191,6 @@ class ColorSwatch extends PureComponent<Props> {
 
 export default asBaseComponent<Props>(ColorSwatch);
 
-
 function createStyles({color = Colors.grey30}) {
   return StyleSheet.create({
     container: {
@@ -202,12 +200,15 @@ function createStyles({color = Colors.grey30}) {
       borderRadius: DEFAULT_SIZE / 2,
       margin: SWATCH_MARGIN,
       borderWidth: color === 'transparent' ? undefined : 1,
-      borderColor: Colors.rgba(Colors.grey30, 0.2)
+      borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
     },
     transparentImage: {
       ...StyleSheet.absoluteFillObject,
       width: DEFAULT_SIZE,
-      height: DEFAULT_SIZE
+      height: DEFAULT_SIZE,
+      borderWidth: 1,
+      borderRadius: BorderRadiuses.br100,
+      borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
     }
   });
 }