exercise 6: css variables

Blond11516 · Sep 6, 2021 · 832c1f2 · 832c1f2
1 parent 65cda70
commit 832c1f2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,14 +1,28 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled, { createGlobalStyle } from 'styled-components/macro';
 
 import Header from '../Header';
 import ShoeIndex from '../ShoeIndex';
 
+const GlobalStyle = createGlobalStyle`
+  :root {
+    --white: hsl(0deg 0% 100%);
+    --gray-100: hsl(185deg 5% 95%);
+    --gray-300: hsl(190deg 5% 80%);
+    --gray-500: hsl(196deg 4% 60%);
+    --gray-700: hsl(220deg 5% 40%);
+    --gray-900: hsl(220deg 3% 20%);
+    --primary: hsl(340deg 65% 47%);
+    --secondary: hsl(240deg 60% 63%);
+  }
+`
+
 const App = () => {
   const [sortId, setSortId] = React.useState('newest');
 
   return (
     <>
+      <GlobalStyle />
       <Header />
       <Main>
         <ShoeIndex sortId={sortId} setSortId={setSortId} />

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -24,12 +24,12 @@ const Header = () => {
           <Logo />
         </Side>
         <Nav>
-          <NavLink href="/sale">auniset</NavLink>
-          <NavLink href="/new">New&nbsp;Releasesauinset</NavLink>
-          <NavLink href="/men">Menuaie</NavLink>
-          <NavLink href="/women">Womenauie</NavLink>
-          <NavLink href="/kids">Kidsauie</NavLink>
-          <NavLink href="/collections">Collectionsauie</NavLink>
+          <NavLink href="/sale">Sale</NavLink>
+          <NavLink href="/new">New&nbsp;Release</NavLink>
+          <NavLink href="/men">Menu</NavLink>
+          <NavLink href="/women">Women</NavLink>
+          <NavLink href="/kids">Kids</NavLink>
+          <NavLink href="/collections">Collections</NavLink>
         </Nav>
         <Side />
         <MobileIcons>

diff --git a/src/constants.js b/src/constants.js
@@ -1,14 +1,14 @@
 export const COLORS = {
-  white: 'hsl(0deg 0% 100%)',
+  white: 'var(--white)',
   gray: {
-    100: 'hsl(185deg 5% 95%)',
-    300: 'hsl(190deg 5% 80%)',
-    500: 'hsl(196deg 4% 60%)',
-    700: 'hsl(220deg 5% 40%)',
-    900: 'hsl(220deg 3% 20%)',
+    100: 'var(--gray-100)',
+    300: 'var(--gray-300)',
+    500: 'var(--gray-500)',
+    700: 'var(--gray-700)',
+    900: 'var(--gray-900)',
   },
-  primary: 'hsl(340deg 65% 47%)',
-  secondary: 'hsl(240deg 60% 63%)',
+  primary: 'var(--primary)',
+  secondary: 'var(--secondary)',
 };
 
 export const WEIGHTS = {