initial commit

nicer swatches, improvements to line height, border radii, additional 70% white shade we forgot to include in Index and some stuff

src/components/styleguide/ColorPalette/Swatch.jsx

@@ -4,8 +4,7 @@ import { css } from '@emotion/core'
 import styled from '@emotion/styled'
 import { transparentize } from 'polished'
 
-const SWATCH_HEIGHT = '100px'
-const SWATCH_WIDTH = '100px'
+const SWATCH_SIZE = '100px'
 
 const shadowSingle = ({ theme }) => `
   box-shadow: 0 0 0 1px ${transparentize(0.98, theme.colors.main.black.rgb)},
@@ -15,30 +14,31 @@ const shadowSingle = ({ theme }) => `
 
 const Color = styled('div')`
   ${({ theme, rgb }) => css`
-    width: ${SWATCH_HEIGHT};
-    height: ${SWATCH_WIDTH};
+    width: ${SWATCH_SIZE};
+    height: ${SWATCH_SIZE};
     border-radius: 50%;
     background-color: ${rgb};
-    margin: 20px 30px;
   `};
 `
 
 const ColorDescription = styled('div')`
   ${({ theme }) => css`
-    padding: 0 ${theme.spacings.mega};
+    padding: 0;
   `};
 `
 
-const ColorHex = styled('p')`
+const ColorRGB = styled('p')`
   ${({ theme, title }) => css`
+    margin: 0;
     color: ${title.indexOf('of White') > -1
-      ? theme.colors.shades.darkWhite.rgb
+      ? theme.colors.shades.white70.rgb
       : theme.colors.main.darkGrey.rgb};
   `};
 `
 
 const ColorTitle = styled('p')`
   ${({ theme, title }) => css`
+    margin: 1rem 0 0.5rem 0;
     color: ${title.indexOf('of White') > -1 ? '#fff' : '#000'};
   `};
 `
@@ -46,10 +46,10 @@ const ColorTitle = styled('p')`
 const ColorWrapper = styled('div')`
   ${({ theme, color }) => css`
     display: inline-block;
+    padding: ${theme.spacings.giga};
     margin-right: ${theme.spacings.mega};
     margin-bottom: ${theme.spacings.mega};
-    border-bottom-left-radius: ${theme.borderRadius.giga};
-    border-bottom-right-radius: ${theme.borderRadius.giga};
+    border-radius: ${theme.borderRadius.byte};
     background-color: ${color.title.indexOf('White') > -1
       ? color.title === 'White'
         ? '#EEF2F5'
@@ -64,7 +64,7 @@ const Swatch = ({ color }) => (
     <Color rgb={color.rgb} />
     <ColorDescription>
       <ColorTitle title={color.title}>{color.title}</ColorTitle>
-      <ColorHex title={color.title}>{color.hex}</ColorHex>
+      <ColorRGB title={color.title}>{color.rgb}</ColorRGB>
     </ColorDescription>
   </ColorWrapper>
 )

src/components/styleguide/ColorPalette/index.jsx

@@ -28,11 +28,12 @@ class ColorPalette extends React.Component {
 
         <h2>Shades</h2>
 
-        <Swatch color={theme.colors.shades.darkGrey} />
-        <Swatch color={theme.colors.shades.black} />
+        <Swatch color={theme.colors.shades.darkGrey40} />
+        <Swatch color={theme.colors.shades.black10} />
 
-        <Swatch color={theme.colors.shades.darkWhite} />
-        <Swatch color={theme.colors.shades.lightWhite} />
+        <Swatch color={theme.colors.shades.white70} />
+        <Swatch color={theme.colors.shades.white40} />
+        <Swatch color={theme.colors.shades.white10} />
       </>
     )
   }

src/components/styleguide/Typography.jsx

@@ -9,8 +9,8 @@ const Header = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.bold};
     font-size: ${theme.fontSizes.xl};
-    line-height: ${theme.lineHeights.l};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -18,8 +18,8 @@ const TitleBold = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.bold};
     font-size: ${theme.fontSizes.l};
