refactor: update color scheme and styles across components

Author: ccrsxx

src/pages/design.tsx

@@ -36,92 +36,95 @@ export default function Design(): React.JSX.Element {
         </div>
         <p className='mt-2 text-secondary'>Font Family: Inter</p>
         <ul className='mt-3 grid grid-cols-[repeat(auto-fit,minmax(256px,1fr))] gap-4'>
-          {colorPalette.map(({ title, hexCode, className }) => (
-            <li className='flex items-center gap-2' key={title}>
-              <div
-                className={clsx('main-border h-10 w-10 rounded-md', className)}
-              />
-              <div>
-                <h3>{title}</h3>
-                <p className='text-sm text-muted'>{hexCode}</p>
-              </div>
-            </li>
-          ))}
+          {colorPalette.map(({ title, className, lightHex, darkHex }) => {
+            let parsedHex: string;
+
+            if (!darkHex) parsedHex = lightHex;
+            else {
+              if (theme === 'dark') parsedHex = darkHex;
+              else parsedHex = lightHex;
+            }
+
+            return (
+              <li className='flex items-center gap-2' key={title}>
+                <div
+                  className={clsx(
+                    'main-border h-10 w-10 rounded-md',
+                    className
+                  )}
+                />
+                <div>
+                  <h3>{title}</h3>
+                  <p className='text-sm text-muted'>{parsedHex}</p>
+                </div>
+              </li>
+            );
+          })}
         </ul>
       </motion.section>
     </main>
   );
 }
 
-const colorPalette = [
-  {
-    title: 'White Background',
-    hexCode: '#ffffff',
-    className: 'bg-white'
-  },
-  {
-    title: 'Black Background',
-    hexCode: '#222222',
-    className: 'bg-black'
-  },
-  {
-    title: 'White Text',
-    hexCode: '#ffffff',
-    className: 'bg-white'
-  },
-  {
-    title: 'Black Text',
-    hexCode: '#000000',
-    className: 'bg-black'
-  },
-  {
-    title: 'Gray 100 Text',
-    hexCode: '#f3f4f6',
-    className: 'bg-gray-100'
-  },
+type ColorPalette = {
+  title: string;
+  darkHex?: string;
+  lightHex: string;
+  className: string;
+};
+
+const colorPalette: ColorPalette[] = [
   {
-    title: 'Gray 200 Text',
-    hexCode: '#e5e7eb',
-    className: 'bg-gray-200'
+    title: 'Background',
+    className: 'bg-background',
+    lightHex: '#ffffff',
+    darkHex: '#000000'
   },
   {
-    title: 'Gray 300 Text',
-    hexCode: '#d1d5db',
-    className: 'bg-gray-300'
+    title: 'Foreground',
+    className: 'bg-foreground',
+    lightHex: '#000000',
+    darkHex: '#ffffff'
   },
   {
-    title: 'Gray 400 Text',
-    hexCode: '#9ca3af',
-    className: 'bg-gray-400'
+    title: 'Primary',
+    className: 'bg-primary',
+    lightHex: '#111827',
+    darkHex: '#f3f4f6'
   },
   {
-    title: 'Gray 500 Text',
-    hexCode: '#6b7280',
-    className: 'bg-gray-500'
+    title: 'Secondary',
+    className: 'bg-secondary',
+    lightHex: '#1f2937',
+    darkHex: '#e5e7eb'
   },
   {
-    title: 'Gray 600 Text',
-    hexCode: '#4b5563',
-    className: 'bg-gray-600'
+    title: 'Muted',
+    className: 'bg-muted',
+    lightHex: '#4b5563',
+    darkHex: '#9ca3af'
   },
   {
-    title: 'Gray 700 Text',
-    hexCode: '#374151',
-    className: 'bg-gray-700'
+    title: 'Border',
+    className: 'bg-border',
+    lightHex: '#d1d5db',
+    darkHex: '#374151'
   },
   {
-    title: 'Gray 800 Text',
-    hexCode: '#1f2937',
-    className: 'bg-gray-800'
+    title: 'Muted background',
+    className: 'bg-muted-background',
+    lightHex: '#f3f4f6',
+    darkHex: '#111827'
   },
   {
-    title: 'Gray 900 Text',
-    hexCode: '#111827',
-    className: 'bg-gray-900'
+    title: 'Accent foreground',
+    className: 'bg-accent-foreground',
+    lightHex: '#9ca3af',
+    darkHex: '#4b5563'
   },
   {
-    title: 'Gradient Color',
-    hexCode: '#a855f7 to #f472b6',
-    className: 'bg-gradient-to-tr from-accent-start to-accent-end'
+    title: 'Gradient color',
+    className: 'bg-gradient-to-tr from-accent-start to-accent-end',
+    lightHex: '#a855f7 to #c084fc'
   }
-] as const;
+];

src/styles/globals.scss

@@ -16,6 +16,10 @@
     --border: 209 213 219; /* gray-300 */
     --muted-background: 243 244 246; /* gray-100 */
     --accent-foreground: 156 163 175; /* gray-400 */
+
+    --accent-main: 244 114 182; /* pink-400 */
+    --accent-start: 168 85 247; /* purple-500 */
+    --accent-end: 244 114 182; /* pink-400 */
   }
 
   .dark {
@@ -27,12 +31,11 @@
     --border: 55 65 81; /* gray-700 */
     --muted-background: 17 24 39; /* gray-900 */
     --accent-foreground: 75 85 99; /* gray-600 */
-  }
 
-  /* 
-    Big refactor for global styles completed:
-    Utilizing CSS variables to handle light/dark mode changes seamlessly.
-  */
+    --accent-main: 244 114 182; /* pink-400 */
+    --accent-start: 168 85 247; /* purple-500 */
+    --accent-end: 244 114 182; /* pink-400 */
+  }
 
   html {
     // ! use important as a workaround for nextjs@13.1.0 bug that prevents smooth scroll

tailwind.config.ts

@@ -1,4 +1,3 @@
-import colors from 'tailwindcss/colors';
 import typography from '@tailwindcss/typography';
 import type { Config } from 'tailwindcss';
 
@@ -20,9 +19,9 @@ export default {
         'muted-background': 'rgb(var(--muted-background) / <alpha-value>)',
         'accent-foreground': 'rgb(var(--accent-foreground) / <alpha-value>)',
         accent: {
-          main: colors.pink[400],
-          start: colors.purple[500],
-          end: colors.pink[400]
+          main: 'rgb(var(--accent-main) / <alpha-value>)',
+          start: 'rgb(var(--accent-start) / <alpha-value>)',
+          end: 'rgb(var(--accent-end) / <alpha-value>)'
         }
       }
     }