refactor: colours

src/components/custom-slick.js

@@ -16,7 +16,7 @@ const Button = styled.button`
     `}
   z-index: 2;
   background-color: transparent;
-  color: var(--theme-color-dark);
+  color: var(--color-dark);
   border: none;
   margin: 0;
   padding: 0;

src/components/footer.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { Grid, IconWithContent, Icon, Link } from ".";
+import { Grid, IconWithContent, Icon, Link, Text } from ".";
 import Envelope from "../icons/envelope.svg";
 import Phone from "../icons/phone.svg";
 
@@ -11,7 +11,7 @@ const Container = styled.footer`
 `;
 
 const Content = styled.div`
-  max-width: var(--theme-max-width);
+  max-width: var(--page-max-width);
   margin: 0 auto;
   padding: var(--spacing-y-lg) var(--spacing-x-sm);
   font-size: var(--font-size-sm);
@@ -60,7 +60,7 @@ export default function Footer() {
             </IconWithContent>
           </Cell>
         </Grid>
-        <div>&copy; {year} Abc Project Ltd</div>
+        <Text size="xs">&copy; {year} Abc Project Ltd</Text>
       </Content>
     </Container>
   );

src/components/header-logo.js

@@ -20,11 +20,11 @@ const Top = styled.div`
     transform 0.5s ease-in 0.5s;
 
   path:first-of-type {
-    fill: var(--theme-color-primary);
+    fill: var(--color-primary);
   }
 
   path:last-of-type {
-    fill: var(--theme-color-secondary);
+    fill: var(--color-secondary);
   }
 
   ${props =>
@@ -56,11 +56,11 @@ const Bottom = styled.div`
     transform 0.5s ease-in 0.5s;
 
   path:first-of-type {
-    fill: var(--theme-color-dark);
+    fill: var(--color-dark);
   }
 
   path:last-of-type {
-    fill: var(--theme-color-secondary);
+    fill: var(--color-secondary);
   }
 
   ${props =>
@@ -81,8 +81,13 @@ export default function HeaderLogo({ transition }) {
         <LogoArrows />
       </Top>
       <Middle visible={visible}>
-        <Heading withShadow noMargin noWrap>
-          Abc Project Design Ltd
+        <Heading
+          shadowRadius="15px"
+          shadowColor="rgba(255, 255, 255, 0.25)"
+          noMargin
+          noWrap
+        >
+          ABC Project Design Ltd
         </Heading>
         <Text size="lg" noMargin>
           Easy as ABC

src/components/header.js

@@ -35,7 +35,7 @@ const Content = styled.div`
     ${props => (props.posX === "middle" ? "-50%" : 0)},
     ${props => (props.posY === "middle" ? "-50%" : 0)}
   );
-  max-width: var(--theme-max-width);
+  max-width: var(--page-max-width);
   padding: var(--spacing-y-sm) var(--spacing-x-sm);
   text-align: center;
 `;

src/components/heading.js

@@ -5,16 +5,18 @@ import { css } from "@emotion/react";
 const Styles = styled.h1`
   margin: ${props => (props.noMargin ? 0 : `0 0 var(--spacing-y-sm)`)};
   font-size: ${props => `var(--font-size-${props.size})`};
+  text-shadow: 0 0 ${props => props.shadowRadius || `2px`}
+    ${props => props.shadowColor || `rgba(0, 0, 0, 0.25)`};
+  ${props =>
+    props.color &&
+    css`
+      color: var(--color-${props.color});
+    `}
   ${props =>
     props.noWrap &&
     css`
       white-space: nowrap;
     `}
-  ${props =>
-    props.withShadow &&
-    css`
-      text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-    `};
 `;
 
 const sizes = {

src/components/icon.js

@@ -1,11 +1,16 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const Container = styled.span`
   display: inline-block;
   width: ${props => `var(--icon-size-${props.size})`};
   height: ${props => `var(--icon-size-${props.size})`};
