Add box to make outline different from fill button

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

@@ -5,6 +5,7 @@
 }
 
 .color-button-swatch {
+    position: relative;
     display: flex;
     flex-basis: 2rem;
     flex-shrink: 0;
@@ -34,4 +35,19 @@
 .swatch-icon {
     width: 1.75rem;
     margin: auto;
+    /* Make sure it appears above the outline box */
+    z-index: 2;
+}
+
+.outline-swatch:after {
+    content: "";
+    position: absolute;
+    top: calc(0.5rem + 1px);
+    left: calc(0.5rem + 1px);
+    width: 0.75rem;
+    height: 0.75rem;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    /* Make sure it appears below the transparent icon */
+    z-index: 1;
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import {MIXED} from '../../helper/style-path';
 
@@ -17,7 +18,9 @@ const ColorButtonComponent = props => (
         onClick={props.onClick}
     >
         <div
-            className={styles.colorButtonSwatch}
+            className={classNames(styles.colorButtonSwatch, {
+                [styles.outlineSwatch]: props.outline
+            })}
             style={{
                 background: colorToBackground(props.color)
             }}
@@ -39,8 +42,13 @@ const ColorButtonComponent = props => (
 );
 
 ColorButtonComponent.propTypes = {
+    outline: PropTypes.bool.isRequired,
     color: PropTypes.string,
     onClick: PropTypes.func.isRequired
 };
 
+ColorButtonComponent.defaultProps = {
+    outline: false
+};
+
 export default ColorButtonComponent;

src/components/stroke-color-indicator.jsx

@@ -31,6 +31,7 @@ const StrokeColorIndicatorComponent = props => (
         >
             <Label text={props.intl.formatMessage(messages.stroke)}>
                 <ColorButton
+                    outline
                     color={props.strokeColor}
                     onClick={props.onOpenStrokeColor}
                 />