Add alpha support, sketch color picker

components/Carbon.js

@@ -82,6 +82,7 @@ class Carbon extends React.Component {
 
     // create styles
     const containerStyle = {
+      position: 'relative',
       background: config.background,
       minWidth: config.widthAdjustment ? '90px' : '680px',
       padding: `${config.paddingVertical} ${config.paddingHorizontal}`
@@ -112,7 +113,38 @@ class Carbon extends React.Component {
             value={this.props.children}
             options={options}
           />
+          <div id="container-bg">
+            <div className="alpha" />
+            <div className="bg" style={{ background: config.background }} />
+          </div>
           <style jsx>{`
+            #container #container-bg {
+              background: #fff;
+              position: absolute;
+              top: 0px;
+              right: 0px;
+              bottom: 0px;
+              left: 0px;
+            }
+
+            #container .bg {
+              position: absolute;
+              top: 0px;
+              right: 0px;
+              bottom: 0px;
+              left: 0px;
+            }
+
+            #container .alpha {
+              position: absolute;
+              top: 0px;
+              right: 0px;
+              bottom: 0px;
+              left: 0px;
+              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
+                left center;
+            }
+
             #container :global(.cm-s-dracula .CodeMirror-cursor) {
               border-left: solid 2px #159588;
             }
@@ -126,6 +158,8 @@ class Carbon extends React.Component {
 
             #container :global(.CodeMirror__container) {
               min-width: inherit;
+              position: relative;
+              z-index: 1;
             }
 
             #container :global(.CodeMirror__container.dropshadow) {

components/ColorPicker.js

@@ -32,7 +32,10 @@ class ColorPicker extends React.Component {
           <div className="colorpicker-label">
             <span>BG</span>
           </div>
-          <div className="bg-color" style={{ background: this.props.bg }} onClick={this.toggle} />
+          <div className="bg-color-container" onClick={this.toggle}>
+            <div className="bg-color-alpha" />
+            <div className="bg-color" style={{ background: this.props.bg }} />
+          </div>
         </div>
         <div className="colorpicker-picker" hidden={!this.state.isVisible}>
           <WindowPointer fromLeft="15px" />
@@ -62,11 +65,33 @@ class ColorPicker extends React.Component {
             border-right: 0.5px solid ${COLORS.SECONDARY};
           }
 
-          .bg-color {
+          .bg-color-container {
+            position: relative;
+            width: 34px;
+            margin-bottom: 1px;
+            background: #fff;
+            border-radius: 0px 2px 2px 0px;
             cursor: pointer;
-            height: 98%;
-            width: 100%;
+          }
+
+          .bg-color {
+            border-radius: 0px 2px 2px 0px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+          }
+
+          .bg-color-alpha {
             border-radius: 0px 2px 2px 0px;
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
+              left center;
           }
 
           .colorpicker-picker {
@@ -95,11 +120,8 @@ class ColorPicker extends React.Component {
             color: #fff !important;
           }
 
-          .colorpicker-picker
-            > :global(.sketch-picker
-              > div:nth-child(2)
-              > div:nth-child(1)
-              > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
+          /* prettier-ignore */
+          .colorpicker-picker :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
             background: #fff;
           }
         `}</style>

components/WindowControls.js

@@ -11,7 +11,7 @@ export default ({ theme }) => (
           position: relative;
           top: 34px;
           margin-left: 18px;
-          z-index: 1;
+          z-index: 2;
         }
       `}
     </style>

pages/editor.js

@@ -81,6 +81,7 @@ class Editor extends React.Component {
         transform: 'scale(2)',
         'transform-origin': 'center'
       },
+      filter: n => n.id !== 'container-bg',
       width: node.offsetWidth * 2,
       height: node.offsetHeight * 2
     }