@shival99/z-ui 1.0.1 → 1.0.2

package/assets/css/animations.css

@@ -0,0 +1,207 @@
+/* ===== Animation Utilities ===== */
+@layer base {
+  @keyframes z-enter {
+    from {
+      opacity: var(--z-enter-opacity, 1);
+      transform: translate3d(var(--z-enter-translate-x, 0), var(--z-enter-translate-y, 0), 0)
+        scale3d(var(--z-enter-scale, 1), var(--z-enter-scale, 1), var(--z-enter-scale, 1));
+    }
+  }
+
+  @keyframes z-exit {
+    to {
+      opacity: var(--z-exit-opacity, 1);
+      transform: translate3d(var(--z-exit-translate-x, 0), var(--z-exit-translate-y, 0), 0)
+        scale3d(var(--z-exit-scale, 1), var(--z-exit-scale, 1), var(--z-exit-scale, 1));
+    }
+  }
+
+  .z-animate-in {
+    animation: z-enter 180ms cubic-bezier(0.32, 0.72, 0, 1);
+    animation-fill-mode: forwards;
+  }
+
+  .z-animate-out {
+    animation: z-exit 150ms cubic-bezier(0.32, 0.72, 0, 1);
+    animation-fill-mode: forwards;
+  }
+
+  /* Fade */
+  .z-fade-in {
+    --z-enter-opacity: 0;
+  }
+
+  .z-fade-out {
+    --z-exit-opacity: 0;
+  }
+
+  /* Zoom/Scale */
+  .z-zoom-in-95 {
+    --z-enter-scale: 0.95;
+  }
+
+  .z-zoom-out-95 {
+    --z-exit-scale: 0.95;
+  }
+
+  .z-zoom-in-90 {
+    --z-enter-scale: 0.9;
+  }
+
+  .z-zoom-out-90 {
+    --z-exit-scale: 0.9;
+  }
+
+  /* Slide */
+  .z-slide-in-from-top-2 {
+    --z-enter-translate-y: -4px;
+  }
+
+  .z-slide-out-to-top-2 {
+    --z-exit-translate-y: -4px;
+  }
+
+  .z-slide-in-from-bottom-2 {
+    --z-enter-translate-y: 4px;
+  }
+
+  .z-slide-out-to-bottom-2 {
+    --z-exit-translate-y: 4px;
+  }
+
+  .z-slide-in-from-left-2 {
+    --z-enter-translate-x: -4px;
+  }
+
+  .z-slide-out-to-left-2 {
+    --z-exit-translate-x: -4px;
+  }
+
+  .z-slide-in-from-right-2 {
+    --z-enter-translate-x: 4px;
+  }
+
+  .z-slide-out-to-right-2 {
+    --z-exit-translate-x: 4px;
+  }
+
+  /* Slide-4 (8px) - for popover */
+  .z-slide-in-from-top-4 {
+    --z-enter-translate-y: -8px;
+  }
+
+  .z-slide-out-to-top-4 {
+    --z-exit-translate-y: -8px;
+  }
+
+  .z-slide-in-from-bottom-4 {
+    --z-enter-translate-y: 8px;
+  }
+
+  .z-slide-out-to-bottom-4 {
+    --z-exit-translate-y: 8px;
+  }
+
+  .z-slide-in-from-left-4 {
+    --z-enter-translate-x: -8px;
+  }
+
+  .z-slide-out-to-left-4 {
+    --z-exit-translate-x: -8px;
+  }
+
+  .z-slide-in-from-right-4 {
+    --z-enter-translate-x: 8px;
+  }
+
+  .z-slide-out-to-right-4 {
+    --z-exit-translate-x: 8px;
+  }
+
+  /* Duration modifiers */
+  .z-duration-100 {
+    animation-duration: 100ms;
+  }
+
+  .z-duration-150 {
+    animation-duration: 150ms;
+  }
+
+  .z-duration-200 {
+    animation-duration: 200ms;
+  }
+
+  .z-duration-300 {
+    animation-duration: 300ms;
+  }
+
+  /* CDK Overlay Backdrop Animation */
+  @keyframes z-backdrop-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes z-backdrop-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes z-spin-effect {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .z-animate-spin {
+    animation: z-spin-effect 1s linear infinite;
+  }
+
+  @keyframes z-wave-effect {
+    to {
+      box-shadow: 0 0 0 5px var(--z-wave-color, currentColor);
+    }
+  }
+
+  @keyframes z-fade-effect {
+    to {
+      opacity: 0;
+    }
+  }
+
+  .z-animate-wave {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    box-shadow: 0 0 0 0 var(--z-wave-color, currentColor);
+    opacity: 0.2;
+    animation:
+      z-fade-effect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+      z-wave-effect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+    animation-fill-mode: forwards;
+    pointer-events: none;
+  }
+
+  /* CDK Backdrop Styles for Service Mode Modal */
+  .cdk-overlay-backdrop {
+    animation: z-backdrop-enter 150ms ease-out forwards;
+  }
+
+  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 1;
+  }
+
+  .cdk-overlay-backdrop.z-backdrop-leaving {
+    animation: z-backdrop-exit 120ms ease-in forwards;
+  }
+}

