Merge pull request #13 from Mgkusumaputra/pp-38-setting-up-multi-themes

Release-As: v0.2.0
Mgkusumaputra · Jul 21, 2024 · 3c297a8 · 3c297a8
2 parents 83356fa + 9b86d69
commit 3c297a8
Show file tree

Hide file tree

Showing 8 changed files with 1,050 additions and 2,671 deletions.
diff --git a/app/components/treeButton.tsx b/app/components/treeButton.tsx
@@ -11,11 +11,11 @@ export default function TreeButton({ href, title }: TreeButtonProps) {
     <Link
       href={href}
       className={clsx(
-        'group flex w-full items-center justify-center rounded-xl border border-[#F2F3F4] px-2 py-2',
-        'transition-colors hover:bg-[#F2F3F4] hover:shadow-xl',
+        'group flex w-full items-center justify-center rounded-xl border border-typography-primary px-2 py-2',
+        'transition-colors hover:bg-typography-primary hover:shadow-xl',
       )}
     >
-      <p className='text-lg font-medium text-[#F2F3F4] group-hover:text-[#2C3E50]'>
+      <p className='text-lg font-medium text-typography-primary group-hover:text-secondary'>
         {title}
       </p>
     </Link>

diff --git a/app/globals.css b/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -16,9 +16,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
+    <html lang='en' className='theme-cool-blue'>
       <body
-        className={`${plusJakartaSans.className} flex h-screen justify-center bg-gradient-to-br from-[#2C3E50] to-[#BDC3C7]`}
+        className={`${plusJakartaSans.className} flex h-screen justify-center bg-gradient-to-br from-secondary to-primary`}
       >
         <main className='w-full max-w-screen-sm'>{children}</main>
       </body>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -24,13 +24,13 @@ export default function NotFound() {
   return (
     <div className='flex h-screen w-screen items-center justify-center gap-2 text-center'>
       <div>
-        <h1 className='text-xl font-normal text-[#F2F3F4]'>
+        <h1 className='text-xl font-normal text-typography-primary'>
           <span className='underline-offset-3 font-semibold underline'>
             {pathname}
           </span>{' '}
           is not found
         </h1>
-        <p className='text-xs font-normal text-[#E5E7E9]'>
+        <p className='text-xs font-normal text-typography-secondary'>
           Redirecting in {seconds} seconds...
         </p>
       </div>

diff --git a/app/page.tsx b/app/page.tsx
@@ -24,8 +24,10 @@ export default function Home() {
           className='rounded-xl'
         />
         <div className='flex flex-col gap-2'>
-          <h1 className='text-xl font-semibold text-[#F2F3F4]'>@Username</h1>
-          <p className='text-xs font-normal text-[#E5E7E9]'>
+          <h1 className='text-xl font-semibold text-typography-primary'>
+            @Username
+          </h1>
+          <p className='text-xs font-normal text-typography-secondary'>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor
             consectetur dictum.
           </p>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "linktion",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -42,6 +42,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.1",
+    "tw-colors": "^3.3.1",
     "typescript": "^5"
   },
   "lint-staged": {