-    line-height: ${theme.lineHeights.m};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -27,8 +27,8 @@ const Title = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.normal};
     font-size: ${theme.fontSizes.l};
-    line-height: ${theme.lineHeights.m};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -36,8 +36,8 @@ const MainMedium = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.semi};
     font-size: ${theme.fontSizes.m};
-    line-height: ${theme.lineHeights.m};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -45,8 +45,8 @@ const Main = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.normal};
     font-size: ${theme.fontSizes.m};
-    line-height: ${theme.lineHeights.m};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -54,8 +54,8 @@ const Caption = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.normal};
     font-size: ${theme.fontSizes.s};
-    line-height: ${theme.lineHeights.s};
-    margin-bottom: 20px;
+    line-height: ${theme.lineHeights.normal};
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 
@@ -63,10 +63,10 @@ const Timestamp = styled('div')`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeights.normal};
     font-size: ${theme.fontSizes.xs};
-    line-height: ${theme.lineHeights.xs};
+    line-height: ${theme.lineHeights.normal};
     text-transform: uppercase;
     letter-spacing: 1px;
-    margin-bottom: 20px;
+    margin-bottom: ${theme.spacings.giga};
   `};
 `
 

src/theme/index.jsx

@@ -2,9 +2,15 @@ import { rgb, rgba } from 'polished'
 
 export default {
   borderRadius: {
-    kilo: '1px',
-    mega: '4px',
-    giga: '5px',
+    bit: '4px',
+    byte: '8px',
+    kilo: '12px',
+    mega: '16px',
+    giga: '24px',
+    tera: '32px',
+    peta: '40px',
+    exa: '48px',
+    zetta: '56px'
   },
 
   colors: {
@@ -14,6 +20,11 @@ export default {
         rgb: rgb(67, 96, 223),
         title: 'Accent Blue',
       },
+      lightBlue: {
+        hex: '#ECEFFC',
+        rgb: rgb(236, 239, 252),
+        title: 'Light Blue',
+      },
       black: {
         hex: '#000000',
         rgb: rgb(0, 0, 0),
@@ -24,21 +35,16 @@ export default {
         rgb: rgb(147, 155, 161),
         title: 'Dark Grey',
       },
-      green: {
-        hex: '#44D058',
-        rgb: rgb(68, 208, 88),
-        title: 'Green',
-      },
-      lightBlue: {
-        hex: '#ECEFFC',
-        rgb: rgb(236, 239, 252),
-        title: 'Light Blue',
-      },
       lightGrey: {
         hex: '#EEF2F5',
         rgb: rgb(238, 242, 245),
         title: 'Light Grey',
       },
+      green: {
+        hex: '#44D058',
+        rgb: rgb(68, 208, 88),
+        title: 'Green',
+      },
       red: {
         hex: '#FF2D55',
         rgb: rgb(255, 45, 85),
@@ -51,22 +57,27 @@ export default {
       },
     },
     shades: {
-      black: {
+      black10: {
         hex: '#000000',
         rgb: rgba(0, 0, 0, 0.1),
         title: '10% of Black',
       },
-      darkGrey: {
+      darkGrey40: {
         hex: '#939BA1',
         rgb: rgba(147, 155, 161, 0.4),
         title: '40% of Dark Grey',
       },
-      darkWhite: {
+      white70: {
+        hex: '#FFFFFF',
+        rgb: rgba(255, 255, 255, 0.7),
+        title: '70% of White',
+      },
+      white40: {
         hex: '#FFFFFF',
         rgb: rgba(255, 255, 255, 0.4),
         title: '40% of White',
       },
-      lightWhite: {
+      white10: {
         hex: '#FFFFFF',
         rgb: rgba(255, 255, 255, 0.1),
         title: '10% of White',
@@ -101,9 +112,7 @@ export default {
   },
 
   lineHeights: {
-    xs: '14px',
-    s: '16px',
-    m: '22px',
-    l: '28px',
+    small: '120%',
+    normal: '140%',
   },
 }