Semantic colors

.storybook/components/Wrapper/Wrapper.js

@@ -13,7 +13,7 @@ class Wrapper extends Component<Props> {
     const { children } = this.props;
     return (
       <OuterWrapper>
-        <InnerWrapper>{children}</InnerWrapper>
+        <InnerWrapper> {children} </InnerWrapper>{' '}
       </OuterWrapper>
     );
   }
@@ -27,7 +27,7 @@ const OuterWrapper = styled.div`
   bottom: 0;
 `;
 const InnerWrapper = styled.div`
-  background: ${COLORS.white};
+  background: ${COLORS.lightBackground};
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
   margin: 2rem;
   padding: 1.5rem;

src/components/App/App.js

@@ -65,7 +65,7 @@ const Wrapper = styled.div`
   display: flex;
   position: relative;
   z-index: 1;
-  background: ${COLORS.gray[50]};
+  background: ${COLORS.background};
 
   animation: ${fadeIn} 500ms ease-in;
 `;

src/components/AppSettingsModal/AppSettingsModal.js

@@ -8,7 +8,7 @@ import { remote } from 'electron';
 
 import * as actions from '../../actions';
 import { getDefaultProjectPath } from '../../reducers/app-settings.reducer';
-import { COLORS } from '../../constants';
+import { GRADIENTS } from '../../constants';
 import { setNested } from '../../utils';
 
 import Modal from '../Modal';
@@ -94,7 +94,7 @@ export class AppSettingsModal extends PureComponent<Props, State> {
             {/* // todo: Refactor to map over settings so this renders dynamically -
                          needs additional info on state e.g. component for rendering + props
                          -> For now it's OK to hard code as we're only having three
-                            settings 
+                            settings
             */}
             <SectionTitle>General</SectionTitle>
             <PixelShifter x={5} reason="Slightly intend in section">
@@ -144,10 +144,7 @@ export class AppSettingsModal extends PureComponent<Props, State> {
             </PixelShifter>
             <Spacer size={10} />
             <Actions>
-              <FillButton
-                size="large"
-                colors={[COLORS.green[700], COLORS.lightGreen[500]]}
-              >
+              <FillButton size="large" colors={GRADIENTS.success}>
                 Save
               </FillButton>
             </Actions>

src/components/BigClickableButton/BigClickableButton.js

@@ -4,7 +4,7 @@ import { Spring, animated } from 'react-spring';
 import styled from 'styled-components';
 import Color from 'color';
 
-import { COLORS } from '../../constants';
+import { COLORS, GRADIENTS } from '../../constants';
 
 type Props = {
   width: number,
@@ -25,7 +25,7 @@ class BigClickableButton extends Component<Props, State> {
     width: 64,
     height: 64,
     thickness: 6,
-    colors: ['#2142ff', COLORS.blue[500]],
+    colors: GRADIENTS.darkPrimary,
   };
 
   state = {
@@ -148,7 +148,7 @@ export const Button = styled.button`
   display: flex;
   align-items: center;
   justify-content: space-around;
-  color: ${COLORS.white};
+  color: ${COLORS.textOnBackground};
   font-size: 18px;
 
   border: none;

src/components/BigClickableButton/__snapshots__/BigClickableButton.test.js.snap

@@ -19,12 +19,12 @@ exports[`BigClickableButton component should render pressed 1`] = `
   color: #FFF;
   font-size: 18px;
   border: none;
-  background: linear-gradient(45deg,#2142ff,#3f6cff);
+  background: linear-gradient(45deg,#651fff,#304FFE);
   outline: none;
 }
 
 <styled.button
-  background="linear-gradient(45deg, #2142ff, #3f6cff)"
+  background="linear-gradient(45deg, #651fff, #304FFE)"
   height={64}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
@@ -80,7 +80,7 @@ exports[`BigClickableButton component should render pressed 2`] = `
                       L 72,72
                       L 6,72
                     "
-          fill="rgb(0, 30, 202)"
+          fill="rgb(63, 0, 200)"
         />
         <path
           d="
@@ -89,7 +89,7 @@ exports[`BigClickableButton component should render pressed 2`] = `
                       L 72,72
                       L 64, 64
                     "
-          fill="rgb(0, 52, 223)"
+          fill="rgb(1, 33, 210)"
         />
       </svg>
     </styled.svg>
@@ -116,12 +116,12 @@ exports[`BigClickableButton component should render released 1`] = `
   color: #FFF;
   font-size: 18px;
   border: none;
