Hack global css instead of copy chromepicker

src/app.jsx

@@ -17,7 +17,7 @@ import { ApiStyleStore } from './apistore.js'
 
 import theme from './theme.js'
 import { colors, fullHeight } from './theme.js'
-import './index.scss'
+import './index.css'
 
 export default class App extends React.Component {
   static childContextTypes = {

src/chromepicker.jsx

@@ -1,144 +0,0 @@
-import React from 'react'
-import reactCSS from 'reactcss'
-
-import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common'
-import ChromeFields from 'react-color/lib/components/chrome/ChromeFields'
-import ChromePointer from 'react-color/lib/components/chrome/ChromePointer'
-import ChromePointerCircle from 'react-color/lib/components/chrome/ChromePointerCircle'
-
-import theme from './theme.js'
-
-export const Chrome = ({ onChange, disableAlpha, rgb, hsl, hsv, hex, renderers }) => {
-  const styles = reactCSS({
-    'default': {
-      picker: {
-        background: theme.colors.secondary,
-        borderRadius: '2px',
-        boxShadow: '0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)',
-        boxSizing: 'initial',
-        width: '225px',
-      },
-      saturation: {
-        width: '100%',
-        paddingBottom: '55%',
-        position: 'relative',
-        borderRadius: '2px 2px 0 0',
-        overflow: 'hidden',
-      },
-      Saturation: {
-        radius: '2px 2px 0 0',
-      },
-      body: {
-        padding: '16px 16px 12px',
-      },
-      controls: {
-        display: 'flex',
-      },
-      color: {
-        width: '32px',
-      },
-      swatch: {
-        marginTop: '6px',
-        width: '16px',
-        height: '16px',
-        borderRadius: '8px',
-        position: 'relative',
-        overflow: 'hidden',
-      },
-      active: {
-        absolute: '0px 0px 0px 0px',
-        borderRadius: '8px',
-        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
-        background: `rgba(${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ rgb.a })`,
-        zIndex: '2',
-      },
-      toggles: {
-        flex: '1',
-      },
-      hue: {
-        height: '10px',
-        position: 'relative',
-        marginBottom: '8px',
-      },
-      Hue: {
-        radius: '2px',
-      },
-      alpha: {
-        height: '10px',
-        position: 'relative',
-      },
-      Alpha: {
-        radius: '2px',
-      },
-    },
-    'disableAlpha': {
-      color: {
-        width: '22px',
-      },
-      alpha: {
-        display: 'none',
-      },
-      hue: {
-        marginBottom: '0px',
-      },
-      swatch: {
-        width: '10px',
-        height: '10px',
-        marginTop: '0px',
-      },
-    },
-  }, { disableAlpha })
-
-  return (
-    <div style={ styles.picker } className="chrome-picker">
-      <div style={ styles.saturation }>
-        <Saturation
-          style={ styles.Saturation }
-          hsl={ hsl }
-          hsv={ hsv }
-          pointer={ ChromePointerCircle }
-          onChange={ onChange }
-        />
-      </div>
-      <div style={ styles.body }>
-        <div style={ styles.controls } className="flexbox-fix">
-          <div style={ styles.color }>
-            <div style={ styles.swatch }>
-              <div style={ styles.active } />
-              <Checkboard renderers={ renderers } />
-            </div>
-          </div>
-          <div style={ styles.toggles }>
-            <div style={ styles.hue }>
-              <Hue
-                style={ styles.Hue }
-                hsl={ hsl }
-                pointer={ ChromePointer }
-                onChange={ onChange }
-              />
-            </div>
-            <div style={ styles.alpha }>
-              <Alpha
-                style={ styles.Alpha }
-                rgb={ rgb }
-                hsl={ hsl }
-                pointer={ ChromePointer }
-                renderers={ renderers }
-                onChange={ onChange }
-              />
-            </div>
-          </div>
-        </div>
-        <ChromeFields
-          rgb={ rgb }
-          hsl={ hsl }
-          hex={ hex }
-          onChange={ onChange }
-          disableAlpha={ disableAlpha }
-        />
-      </div>
-    </div>
-  )
-}
-
-export default ColorWrap(Chrome)

src/fields/color.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import inputStyle from './input.js'
 import { getColor } from 'react-colorpickr/dist/colorfunc'
-import ChromePicker from '../chromepicker.jsx'
+import ChromePicker from 'react-color/lib/components/chrome/Chrome'
 
 function formatColor(color) {
   const rgb = color.rgb

src/index.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.app {
+
+}
+
+.chrome-picker {
+  background-color: #1c1f24 !important;
+  font-family: inherit !important;
+}
+
+.chrome-picker input {
+  background-color: rgb(38, 40, 46) !important;
+  color: rgb(142, 142, 142) !important;
+  box-shadow: none !important;
+}

src/index.scss

@@ -1,9 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-.app {
-
-}

webpack.config.js

@@ -29,7 +29,7 @@ loaders.push({
   test: /[\/\\]src[\/\\].*\.css/,
   loaders: [
     'style?sourceMap',
-    'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
+    'css'
   ]
 });