feat(themes): add themes

BREAKING CHANGE: WindowHeader related theme variables changed

Author: arturbien

src/components/Checkbox/Checkbox.stories.js

@@ -33,7 +33,13 @@ storiesOf('Checkbox', module)
           defaultChecked
         />
         <br />
-        <Checkbox name='pineapple' value='pineapple' label='Add pineapple 🍍' />
+        <Checkbox
+          name='pineapple'
+          value='pineapple'
+          label='Add pineapple 🍍'
+          defaultChecked
+          disabled
+        />
       </>
     ))
   )

src/components/SwitchBase/SwitchBase.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { createDisabledTextStyles, focusOutline } from '../common';
 
 import { padding, fontSizes } from '../common/system';
@@ -27,12 +27,20 @@ export const StyledLabel = styled.label`
   -ms-user-select: none;
   user-select: none;
   font-size: ${fontSizes.md};
+  color: ${({ theme }) => theme.text};
   ${props => props.isDisabled && createDisabledTextStyles()}
 
   ${StyledListItem} & {
     margin: 0;
     height: 100%;
   }
+  ${StyledListItem}:hover & {
+    ${({ theme, isDisabled }) =>
+      !isDisabled &&
+      css`
+        color: ${theme.textInvert};
+      `};
+  }
 `;
 
 // TODO how to handle focus styles in 'menu' variant of Checkbox/Radio?

src/components/TextField/TextField.js

@@ -26,6 +26,7 @@ export const StyledTextInput = styled.input`
   background: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
+  color: ${({ theme }) => theme.inputText};
   ${({ disabled, variant }) =>
     variant !== 'flat' && disabled && createDisabledTextStyles()}
 `;

src/components/WindowHeader/WindowHeader.js

@@ -12,16 +12,12 @@ const SlyledWindowHeader = styled.div`
   font-weight: bold;
 
   &[data-active='false'] {
-    background: ${({ theme }) => theme.headerNotActive};
-    color: ${({ theme }) => theme.material};
+    background: ${({ theme }) => theme.headerNotActiveBackground};
+    color: ${({ theme }) => theme.headerNotActiveText};
   }
   &[data-active='true'] {
-    background: linear-gradient(
-      to right,
-      ${({ theme }) => theme.headerMaterialDark},
-      ${({ theme }) => theme.headerMaterialLight}
-    );
-    color: ${({ theme }) => theme.textInvert};
+    background: ${({ theme }) => theme.headerBackground};
+    color: ${({ theme }) => theme.headerText};
   }
   ${StyledButton} {
     padding-left: 0;

src/components/common/index.js

@@ -4,15 +4,15 @@ export const shadow = '4px 4px 10px 0 rgba(0, 0, 0, 0.35)';
 export const insetShadow = 'inset 3px 3px 10px rgba(0, 0, 0, 0.2)';
 
 export const createDisabledTextStyles = () => css`
+  -webkit-text-fill-color: ${({ theme }) => theme.textDisabled};
   color: ${({ theme }) => theme.textDisabled};
   text-shadow: 1px 1px ${({ theme }) => theme.textDisabledShadow};
   /* filter: grayscale(100%); */
-  -webkit-text-fill-color: ${({ theme }) => theme.inputTextDisabled};
 `;
 export const createBoxStyles = () => css`
   box-sizing: border-box;
   display: inline-block;
-  background-color: ${({ theme }) => theme.material};
+  background: ${({ theme }) => theme.material};
   color: ${({ theme }) => theme.text};
 `;
 // TODO for flat box styles add checkered background when disabled (not solid color)