updated side navbar

Author: ariflogs

app/global.css

@@ -4,8 +4,18 @@
 
 :root {
   --muted: #606067;
-  --background: "#fff";
-  --foreground: "#000";
+  --background: #fff;
+  --foreground: #000;
+  --primary-50: #fffef0;
+  --primary-100: #fffac2;
+  --primary-200: #fff299;
+  --primary-300: #ffe766;
+  --primary-400: #ffdb33;
+  --primary-500: #ffcc00;
+  --primary-600: #ffb700;
+  --primary-700: #ff9f00;
+  --primary-800: #e68a00;
+  --primary-900: #b36b00;
 }
 
 .text-outlined {

config/navigation.ts

@@ -12,7 +12,7 @@ export const navConfig: INavigationConfig = {
   sideNavItems: [
     {
       title: "Getting Started",
-      children: [{ title: "Introduction", href: "/docs" }],
+      children: [{ title: "Introduction", href: "/docs", tag: "Updated" }],
     },
     {
       title: "Components",
@@ -28,8 +28,6 @@ export const navConfig: INavigationConfig = {
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Menu", href: `${componentsRoute}/menu` },
         { title: "Radio", href: `${componentsRoute}/radio` },
-        { title: "Radio", href: `${componentsRoute}/radio` },
-        { title: "Radio", href: `${componentsRoute}/radio` },
         { title: "Select", href: `${componentsRoute}/select`, tag: "New" },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },

content/docs/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Getting Started
 description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
-lastUpdated: 08 Oct, 2024
+lastUpdated: 1 Mar, 2024
 ---
 
 ### 1. Add the fonts
@@ -32,40 +32,78 @@ Save the fonts in `global.css`:
 
 <br />
 
-### 2. Add the theme to your tailwind.config.js file.
+### 2. Add your theme.
+
+Save your theme as CSS variables in `global.css`:
+
+```css
+:root {
+  --muted: #606067;
+  --background: #fff;
+  --foreground: #000;
+  --primary-50: #fffef0;
+  --primary-100: #fffac2;
+  --primary-200: #fff299;
+  --primary-300: #ffe766;
+  --primary-400: #ffdb33;
+  --primary-500: #ffcc00;
+  --primary-600: #ffb700;
+  --primary-700: #ff9f00;
+  --primary-800: #e68a00;
+  --primary-900: #b36b00;
+}
+```
+
+<br />
+
+Connect your theme to Tailwind in `tailwind.config.ts`:
 
 ```ts
 import type { Config } from "tailwindcss";
 
-const config = {
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./packages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
   theme: {
     extend: {
+      textColor: {
+        muted: "var(--muted)",
+      },
       fontFamily: {
         head: ["var(--font-head)"],
         sans: ["var(--font-sans)"],
       },
       boxShadow: {
         xs: "1px 1px 0 0 #000",
+        sm: "2px 2px 0 0 #000",
         md: "3px 3px 0 0 #000",
-        "3xl": "10px 10px 0 0 #000",
       },
       colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
         primary: {
-          50: "#FFFEF0",
-          100: "#FFFAC2",
-          200: "#FFF299",
-          300: "#FFE766",
-          400: "#FFDB33",
-          500: "#FFCC00",
-          600: "#FFB700",
-          700: "#FF9F00",
-          800: "#E68A00",
-          900: "#B36B00",
+          50: "var(--primary-50)",
+          100: "var(--primary-100)",
+          200: "var(--primary-200)",
+          300: "var(--primary-300)",
+          400: "var(--primary-400)",
+          500: "var(--primary-500)",
+          600: "var(--primary-600)",
+          700: "var(--primary-700)",
+          800: "var(--primary-800)",
+          900: "var(--primary-900)",
         },
       },
     },
   },
+  plugins: [require("tailwindcss-animate")],
 };
+
 export default config;
 ```
 

tailwind.config.ts

@@ -26,16 +26,16 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
         primary: {
-          50: "#FFFEF0",
-          100: "#FFFAC2",
-          200: "#FFF299",
-          300: "#FFE766",
-          400: "#FFDB33",
-          500: "#FFCC00",
-          600: "#FFB700",
-          700: "#FF9F00",
-          800: "#E68A00",
-          900: "#B36B00",
+          50: "var(--primary-50)",
+          100: "var(--primary-100)",
+          200: "var(--primary-200)",
+          300: "var(--primary-300)",
+          400: "var(--primary-400)",
+          500: "var(--primary-500)",
+          600: "var(--primary-600)",
+          700: "var(--primary-700)",
+          800: "var(--primary-800)",
+          900: "var(--primary-900)",
         },
       },
     },