@innertia-solutions/innertia-nuxt 0.1.1

package/composables/useTimeAgo.js

@@ -0,0 +1,37 @@
+import { ref, isRef, onMounted, onBeforeUnmount } from 'vue'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/es'
+
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+dayjs.locale('es')
+
+/**
+ * Returns a reactive `timeAgo()` that updates every 60s.
+ * @param {string | Ref<string>} utcDatetime - UTC datetime string or a ref to one
+ */
+export const useTimeAgo = (utcDatetime) => {
+    const now = ref(new Date())
+    let interval
+
+    onMounted(() => {
+        interval = setInterval(() => {
+            now.value = new Date()
+        }, 60000)
+    })
+
+    onBeforeUnmount(() => {
+        clearInterval(interval)
+    })
+
+    const timeAgo = () => {
+        const value = isRef(utcDatetime) ? utcDatetime.value : utcDatetime
+        if (!value) return ''
+        // Force UTC parse then compare to local now
+        return dayjs.utc(value).local().from(now.value)
+    }
+
+    return { timeAgo }
+}

package/composables/useToast.js

@@ -0,0 +1,69 @@
+// app/composables/useToast.js
+import { useToastStore } from '../stores/toast'
+
+export function useToast() {
+    const toast = useToastStore()
+
+    return {
+        // Métodos originales
+        success: toast.success,
+        info: toast.info,
+        error: toast.error,
+        show: toast.show,
+        remove: toast.remove,
+        update: toast.update,
+        updateProgress: toast.updateProgress,
+        completeProcess: toast.completeProcess,
+
+        // Métodos rápidos para diferentes tipos de toast
+        alert: {
+            success: (message, config = {}) => toast.success({
+                type: 'alert',
+                message,
+                duration: 3000,
+                ...config
+            }),
+
+            error: (message, config = {}) => toast.error({
+                type: 'alert',
+                message,
+                duration: 5000,
+                ...config
+            }),
+
+            warning: (message, config = {}) => toast.show({
+                type: 'alert',
+                severity: 'warning',
+                icon: 'ti ti-alert-triangle',
+                title: 'Warning',
+                message,
+                duration: 4000,
+                ...config
+            }),
+
+            info: (message, config = {}) => toast.info({
+                type: 'alert',
+                message,
+                duration: 3000,
+                ...config
+            })
+        },
+
+        notification: (title, message, config = {}) => toast.show({
+            type: 'notification',
+            title,
+            message,
+            duration: 0, // Las notificaciones no se auto-dismiss por defecto
+            ...config
+        }),
+
+        process: (title, config = {}) => toast.show({
+            type: 'process',
+            title,
+            progress: 0,
+            progressLabel: 'Iniciando...',
+            duration: 0, // Los procesos no se auto-dismiss
+            ...config
+        })
+    }
+}

package/composables/useUserRealtime.js

@@ -0,0 +1,17 @@
+export function useUserRealtime() {
+  const authStore = useAuthStore()
+  const notificationsStore = useNotificationsStore()
+
+  function start() {
+    const userId = authStore.user?.id
+    if (!userId) return
+    const { subscribe } = useRealtime()
+    subscribe(`private-user.${userId}`, {
+      'NotificationSent': (payload) => {
+        notificationsStore.addNotification(payload)
+      }
+    })
+  }
+
+  return { start }
+}

package/composables/useUsers.js

