Improvements for theming

src/components/BlockInsert.js

@@ -128,7 +128,10 @@ class BlockInsert extends React.Component<Props, State> {
     return (
       <Portal>
         <Trigger active={this.state.active} style={style}>
-          <PlusIcon onClick={this.handleClick} color={theme.slate} />
+          <PlusIcon
+            onClick={this.handleClick}
+            color={theme.blockToolbarTrigger}
+          />
         </Trigger>
       </Portal>
     );
@@ -139,21 +142,21 @@ const Trigger = styled.div`
   position: absolute;
   z-index: 1;
   opacity: 0;
-  background-color: ${props => props.theme.white};
+  background-color: ${props => props.theme.background};
   transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
     transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   line-height: 0;
   margin-left: -10px;
-  box-shadow: inset 0 0 0 2px ${props => props.theme.slate};
+  box-shadow: inset 0 0 0 2px ${props => props.theme.blockToolbarTrigger};
   border-radius: 100%;
   transform: scale(0.9);
   cursor: pointer;
 
   &:hover {
-    background-color: ${props => props.theme.slate};
+    background-color: ${props => props.theme.blockToolbarTrigger};
 
     svg {
-      fill: ${props => props.theme.white};
+      fill: ${props => props.theme.blockToolbarTriggerIcon};
     }
   }
 

src/components/Code.js

@@ -29,9 +29,9 @@ export default function Code({
 
 const Container = styled.div`
   position: relative;
-  background: ${props => props.theme.smokeLight};
+  background: ${props => props.theme.codeBackground};
   border-radius: 4px;
-  border: 1px solid ${props => props.theme.smokeDark};
+  border: 1px solid ${props => props.theme.codeBorder};
 
   code {
     display: block;

src/components/Contents.js

@@ -110,7 +110,8 @@ const Wrapper = styled.div`
 `;
 
 const Anchor = styled.a`
-  color: ${props => (props.active ? props.theme.slateDark : props.theme.slate)};
+  color: ${props =>
+    props.active ? props.theme.text : props.theme.textSecondary};
   font-weight: ${props => (props.active ? 500 : 400)};
   opacity: 0;
   transition: all 100ms ease-in-out;
@@ -129,13 +130,13 @@ const ListItem = styled.li`
   position: relative;
   margin-left: ${props => (props.type.match(/heading[12]/) ? "8px" : "16px")};
   text-align: right;
-  color: ${props => props.theme.slate};
+  color: ${props => props.theme.textSecondary};
   padding-right: 16px;
   white-space: nowrap;
 
   &:after {
     color: ${props =>
-      props.active ? props.theme.slateDark : props.theme.slate};
+      props.active ? props.theme.text : props.theme.textSecondary};
     content: "${props => (props.type.match(/heading[12]/) ? "—" : "–")}";
     position: absolute;
     right: 0;
@@ -158,7 +159,7 @@ const Sections = styled.ol`
     ${Anchor} {
       opacity: 1;
       margin-right: 0;
-      background: ${props => props.theme.white};
+      background: ${props => props.theme.background};
       pointer-events: all;
     }
   }

src/components/CopyButton.js

@@ -42,14 +42,11 @@ const StyledCopyToClipboard = styled(CopyToClipboard)`
   transition: opacity 50ms ease-in-out;
   z-index: 1;
   font-size: 12px;
-  background: ${props => props.theme.smoke};
-  border-radius: 0 2px 0 2px;
-  padding: 1px 6px;
+  color: ${props => props.theme.textLight};
+  background: ${props => props.theme.primary};
+  border-radius: 0 4px 0 4px;
+  padding: 1px 8px;
   cursor: pointer;
-
-  &:hover {
-    background: ${props => props.theme.smokeDark};
-  }
 `;
 
 export default CopyButton;

src/components/Heading.js

@@ -68,12 +68,12 @@ export const StyledHeading = styled(Heading)`
 
   &:hover {
     ${Anchor} {
-      color: ${props => props.theme.slate};
+      color: ${props => props.theme.textSecondary};
       visibility: visible;
       text-decoration: none;
 
       &:hover {
-        color: ${props => props.theme.slateDark};
+        color: ${props => props.theme.text};
       }
     }
   }

src/components/HorizontalRule.js

@@ -15,7 +15,8 @@ const StyledHr = styled.hr`
   margin: 0;
   border: 0;
   border-bottom: 1px solid
-    ${props => (props.active ? props.theme.slate : props.theme.slateLight)};
+    ${props =>
+      props.active ? props.theme.selected : props.theme.horizontalRule};
 `;
 
 export default HorizontalRule;

src/components/Image.js

@@ -115,7 +115,7 @@ const Error = styled.div`
 const StyledImg = styled.img`
   max-width: 100%;
   box-shadow: ${props =>
-    props.active ? `0 0 0 2px ${props.theme.slate}` : "none"};
+    props.active ? `0 0 0 2px ${props.theme.selected}` : "none"};
   border-radius: ${props => (props.active ? `2px` : "0")};
   opacity: ${props => (props.loading ? 0.5 : 1)};
 `;
@@ -131,7 +131,7 @@ const Caption = styled.input`
   display: block;
   font-size: 13px;
   font-style: italic;
-  color: ${props => props.theme.slate};
+  color: ${props => props.theme.textSecondary};
   padding: 2px 0;
   line-height: 16px;
   text-align: center;
@@ -140,7 +140,7 @@ const Caption = styled.input`
   background: none;
 
   &::placeholder {
-    color: ${props => props.theme.slate};
+    color: ${props => props.theme.placeholder};
   }
 `;
 

src/components/InlineCode.js

@@ -5,9 +5,9 @@ const InlineCode = styled.code.attrs({
   spellCheck: false,
 })`
   padding: 0.15em;
-  background: ${props => props.theme.smoke};
+  background: ${props => props.theme.codeBackground};
   border-radius: 4px;
-  border: 1px solid ${props => props.theme.smokeDark};
+  border: 1px solid ${props => props.theme.codeBorder};
 `;
 
 export default InlineCode;

src/components/TodoItem.js

@@ -39,7 +39,7 @@ const ListItem = styled.li`
   position: relative;
 
   > p > span {
-    color: ${props => (props.checked ? props.theme.slateDark : "inherit")};
+    color: ${props => (props.checked ? props.theme.textSecondary : "inherit")};
     text-decoration: ${props => (props.checked ? "line-through" : "none")};
   }
 `;

src/components/Toolbar/BlockToolbar.js

@@ -183,7 +183,7 @@ class BlockToolbar extends React.Component<Props> {
 const Separator = styled.div`
   height: 100%;
   width: 1px;
-  background: ${props => props.theme.smokeDark};
+  background: rgba(0, 0, 0, 0.1);
   display: inline-block;
   margin-left: 10px;
 `;
@@ -193,7 +193,7 @@ const Bar = styled(Flex)`
   animation: ${fadeIn} 150ms ease-in-out;
   position: relative;
   align-items: center;
-  background: ${props => props.theme.smoke};
+  background: ${props => props.theme.blockToolbarBackground};
   height: 44px;
 
   &:before,
@@ -203,7 +203,7 @@ const Bar = styled(Flex)`
     left: -100%;
     width: 100%;
     height: 44px;
-    background: ${props => props.theme.smoke};
+    background: ${props => props.theme.blockToolbarBackground};
   }
 
   &:after {

src/components/Toolbar/LinkSearchResult.js

@@ -25,7 +25,7 @@ const ListItem = styled.a`
   align-items: center;
   height: 28px;
   padding: 6px 8px 6px 0;
-  color: ${props => props.theme.white};
+  color: ${props => props.theme.toolbarItem};
   font-family: ${props => props.theme.fontFamily};
   font-size: 15px;
   text-decoration: none;

src/components/Toolbar/LinkToolbar.js

@@ -237,7 +237,7 @@ export default class LinkToolbar extends React.Component<Props, State> {
 }
 
 const SearchResults = styled.div`
-  background: ${props => props.theme.blackLight};
+  background: ${props => props.theme.toolbarBackground};
   position: absolute;
   top: 100%;
   width: 100%;
@@ -256,12 +256,12 @@ const LinkEditor = styled(Flex)`
 
 const Input = styled.input`
   font-size: 15px;
-  background: rgba(255, 255, 255, 0.1);
+  background: ${props => props.theme.toolbarInput};
   border-radius: 2px;
   padding: 4px 8px;
   border: 0;
   margin: 0;
   outline: none;
-  color: ${props => props.theme.white};
+  color: ${props => props.theme.toolbarItem};
   flex-grow: 1;
 `;

src/components/Toolbar/index.js

@@ -188,7 +188,7 @@ const Menu = styled.div`
   top: -10000px;
   left: -10000px;
   opacity: 0;
-  background-color: ${props => props.theme.blackLight};
+  background-color: ${props => props.theme.toolbarBackground};
   border-radius: 4px;
   transform: scale(0.95);
   transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),

src/index.js

@@ -369,7 +369,7 @@ const StyledEditor = styled(Editor)`
   }
 
   blockquote {
-    border-left: 3px solid ${props => props.theme.slateLight};
+    border-left: 3px solid ${props => props.theme.quote};
     margin: 0;
     padding-left: 10px;
     font-style: italic;

src/theme.js

@@ -3,23 +3,28 @@ const theme = {
   fontFamily:
     "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
   fontWeight: 400,
+  background: "#FFF",
 
   text: "#171B35",
+  textSecondary: "#4E5C6E",
+  textLight: "#FFF",
   link: "#1AB6FF",
   primary: "#1AB6FF",
   placeholder: "#b1becc",
 
-  slate: "#9BA6B2",
-  slateLight: "#DAE1E9",
-  slateDark: "#4E5C6E",
+  toolbarBackground: "#2F3336",
+  toolbarInput: "rgba(255, 255, 255, 0.1)",
+  toolbarItem: "#FFF",
 
-  smoke: "#F4F7FA",
-  smokeLight: "#F9FBFC",
-  smokeDark: "#E8EBED",
+  blockToolbarBackground: "#F4F7FA",
+  blockToolbarTrigger: "#9BA6B2",
+  blockToolbarTriggerIcon: "#FFF",
 
-  white: "#FFFFFF",
-  black: "#000000",
-  blackLight: "#2f3336",
+  quote: "#DAE1E9",
+  selected: "#1AB6FF",
+  codeBackground: "#F4F7FA",
+  codeBorder: "#E8EBED",
+  horizontalRule: "#E8EBED",
 };
 
 export default theme;