Normalizing Style Sheets

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);
 }
 

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 (

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
       )}
     >

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>
           )}

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 {

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>
 )

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>

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 {

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)',