-  background: linear-gradient(45deg,#2142ff,#3f6cff);
+  background: linear-gradient(45deg,#651fff,#304FFE);
   outline: none;
 }
 
 <styled.button
-  background="linear-gradient(45deg, #2142ff, #3f6cff)"
+  background="linear-gradient(45deg, #651fff, #304FFE)"
   height={64}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
@@ -177,7 +177,7 @@ exports[`BigClickableButton component should render released 2`] = `
                       L 72,72
                       L 6,72
                     "
-          fill="rgb(0, 30, 202)"
+          fill="rgb(63, 0, 200)"
         />
         <path
           d="
@@ -186,7 +186,7 @@ exports[`BigClickableButton component should render released 2`] = `
                       L 72,72
                       L 64, 64
                     "
-          fill="rgb(0, 52, 223)"
+          fill="rgb(1, 33, 210)"
         />
       </svg>
     </styled.svg>

src/components/Button/ButtonBase.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { COLORS } from '../../constants';
+import { RAW_COLORS, COLORS } from '../../constants';
 
 type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
@@ -20,8 +20,8 @@ type Props = {
 class ButtonBase extends Component<Props> {
   static defaultProps = {
     size: 'medium',
-    background: COLORS.gray[200],
-    textColor: COLORS.gray[900],
+    background: RAW_COLORS.gray[200],
+    textColor: COLORS.text,
   };
 
   getButtonElem = (size: Size) => {

src/components/Button/ButtonBase.stories.js

@@ -5,7 +5,7 @@ import { decorateAction } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 
 import Showcase from '../../../.storybook/components/Showcase';
-import { COLORS } from '../../constants';
+import { RAW_COLORS } from '../../constants';
 import ButtonBase from './ButtonBase';
 
 const targetAction = decorateAction([args => [args[0].target]]);
@@ -37,23 +37,23 @@ storiesOf('Button / Base', module)
       <Fragment>
         <Showcase label="Solid Colours">
           <ButtonBase
-            background={COLORS.blue[700]}
-            hoverBackground={COLORS.violet[700]}
-            textColor={COLORS.yellow[500]}
+            background={RAW_COLORS.blue[700]}
+            hoverBackground={RAW_COLORS.violet[700]}
+            textColor={RAW_COLORS.yellow[500]}
             onClick={targetAction('button-clicked')}
           >
             Colourful!
           </ButtonBase>
         </Showcase>
         <Showcase label="Gradients">
           <ButtonBase
-            background={`linear-gradient(0deg, ${COLORS.blue[700]}, ${
-              COLORS.violet[500]
+            background={`linear-gradient(0deg, ${RAW_COLORS.blue[700]}, ${
+              RAW_COLORS.violet[500]
             })`}
-            hoverBackground={`linear-gradient(0deg, ${COLORS.red[700]}, ${
-              COLORS.orange[500]
+            hoverBackground={`linear-gradient(0deg, ${RAW_COLORS.red[700]}, ${
+              RAW_COLORS.orange[500]
             })`}
-            textColor={COLORS.yellow[500]}
+            textColor={RAW_COLORS.yellow[500]}
             onClick={targetAction('button-clicked')}
           >
             Colourful!

src/components/Button/FillButton.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 
-import { COLORS } from '../../constants';
+import { COLORS, GRADIENTS } from '../../constants';
 
 import ButtonBase from './ButtonBase';
 
@@ -30,8 +30,8 @@ export const wrapColorsInGradient = (colors?: Array<string> | string) => {
 
 class FillButton extends Component<Props> {
   static defaultProps = {
-    colors: [COLORS.purple[500], COLORS.violet[500]],
-    textColor: COLORS.white,
+    colors: GRADIENTS.primary,
+    textColor: COLORS.textOnBackground,
   };
 
   render() {

src/components/Button/StrokeButton.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { COLORS } from '../../constants';
+import { COLORS, GRADIENTS } from '../../constants';
 
 import DetectActive from '../DetectActive';
 import ButtonBase from './ButtonBase';
@@ -16,8 +16,8 @@ export type Props = {
 
 class StrokeButton extends Component<Props> {
   static defaultProps = {
-    fillColor: COLORS.white,
-    strokeColors: [COLORS.purple[500], COLORS.violet[500]],
+    fillColor: COLORS.lightBackground,
+    strokeColors: GRADIENTS.primary,
     showStroke: true,
   };
 

src/components/Card/Card.js

@@ -5,7 +5,7 @@ import { COLORS } from '../../constants';
 
 export default styled.div`
   padding: 15px;
-  background: ${COLORS.white};
+  background: ${COLORS.lightBackground};
   border-radius: 8px;
   box-shadow: 0px 6px 60px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05);
 `;

src/components/CircularOutline/CircularOutline.js

@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import { Spring, animated } from 'react-spring';
 
-import { COLORS } from '../../constants';
+import { GRADIENTS } from '../../constants';
 
 type Props = {
   size: number,
@@ -27,7 +27,7 @@ const springSettings = {
 
 class CircularOutline extends Component<Props> {
   static defaultProps = {
-    colors: [COLORS.purple[500], COLORS.violet[500]],
+    colors: GRADIENTS.primary,
     strokeWidth: 2,
   };
 

src/components/CreateNewProjectWizard/BuildPane.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import IconBase from 'react-icons-kit';
 import { check } from 'react-icons-kit/feather/check';
 
-import { COLORS } from '../../constants';
+import { COLORS, RAW_COLORS } from '../../constants';
 import createProject from '../../services/create-project.service';
 import { replaceProjectStarterStringWithUrl } from './helpers';
 
@@ -220,11 +220,11 @@ const Wrapper = styled.div`
   height: 100%;
   background-image: linear-gradient(
     45deg,
-    ${COLORS.blue[900]},
-    ${COLORS.blue[800]}
+    ${RAW_COLORS.blue[900]},
+    ${RAW_COLORS.blue[800]}
   );
-  border: 4px solid ${COLORS.white};
-  color: ${COLORS.white};
+  border: 4px solid ${COLORS.textOnBackground};
+  color: ${COLORS.textOnBackground};
   box-shadow: 0px 6px 60px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.05);
   border-radius: 0;
   user-select: none;
@@ -260,11 +260,11 @@ const Finished = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  border: 4px solid ${COLORS.white};
+  border: 4px solid ${COLORS.textOnBackground};
   background-image: linear-gradient(
     45deg,
-    ${COLORS.teal[500]},
-    ${COLORS.lightGreen[700]}
+    ${RAW_COLORS.teal[500]},
+    ${RAW_COLORS.lightGreen[700]}
   );
   font-size: 32px;
   font-weight: 600;

src/components/CreateNewProjectWizard/BuildStepProgress.js

@@ -97,7 +97,7 @@ const ChildWrapper = styled.div`
 `;
 
 const Checkmark = styled(IconBase)`
-  color: ${COLORS.green[500]};
+  color: ${COLORS.lightSuccess};
 `;
 
 const MainCopy = styled.div`

src/components/CreateNewProjectWizard/Gatsby/SelectStarterList.js

@@ -9,7 +9,7 @@ import ExternalLink from '../../ExternalLink';
 import CodesandboxLogo from '../../CodesandboxLogo';
 import StrokeButton from '../../Button/StrokeButton';
 
-import { COLORS } from '../../../constants';
+import { RAW_COLORS, COLORS } from '../../../constants';
 
 type Props = {
   updateStarter: (string, boolean) => void,
@@ -115,7 +115,7 @@ class SelectStarterList extends PureComponent<Props> {
               <ShowMoreWrapper>
                 <StrokeButton
                   size="small"
-                  strokeColors={[COLORS.gray[200], COLORS.gray[500]]}
+                  strokeColors={[RAW_COLORS.gray[200], RAW_COLORS.gray[500]]}
                   onClick={handleShowMore}
                 >
                   Show more...
@@ -137,15 +137,15 @@ const Description = styled.p`
 `;
 
 const SelectionInfo = styled.div`
-  background: ${COLORS.gray[200]};
+  background: ${RAW_COLORS.gray[200]};
   border-radius: 5px;
   padding: 5px;
   ${({ visible }) => !visible && 'display: none;'};
 `;
 
 const ScrollContainer = styled(Scrollbars)`
   min-height: 120px;
-  border: 1px solid ${COLORS.gray[400]};
+  border: 1px solid ${RAW_COLORS.gray[400]};
   border-radius: 4px;
 `;
 
@@ -167,7 +167,8 @@ export const StarterItemHeading = styled.div`
   cursor: pointer;
   border-radius: 6px;
   border: 2px solid
-    ${props => (props.selected ? COLORS.purple[500] : COLORS.gray[200])};
+    ${props =>
+      props.selected ? RAW_COLORS.purple[500] : RAW_COLORS.gray[200]};
   padding: 2px 5px;
   font-size 15px;
   font-weight: bold;