From 0c9f3ef8d00cb91bfc7de96aaa7d78fec7f51a82 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 15 Oct 2020 16:12:46 -0300
Subject: [PATCH] Normalizing Style Sheets

---
 assets/global.css                                  | 14 +++++++++-----
 components/core/Featurebar/Featurebar.tsx          |  2 +-
 components/core/Searchbar/Searchbar.tsx            |  2 +-
 components/core/UserNav/UserNav.tsx                |  2 +-
 components/ui/Button/Button.module.css             |  4 ++--
 components/ui/Logo/Logo.tsx                        |  4 ++--
 components/ui/Sidebar/Sidebar.tsx                  |  2 +-
 .../wishlist/WishlistCard/WishlistCard.module.css  |  2 +-
 tailwind.config.js                                 |  2 ++
 9 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index a7fbd00a6..3d102a643 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -15,13 +15,14 @@
   --hover: rgba(0, 0, 0, 0.075);
 
   --cyan: #50e3c2;
-  --purple: #f81ce5;
-  --violet: #7928ca;
-  --pink: #ff0080;
-  --blue: #0070f3;
   --green: #37b679;
   --red: #da3c3c;
+  --pink: #ff0080;
+  --purple: #f81ce5;
+  --violet: #7928ca;
+  --blue: #0070f3;
 
+  --accents-0: #fff;
   --accents-1: #fafafa;
   --accents-2: #eaeaea;
   --accents-3: #999999;
@@ -30,6 +31,7 @@
   --accents-6: #444444;
   --accents-7: #333333;
   --accents-8: #111111;
+  --accents-9: #000;
 }
 
 [data-theme='dark'] {
@@ -44,6 +46,7 @@
   --text-primary: white;
   --text-secondary: black;
 
+  --accents-0: #000;
   --accents-1: #111111;
   --accents-2: #333333;
   --accents-3: #444444;
@@ -52,6 +55,7 @@
   --accents-6: #999999;
   --accents-7: #eaeaea;
   --accents-8: #fafafa;
+  --accents-9: #fff;
 }
 
 .fit {
@@ -80,7 +84,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--bg-primary);
+  background-color: var(--primary);
   color: var(--text-primary);
 }
 
diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx
index 4b928b4fc..3deac9454 100644
--- a/components/core/Featurebar/Featurebar.tsx
+++ b/components/core/Featurebar/Featurebar.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 const Featurebar: FC<Props> = ({ title, description, className }) => {
   const rootClassName = cn(
-    'hidden py-2 px-6 bg-primary-accent text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent',
+    'hidden py-2 px-6 bg-accents-1 border-b border-accents-2 text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-accents-1',
     className
   )
   return (
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index 4c2c21332..aa754d564 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relative rounded-lg text-sm bg-primary-accent text-base w-full',
+        'relative rounded-lg text-sm bg-accents-1 text-base w-full border border-accents-2',
         className
       )}
     >
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index b6367e270..3a288fd87 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -29,7 +29,7 @@ const UserNav: FC<Props> = ({ className }) => {
         >
           <Bag />
           {itemsCount > 0 && (
-            <span className="bg-secondary text-base h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
+            <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
               {itemsCount}
             </span>
           )}
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index b1159d9cd..ba05a2c48 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -1,12 +1,12 @@
 .root {
-  @apply text-accents-8 cursor-pointer inline-flex px-10 rounded-sm leading-6
+  @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
   bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
   text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
   border border-transparent items-center;
 }
 
 .root:hover {
-  @apply bg-primary-2 text-base border border-secondary;
+  @apply bg-accents-0 text-base border border-secondary;
 }
 
 .root:focus {
diff --git a/components/ui/Logo/Logo.tsx b/components/ui/Logo/Logo.tsx
index dfe62e01a..616a73965 100644
--- a/components/ui/Logo/Logo.tsx
+++ b/components/ui/Logo/Logo.tsx
@@ -6,12 +6,12 @@ const Logo = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
+    <rect width="32" height="32" rx="16" fill="var(--secondary)" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="var(--bg-primary)"
+      fill="var(--primary)"
     />
   </svg>
 )
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 0a97c4b67..3a73e2587 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveTo="translate-x-full"
                 >
                   <div className="h-full w-screen max-w-lg">
-                    <div className="h-full flex flex-col text-base bg-primary-accent shadow-xl overflow-y-auto">
+                    <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>
diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css
index 6c1311952..ca0e8cc6c 100644
--- a/components/wishlist/WishlistCard/WishlistCard.module.css
+++ b/components/wishlist/WishlistCard/WishlistCard.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2;
 
   &:nth-child(3n + 1) {
     & .productBg {
diff --git a/tailwind.config.js b/tailwind.config.js
index 0588af510..5d4be29af 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
         secondary: 'var(--secondary)',
         'secondary-2': 'var(--secondary-2)',
         hover: 'var(--hover)',
+        'accents-0': 'var(--accents-0)',
         'accents-1': 'var(--accents-1)',
         'accents-2': 'var(--accents-2)',
         'accents-3': 'var(--accents-3)',
@@ -27,6 +28,7 @@ module.exports = {
         'accents-6': 'var(--accents-6)',
         'accents-7': 'var(--accents-7)',
         'accents-8': 'var(--accents-8)',
+        'accents-9': 'var(--accents-9)',
         violet: 'var(--violet)',
         pink: 'var(--pink)',
         cyan: 'var(--cyan)',