Dark Mode (#912)

closes #704
2019-03-12 21:35:35 -07:00
parent 6445da33db
commit 59c82f1f06
46 changed files with 648 additions and 252 deletions
--- a/shared/styles/base.js
+++ b/shared/styles/base.js
@@ -1,84 +0,0 @@
-// @flow
-import theme from './theme';
-
-export default `
-  @font-face {
-    font-family: 'Lato';
-    src: url('/fonts/LatoLatin-Semibold.woff') format('woff');
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    width: 100%;
-    min-height: 100vh;
-    margin: 0;
-    padding: 0;
-  }
-
-  body,
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  body {
-    font-size: 16px;
-    line-height: 1.5;
-    color: ${theme.text};
-
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-
-  a {
-    color: ${theme.blue};
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: 'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
-    font-weight: 500;
-    line-height: 1.25;
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    color: ${theme.text};
-  }
-  h1 { font-size: 2.25em; }
-  h2 { font-size: 1.5em; }
-  h3 { font-size: 1.25em; }
-  h4 { font-size: 1em; }
-  h5 { font-size: 0.875em; }
-  h6 { font-size: 0.75em; }
-
-  p,
-  dl,
-  ol,
-  ul,
-  pre,
-  blockquote {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-
-  hr {
-    border: 0;
-    height: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-  }
-`;
--- a/shared/styles/globals.js
+++ b/shared/styles/globals.js
@@ -1,9 +1,86 @@
 // @flow
 import styledNormalize from 'styled-normalize';
 import { createGlobalStyle } from 'styled-components';
-import base from './base';

 export default createGlobalStyle`
  ${styledNormalize}
-  ${base}
+
+  @font-face {
+    font-family: 'Lato';
+    src: url('/fonts/LatoLatin-Semibold.woff') format('woff');
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    width: 100%;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+  }
+
+  body,
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  body {
+    font-size: 16px;
+    line-height: 1.5;
+    color: ${props => props.theme.text};
+
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  a {
+    color: ${props => props.theme.primary};
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: 'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
+    font-weight: 500;
+    line-height: 1.25;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    color: ${props => props.theme.text};
+  }
+  h1 { font-size: 2.25em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.75em; }
+
+  p,
+  dl,
+  ol,
+  ul,
+  pre,
+  blockquote {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  hr {
+    border: 0;
+    height: 0;
+    border-top: 1px solid ${props => props.theme.divider};
+  }
 `;
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -1,18 +1,10 @@
 // @flow
-const theme = {
-  fontFamily:
-    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
-  monospaceFontFamily: `Menlo, Consolas, 'Liberation Mono', monospace;`,
-  fontWeight: 400,
+import { darken, lighten } from 'polished';

-  text: '#171B35',
-  link: '#1AB6FF',
-  primary: '#1AB6FF',
-  placeholder: '#b1becc',
-  danger: '#D0021B',
-  warning: '#f08a24',
-  success: '#2f3336',
-  info: '#a0d3e8',
+const colors = {
+  almostBlack: '#111319',
+  lightBlack: '#2F3336',
+  almostWhite: '#E6E6E6',

  slate: '#9BA6B2',
  slateLight: '#DAE1E9',
@@ -22,19 +14,131 @@ const theme = {
  smokeLight: '#F9FBFC',
  smokeDark: '#E8EBED',

-  white: '#FFFFFF',
-  blue: '#1AB6FF',
-  black: '#000000',
-  blackLight: '#2f3336',
+  white: '#FFF',
+  white10: 'rgba(255, 255, 255, 0.1)',
+  black: '#000',
+  black05: 'rgba(0, 0, 0, 0.05)',
+  black10: 'rgba(0, 0, 0, 0.1)',
+  black50: 'rgba(0, 0, 0, 0.50)',
+  primary: '#1AB6FF',
+  yellow: '#FBCA04',

+  danger: '#D0021B',
+  warning: '#f08a24',
+  success: '#2f3336',
+  info: '#a0d3e8',
+};
+
+const spacing = {
  padding: '1.5vw 1.875vw',
  vpadding: '1.5vw',
  hpadding: '1.875vw',
  sidebarWidth: '280px',
  sidebarMinWidth: '250px',
  sidebarMaxWidth: '350px',
-
-  contentHeaderBackground: 'hsl(180, 58%, 85%)',
 };

-export default theme;
+export const base = {
+  ...colors,
+  ...spacing,
+  fontFamily:
+    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+  fontWeight: 400,
+  link: colors.primary,
+};
+
+export const light = {
+  ...base,
+  background: colors.white,
+
+  text: colors.almostBlack,
+  textSecondary: colors.slateDark,
+  textTertiary: colors.slate,
+  placeholder: '#B1BECC',
+
+  sidebarBackground: 'rgb(244, 247, 250)',
+  sidebarItemBackground: colors.black05,
+  sidebarText: 'rgb(78, 92, 110)',
+
+  menuBackground: colors.white,
+  menuShadow:
+    '0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08)',
+  divider: colors.slateLight,
+  inputBorder: colors.slateLight,
+  inputBorderFocused: colors.slate,
+
+  listItemHoverBackground: colors.smoke,
+  listItemHoverBorder: colors.smokeDark,
+
+  toolbarBackground: colors.lightBlack,
+  toolbarInput: colors.white10,
+  toolbarItem: colors.white,
+
+  buttonBackground: colors.lightBlack,
+  buttonText: colors.white,
+  buttonNeutralBackground: colors.white,
+  buttonNeutralText: colors.almostBlack,
+
+  tooltipBackground: colors.almostBlack,
+  tooltipText: colors.white,
+
+  blockToolbarBackground: colors.smoke,
+  blockToolbarTrigger: colors.slate,
+  blockToolbarTriggerIcon: colors.white,
+  blockToolbarItem: colors.almostBlack,
+
+  quote: colors.slateLight,
+  codeBackground: colors.smoke,
+  codeBorder: colors.smokeDark,
+  embedBorder: '#DDD #DDD #CCC',
+  horizontalRule: colors.smokeDark,
+};
+
+export const dark = {
+  ...base,
+  background: colors.almostBlack,
+
+  text: colors.almostWhite,
+  textSecondary: lighten(0.2, colors.slate),
+  textTertiary: colors.slate,
+  placeholder: darken(0.5, '#B1BECC'),
+
+  sidebarBackground: colors.black50,
+  sidebarItemBackground: colors.black50,
+  sidebarText: colors.slate,
+
+  menuBackground: lighten(0.015, colors.almostBlack),
+  menuShadow:
+    '0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08)',
+  divider: colors.slate,
+  inputBorder: colors.slateDark,
+  inputBorderFocused: colors.slate,
+
+  listItemHoverBackground: colors.black10,
+  listItemHoverBorder: colors.black50,
+
+  toolbarBackground: colors.white,
+  toolbarInput: colors.black10,
+  toolbarItem: colors.lightBlack,
+
+  buttonBackground: colors.white,
+  buttonText: colors.lightBlack,
+  buttonNeutralBackground: colors.almostBlack,
+  buttonNeutralText: colors.white,
+
+  tooltipBackground: colors.white,
+  tooltipText: colors.lightBlack,
+
+  blockToolbarBackground: colors.white,
+  blockToolbarTrigger: colors.almostWhite,
+  blockToolbarTriggerIcon: colors.almostBlack,
+  blockToolbarItem: colors.lightBlack,
+
+  quote: colors.almostWhite,
+  codeBackground: colors.almostBlack,
+  codeBorder: colors.black50,
+  embedBorder: colors.black50,
+  horizontalRule: colors.almostWhite,
+};
+
+export default light;