improve theme color control via variables

src/components/ControlPanel/ControlPane.css

@@ -14,7 +14,7 @@
     width: 100%;
     padding: 12px;
     margin: 0;
-    border: 2px solid var(--textFieldBorderColor);
+    border: var(--textFieldBorder);
     border-radius: var(--borderRadius);
     outline: 0;
     box-shadow: none;

src/components/EntryEditor/EntryEditor.css

@@ -41,7 +41,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-top: 2px solid rgba(0, 0, 0, .15);
+  border-top: var(--border);
   background: var(--backgroundColor);
   text-align: right;
 }
@@ -54,5 +54,5 @@
 }
 
 .ProseMirror {
-  border: 2px solid var(--textFieldBorderColor);
+  border: var(--textFieldBorder);
 }

src/components/UI/card/Card.css

@@ -3,7 +3,7 @@
 .card {
   composes: base container rounded;
   overflow: hidden;
-  border: 2px solid var(--textFieldBorderColor);
+  border: var(--textFieldBorder);
   transition: all .1s ease-in-out;
   transform: translateY(0);
   padding: 16px 24px;

src/components/UI/theme.css

@@ -13,11 +13,12 @@
   --textMutedColor: #8c8c8c;
   --borderRadius: 4px;
   --borderRadiusLarge: 8px;
-  --dropShadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
+  --secondaryColor: #d9d9d9;
+  --dropShadow: 0 2px 8px 0 var(--secondaryColor);
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
   --backgroundAltColor: #232528;
-  --textFieldBorderColor: rgba(0, 0, 0, .15);
+  --textFieldBorderColor: var(--secondaryColor);
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
   --highlightFGAltColor: #eee;
@@ -26,6 +27,9 @@
   --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
   --richTextEditorMinHeight: 300px;
+  --borderWidth: 2px;
+  --border: solid var(--borderWidth) var(--secondaryColor);
+  --textFieldBorder: var(--border);
 }
 
 .base {

src/components/UnpublishedListing/UnpublishedListing.css

@@ -1,6 +1,7 @@
+@import '../UI/theme.css';
+
 :root {
   --highlightColor: #38ab9b;
-  --backgroundAltColor: #232528;
   --defaultFontSize: 1em;
 }
 

src/components/Widgets/ImageControl.css

@@ -0,0 +1,21 @@
+@import "../UI/theme.css";
+
+.input {
+  display: none !important;
+}
+
+.message {
+  padding: 20px;
+  display: block;
+  font-size: 12px;
+}
+
+.imageUpload {
+  background-color: #fff;
+  text-align: center;
+  color: #999;
+  border: var(--border);
+  border-style: dashed;
+  border-radius: var(--borderRadius);
+  cursor: pointer;
+}

src/components/Widgets/ImageControl.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
+import styles from './ImageControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -81,54 +82,35 @@ export default class ImageControl extends React.Component {
     const imageName = this.renderImageName();
     if (processing) {
       return (
-        <div style={styles.imageUpload}>
-          <span style={styles.message}>
+        <div className={styles.imageUpload}>
+          <span className={styles.message}>
             <Loader active />
           </span>
         </div>
       );
     }
     return (
       <div
-        style={styles.imageUpload}
+        className={styles.imageUpload}
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span style={styles.message} onClick={this.handleClick}>
+        <span className={styles.message} onClick={this.handleClick}>
           {imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           accept="image/*"
           onChange={this.handleChange}
-          style={styles.input}
+          className={styles.input}
           ref={this.handleFileInputRef}
         />
       </div>
     );
   }
 }
 
-const styles = {
-  input: {
-    display: 'none',
-  },
-  message: {
-    padding: '20px',
-    display: 'block',
-    fontSize: '12px',
-  },
-  imageUpload: {
-    backgroundColor: '#fff',
-    textAlign: 'center',
-    color: '#999',
-    border: '2px dashed rgba(0, 0, 0, .15)',
-    borderRadius: '4px',
-    cursor: 'pointer',
-  },
-};
-
 ImageControl.propTypes = {
   onAddAsset: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,

src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.css

@@ -6,7 +6,7 @@
   margin-top: -20px;
   margin-bottom: 30px;
   margin-left: 20px;
-  border: 2px solid rgba(0, 0, 0, .15);
+  border: var(--border);
   border-radius: var(--borderRadius);
   box-shadow: var(--dropShadow);
   overflow: hidden;

src/components/Widgets/MarkdownControlElements/VisualEditor/index.css

@@ -76,7 +76,7 @@
     overflow: hidden;
     border-radius: var(--borderRadius);
     overflow-x: auto;
-    border: 2px solid var(--textFieldBorderColor);
+    border: var(--textFieldBorder);
     min-height: var(--richTextEditorMinHeight);
 
     & ul,

src/index.css

@@ -1,4 +1,5 @@
 @import "material-icons.css";
+@import "components/UI/theme.css";
 
 html {
   box-sizing: border-box;
@@ -142,7 +143,7 @@ img {
     margin-top: 1px;
     z-index: 99999 !important;
     background: #fff;
-    border: 2px solid rgba(0, 0, 0, .15);
+    border: 2px solid var(--secondaryColor);
     border-radius: 2px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
   }