-  color: ${props => `var(--theme-color-${props.color})`};
+  ${props =>
+    props.color &&
+    css`
+      color: var(--color-${props.color});
+    `}
 
   svg {
     width: 100%;

src/components/input-text.js

@@ -15,7 +15,7 @@ const Input = styled.input`
   width: 100%;
   margin-bottom: var(--spacing-y-sm);
   padding: var(--spacing-y-xs) var(--spacing-x-sm);
-  border: 1px solid var(--theme-color-dark);
+  border: 1px solid var(--color-dark);
 `;
 
 export default function InputText({

src/components/link.js

@@ -1,10 +1,19 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { Link as GatsbyLink } from "gatsby";
 
 const StyledLink = styled.a`
-  font-size: ${props => `var(--font-size-${props.size})`};
-  color: ${props => `var(--theme-color-${props.color})`};
+  ${props =>
+    props.size &&
+    css`
+      font-size: var(--font-size-${props.size});
+    `}
+  ${props =>
+    props.color &&
+    css`
+      color: var(--theme-color-${props.color});
+    `}
   text-decoration: none;
 `;
 

src/components/nav.js

@@ -32,7 +32,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column-reverse;
   height: 100%;
-  max-width: var(--theme-max-width);
+  max-width: var(--page-max-width);
   margin: 0 auto;
   @media (min-width: 30em) {
     flex-direction: row;
@@ -60,21 +60,21 @@ const Heading = styled(Link)`
 
     &:first-of-type {
       path:first-of-type {
-        fill: var(--theme-color-primary);
+        fill: var(--color-primary);
       }
 
       path:last-of-type {
-        fill: var(--theme-color-secondary);
+        fill: var(--color-secondary);
       }
     }
     &:last-of-type {
       transform: rotate(180deg);
       path:first-of-type {
-        fill: var(--theme-color-dark);
+        fill: var(--color-dark);
       }
 
       path:last-of-type {
-        fill: var(--theme-color-secondary);
+        fill: var(--color-secondary);
       }
     }
   }

src/components/review-summary.js

@@ -49,7 +49,7 @@ const Quote = styled.div`
     position: absolute;
     width: 24px;
     height: 24px;
-    color: var(--theme-color-dark);
+    color: var(--color-dark);
 
     &:first-of-type {
       top: 0;
@@ -67,7 +67,7 @@ const Quote = styled.div`
 
 const Title = styled.p`
   font-weight: bold;
-  color: var(--theme-color-dark);
+  color: var(--color-dark);
 `;
 
 const SmallIcon = styled.span`
@@ -75,7 +75,7 @@ const SmallIcon = styled.span`
   width: 16px;
   height: 16px;
   margin-right: var(--spacing-x-sm);
-  color: var(--theme-color-dark);
+  color: var(--color-dark);
 
   svg {
     width: 100%;

src/components/section.js

@@ -6,15 +6,14 @@ const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);
   ${props => !props.variant && `background-color: var(--color-white);`}
   ${props =>
-    props.variant === "primary" &&
-    `background-color: var(--theme-color-light);`}
+    props.variant === "primary" && `background-color: var(--color-light);`}
   ${props =>
     props.variant === "transparent" &&
     `background-color: var(--color-semi-transparent);`}
 `;
 
 const Content = styled.div`
-  max-width: var(--theme-max-width);
+  max-width: var(--page-max-width);
   margin: 0 auto;
 `;
 

src/components/text.js

@@ -14,10 +14,22 @@ const StyledText = styled.p`
     css`
       text-align: ${props.align};
     `}
-  font-size: ${props => `var(--font-size-${props.size})`};
-  color: ${props => `var(--theme-color-${props.color})`};
+  ${props =>
+    props.size &&
+    css`
+      font-size: var(--font-size-${props.size});
+    `}
+  ${props =>
+    props.color &&
+    css`
+      color: var(--color-${props.color});
+    `}
 `;
 
 export default function Text({ children, ...props }) {
-  return <StyledText {...props}>{children}</StyledText>;
+  return (
+    <StyledText {...props}>
+      {children}
+    </StyledText>
+  );
 }

src/layout.js

@@ -9,20 +9,21 @@ import "@fontsource/cooper-hewitt/700.css";
 
 const GlobalStyles = css`
   :root {
-    --theme-max-width: 960px;
-    --theme-color-primary: #9c0905;
-    --theme-color-secondary: #9590a8;
-    --theme-color-tertiary: #bbcbcb;
-    --theme-color-light: #e5ffde;
-    --theme-color-dark: #000a61;
+    --page-max-width: 960px;
+    --color-primary: #9c0905;
+    --color-secondary: #9590a8;
+    --color-tertiary: #bbcbcb;
+    --color-light: #e5ffde;
+    --color-dark: #000a61;
     --color-black: #000;
     --color-white: #fff;
     --color-light-grey: #ced;
     --color-mid-grey: #606069;
-    --color-dark-grey: #333;
+    --color-dark-grey: #233;
     --color-semi-transparent: rgba(255, 255, 255, 0.75);
     --base-font-size: 16px;
     --line-height: 1.6;
+    --font-size-xs: 0.75rem; // 12px
     --font-size-sm: 0.875rem; // 14px
     --font-size-md: 1rem; // 16px
     --font-size-lg: 1.125rem; // 18px
@@ -67,6 +68,7 @@ const GlobalStyles = css`
     margin: 0;
     font-family: "Cooper Hewitt", sans-serif;
     line-height: var(--line-height);
+    color: var(--color-dark-grey);
   }
 
   *,