@@ -0,0 +1,111 @@
+export function useUsers() {
+  const api = useApi()
+  const queryClient = useQueryClient()
+
+  // ─── Queries ──────────────────────────────────────────────────────────────
+
+  const list = (params = {}) => useQuery({
+    queryKey: computed(() => ['users', toValue(params)]),
+    queryFn: () => api.post('backoffice/users', toValue(params)),
+  })
+
+  const detail = (id) => useQuery({
+    queryKey: computed(() => ['users', toValue(id)]),
+    queryFn: () => api.get(`backoffice/users/${toValue(id)}`),
+    enabled: computed(() => !!toValue(id)),
+  })
+
+  const roles = (userId) => useQuery({
+    queryKey: computed(() => ['users', toValue(userId), 'roles']),
+    queryFn: () => api.get(`backoffice/users/${toValue(userId)}/roles`),
+    enabled: computed(() => !!toValue(userId)),
+  })
+
+  const apps = (userId) => useQuery({
+    queryKey: computed(() => ['users', toValue(userId), 'apps']),
+    queryFn: () => api.get(`backoffice/users/${toValue(userId)}/apps`),
+    enabled: computed(() => !!toValue(userId)),
+  })
+
+  const sessions = (userId) => useQuery({
+    queryKey: computed(() => ['users', toValue(userId), 'sessions']),
+    queryFn: () => api.get(`backoffice/users/${toValue(userId)}/sessions`),
+    enabled: computed(() => !!toValue(userId)),
+  })
+
+  const activityLog = (userId, params = {}) => useQuery({
+    queryKey: computed(() => ['users', toValue(userId), 'activity', toValue(params)]),
+    queryFn: () => api.get(`backoffice/users/${toValue(userId)}/activity`, toValue(params)),
+    enabled: computed(() => !!toValue(userId)),
+  })
+
+  // ─── Mutations ────────────────────────────────────────────────────────────
+
+  const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: ['users'] })
+
+  const create = () => useMutation({
+    mutationFn: (data) => api.post('backoffice/users', data),
+    onSuccess: invalidateUsers,
+  })
+
+  const update = () => useMutation({
+    mutationFn: ({ id, ...data }) => api.put(`backoffice/users/${id}`, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ['users', id] })
+      invalidateUsers()
+    },
+  })
+
+  const remove = () => useMutation({
+    mutationFn: (id) => api.delete(`backoffice/users/${id}`),
+    onSuccess: invalidateUsers,
+  })
+
+  const reactivate = () => useMutation({
+    mutationFn: (id) => api.post(`backoffice/users/${id}/reactivate`),
+    onSuccess: invalidateUsers,
+  })
+
+  const resetPassword = () => useMutation({
+    mutationFn: ({ id, ...data }) => api.post(`backoffice/users/${id}/reset-password`, data),
+  })
+
+  const assignRole = () => useMutation({
+    mutationFn: ({ userId, role }) => api.post(`backoffice/users/${userId}/roles`, { role }),
+    onSuccess: (_, { userId }) =>
+      queryClient.invalidateQueries({ queryKey: ['users', userId, 'roles'] }),
+  })
+
+  const removeRole = () => useMutation({
+    mutationFn: ({ userId, role }) => api.delete(`backoffice/users/${userId}/roles/${role}`),
+    onSuccess: (_, { userId }) =>
+      queryClient.invalidateQueries({ queryKey: ['users', userId, 'roles'] }),
+  })
+
+  const syncApps = () => useMutation({
+    mutationFn: ({ userId, apps }) => api.post(`backoffice/users/${userId}/apps/sync`, { apps }),
+    onSuccess: (_, { userId }) =>
+      queryClient.invalidateQueries({ queryKey: ['users', userId, 'apps'] }),
+  })
+
+  const revokeSession = () => useMutation({
+    mutationFn: ({ userId, sessionId }) =>
+      api.delete(`backoffice/users/${userId}/sessions/${sessionId}`),
+    onSuccess: (_, { userId }) =>
+      queryClient.invalidateQueries({ queryKey: ['users', userId, 'sessions'] }),
+  })
+
+  const revokeAllSessions = () => useMutation({
+    mutationFn: (userId) => api.delete(`backoffice/users/${userId}/sessions`),
+    onSuccess: (_, userId) =>
+      queryClient.invalidateQueries({ queryKey: ['users', userId, 'sessions'] }),
+  })
+
+  return {
+    // queries
+    list, detail, roles, apps, sessions, activityLog,
+    // mutations
+    create, update, remove, reactivate, resetPassword,
+    assignRole, removeRole, syncApps, revokeSession, revokeAllSessions,
+  }
+}

