Add initial transparent and mixed icons for color buttons and swatch

src/components/color-button/color-button.css

@@ -30,3 +30,8 @@
     color: #575e75;
     font-size: 0.75rem;
 }
+
+.swatch-icon {
+    width: 1.75rem;
+    margin: auto;
+}

src/components/color-button/color-button.jsx

@@ -1,8 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {MIXED} from '../../helper/style-path';
+
+import noFillIcon from './no-fill.svg';
+import mixedFillIcon from './mixed-fill.svg';
 import styles from './color-button.css';
 
+const colorToBackground = (color) => {
+    return color === MIXED || color === null ? 'white' : color
+};
+
 const ColorButtonComponent = props => (
     <div
         className={styles.colorButton}
@@ -11,9 +19,21 @@ const ColorButtonComponent = props => (
         <div
             className={styles.colorButtonSwatch}
             style={{
-                background: props.color
+                background: colorToBackground(props.color)
             }}
-        />
+        >
+            {props.color === null ? (
+                <img
+                    className={styles.swatchIcon}
+                    src={noFillIcon}
+                />
+            ) : ((props.color === MIXED ? (
+                <img
+                    className={styles.swatchIcon}
+                    src={mixedFillIcon}
+                />
+            ) : null))}
+        </div>
         <div className={styles.colorButtonArrow}>▾</div>
     </div>
 );

src/components/color-button/mixed-fill.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>mixed-fill</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.75">
+        <g id="mixed-fill">
+            <g id="mixed-fill-icon" transform="translate(2.000000, 2.500000)">
+                <circle id="blue" fill="#4C97FF" cx="4.5" cy="10.5" r="4.5"></circle>
+                <circle id="red" fill="#FF5500" cx="8" cy="4.5" r="4.5"></circle>
+                <circle id="yellow" fill="#FFBF00" cx="11.4099998" cy="10.5" r="4.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/color-button/no-fill.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>no-fill</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="no-fill" stroke="#FF661A" stroke-width="2">
+            <path d="M3,17 L17,3" id="Line"></path>
+        </g>
+    </g>
+</svg>

src/components/color-picker/color-picker.css

@@ -48,3 +48,7 @@
     border: 1px solid #4C97FF;
     box-shadow: 0px 0px 0px 3px hsla(215, 100%, 65%, 0.2);
 }
+
+.swatch > img {
+    max-width: 100%;
+}

src/components/color-picker/color-picker.jsx

@@ -9,6 +9,7 @@ import {MIXED} from '../../helper/style-path';
 
 import Slider from '../forms/slider.jsx';
 import styles from './color-picker.css';
+import noFillIcon from '../color-button/no-fill.svg';
 
 const colorStringToHsv = hexString => {
     const hsv = parseColor(hexString).hsv;
@@ -179,7 +180,9 @@ class ColorPickerComponent extends React.Component {
                                 [styles.activeSwatch]: this.props.color === null
                             })}
                             onClick={this.handleTransparent}
-                        />
+                        >
+                            <img src={noFillIcon} />
+                        </div>
                     </div>
                 </div>
             </div>