Shadcn UI Theme Variables Implementation from Design System

src/components/MuiTheme/index.js

@@ -9,17 +9,17 @@ const extTheme = extendTheme({
           main: '#6638b8',
         },
         background: {
-          default: '#f2f4f7',
+          default: '#F9FAFB',
         },
       },
     },
     dark: {
       palette: {
         primary: {
-          main: '#6638b8',
+          main: '#916CE7',
         },
         background: {
-          default: '#f2f4f7',
+          default: '#050505',
         },
       },
     },

src/components/ui/button.jsx

@@ -4,20 +4,20 @@ import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border-none",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-secondary text-destructive border-solid border border-destructive shadow-sm hover:bg-destructive/10",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 border-solid border border-border hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 border-solid border border-border hover:bg-accent hover:text-accent-foreground",
+        ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
+        link: "bg-transparent text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",

src/components/ui/navigation.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cn } from "../../lib/utils.js";
+import { 
+  Home, 
+  BookOpen, 
+  Settings, 
+  User, 
+  ChevronDown,
+  Menu
+} from "lucide-react";
+import ThemeSwitcher from "./theme-switcher.jsx";
+
+const Navigation = ({ className }) => {
+  return (
+    <nav className={cn("border-b", className)}>
+      <div className="flex h-16 items-center px-4">
+        <div className="flex items-center space-x-4">
+          <a href="/" className="flex items-center space-x-2">
+            <Home className="h-6 w-6" />
+
+          </a>
+        </div>
+
+        <div className="ml-auto flex items-center space-x-4">
+          <div className="hidden md:flex items-center space-x-4">
+            <a href="/docs" className="flex items-center space-x-2 text-sm font-medium transition-colors hover:text-primary">
+              <BookOpen className="h-4 w-4" />
+              <span>Docs</span>
+            </a>
+            <a href="/settings" className="flex items-center space-x-2 text-sm font-medium transition-colors hover:text-primary">
+              <Settings className="h-4 w-4" />
+              <span>Settings</span>
+            </a>
+
+            <ThemeSwitcher />
+          </div>
+
+          <div className="md:hidden flex items-center space-x-4">
+            <ThemeSwitcher />
+            <button>
+              <Menu className="h-6 w-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navigation; 

src/components/ui/theme-switcher.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import { Sun, Moon } from 'lucide-react';
+import { Button } from './button.jsx';
+
+const ThemeSwitcher = () => {
+  const { colorMode, setColorMode } = useColorMode();
+
+  const toggleTheme = () => {
+    const newTheme = colorMode === 'dark' ? 'light' : 'dark';
+    setColorMode(newTheme);
+    // Ensure the theme is applied to the root element
+    document.documentElement.setAttribute('data-theme', newTheme);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      aria-label="Toggle theme"
+      className="transition-colors duration-300"
+    >
+      {colorMode === 'dark' ? (
+        <Sun className="h-5 w-5 transition-transform duration-300" />
+      ) : (
+        <Moon className="h-5 w-5 transition-transform duration-300" />
+      )}
+    </Button>
+  );
+};
+
+export default ThemeSwitcher; 

src/css/custom.css

@@ -2,52 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
 
 /**
  * Any CSS included here will be global. The classic template
@@ -97,7 +52,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-background-color: #f2f4f7;
+  --ifm-background-color: var(--background);
   --ifm-color-primary: #6638b8;
   --ifm-color-primary-dark: #522d93;
   --ifm-color-primary-darker: #472781;
@@ -112,7 +67,7 @@
   --ifm-code-padding-vertical: 0.05rem;
   --ifm-font-family-base: 'Roboto', Arial, Helvetica, sans-serif;
   --ifm-menu-color-active: #6638b8;
-  --ifm-font-color-base: #000000;
+  --ifm-font-color-base: var(--foreground);
   --ifm-font-color-base-inverse: rgb(218, 221, 225);
   --ifm-toc-padding-horizontal: 20px;
   --docusaurus-highlighted-code-line-bg: rgba(224, 199, 50, 0.2);
@@ -121,8 +76,11 @@
   --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgb(102, 56, 184)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
 }
 
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
+  --ifm-background-color: var(--background );
+
   --ifm-menu-color-active: #b198df;
   --ifm-color-primary: #b198df;
   --ifm-color-primary-dark: #522d93;
@@ -138,6 +96,82 @@
   --ifm-font-color-base-inverse: #000000;
 }
 
+/**
+ * Shadcn UI theme
+ */
+ @layer base {
+  :root {
+    --background: 210 20% 98.04%;
+    --foreground: 220.91 39.29% 10.98%;
+    --muted: 220 13.04% 90.98%;
+    --muted-foreground: 220 8.94% 46.08%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220.91 39.29% 10.98%;
+    --card: 0 0% 100%;
+    --card-foreground: 220.91 39.29% 10.98%;
+    --border: 220 13.04% 90.98%;
+    --input: 220 13.04% 90.98%;
+    --primary: 261.56 53.33% 47.06%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 100%;
+    --secondary-foreground: 220.91 39.29% 10.98%;
+    --accent: 220 14.29% 95.88%;
+    --accent-foreground: 220.91 39.29% 10.98%;
+    --destructive: 3.96 72.8% 50.98%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 262.11 53.27% 79.02%;
+    --chart-1: 262.11 53.27% 79.02%;
+    --chart-2: 183.6 84.27% 34.9%;
+    --chart-3: 40.11 80% 54.9%;
+    --chart-4: 339.77 74.78% 54.9%;
+    --chart-5: 220.45 70.08% 50.2%;
+    --radius: 0.5rem;
+  }
+
+  [data-theme='dark'] {
+    --background: 0 0% 1.96%;
+    --foreground: 0 0% 90.2%;
+    --muted: 156 9% 8%;
+    --muted-foreground: 0 0% 60%;
+    --popover: 0 0% 6.27%;
+    --popover-foreground: 0 0% 90.2%;
+    --card: 0 0% 9.8%;
+    --card-foreground: 0 0% 90.2%;
+    --border: 0 0% 13.73%;
+    --input: 0 0% 17.65%;
+    --primary: 258.05 71.93% 66.47%;
+    --primary-foreground: 0 0% 90.2%;
+    --secondary: 0 0% 0%;
+    --secondary-foreground: 0 0% 90.2%;
+    --accent: 0 0% 15.69%;
+    --accent-foreground: 0 0% 60%;
+    --destructive: 3.95 72.93% 44.9%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 262.11 53.27% 79.02%;
+    --chart-1: 261.82 54.1% 88.04%;
+    --chart-2: 183.75 45.28% 58.43%;
+    --chart-3: 40.27 76.84% 62.75%;
+    --chart-4: 340 73.06% 62.16%;
+    --chart-5: 220.66 71.03% 58.04%;
+  }
+}
+
+/* Add transition for smooth theme switching */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+/* Ensure the root element has the correct background color */
+:root {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+/* Add transition for specific elements */
+button, a, input, select, textarea {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
 [data-theme='dark'] .breadcrumbs__item--active .breadcrumbs__link {
   color: var(--ifm-font-color-base);
   background: none;

src/pages/tailwind-test.js

@@ -14,10 +14,12 @@ import {
   Info
 } from 'lucide-react';
 import { Button } from '../components/ui/button.jsx';
+import Navigation from '../components/ui/navigation.jsx';
 
 export default function TailwindTest() {
   return (
     <Layout title="Tailwind Test Page">
+      <Navigation />
       <main className="container mx-auto px-4 py-8">
         <h1 className="text-4xl font-bold text-blue-600 mb-8 flex items-center gap-2">
           <Home className="w-8 h-8" />