package/assets/css/base.css

@@ -0,0 +1,76 @@
+/* ===== Base Styles ===== */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family:
+      'Be Vietnam Pro',
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+
+  /* ===== Custom Scrollbar Styles ===== */
+  /* * {
+    scrollbar-width: auto;
+    scrollbar-color: #d1d5db transparent;
+  }
+
+  *:hover {
+    scrollbar-color: #9ca3af transparent;
+  } */
+
+  /* WebKit browsers (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover,
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #9ca3af;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Dark mode scrollbar */
+  .dark ::-webkit-scrollbar-thumb {
+    background-color: #4b5563;
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover,
+  .dark ::-webkit-scrollbar-thumb:active {
+    background-color: #6b7280;
+  }
+
+  :root {
+    --scrollbar-track-color: transparent;
+    --scrollbar-track-shape: 5px;
+    --scrollbar-track-thickness: 7px;
+    --scrollbar-thumb-color: #d1d5db;
+    --scrollbar-thumb-hover-color: #9ca3af;
+    --scrollbar-thumb-shape: 5px;
+    --scrollbar-thumb-min-size: 40;
+    --scrollbar-hover-opacity-transition-leave-duration: 0.3s;
+    --scrollbar-hover-opacity-transition-leave-delay: 0.5s;
+  }
+
+  .dark {
+    --scrollbar-thumb-color: #4b5563;
+    --scrollbar-thumb-hover-color: #6b7280;
+  }
+}

package/assets/css/tailwind.css

@@ -0,0 +1,53 @@
+@import 'tailwindcss';
+
+/* Configure dark mode to use class instead of prefers-color-scheme */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Base styles */
+@import './base.css';
+
+/* Animations */
+@import './animations.css';
+
+/* Themes - Only neutral theme is bundled (default theme) */
+/* Other themes are lazy loaded by ZThemeService when setTheme() is called */
+@import './themes/neutral.css';

package/assets/css/themes/gray.css

@@ -0,0 +1,73 @@
+/* GRAY THEME */
+:root[z-theme='gray'] {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --input-autofill: oklch(1 0 0);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.334);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+:root[z-theme='gray'].dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --input-autofill: oklch(0.19 0 0);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.928 0.006 264.531);
+  --sidebar-primary-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}

package/assets/css/themes/green.css