package/css/themes/autumn.css

@@ -0,0 +1,401 @@
+/* ------------------------------ */
+/* ---------- Autumn ------------ */
+/* ------------------------------ */
+
+@theme theme-autumn inline {
+  
+}
+
+:root[data-theme="theme-autumn"],
+[data-theme="theme-autumn"] {
+  --background-1: var(--color-stone-50);
+  --background-2: var(--color-stone-100);
+  --foreground: var(--color-stone-800);
+
+  --inverse: var(--color-stone-800);
+
+  --border: var(--color-stone-200);
+  --border-line-1: var(--color-stone-100);
+  --border-line-2: var(--color-stone-200);
+  --border-line-3: var(--color-stone-300);
+  --border-line-4: var(--color-stone-400);
+  --border-line-5: var(--color-stone-500);
+  --border-line-6: var(--color-stone-600);
+  --border-line-7: var(--color-stone-700);
+  --border-line-8: var(--color-stone-800);
+
+  --primary-50: var(--color-amber-50);
+  --primary-100: var(--color-amber-100);
+  --primary-200: var(--color-amber-200);
+  --primary-300: var(--color-amber-300);
+  --primary-400: var(--color-amber-400);
+  --primary-500: var(--color-amber-500);
+  --primary-600: var(--color-amber-600);
+  --primary-700: var(--color-amber-700);
+  --primary-800: var(--color-amber-800);
+  --primary-900: var(--color-amber-900);
+  --primary-950: var(--color-amber-950);
+
+  --primary: var(--color-primary-500);
+  --primary-hover: var(--color-primary-600);
+  --primary-focus: var(--color-primary-600);
+  --primary-active: var(--color-primary-600);
+  --primary-checked: var(--color-primary-500);
+
+  --secondary: var(--color-stone-900);
+  --secondary-hover: var(--color-stone-800);
+  --secondary-focus: var(--color-stone-800);
+  --secondary-active: var(--color-stone-800);
+
+  --layer-line: var(--color-stone-200);
+  --layer-foreground: var(--color-stone-800);
+  --layer-hover: var(--color-stone-50);
+  --layer-focus: var(--color-stone-50);
+  --layer-active: var(--color-stone-50);
+
+  --surface: var(--color-stone-100);
+  --surface-1: var(--color-stone-200);
+  --surface-2: var(--color-stone-300);
+  --surface-3: var(--color-stone-400);
+  --surface-4: var(--color-stone-500);
+  --surface-5: var(--color-stone-600);
+  --surface-foreground: var(--color-stone-800);
+  --surface-hover: var(--color-stone-200);
+  --surface-focus: var(--color-stone-200);
+  --surface-active: var(--color-stone-200);
+
+  --muted: var(--color-stone-50);
+  --muted-foreground: var(--color-stone-400);
+  --muted-foreground-1: var(--color-stone-500);
+  --muted-foreground-2: var(--color-stone-600);
+  --muted-hover: var(--color-stone-100);
+  --muted-focus: var(--color-stone-100);
+  --muted-active: var(--color-stone-100);
+
+  --navbar-line: var(--color-stone-200);
+  --navbar-divider: var(--color-stone-200);
+  --navbar-nav-foreground: var(--color-stone-800);
+  --navbar-nav-hover: var(--color-stone-100);
+  --navbar-nav-focus: var(--color-stone-100);
+  --navbar-nav-active: var(--color-stone-100);
+  --navbar-nav-list-divider: var(--color-stone-200);
+  --navbar-inverse: var(--color-primary-950);
+
+  --navbar-1: var(--color-stone-50);
+  --navbar-1-line: var(--color-stone-200);
+  --navbar-1-divider: var(--color-stone-200);
+  --navbar-1-nav-foreground: var(--color-stone-800);
+  --navbar-1-nav-hover: var(--color-stone-200);
+  --navbar-1-nav-focus: var(--color-stone-200);
+  --navbar-1-nav-active: var(--color-stone-200);
+  --navbar-1-nav-list-divider: var(--color-stone-200);
+
+  --navbar-2: var(--color-stone-100);
+  --navbar-2-divider: var(--color-stone-300);
+  --navbar-2-nav-foreground: var(--color-stone-800);
+  --navbar-2-nav-hover: var(--color-stone-200);
+  --navbar-2-nav-focus: var(--color-stone-200);
+  --navbar-2-nav-active: var(--color-stone-200);
+  --navbar-2-nav-list-divider: var(--color-stone-200);
+  
+  --sidebar-line: var(--color-stone-200);
+  --sidebar-divider: var(--color-stone-200);
+  --sidebar-nav-foreground: var(--color-stone-800);
+  --sidebar-nav-hover: var(--color-stone-100);
+  --sidebar-nav-focus: var(--color-stone-100);
+  --sidebar-nav-active: var(--color-stone-100);
+  --sidebar-nav-list-divider: var(--color-stone-200);
+  --sidebar-inverse: var(--color-primary-950);
+  
+  --sidebar-1: var(--color-stone-50);
+  --sidebar-1-line: var(--color-stone-200);
+  --sidebar-1-divider: var(--color-stone-200);
+  --sidebar-1-nav-foreground: var(--color-stone-800);
+  --sidebar-1-nav-hover: var(--color-stone-200);
+  --sidebar-1-nav-focus: var(--color-stone-200);
+  --sidebar-1-nav-active: var(--color-stone-200);
+  --sidebar-1-nav-list-divider: var(--color-stone-200);
+  
+  --sidebar-2: var(--color-stone-100);
+  --sidebar-2-divider: var(--color-stone-200);
+  --sidebar-2-nav-foreground: var(--color-stone-800);
+  --sidebar-2-nav-hover: var(--color-stone-200);
+  --sidebar-2-nav-focus: var(--color-stone-200);
+  --sidebar-2-nav-active: var(--color-stone-200);
+  --sidebar-2-nav-list-divider: var(--color-stone-200);
+
+  --card-line: var(--color-stone-200);
+  --card-divider: var(--color-stone-200);
+  --card-header: var(--color-stone-200);
+  --card-footer: var(--color-stone-200);
+  --card-inverse: var(--color-primary-950);
+
+  --dropdown-divider: var(--color-stone-200);
+  --dropdown-header: var(--color-stone-200);
+  --dropdown-footer: var(--color-stone-200);
+  --dropdown-item-foreground: var(--color-stone-800);
+  --dropdown-item-hover: var(--color-stone-100);
+  --dropdown-item-focus: var(--color-stone-100);
+  --dropdown-item-active: var(--color-stone-100);
+  --dropdown-inverse: var(--color-primary-950);
+  
+  --select-item-foreground: var(--color-stone-800);
+  --select-item-hover: var(--color-stone-100);
+  --select-item-focus: var(--color-stone-100);
+  --select-item-active: var(--color-stone-100);
+  --select-inverse: var(--color-primary-950);
+  
+  --overlay-divider: var(--color-stone-200);
+  --overlay-header: var(--color-stone-200);
+  --overlay-footer: var(--color-stone-200);
+  --overlay-inverse: var(--color-primary-950);
+
+  --popover-line: var(--color-stone-100);
+
+  --tooltip: var(--color-stone-900);
+  
+  --table-line: var(--color-stone-200);
+
+  --footer-line: var(--color-stone-200);
+  --footer-inverse: var(--color-primary-950);
+
+  --scrollbar-track: var(--color-stone-100);
+  --scrollbar-thumb: var(--color-stone-300);
+
+  --chart-colors-background-inverse: var(--color-stone-800);
+  --chart-colors-foreground: var(--color-stone-800);
+  --chart-primary: var(--color-primary-500);
+  --chart-colors-primary: var(--color-primary-500);
+  --chart-colors-primary-inverse: var(--color-primary-200);
+  --chart-colors-primary-hex: var(--color-primary-500);
+  --chart-colors-primary-hex-inverse: var(--color-primary-200);
+  --chart-1: var(--color-primary-50);
+  --chart-colors-chart-1: var(--color-primary-50);
+  --chart-colors-chart-1-inverse: var(--color-primary-50);
+  --chart-colors-chart-1-hex: var(--color-primary-50);
+  --chart-colors-chart-1-hex-inverse: var(--color-primary-50);
+  --chart-2: var(--color-primary-200);
+  --chart-colors-chart-2: var(--color-primary-200);
+  --chart-colors-chart-2-inverse: var(--color-primary-200);
+  --chart-colors-chart-2-hex: var(--color-primary-200);
+  --chart-colors-chart-2-hex-inverse: var(--color-primary-200);
+  --chart-3: var(--color-primary-600);
+  --chart-colors-chart-3: var(--color-primary-600);
+  --chart-colors-chart-3-inverse: var(--color-primary-400);
+  --chart-colors-chart-3-hex: var(--color-primary-600);
+  --chart-colors-chart-3-hex-inverse: var(--color-primary-400);
+  --chart-4: var(--color-primary-800);
+  --chart-colors-chart-4: var(--color-primary-800);
+  --chart-colors-chart-4-inverse: var(--color-primary-800);
+  --chart-colors-chart-4-hex: var(--color-primary-800);
+  --chart-colors-chart-4-hex-inverse: var(--color-primary-800);
+  --chart-5: var(--color-lime-500);
+  --chart-colors-chart-5: var(--color-lime-500);
+  --chart-colors-chart-5-inverse: var(--color-lime-500);
+  --chart-colors-chart-5-hex: var(--color-lime-500);
+  --chart-colors-chart-5-hex-inverse: var(--color-lime-500);
+  --chart-6: var(--color-sky-400);
+  --chart-colors-chart-6: var(--color-sky-400);
+  --chart-colors-chart-6-inverse: var(--color-sky-400);
+  --chart-colors-chart-6-hex: var(--color-sky-400);
+  --chart-colors-chart-6-hex-inverse: var(--color-sky-400);
+  --chart-7: var(--color-orange-500);
+  --chart-colors-chart-7: var(--color-orange-500);
+  --chart-colors-chart-7-inverse: var(--color-orange-500);
+  --chart-colors-chart-7-hex: var(--color-orange-500);
+  --chart-colors-chart-7-hex-inverse: var(--color-orange-500);
+  --chart-8: var(--color-stone-100);
+  --chart-colors-chart-8: var(--color-stone-100);
+  --chart-colors-chart-8-hex: var(--color-stone-100);
+  --chart-9: var(--color-stone-200);
+  --chart-colors-chart-9: var(--color-stone-200);
+  --chart-colors-chart-9-hex: var(--color-stone-200);
+  --chart-10: var(--color-stone-300);
+  --chart-colors-chart-10: var(--color-stone-300);
+  --chart-colors-chart-10-hex: var(--color-stone-300);
+  --chart-colors-candlestick-upward: var(--color-primary-500);
+  --chart-colors-candlestick-upward-inverse: var(--color-primary-200);
+  --chart-colors-candlestick-downward: var(--color-primary-500);
+  --chart-colors-candlestick-downward-inverse: var(--color-primary-200);
+  --chart-colors-labels: var(--color-stone-400);
+  --chart-colors-xaxis-labels: var(--color-stone-400);
+  --chart-colors-yaxis-labels: var(--color-stone-400);
+  --chart-colors-grid-border: var(--color-stone-200);
+  --chart-colors-bar-ranges: var(--color-stone-200);
+
+  --map-colors-primary: var(--color-primary-600);
+  --map-colors-primary-inverse: var(--color-primary-200);
+  --map-colors-default: var(--color-stone-300);
+  --map-colors-highlight: var(--color-primary-300);
+  --map-colors-highlight-inverse: var(--color-primary-300);
+  --map-colors-border: var(--color-stone-100);
+}
+
+[data-theme="theme-autumn"].dark {
+  --background: var(--color-neutral-900);
+  --background-1: var(--color-neutral-950);
+  --background-2: var(--color-neutral-950);
+  --foreground: var(--color-neutral-200);
+
+  --inverse: var(--color-neutral-950);
+
+  --border: var(--color-neutral-700);
+  --border-line-1: var(--color-neutral-700);
+  --border-line-2: var(--color-neutral-700);
+  --border-line-3: var(--color-neutral-600);
+  --border-line-4: var(--color-neutral-500);
+  --border-line-5: var(--color-neutral-400);
+  --border-line-6: var(--color-neutral-300);
+  --border-line-7: var(--color-neutral-200);
+  --border-line-8: var(--color-neutral-100);
+
+  --primary: var(--color-primary-200);
+  --primary-foreground: var(--color-neutral-800);
+  --primary-hover: var(--color-primary-300);
+  --primary-focus: var(--color-primary-300);
+  --primary-active: var(--color-primary-300);
+  --primary-checked: var(--color-primary-200);
+
+  --secondary: var(--color-white);
+  --secondary-hover: var(--color-neutral-100);
+  --secondary-focus: var(--color-neutral-100);
+  --secondary-active: var(--color-neutral-100);
+
+  --layer: var(--color-neutral-800);
+  --layer-line: var(--color-neutral-700);
+  --layer-foreground: var(--color-white);
+  --layer-hover: var(--color-neutral-700);
+  --layer-focus: var(--color-neutral-700);
+  --layer-active: var(--color-neutral-700);
+
+  --surface: var(--color-neutral-700);
+  --surface-1: var(--color-neutral-600);
+  --surface-2: var(--color-neutral-500);
+  --surface-3: var(--color-neutral-600);
+  --surface-4: var(--color-neutral-500);
+  --surface-5: var(--color-neutral-400);
+  --surface-foreground: var(--color-neutral-200);
+  --surface-hover: var(--color-neutral-600);
+  --surface-focus: var(--color-neutral-600);
+  --surface-active: var(--color-neutral-600);
+
+  --muted: var(--color-neutral-800);
+  --muted-foreground: var(--color-neutral-500);
+  --muted-foreground-1: var(--color-neutral-400);
+  --muted-foreground-2: var(--color-neutral-300);
+  --muted-hover: var(--color-neutral-700);
+  --muted-focus: var(--color-neutral-700);
+  --muted-active: var(--color-neutral-700);
+
+  --navbar: var(--color-neutral-900);
+  --navbar-line: var(--color-neutral-700);
+  --navbar-divider: var(--color-neutral-700);
+  --navbar-nav-foreground: var(--color-neutral-200);
+  --navbar-nav-hover: var(--color-neutral-700);
+  --navbar-nav-focus: var(--color-neutral-700);
+  --navbar-nav-active: var(--color-neutral-700);
+  --navbar-nav-list-divider: var(--color-neutral-700);
+  --navbar-inverse: var(--color-black);
+  
+  --navbar-1: var(--color-neutral-800);
+  --navbar-1-line: var(--color-neutral-700);
+  --navbar-1-divider: var(--color-neutral-700);
+  --navbar-1-nav-foreground: var(--color-neutral-200);
+  --navbar-1-nav-hover: var(--color-neutral-700);
+  --navbar-1-nav-focus: var(--color-neutral-700);
+  --navbar-1-nav-active: var(--color-neutral-700);
+  --navbar-1-nav-list-divider: var(--color-neutral-700);
+
+  --navbar-2: var(--color-neutral-900);
+  --navbar-2-divider: var(--color-neutral-700);
+  --navbar-2-nav-foreground: var(--color-neutral-200);
+  --navbar-2-nav-hover: var(--color-neutral-800);
+  --navbar-2-nav-focus: var(--color-neutral-800);
+  --navbar-2-nav-active: var(--color-neutral-800);
+  --navbar-2-nav-list-divider: var(--color-neutral-800);
+
+  --sidebar: var(--color-neutral-900);
+  --sidebar-line: var(--color-neutral-700);
+  --sidebar-divider: var(--color-neutral-700);
+  --sidebar-nav-foreground: var(--color-neutral-200);
+  --sidebar-nav-hover: var(--color-neutral-700);
+  --sidebar-nav-focus: var(--color-neutral-700);
+  --sidebar-nav-active: var(--color-neutral-700);
+  --sidebar-nav-list-divider: var(--color-neutral-700);
+  --sidebar-inverse: var(--color-black);
+
+  --sidebar-1: var(--color-neutral-800);
+  --sidebar-1-line: var(--color-neutral-700);
+  --sidebar-1-divider: var(--color-neutral-700);
+  --sidebar-1-nav-foreground: var(--color-neutral-200);
+  --sidebar-1-nav-hover: var(--color-neutral-700);
+  --sidebar-1-nav-focus: var(--color-neutral-700);
+  --sidebar-1-nav-active: var(--color-neutral-700);
+  --sidebar-1-nav-list-divider: var(--color-neutral-700);
+  
+  --sidebar-2: var(--color-neutral-900);
+  --sidebar-2-divider: var(--color-neutral-800);
+  --sidebar-2-nav-foreground: var(--color-neutral-200);
+  --sidebar-2-nav-hover: var(--color-neutral-800);
+  --sidebar-2-nav-focus: var(--color-neutral-800);
+  --sidebar-2-nav-active: var(--color-neutral-800);
+  --sidebar-2-nav-list-divider: var(--color-neutral-800);
+
+  --card: var(--color-neutral-800);
+  --card-line: var(--color-neutral-700);
+  --card-divider: var(--color-neutral-700);
+  --card-header: var(--color-neutral-700);
+  --card-footer: var(--color-neutral-700);
+  --card-inverse: var(--color-black);
+
+  --dropdown: var(--color-neutral-900);
+  --dropdown-1: var(--color-neutral-950);
+  --dropdown-divider: var(--color-neutral-800);
+  --dropdown-header: var(--color-neutral-700);
+  --dropdown-footer: var(--color-neutral-700);
+  --dropdown-item-foreground: var(--color-neutral-200);
+  --dropdown-item-hover: var(--color-neutral-800);
+  --dropdown-item-focus: var(--color-neutral-800);
+  --dropdown-item-active: var(--color-neutral-800);
+  --dropdown-inverse: var(--color-black);
+
+  --select: var(--color-neutral-900);
+  --select-1: var(--color-neutral-950);
+  --select-item-foreground: var(--color-neutral-200);
+  --select-item-hover: var(--color-neutral-800);
+  --select-item-focus: var(--color-neutral-800);
+  --select-item-active: var(--color-neutral-800);
+  --select-inverse: var(--color-black);
+
+  --overlay: var(--color-neutral-800);
+  --overlay-divider: var(--color-neutral-700);
+  --overlay-header: var(--color-neutral-700);
+  --overlay-footer: var(--color-neutral-700);
+  --overlay-inverse: var(--color-black);
+
+  --popover: var(--color-neutral-900);
+  --popover-line: var(--color-neutral-700);
+
+  --tooltip: var(--color-white);
+
+  --table-line: var(--color-neutral-700);
+
+  --switch: var(--color-neutral-900);
+
+  --footer: var(--color-neutral-900);
+  --footer-line: var(--color-neutral-700);
+  --footer-inverse: var(--color-black);
+  
+  --scrollbar-track: var(--color-neutral-700);
+  --scrollbar-thumb: var(--color-neutral-500);
+  --scrollbar-track-inverse: var(--color-neutral-500);
+  --scrollbar-thumb-inverse: var(--color-neutral-700);
+  
+  --chart-primary: var(--color-primary-200);
+  --chart-2: var(--color-emerald-200);
+  --chart-3: var(--color-emerald-400);
+  --chart-4: var(--color-emerald-800);
+  --chart-8: var(--color-neutral-700);
+  --chart-9: var(--color-neutral-500);
+  --chart-10: var(--color-neutral-700);
+}