@djangocfg/layouts 2.1.256 → 2.1.259

package/src/theme/themeStylePresets.ts

@@ -0,0 +1,202 @@
+/**
+ * Curated presets for `BaseApp` `theme.style` — small deltas over `ui-core` globals.
+ * For full token matrices (shadows, type scale, …) use the playground Theme Configurator → export CSS.
+ */
+
+import type { ThemeCssVarMap, ThemeStylePresetId } from './themeStyle.types';
+
+/** Stable order for UI lists / docs (every `ThemeStylePresetId` appears once). */
+export const THEME_STYLE_PRESET_ORDER = [
+  'default',
+  'django-cfg',
+  'ios',
+  'soft',
+  'dense',
+  'high-contrast',
+] as const satisfies readonly ThemeStylePresetId[];
+
+export const THEME_STYLE_PRESETS: Record<
+  ThemeStylePresetId,
+  { light: ThemeCssVarMap; dark: ThemeCssVarMap }
+> = {
+  /** No extra rules — same as globals only (`vars` may still apply). */
+  default: {
+    light: {},
+    dark: {},
+  },
+
+  /**
+   * DjangoCFG brand: deeper cyan primary on light, bright cyan + dark label on dark
+   * (aligned with current `ui-core` theme files when globals are loaded).
+   */
+  'django-cfg': {
+    light: {
+      primary: '192 90% 35%',
+      'primary-foreground': '0 0% 100%',
+      ring: '192 90% 35%',
+      'sidebar-primary': '192 90% 35%',
+      'sidebar-ring': '192 90% 35%',
+      'chart-1': '192 90% 35%',
+    },
+    dark: {
+      primary: '189 100% 50%',
+      'primary-foreground': '0 0% 9%',
+      ring: '189 100% 50%',
+      'sidebar-primary': '189 100% 50%',
+      'sidebar-primary-foreground': '0 0% 9%',
+      'sidebar-ring': '189 100% 50%',
+      'chart-1': '189 100% 50%',
+    },
+  },
+
+  /**
+   * Apple-style system UI: #007AFF primary, very light chrome, ~12pt corners, hairline separators.
+   * (Inspired by `apps/playground` `macos` preset, mapped to semantic `--*` vars only.)
+   */
+  ios: {
+    light: {
+      background: '0 0% 98%',
+      foreground: '220 9% 12%',
+      card: '0 0% 100%',
+      'card-foreground': '220 9% 12%',
+      popover: '0 0% 100%',
+      'popover-foreground': '220 9% 12%',
+      primary: '211 100% 50%',
+      'primary-foreground': '0 0% 100%',
+      secondary: '220 9% 92%',
+      'secondary-foreground': '220 9% 12%',
+      muted: '220 9% 94%',
+      'muted-foreground': '220 9% 40%',
+      accent: '220 9% 94%',
+      'accent-foreground': '220 9% 12%',
+      destructive: '0 100% 58%',
+      'destructive-foreground': '0 0% 100%',
+      border: '220 9% 88%',
+      input: '220 9% 88%',
+      ring: '211 100% 50%',
+      radius: '0.75rem',
+      'sidebar-background': '0 0% 99%',
+      'sidebar-foreground': '220 9% 12%',
+      'sidebar-primary': '211 100% 50%',
+      'sidebar-primary-foreground': '0 0% 100%',
+      'sidebar-accent': '220 9% 94%',
+      'sidebar-accent-foreground': '220 9% 12%',
+      'sidebar-border': '220 9% 88%',
+      'sidebar-ring': '211 100% 50%',
+      'chart-1': '211 100% 50%',
+      'chart-2': '145 63% 42%',
+      'chart-3': '262 83% 58%',
+      'chart-4': '35 100% 50%',
+      'chart-5': '346 77% 50%',
+    },
+    dark: {
+      background: '240 6% 10%',
+      foreground: '0 0% 96%',
+      card: '240 6% 14%',
+      'card-foreground': '0 0% 96%',
+      popover: '240 6% 16%',
+      'popover-foreground': '0 0% 96%',
+      primary: '211 100% 55%',
+      'primary-foreground': '0 0% 100%',
+      secondary: '240 5% 26%',
+      'secondary-foreground': '0 0% 96%',
+      muted: '240 5% 16%',
+      'muted-foreground': '240 5% 64%',
+      accent: '240 5% 18%',
+      'accent-foreground': '0 0% 96%',
+      destructive: '0 100% 67%',
+      'destructive-foreground': '0 0% 100%',
+      border: '240 5% 22%',
+      input: '240 5% 22%',
+      ring: '211 100% 55%',
+      radius: '0.75rem',
+      'sidebar-background': '240 6% 8%',
+      'sidebar-foreground': '0 0% 96%',
+      'sidebar-primary': '211 100% 55%',
+      'sidebar-primary-foreground': '0 0% 100%',
+      'sidebar-accent': '240 5% 16%',
+      'sidebar-accent-foreground': '0 0% 96%',
+      'sidebar-border': '240 5% 22%',
+      'sidebar-ring': '211 100% 55%',
+      'chart-1': '211 100% 55%',
+      'chart-2': '145 65% 52%',
+      'chart-3': '262 83% 65%',
+      'chart-4': '35 100% 58%',
+      'chart-5': '346 77% 58%',
+    },
+  },
+
+  /** Soft, friendly surfaces: larger radius, low-contrast borders (product / marketing). */
+  soft: {
+    light: {
+      background: '0 0% 98%',
+      foreground: '240 6% 10%',
+      card: '0 0% 100%',
+      'card-foreground': '240 6% 10%',
+      muted: '240 5% 96%',
+      'muted-foreground': '240 4% 46%',
+      accent: '240 5% 94%',
+      'accent-foreground': '240 6% 10%',
+      border: '240 5% 91%',
+      input: '240 5% 91%',
+      radius: '1rem',
+      'sidebar-accent': '240 5% 94%',
+      'sidebar-border': '240 5% 91%',
+    },
+    dark: {
+      background: '240 6% 8%',
+      foreground: '0 0% 96%',
+      card: '240 5% 12%',
+      'card-foreground': '0 0% 96%',
+      muted: '240 4% 16%',
+      'muted-foreground': '240 5% 64%',
+      accent: '240 5% 16%',
+      'accent-foreground': '0 0% 96%',
+      border: '240 5% 20%',
+      input: '240 5% 20%',
+      radius: '1rem',
+      'sidebar-background': '240 6% 6%',
+      'sidebar-accent': '240 5% 14%',
+      'sidebar-border': '240 5% 20%',
+    },
+  },
+
+  /** Compact controls: small radius, stronger borders (tables, admin, IDE-like). */
+  dense: {
+    light: {
+      radius: '0.25rem',
+      border: '0 0% 82%',
+      input: '0 0% 82%',
+      muted: '0 0% 94%',
+      card: '0 0% 100%',
+      accent: '0 0% 93%',
+    },
+    dark: {
+      radius: '0.25rem',
+      border: '0 0% 24%',
+      input: '0 0% 24%',
+      muted: '0 0% 12%',
+      card: '0 0% 10%',
+      accent: '0 0% 14%',
+    },
+  },
+
+  /** Stronger borders and text for glare / accessibility. */
+  'high-contrast': {
+    light: {
+      border: '0 0% 72%',
+      input: '0 0% 72%',
+      'muted-foreground': '0 0% 32%',
+      foreground: '0 0% 6%',
+      ring: '0 0% 20%',
+    },
+    dark: {
+      border: '0 0% 38%',
+      input: '0 0% 38%',
+      'muted-foreground': '0 0% 78%',
+      foreground: '0 0% 100%',
+      background: '0 0% 6%',
+      ring: '0 0% 85%',
+    },
+  },
+};

package/src/layouts/PublicLayout/hooks/useFloatingPanel.ts

@@ -1,61 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-interface UseFloatingPanelOptions {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function useFloatingPanel({
-  isOpen,
-  onClose,
-}: UseFloatingPanelOptions) {
-  const [isRendered, setIsRendered] = useState(isOpen);
-  const [isActive, setIsActive] = useState(isOpen);
-  const rafRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    if (isOpen) {
-      setIsRendered(true);
-      if (rafRef.current) window.cancelAnimationFrame(rafRef.current);
-      rafRef.current = window.requestAnimationFrame(() => {
-        setIsActive(true);
-      });
-      return;
-    }
-
-    if (!isRendered) return;
-    setIsActive(false);
-  }, [isOpen, isRendered]);
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current) window.cancelAnimationFrame(rafRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isOpen, onClose]);
-
-  const onTransitionEnd = (event: React.TransitionEvent<HTMLElement>) => {
-    if (event.target !== event.currentTarget) return;
-    if (event.propertyName !== 'transform') return;
-    if (!isOpen && !isActive) {
-      setIsRendered(false);
-    }
-  };
-
-  return {
-    isRendered,
-    isActive,
-    onTransitionEnd,
-  };
-}
-