docs: convert website from postcss to emotion (#2068)

2020-01-23 21:55:18 -05:00
parent 7b0838dfef
commit 3d474b1944
69 changed files with 7769 additions and 6834 deletions
--- a/website/src/theme.js
+++ b/website/src/theme.js
@ -1,50 +1,37 @@
-// if you change these you must restart the server
-
 module.exports = {
-  // colors
-  lightestGrey: '#E6E6E6',
-  lighterGrey: '#F7F8F8',
-  lightGrey: '#F6F6F6',
-  lightishGrey: '#51555D',
-  grey: '#313D3E',
-  darkGrey: '#2F3132',
-  darkerGrey: '#1E1F21',
-  blueGrey: '#BCC2CE',
-  lightGreen: '#97bf2f',
-  green: '#C9FA4B',
-  darkGreen: '#7CA511',
-  darkerGreen: '#628013',
-  shadeBlue: '#EFF0F4',
-  blue: '#3A69C7',
-
-  // typography
-  thin: 100,
-  light: 300,
-  regular: 400,
-  semibold: 500,
-  bold: 700,
-  black: 900,
-
-  // fonts
-  roboto: "'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
-
-  // padding
-  micro: '8px',
-  tiny: '16px',
-  small: '24px',
-  medium: '40px',
-  large: '64px',
-  xl: '104px',
-  xxl: '152px',
-
-  // border radius
-  borderRadius: '4px',
-  largeBorderRadius: '8px',
-
-  // responsive breakpoints
-  mobile: '480px',
-  tablet: '768px',
-  desktop: '960px',
-  display: '1200px',
-  xlarge: '1280px',
+  colors: {
+    white: '#fff',
+    black: '#000',
+    lightestGray: '#E6E6E6',
+    lighterGray: '#F7F8F8',
+    lightGray: '#F6F6F6',
+    lightishGray: '#51555D',
+    gray: '#313D3E',
+    darkGray: '#2F3132',
+    darkerGray: '#1E1F21',
+    blueGray: '#BCC2CE',
+    lightGreen: '#97bf2f',
+    green: '#C9FA4B',
+    darkGreen: '#7CA511',
+    darkerGreen: '#628013',
+    shadeBlue: '#EFF0F4',
+    blue: '#3A69C7',
+  },
+  fontWeight: {
+    thin: 100,
+    light: 300,
+    regular: 400,
+    semibold: 500,
+    bold: 700,
+    black: 900,
+  },
+  fontFamily: "'Roboto', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+  fontsize: ['10px', '12px', '14px', '16px', '18px', '24px', '32px', '42px', '64px'],
+  lineHeight: [1, 1.3, 1.7],
+  space: [0, '4px', '8px', '16px', '24px', '40px', '64px', '104px', '152px'],
+  radii: [0, '4px', '8px'],
+  breakpoints: [480, 768, 960, 1200, 1280],
+  zIndexes: {
+    header: 100,
+  },
 };