npm - create-tigra - Versions diffs - 2.4.0 → 2.6.0 - Mend

create-tigra 2.4.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/template/client/src/app/globals.css CHANGED Viewed

@@ -2,6 +2,24 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+/*
+ * ============================================================
+ * THEME PRESETS — All themes loaded, switched via data-theme
+ * ============================================================
+ * warm-orange.css is the default (uses :root / .dark selectors).
+ * Other presets are scoped to [data-theme="<name>"] and activated
+ * by the ThemeSwitcher component setting data-theme on <html>.
+ *
+ * To create a custom theme: copy any preset, scope it under
+ * [data-theme="your-name"] / .dark[data-theme="your-name"],
+ * import it below, and add it to ThemeSwitcher's PALETTES array.
+ * ============================================================
+ */
+@import "../styles/themes/warm-orange.css";
+@import "../styles/themes/electric-indigo.css";
+@import "../styles/themes/ocean-teal.css";
+@import "../styles/themes/rose-pink.css";
 @custom-variant dark (&:is(.dark *));
 @theme inline {
@@ -53,89 +71,6 @@
   --radius-4xl: calc(var(--radius) + 16px);
 }
-:root {
-  --radius: 0.625rem;
-  /* Claude palette: #f4f3ee (cream), #ffffff (white), #b1ada1 (warm gray), #c15f3c (orange) */
-  --background: oklch(0.964 0.007 97.5);
-  --foreground: oklch(0.205 0.015 92);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.205 0.015 92);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.205 0.015 92);
-  --primary: oklch(0.597 0.135 39.9);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.935 0.009 97.5);
-  --secondary-foreground: oklch(0.3 0.015 92);
-  --muted: oklch(0.935 0.009 97.5);
-  --muted-foreground: oklch(0.748 0.017 91.6);
-  --accent: oklch(0.935 0.009 97.5);
-  --accent-foreground: oklch(0.3 0.015 92);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.895 0.012 97.5);
-  --input: oklch(0.895 0.012 97.5);
-  --ring: oklch(0.597 0.135 39.9);
-  --success: oklch(0.52 0.17 155);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.75 0.15 70);
-  --warning-foreground: oklch(0.25 0.015 92);
-  --info: oklch(0.55 0.15 240);
-  --info-foreground: oklch(1 0 0);
-  --chart-1: oklch(0.597 0.135 39.9);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.12 84);
-  --chart-5: oklch(0.748 0.017 91.6);
-  --sidebar: oklch(0.95 0.007 97.5);
-  --sidebar-foreground: oklch(0.205 0.015 92);
-  --sidebar-primary: oklch(0.3 0.015 92);
-  --sidebar-primary-foreground: oklch(0.964 0.007 97.5);
-  --sidebar-accent: oklch(0.935 0.009 97.5);
-  --sidebar-accent-foreground: oklch(0.3 0.015 92);
-  --sidebar-border: oklch(0.895 0.012 97.5);
-  --sidebar-ring: oklch(0.597 0.135 39.9);
-}
-.dark {
-  /* Dark mode: inverted Claude palette with same warm undertone */
-  --background: oklch(0.185 0.012 92);
-  --foreground: oklch(0.93 0.007 97.5);
-  --card: oklch(0.235 0.012 92);
-  --card-foreground: oklch(0.93 0.007 97.5);
-  --popover: oklch(0.235 0.012 92);
-  --popover-foreground: oklch(0.93 0.007 97.5);
-  --primary: oklch(0.66 0.135 39.9);
-  --primary-foreground: oklch(0.185 0.012 92);
-  --secondary: oklch(0.28 0.012 92);
-  --secondary-foreground: oklch(0.93 0.007 97.5);
-  --muted: oklch(0.28 0.012 92);
-  --muted-foreground: oklch(0.65 0.015 91.6);
-  --accent: oklch(0.28 0.012 92);
-  --accent-foreground: oklch(0.93 0.007 97.5);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0.007 97.5 / 12%);
-  --input: oklch(1 0.007 97.5 / 15%);
-  --ring: oklch(0.66 0.135 39.9);
-  --success: oklch(0.6 0.17 155);
-  --success-foreground: oklch(1 0 0);
-  --warning: oklch(0.8 0.15 70);
-  --warning-foreground: oklch(0.25 0.015 92);
-  --info: oklch(0.65 0.15 240);
-  --info-foreground: oklch(1 0 0);
-  --chart-1: oklch(0.66 0.135 39.9);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.12 70);
-  --chart-4: oklch(0.627 0.18 303.9);
-  --chart-5: oklch(0.645 0.17 16.439);
-  --sidebar: oklch(0.235 0.012 92);
-  --sidebar-foreground: oklch(0.93 0.007 97.5);
-  --sidebar-primary: oklch(0.66 0.135 39.9);
-  --sidebar-primary-foreground: oklch(0.93 0.007 97.5);
-  --sidebar-accent: oklch(0.28 0.012 92);
-  --sidebar-accent-foreground: oklch(0.93 0.007 97.5);
-  --sidebar-border: oklch(1 0.007 97.5 / 12%);
-  --sidebar-ring: oklch(0.66 0.135 39.9);
-}
 @layer base {
   * {
     @apply border-border outline-ring/50;

package/template/client/src/app/layout.tsx CHANGED Viewed

@@ -27,7 +27,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>): React.ReactElement {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" className="dark" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
         <Providers>{children}</Providers>
       </body>

package/template/client/src/app/page.tsx CHANGED Viewed

@@ -3,6 +3,8 @@ import type { Metadata } from 'next';
 import Image from 'next/image';
+import { ThemeSwitcher } from '@/components/common/ThemeSwitcher';
 import { APP_NAME } from '@/lib/constants/app.constants';
 export const metadata: Metadata = {
@@ -44,12 +46,17 @@ export default function WelcomePage(): React.ReactElement {
           <span className="font-semibold text-foreground">create-tigra</span>
         </p>
-        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
+        {/* Theme Palette Switcher */}
+        <div className="mt-8 pb-6">
+          <ThemeSwitcher />
+        </div>
+        <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:gap-4">
           <a
             href="https://github.com/BehzodKarimov/create-tigra"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex min-h-11 items-center justify-center rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-all duration-200 active:scale-[0.97] md:hover:brightness-110"
+            className="inline-flex min-h-11 items-center justify-center rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 md:hover:brightness-110"
           >
             Documentation
           </a>
@@ -57,7 +64,7 @@ export default function WelcomePage(): React.ReactElement {
             href="https://github.com/BehzodKarimov/create-tigra/issues"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-secondary px-5 py-2.5 text-sm font-medium text-secondary-foreground transition-all duration-200 active:scale-[0.97] md:hover:bg-accent"
+            className="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-secondary px-5 py-2.5 text-sm font-medium text-secondary-foreground transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 md:hover:bg-accent"
           >
             Report an issue
           </a>

package/template/client/src/app/providers.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ export function Providers({ children }: { children: React.ReactNode }): React.Re
   return (
     <ReduxProvider store={store}>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
           <AuthInitializer>
             {children}
           </AuthInitializer>

package/template/client/src/components/common/ThemeSwitcher.tsx ADDED Viewed

@@ -0,0 +1,112 @@
+'use client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+type ThemeName = 'warm-orange' | 'electric-indigo' | 'ocean-teal' | 'rose-pink';
+interface PaletteOption {
+  name: ThemeName;
+  label: string;
+  previewColor: string;
+}
+const PALETTES: PaletteOption[] = [
+  { name: 'warm-orange', label: 'Warm Orange', previewColor: 'oklch(0.66 0.135 39.9)' },
+  { name: 'electric-indigo', label: 'Electric Indigo', previewColor: 'oklch(0.62 0.22 270)' },
+  { name: 'ocean-teal', label: 'Ocean Teal', previewColor: 'oklch(0.65 0.15 195)' },
+  { name: 'rose-pink', label: 'Rose Pink', previewColor: 'oklch(0.68 0.2 350)' },
+];
+const STORAGE_KEY = 'theme-palette';
+const TRANSITION_DURATION = 400;
+const TRANSITION_CLASS = 'theme-transitioning';
+interface ThemeSwitcherProps {
+  smooth?: boolean;
+}
+export function ThemeSwitcher({ smooth = true }: ThemeSwitcherProps): React.ReactElement {
+  const [active, setActive] = useState<ThemeName>('warm-orange');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY) as ThemeName | null;
+    if (stored && PALETTES.some((p) => p.name === stored)) {
+      setActive(stored);
+      if (stored !== 'warm-orange') {
+        document.documentElement.setAttribute('data-theme', stored);
+      }
+    }
+  }, []);
+  const handleSelect = useCallback((palette: PaletteOption): void => {
+    setActive(palette.name);
+    const root = document.documentElement;
+    if (smooth) {
+      root.classList.add(TRANSITION_CLASS);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        root.classList.remove(TRANSITION_CLASS);
+      }, TRANSITION_DURATION);
+    }
+    if (palette.name === 'warm-orange') {
+      root.removeAttribute('data-theme');
+    } else {
+      root.setAttribute('data-theme', palette.name);
+    }
+    localStorage.setItem(STORAGE_KEY, palette.name);
+  }, [smooth]);
+  useEffect(() => {
+    return (): void => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      document.documentElement.classList.remove(TRANSITION_CLASS);
+    };
+  }, []);
+  return (
+    <>
+      {smooth && (
+        <style>{`
+          .theme-transitioning,
+          .theme-transitioning *,
+          .theme-transitioning *::before,
+          .theme-transitioning *::after {
+            transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
+          }
+        `}</style>
+      )}
+      <div className="flex flex-col items-center gap-3">
+        <p className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
+          Theme Palette
+        </p>
+        <div className="flex gap-2">
+          {PALETTES.map((palette) => (
+            <button
+              key={palette.name}
+              type="button"
+              onClick={() => handleSelect(palette)}
+              aria-label={`Switch to ${palette.label} theme`}
+              className={cn(
+                'flex min-h-11 min-w-11 items-center justify-center rounded-xl border-2 p-2.5 transition-all duration-200 active:scale-[0.95]',
+                active === palette.name
+                  ? 'border-foreground/40 bg-muted shadow-md'
+                  : 'border-transparent bg-muted/50 md:hover:bg-muted md:hover:border-border',
+              )}
+            >
+              <div
+                className="h-5 w-5 rounded-full shadow-sm ring-1 ring-foreground/10"
+                style={{ backgroundColor: palette.previewColor }}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

package/template/client/src/components/layout/Header.tsx CHANGED Viewed

@@ -52,7 +52,7 @@ export const Header = (): React.ReactElement => {
       <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6 lg:px-8">
         <Link
           href={ROUTES.HOME}
-          className="text-xl font-bold tracking-tight transition-colors duration-150 hover:text-primary"
+          className="text-xl font-bold tracking-tight transition-colors duration-150 active:opacity-70 md:hover:text-primary"
         >
           {APP_NAME}
         </Link>

package/template/client/src/features/auth/components/AuthInitializer.tsx CHANGED Viewed

@@ -10,12 +10,16 @@ import { ROUTES } from '@/lib/constants/routes';
 import { authService } from '../services/auth.service';
 import { setUser, setInitialized } from '../store/authSlice';
-const AUTH_PAGES: string[] = [ROUTES.LOGIN, ROUTES.REGISTER];
+const PROTECTED_PATHS: string[] = [ROUTES.DASHBOARD, ROUTES.PROFILE, '/admin'];
 interface AuthInitializerProps {
   children: React.ReactNode;
 }
+function isProtectedPath(pathname: string): boolean {
+  return PROTECTED_PATHS.some((path) => pathname.startsWith(path));
+}
 export const AuthInitializer = ({ children }: AuthInitializerProps): React.ReactElement => {
   const dispatch = useAppDispatch();
   const pathname = usePathname();
@@ -23,10 +27,12 @@ export const AuthInitializer = ({ children }: AuthInitializerProps): React.React
   const { isAuthenticated, isLoggingOut } = useAppSelector((state) => state.auth);
   useEffect(() => {
-    if (AUTH_PAGES.includes(pathname)) {
+    // On public pages, skip auth hydration — just mark as initialized
+    if (!isProtectedPath(pathname)) {
       dispatch(setInitialized());
       return;
     }
     if (isAuthenticated || isLoggingOut) return;
     let cancelled = false;

package/template/client/src/features/auth/components/LoginForm.tsx CHANGED Viewed

@@ -97,7 +97,7 @@ export const LoginForm = (): React.ReactElement => {
         Don&apos;t have an account?{' '}
         <Link
           href={ROUTES.REGISTER}
-          className="font-medium text-primary transition-colors duration-150 hover:text-primary/80"
+          className="font-medium text-primary transition-colors duration-150 active:opacity-70 md:hover:text-primary/80"
         >
           Create account
         </Link>

package/template/client/src/features/auth/components/RegisterForm.tsx CHANGED Viewed

@@ -168,7 +168,7 @@ export const RegisterForm = (): React.ReactElement => {
         Already have an account?{' '}
         <Link
           href={ROUTES.LOGIN}
-          className="font-medium text-primary transition-colors duration-150 hover:text-primary/80"
+          className="font-medium text-primary transition-colors duration-150 active:opacity-70 md:hover:text-primary/80"
         >
           Sign in
         </Link>

package/template/client/src/features/auth/services/auth.service.ts CHANGED Viewed

@@ -36,10 +36,6 @@ class AuthService {
     return response.data.data;
   }
-  async verifyEmail(token: string): Promise<void> {
-    await apiClient.post(API_ENDPOINTS.AUTH.VERIFY_EMAIL, { token });
-  }
   async requestPasswordReset(email: string): Promise<void> {
     await apiClient.post(API_ENDPOINTS.AUTH.REQUEST_PASSWORD_RESET, { email });
   }

package/template/client/src/lib/api/axios.config.ts CHANGED Viewed

@@ -45,7 +45,7 @@ apiClient.interceptors.response.use(
     // Don't retry auth endpoints that don't use tokens —
     // a 401 here means wrong credentials, not an expired token.
-    const noRetryEndpoints = [
+    const noRetryEndpoints: string[] = [
       API_ENDPOINTS.AUTH.LOGIN,
       API_ENDPOINTS.AUTH.REGISTER,
       API_ENDPOINTS.AUTH.REFRESH,

package/template/client/src/lib/constants/api-endpoints.ts CHANGED Viewed

@@ -5,8 +5,6 @@ export const API_ENDPOINTS = {
     LOGOUT: '/auth/logout',
     REFRESH: '/auth/refresh',
     ME: '/auth/me',
-    VERIFY_EMAIL: '/auth/verify-email',
-    RESEND_VERIFICATION: '/auth/resend-verification',
     REQUEST_PASSWORD_RESET: '/auth/request-password-reset',
     RESET_PASSWORD: '/auth/reset-password',
   },

package/template/client/src/styles/themes/electric-indigo.css ADDED Viewed

@@ -0,0 +1,90 @@
+/*
+ * Theme: Electric Indigo
+ * Accent: Deep vibrant indigo-violet
+ * Vibe: Modern, bold, tech-forward — inspired by Linear, Figma
+ *
+ * Activated via data-theme="electric-indigo" attribute on <html>
+ */
+[data-theme="electric-indigo"] {
+  --radius: 0.625rem;
+  /* Cool gray background with electric indigo accent */
+  --background: oklch(0.98 0.002 265);
+  --foreground: oklch(0.17 0.02 265);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.17 0.02 265);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.17 0.02 265);
+  --primary: oklch(0.5 0.22 270);
+  --primary-foreground: oklch(0.98 0.002 265);
+  --secondary: oklch(0.95 0.005 265);
+  --secondary-foreground: oklch(0.28 0.02 265);
+  --muted: oklch(0.95 0.005 265);
+  --muted-foreground: oklch(0.55 0.015 265);
+  --accent: oklch(0.95 0.005 265);
+  --accent-foreground: oklch(0.28 0.02 265);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.91 0.005 265);
+  --input: oklch(0.91 0.005 265);
+  --ring: oklch(0.5 0.22 270);
+  --success: oklch(0.52 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.55 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.5 0.22 270);
+  --chart-2: oklch(0.6 0.15 190);
+  --chart-3: oklch(0.65 0.18 330);
+  --chart-4: oklch(0.7 0.15 85);
+  --chart-5: oklch(0.55 0.15 30);
+  --sidebar: oklch(0.97 0.003 265);
+  --sidebar-foreground: oklch(0.17 0.02 265);
+  --sidebar-primary: oklch(0.28 0.02 265);
+  --sidebar-primary-foreground: oklch(0.98 0.002 265);
+  --sidebar-accent: oklch(0.95 0.005 265);
+  --sidebar-accent-foreground: oklch(0.28 0.02 265);
+  --sidebar-border: oklch(0.91 0.005 265);
+  --sidebar-ring: oklch(0.5 0.22 270);
+}
+.dark[data-theme="electric-indigo"] {
+  /* Dark mode: deep cool gray with brighter indigo */
+  --background: oklch(0.16 0.015 265);
+  --foreground: oklch(0.93 0.005 265);
+  --card: oklch(0.21 0.015 265);
+  --card-foreground: oklch(0.93 0.005 265);
+  --popover: oklch(0.21 0.015 265);
+  --popover-foreground: oklch(0.93 0.005 265);
+  --primary: oklch(0.62 0.22 270);
+  --primary-foreground: oklch(0.16 0.015 265);
+  --secondary: oklch(0.26 0.015 265);
+  --secondary-foreground: oklch(0.93 0.005 265);
+  --muted: oklch(0.26 0.015 265);
+  --muted-foreground: oklch(0.6 0.015 265);
+  --accent: oklch(0.26 0.015 265);
+  --accent-foreground: oklch(0.93 0.005 265);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0.005 265 / 12%);
+  --input: oklch(1 0.005 265 / 15%);
+  --ring: oklch(0.62 0.22 270);
+  --success: oklch(0.6 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.8 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.65 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.62 0.22 270);
+  --chart-2: oklch(0.7 0.15 190);
+  --chart-3: oklch(0.75 0.18 330);
+  --chart-4: oklch(0.8 0.15 85);
+  --chart-5: oklch(0.65 0.15 30);
+  --sidebar: oklch(0.21 0.015 265);
+  --sidebar-foreground: oklch(0.93 0.005 265);
+  --sidebar-primary: oklch(0.62 0.22 270);
+  --sidebar-primary-foreground: oklch(0.93 0.005 265);
+  --sidebar-accent: oklch(0.26 0.015 265);
+  --sidebar-accent-foreground: oklch(0.93 0.005 265);
+  --sidebar-border: oklch(1 0.005 265 / 12%);
+  --sidebar-ring: oklch(0.62 0.22 270);
+}

package/template/client/src/styles/themes/ocean-teal.css ADDED Viewed

@@ -0,0 +1,90 @@
+/*
+ * Theme: Ocean Teal
+ * Accent: Deep teal-cyan
+ * Vibe: Calm, professional, trustworthy — inspired by Stripe, Vercel
+ *
+ * Activated via data-theme="ocean-teal" attribute on <html>
+ */
+[data-theme="ocean-teal"] {
+  --radius: 0.625rem;
+  /* Cool neutral background with ocean teal accent */
+  --background: oklch(0.98 0.003 200);
+  --foreground: oklch(0.18 0.015 210);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.015 210);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.015 210);
+  --primary: oklch(0.55 0.15 195);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.006 200);
+  --secondary-foreground: oklch(0.3 0.015 210);
+  --muted: oklch(0.95 0.006 200);
+  --muted-foreground: oklch(0.55 0.012 210);
+  --accent: oklch(0.95 0.006 200);
+  --accent-foreground: oklch(0.3 0.015 210);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.91 0.006 200);
+  --input: oklch(0.91 0.006 200);
+  --ring: oklch(0.55 0.15 195);
+  --success: oklch(0.52 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.55 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.55 0.15 195);
+  --chart-2: oklch(0.6 0.12 160);
+  --chart-3: oklch(0.5 0.1 250);
+  --chart-4: oklch(0.7 0.12 95);
+  --chart-5: oklch(0.6 0.15 320);
+  --sidebar: oklch(0.97 0.004 200);
+  --sidebar-foreground: oklch(0.18 0.015 210);
+  --sidebar-primary: oklch(0.3 0.015 210);
+  --sidebar-primary-foreground: oklch(0.98 0.003 200);
+  --sidebar-accent: oklch(0.95 0.006 200);
+  --sidebar-accent-foreground: oklch(0.3 0.015 210);
+  --sidebar-border: oklch(0.91 0.006 200);
+  --sidebar-ring: oklch(0.55 0.15 195);
+}
+.dark[data-theme="ocean-teal"] {
+  /* Dark mode: deep blue-gray with brighter teal */
+  --background: oklch(0.16 0.012 210);
+  --foreground: oklch(0.93 0.006 200);
+  --card: oklch(0.21 0.012 210);
+  --card-foreground: oklch(0.93 0.006 200);
+  --popover: oklch(0.21 0.012 210);
+  --popover-foreground: oklch(0.93 0.006 200);
+  --primary: oklch(0.65 0.15 195);
+  --primary-foreground: oklch(0.16 0.012 210);
+  --secondary: oklch(0.26 0.012 210);
+  --secondary-foreground: oklch(0.93 0.006 200);
+  --muted: oklch(0.26 0.012 210);
+  --muted-foreground: oklch(0.6 0.012 210);
+  --accent: oklch(0.26 0.012 210);
+  --accent-foreground: oklch(0.93 0.006 200);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0.006 200 / 12%);
+  --input: oklch(1 0.006 200 / 15%);
+  --ring: oklch(0.65 0.15 195);
+  --success: oklch(0.6 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.8 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.65 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.65 0.15 195);
+  --chart-2: oklch(0.7 0.12 160);
+  --chart-3: oklch(0.6 0.1 250);
+  --chart-4: oklch(0.8 0.12 95);
+  --chart-5: oklch(0.7 0.15 320);
+  --sidebar: oklch(0.21 0.012 210);
+  --sidebar-foreground: oklch(0.93 0.006 200);
+  --sidebar-primary: oklch(0.65 0.15 195);
+  --sidebar-primary-foreground: oklch(0.93 0.006 200);
+  --sidebar-accent: oklch(0.26 0.012 210);
+  --sidebar-accent-foreground: oklch(0.93 0.006 200);
+  --sidebar-border: oklch(1 0.006 200 / 12%);
+  --sidebar-ring: oklch(0.65 0.15 195);
+}

package/template/client/src/styles/themes/rose-pink.css ADDED Viewed

@@ -0,0 +1,90 @@
+/*
+ * Theme: Rose Pink
+ * Accent: Soft rose-magenta
+ * Vibe: Elegant, creative, premium — inspired by Dribbble, Notion
+ *
+ * Activated via data-theme="rose-pink" attribute on <html>
+ */
+[data-theme="rose-pink"] {
+  --radius: 0.625rem;
+  /* Warm neutral background with rose-pink accent */
+  --background: oklch(0.98 0.004 350);
+  --foreground: oklch(0.18 0.015 340);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.18 0.015 340);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.18 0.015 340);
+  --primary: oklch(0.58 0.2 350);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.006 350);
+  --secondary-foreground: oklch(0.3 0.015 340);
+  --muted: oklch(0.95 0.006 350);
+  --muted-foreground: oklch(0.55 0.012 340);
+  --accent: oklch(0.95 0.006 350);
+  --accent-foreground: oklch(0.3 0.015 340);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.91 0.006 350);
+  --input: oklch(0.91 0.006 350);
+  --ring: oklch(0.58 0.2 350);
+  --success: oklch(0.52 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.75 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.55 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.58 0.2 350);
+  --chart-2: oklch(0.55 0.15 270);
+  --chart-3: oklch(0.6 0.12 195);
+  --chart-4: oklch(0.7 0.13 85);
+  --chart-5: oklch(0.5 0.1 30);
+  --sidebar: oklch(0.97 0.004 350);
+  --sidebar-foreground: oklch(0.18 0.015 340);
+  --sidebar-primary: oklch(0.3 0.015 340);
+  --sidebar-primary-foreground: oklch(0.98 0.004 350);
+  --sidebar-accent: oklch(0.95 0.006 350);
+  --sidebar-accent-foreground: oklch(0.3 0.015 340);
+  --sidebar-border: oklch(0.91 0.006 350);
+  --sidebar-ring: oklch(0.58 0.2 350);
+}
+.dark[data-theme="rose-pink"] {
+  /* Dark mode: deep warm gray with brighter rose */
+  --background: oklch(0.16 0.012 340);
+  --foreground: oklch(0.93 0.005 350);
+  --card: oklch(0.21 0.012 340);
+  --card-foreground: oklch(0.93 0.005 350);
+  --popover: oklch(0.21 0.012 340);
+  --popover-foreground: oklch(0.93 0.005 350);
+  --primary: oklch(0.68 0.2 350);
+  --primary-foreground: oklch(0.16 0.012 340);
+  --secondary: oklch(0.26 0.012 340);
+  --secondary-foreground: oklch(0.93 0.005 350);
+  --muted: oklch(0.26 0.012 340);
+  --muted-foreground: oklch(0.6 0.012 340);
+  --accent: oklch(0.26 0.012 340);
+  --accent-foreground: oklch(0.93 0.005 350);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0.005 350 / 12%);
+  --input: oklch(1 0.005 350 / 15%);
+  --ring: oklch(0.68 0.2 350);
+  --success: oklch(0.6 0.17 155);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.8 0.15 70);
+  --warning-foreground: oklch(0.25 0.015 70);
+  --info: oklch(0.65 0.15 240);
+  --info-foreground: oklch(1 0 0);
+  --chart-1: oklch(0.68 0.2 350);
+  --chart-2: oklch(0.65 0.15 270);
+  --chart-3: oklch(0.7 0.12 195);
+  --chart-4: oklch(0.8 0.13 85);
+  --chart-5: oklch(0.6 0.1 30);
+  --sidebar: oklch(0.21 0.012 340);
+  --sidebar-foreground: oklch(0.93 0.005 350);
+  --sidebar-primary: oklch(0.68 0.2 350);
+  --sidebar-primary-foreground: oklch(0.93 0.005 350);
+  --sidebar-accent: oklch(0.26 0.012 340);
+  --sidebar-accent-foreground: oklch(0.93 0.005 350);
+  --sidebar-border: oklch(1 0.005 350 / 12%);
+  --sidebar-ring: oklch(0.68 0.2 350);
+}