Logging-Studio · ariflogs · Apr 30, 2025 · Apr 29, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.1.10 ./
-          docker push devarifhossain/retroui:1.1.10
+          docker build -t devarifhossain/retroui:1.2.0 ./
+          docker push devarifhossain/retroui:1.2.0
 
       # - name: Set up SSH
       #   uses: webfactory/ssh-agent@v0.9.0

diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -50,7 +50,7 @@ export default function page({ params }: IProps) {
         <Text as="h1">{doc.title}</Text>
         <p className="text-lg text-muted-foreground mt-2">{doc.description}</p>
         {doc.links && (
-          <div className="flex space-x-4 text-sm mt-4">
+          <div className="flex space-x-4 text-sm mt-4 text-black">
             {doc.links?.api_reference && (
               <a
                 className="flex items-center bg-gray-200 px-1.5 py-.5"

diff --git a/app/global.css b/app/global.css
@@ -15,6 +15,9 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
   --color-primary-hover: var(--primary-hover);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
@@ -35,6 +38,8 @@
   --primary: #ffdb33;
   --primary-hover: #ffcc00;
   --primary-foreground: #000;
+  --secondary: #000;
+  --secondary-foreground: #fff;
   --muted: #aeaeae;
   --muted-foreground: #5a5a5a;
   --accent: #fae583;
@@ -43,33 +48,23 @@
   --destructive-foreground: #fff;
   --border: #000;
 }
-
 .dark {
   --background: #121212;
-  --foreground: #fff;
+  --foreground: #eaeaea;
   --card: #1e1e1e;
-  --card-foreground: #fff;
-  --popover: #1e1e1e;
-  --popover-foreground: #fff;
-  --primary: #ffdb33;
+  --card-foreground: #eaeaea;
+  --primary: #ffcc00;
+  --primary-hover: #ffdb33;
   --primary-foreground: #000;
-  --secondary: #292929;
-  --secondary-foreground: #e5e5e5;
-  --muted: #3b3b3b;
-  --muted-foreground: #9a9b9c;
-  --accent: #ffdb33;
+  --secondary: #fff;
+  --secondary-foreground: #000;
+  --muted: #5a5a5a;
+  --muted-foreground: #aeaeae;
+  --accent: #ffd966;
   --accent-foreground: #000;
-  --destructive: #ff6b6b;
+  --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #333;
-  --input: #444;
-  --ring: #ffdb33;
-  --radius: 0.5rem;
-  --chart-1: #ff4500;
-  --chart-2: #ff8c00;
-  --chart-3: #00b894;
-  --chart-4: #355070;
-  --chart-5: #e9c46a;
+  --border: #eee;
 }
 
 .text-outlined {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -43,14 +43,32 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const theme = localStorage.getItem('theme');
+                  if (theme === 'dark') {
+                    document.documentElement.classList.add('dark');
+                  } else {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch (e) {
+                  console.error('Error applying theme:', e);
+                }
+              })();
+            `,
+          }}
+        />
         <script
           defer
           src="https://cloud.umami.is/script.js"
           data-website-id="97dd6182-c656-4265-97e0-ee9613b88078"
         />
       </head>
       <body
-        className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable}`}
+        className={`${space.className} ${archivoBlack.variable} ${space.variable} ${spaceMono.variable} bg-background text-foreground`}
       >
         <div className="relative z-40 pb-16">
           <TopNav />

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
@@ -10,7 +10,7 @@ export default function SideNav() {
 
   return (
     <div
-      className={`fixed right-auto border-r-2 border-black h-full overflow-y-scroll transition-transform transform md:translate-x-0 w-60 bg-white flex flex-col justify-center md:justify-start py-14 md:py-8`}
+      className={`fixed right-auto border-r-2 h-full overflow-y-scroll transition-transform transform md:translate-x-0 w-60 bg-background flex flex-col justify-center md:justify-start py-14 md:py-8`}
     >
       <nav className="flex flex-col items-start px-6 lg:pl-0 pb-26 space-y-4">
         {navConfig.sideNavItems.map((item) => (
@@ -22,8 +22,7 @@ export default function SideNav() {
                   key={child.title}
                   href={child.href}
                   className={`px-2 py-1 w-full border border-transparent ${
-                    pathname === child.href &&
-                    "bg-primary text-black border-black"
+                    pathname === child.href && "bg-primary text-black"
                   }`}
                 >
                   {child.title}

diff --git a/components/TopNav.tsx b/components/TopNav.tsx
@@ -1,15 +1,43 @@
-import React from "react";
+"use client";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { GithubIcon } from "lucide-react";
+import { GithubIcon, MoonIcon, SunIcon } from "lucide-react";
 import HamburgerMenu from "./HamburgerMenu";
 import { Button, Text } from "@/components/retroui";
 import { navConfig } from "@/config/navigation";
 
 export default function TopNav() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Apply the saved theme preference on page load
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme === "dark") {
+      document.documentElement.classList.add("dark");
+      setIsDarkMode(true);
+    } else {
+      document.documentElement.classList.remove("dark");
+      setIsDarkMode(false);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const htmlElement = document.documentElement;
+    if (htmlElement.classList.contains("dark")) {
+      htmlElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+      setIsDarkMode(false);
+    } else {
+      htmlElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+      setIsDarkMode(true);
+    }
+  };
+
   return (
     <>
-      <nav className="fixed top-0 left-0 right-0 w-full border-b-2 border-black bg-white">
+      <nav className="fixed top-0 left-0 right-0 w-full border-b-2 bg-background">
         <div className="w-full bg-black text-white">
           <div className="container max-w-6xl mx-auto px-4 py-2 flex justify-center space-x-4 items-center">
             <Text className="text-sm text-center">
@@ -68,7 +96,7 @@ export default function TopNav() {
               <HamburgerMenu />
             </div>
 
-            <div className="hidden lg:flex items-center">
+            <div className="hidden lg:flex items-center space-x-3">
               <Link
                 href="https://github.com/Logging-Stuff/retroui"
                 target="_blank"
@@ -79,6 +107,9 @@ export default function TopNav() {
                   Star on GitHub
                 </Button>
               </Link>
+              <Button variant="secondary" size="icon" onClick={toggleDarkMode}>
+                {isDarkMode ? <SunIcon size="14" /> : <MoonIcon size="14" />}
+              </Button>
             </div>
           </div>
         </div>

diff --git a/components/retroui/Accordion.tsx b/components/retroui/Accordion.tsx
@@ -15,7 +15,7 @@ const AccordionItem = React.forwardRef<
   <AccordionPrimitive.Item
     ref={ref}
     className={cn(
-      "border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
+      "border-2 bg-background text-foreground shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const AccordionHeader = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-start justify-between px-4 py-2 font-head cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
         className,
       )}
       {...props}

diff --git a/components/retroui/Alert.tsx b/components/retroui/Alert.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { Text } from "@/components/retroui/Text";
 
-const alertVariants = cva("relative w-full border-2 border-black p-4", {
+const alertVariants = cva("relative w-full border-2 p-4", {
   variants: {
     variant: {
       default: "bg-background text-foreground",

diff --git a/components/retroui/Avatar.tsx b/components/retroui/Avatar.tsx
@@ -10,7 +10,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden",
+      "relative flex h-14 w-14 border-2 rounded-full overflow-hidden",
       className,
     )}
     {...props}

diff --git a/components/retroui/Badge.tsx b/components/retroui/Badge.tsx
@@ -6,8 +6,8 @@ const badgeVariants = cva("font-semibold ", {
   variants: {
     variant: {
       default: "bg-gray-200 text-gray-700",
-      outline: "outline-2 outline-black text-black",
-      solid: "bg-black text-white",
+      outline: "outline-2 outline-foreground text-foreground",
+      solid: "bg-foreground text-background",
       surface: "outline-2 bg-primary text-black",
     },
     size: {

diff --git a/components/retroui/BasicCard.tsx b/components/retroui/BasicCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export function BasicCard() {
   return (
-    <div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
+    <div className="inline-block border-2 p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
       <h4 className="font-head text-2xl font-medium mb-1">
         This is card Title
       </h4>

diff --git a/components/retroui/Button.tsx b/components/retroui/Button.tsx
@@ -3,22 +3,23 @@ import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
 const buttonVariants = cva(
-  "font-head transition-all outline-hidden cursor-pointer flex items-center",
+  "font-head transition-all outline-hidden cursor-pointer duration-200 font-medium flex items-center",
   {
     variants: {
       variant: {
         default:
-          "shadow-md hover:shadow-xs bg-primary text-black border-2 border-black hover:bg-primary-hover",
+          "shadow-md hover:shadow-none bg-primary text-black border-2 border-black transition hover:translate-y-1 hover:bg-primary-hover",
         secondary:
-          "bg-black text-white shadow-primary hover:-translate-y-1 hover:shadow-md",
+          "shadow-md hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1",
         outline:
-          "shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
-        link: "bg-transparent text-black hover:underline hs",
+          "shadow-md hover:shadow-none bg-transparent border-2 transition hover:translate-y-1",
+        link: "bg-transparent hover:underline",
       },
       size: {
-        sm: "px-4 py-1.5 text-sm",
-        md: "px-6 py-2 text-base",
+        sm: "px-3 py-1 text-sm shadow hover:shadow-none",
+        md: "px-4 py-1.5 text-base",
         lg: "px-8 py-3 text-lg",
+        icon: "p-2",
       },
     },
     defaultVariants: {

diff --git a/components/retroui/Card.tsx b/components/retroui/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ className, ...props }: ICardProps) => {
   return (
     <div
       className={cn(
-        "inline-block border-2 border-black shadow-md transition-all hover:shadow-xs",
+        "inline-block border-2 shadow-md transition-all hover:shadow-xs bg-card",
         className,
       )}
       {...props}

diff --git a/components/retroui/Checkbox.tsx b/components/retroui/Checkbox.tsx
@@ -3,12 +3,13 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cva, VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 
-const checkboxVariants = cva("border-black border-2", {
+const checkboxVariants = cva("border-2", {
   variants: {
     variant: {
       default: "data-[state=checked]:bg-primary",
       outline: "",
-      solid: "data-[state=checked]:bg-black *:text-white",
+      solid:
+        "data-[state=checked]:bg-foreground data-[state=checked]:text-background",
     },
     size: {
       sm: "h-4 w-4",

diff --git a/components/retroui/Dialog.tsx b/components/retroui/Dialog.tsx
@@ -51,7 +51,7 @@ DialogBackdrop.displayName = "DialogBackdrop";
 
 const dialogVariants = cva(
   `fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 
-  flex flex-col border-2 border-black shadow-md gap-4 overflow-y-auto bg-white
+  flex flex-col border-2 shadow-md gap-4 overflow-y-auto bg-white
   w-full h-fit max-h-[80vh] max-w-[97%] duration-300
   data-[state=open]:animate-in 
   data-[state=open]:slide-in-from-left-1/2 
@@ -132,7 +132,7 @@ const DialogDescription = ({
 };
 
 const dialogFooterVariants = cva(
-  "flex items-center justify-end border-t-2 border-black min-h-12 gap-4 px-4 py-2",
+  "flex items-center justify-end border-t-2 min-h-12 gap-4 px-4 py-2",
   {
     variants: {
       variant: {
@@ -171,7 +171,7 @@ const DialogFooter = ({
 };
 
 const dialogHeaderVariants = cva(
-  "flex items-center justify-between border-b-2 border-black px-4 min-h-12",
+  "flex items-center justify-between border-b-2 px-4 min-h-12",
   {
     variants: {
       variant: {

diff --git a/components/retroui/Input.tsx b/components/retroui/Input.tsx
@@ -14,7 +14,7 @@ export const Input: React.FC<InputProps> = ({
     <input
       type={type}
       placeholder={placeholder}
-      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${
+      className={`px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs ${
         props["aria-invalid"]
           ? "border-red-500 text-red-500 shadow-xs shadow-red-600"
           : ""

diff --git a/components/retroui/Menu.tsx b/components/retroui/Menu.tsx
@@ -16,7 +16,7 @@ const Content = ({ className, ...props }: IMenuContent) => (
       side="bottom"
       align="start"
       className={cn(
-        "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
+        "bg-white border-2 shadow-md absolute top-2 min-w-20",
         className,
       )}
       {...props}
@@ -31,7 +31,7 @@ const MenuItem = React.forwardRef<
   <DropdownMenu.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative text-black flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}