@@ -0,0 +1,75 @@
+/* GREEN THEME (Default) */
+:root,
+:root[z-theme='green'] {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --input-autofill: oklch(1 0 0);
+  --ring: oklch(0.841 0.238 128.85);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.648 0.2 131.684);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.841 0.238 128.85);
+}
+
+:root.dark,
+:root[z-theme='green'].dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.648 0.2 131.684);
+  --primary-foreground: oklch(0.986 0.031 120.757);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --input-autofill: oklch(0.19 0 0);
+  --ring: oklch(0.405 0.101 131.063);
+  --chart-1: oklch(0.871 0.15 154.449);
+  --chart-2: oklch(0.723 0.219 149.579);
+  --chart-3: oklch(0.627 0.194 149.214);
+  --chart-4: oklch(0.527 0.154 150.069);
+  --chart-5: oklch(0.448 0.119 151.328);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.768 0.233 130.85);
+  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.405 0.101 131.063);
+}

package/assets/css/themes/hospital.css

@@ -0,0 +1,79 @@
+/* HOSPITAL THEME - Main color: #2e37a4 */
+:root[z-theme='hospital'] {
+  --radius: 0.65rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.2 0.05 264);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.05 264);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.05 264);
+  /* Primary: #2e37a4 converted to oklch */
+  --primary: oklch(0.35 0.18 264);
+  --primary-foreground: oklch(0.98 0 0);
+  /* Secondary: lighter shade */
+  --secondary: oklch(0.96 0.02 264);
+  --secondary-foreground: oklch(0.25 0.08 264);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.96 0.02 264);
+  --accent-foreground: oklch(0.25 0.08 264);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.02 264);
+  --input: oklch(0.92 0.02 264);
+  --input-autofill: oklch(1 0 0);
+  --ring: oklch(0.45 0.15 264);
+  /* Chart colors - hospital blue palette */
+  --chart-1: oklch(0.75 0.12 264);
+  --chart-2: oklch(0.55 0.16 264);
+  --chart-3: oklch(0.35 0.18 264);
+  --chart-4: oklch(0.3 0.15 264);
+  --chart-5: oklch(0.25 0.12 264);
+  /* Sidebar - uses primary color */
+  --sidebar: oklch(0.35 0.18 264);
+  --sidebar-foreground: oklch(0.98 0 0);
+  /* Active state: white background with primary text */
+  --sidebar-primary: oklch(1 0 0);
+  --sidebar-primary-foreground: oklch(0.35 0.18 264);
+  /* Hover state: semi-transparent white */
+  --sidebar-accent: oklch(1 0 0 / 20%);
+  --sidebar-accent-foreground: oklch(0.98 0 0);
+  --sidebar-border: oklch(0.4 0.16 264);
+  --sidebar-ring: oklch(0.55 0.18 264);
+}
+
+:root[z-theme='hospital'].dark {
+  --background: oklch(0.15 0.03 264);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.2 0.04 264);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.2 0.04 264);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.5 0.2 264);
+  --primary-foreground: oklch(0.98 0 0);
+  --secondary: oklch(0.25 0.05 264);
+  --secondary-foreground: oklch(0.98 0 0);
+  --muted: oklch(0.25 0.05 264);
+  --muted-foreground: oklch(0.7 0.04 264);
+  --accent: oklch(0.25 0.05 264);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --input-autofill: oklch(0.19 0 0);
+  --ring: oklch(0.45 0.18 264);
+  --chart-1: oklch(0.75 0.12 264);
+  --chart-2: oklch(0.55 0.16 264);
+  --chart-3: oklch(0.4 0.18 264);
+  --chart-4: oklch(0.35 0.15 264);
+  --chart-5: oklch(0.3 0.12 264);
+  --sidebar: oklch(0.25 0.1 264);
+  --sidebar-foreground: oklch(0.98 0 0);
+  --sidebar-primary: oklch(0.5 0.2 264);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.3 0.08 264);
+  --sidebar-accent-foreground: oklch(0.98 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.45 0.18 264);
+}

package/assets/css/themes/neutral.css

@@ -0,0 +1,73 @@
+/* NEUTRAL THEME */
+:root[z-theme='neutral'] {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --input-autofill: oklch(1 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.334);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+:root[z-theme='neutral'].dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --input-autofill: oklch(0.19 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.922 0 0);
+  --sidebar-primary-foreground: oklch(0.205 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}