@shival99/z-ui 1.0.1 → 1.0.3

package/README.md

@@ -2,32 +2,32 @@
 
 [![npm version](https://img.shields.io/npm/v/@shival99/z-ui.svg)](https://www.npmjs.com/package/@shival99/z-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Angular](https://img.shields.io/badge/Angular-20+-dd0031.svg)](https://angular.dev)
+[![Angular](https://img.shields.io/badge/Angular-21+-dd0031.svg)](https://angular.dev)
 
-A comprehensive, high-performance UI component library built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.
+A comprehensive, high-performance UI component library built with Angular 21+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.
 
 ## ✨ Features
 
 - 🎨 **40+ Components** - Buttons, Inputs, Tables, Modals, Calendars, and more
-- 🌙 **Dark Mode** - Built-in theme support with CSS variables
+- 🌙 **Dark Mode** - Built-in theme support with 9 color themes
 - ♿ **Accessible** - WCAG 2.1 compliant components
 - 📱 **Responsive** - Mobile-first responsive design
 - 🚀 **High Performance** - OnPush change detection, virtual scrolling
 - 🔧 **Customizable** - CSS variables, class-variance-authority
-- 📦 **Tree-shakable** - Only import what you need
+- 📦 **Tree-shakable** - Import only what you need
 - 🎯 **Type-safe** - Full TypeScript support with strict mode
-- 🌐 **i18n Ready** - Built-in translation support with ngx-translate
+- 🌐 **i18n Ready** - Built-in translation support
 
 ## 📦 Installation
 
 ```bash
-npm install @shival99/z-ui
+pnpm add @shival99/z-ui
 ```
 
 ### Peer Dependencies
 
 ```bash
-npm install @angular/cdk @ng-icons/core @ng-icons/lucide @ng-icons/iconsax \
+pnpm add @angular/cdk @ng-icons/core @ng-icons/lucide @ng-icons/iconsax \
   @tanstack/angular-table @tanstack/angular-virtual \
   class-variance-authority clsx tailwind-merge \
   ngx-mask ngx-scrollbar ngx-sonner ngxtension minisearch
@@ -35,28 +35,21 @@ npm install @angular/cdk @ng-icons/core @ng-icons/lucide @ng-icons/iconsax \
 
 ### Optional Dependencies
 
-For specific components:
-
 ```bash
-# For z-editor (Rich Text Editor)
-npm install ngx-quill quill
-
-# For z-code (Syntax Highlighting)
-npm install shiki
-
-# For z-chart (Charts)
-npm install echarts ngx-echarts
-
-# For i18n support
-npm install @ngx-translate/core @ngx-translate/http-loader
+pnpm add ngx-quill quill                    # Rich Text Editor
+pnpm add shiki dompurify                    # Syntax Highlighting
+pnpm add echarts ngx-echarts                # Charts
+pnpm add @ngx-translate/core @ngx-translate/http-loader  # i18n
 ```
 
 ## 🚀 Quick Start
 
-### 1. Import Components
+### Import Components
 
 ```typescript
-import { ZButtonComponent, ZInputComponent, ZTableComponent } from '@shival99/z-ui';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZInputComponent } from '@shival99/z-ui/components/z-input';
+import { ZTableComponent } from '@shival99/z-ui/components/z-table';
 
 @Component({
   selector: 'app-root',
@@ -70,77 +63,57 @@ import { ZButtonComponent, ZInputComponent, ZTableComponent } from '@shival99/z-
 export class AppComponent {}
 ```
 
-### 2. Add Theme Styles
-
-Add to your `styles.scss`:
-
-```scss
-@import '@shival99/z-ui/styles';
-
-// Or use CSS variables for custom theming
-:root {
-  --z-primary: 222.2 47.4% 11.2%;
-  --z-primary-foreground: 210 40% 98%;
-  // ... more variables
-}
-```
-
-### 3. Configure Providers
+### Configure Providers
 
 ```typescript
-// app.config.ts
-import { provideZTranslate } from '@shival99/z-ui';
+import { provideZTranslate } from '@shival99/z-ui/providers';
+import { provideZNgxMask } from '@shival99/z-ui/providers';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideZTranslate({
-      defaultLang: 'en',
-      langPath: '/assets/i18n/',
-    }),
-  ],
+  providers: [provideZTranslate({ defaultLang: 'vi', langPath: '/assets/i18n/' }), provideZNgxMask()],
 };
 ```
 
 ## 🧩 Components
 
-### Form Controls
+| Category    | Components                                                       |
+| ----------- | ---------------------------------------------------------------- |
+| **Form**    | Input, Select, Checkbox, Radio, Switch, Calendar, Upload, Filter |
+| **Data**    | Table, Pagination, Code, Editor, Timeline                        |
+| **Overlay** | Modal, Drawer, Toast, Tooltip, Popover, Dropdown Menu            |
+| **Layout**  | Accordion, Tabs, Menu, Breadcrumb, Skeleton                      |
+| **Display** | Button, Icon, Loading                                            |
 
-- `ZInputComponent` - Text input with validation, masks, async validation
-- `ZSelectComponent` - Select dropdown with search, multi-select
-- `ZCheckboxComponent` - Checkbox with indeterminate state
-- `ZRadioComponent` - Radio button groups
-- `ZSwitchComponent` - Toggle switch
-- `ZCalendarComponent` - Date/time picker with range support
+## 📁 Import Paths
 
-### Data Display
-
-- `ZTableComponent` - Advanced data table with sorting, filtering, pagination, virtual scrolling
-- `ZCodeComponent` - Syntax highlighted code blocks
-- `ZBadgeComponent` - Status badges
-
-### Layout
-
-- `ZModalComponent` - Modal dialogs
-- `ZDrawerComponent` - Side panels
-- `ZAccordionComponent` - Collapsible sections
-- `ZTabsComponent` - Tab navigation
-
-### Feedback
+```typescript
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZTableComponent } from '@shival99/z-ui/components/z-table';
+import { ZModalService } from '@shival99/z-ui/components/z-modal';
+
+import { ZThemeService, ZCacheService } from '@shival99/z-ui/services';
+import { provideZTranslate } from '@shival99/z-ui/providers';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+import { Z_UI_TRANSLATIONS } from '@shival99/z-ui/i18n';
+```
 
-- `ZToastService` - Toast notifications
-- `ZLoadingComponent` - Loading spinners
-- `ZTooltipDirective` - Tooltips
-- `ZPopoverDirective` - Popovers
+## 🎨 Theming
 
-### Navigation
+Available themes: `green`, `orange`, `violet`, `neutral`, `zinc`, `slate`, `stone`, `gray`, `hospital`
 
-- `ZBreadcrumbComponent` - Breadcrumb navigation
-- `ZMenuComponent` - Dropdown menus
-- `ZPaginationComponent` - Pagination controls
+```typescript
+import { ZThemeService } from '@shival99/z-ui/services';
 
-## 📚 Documentation
+export class AppComponent {
+  private themeService = inject(ZThemeService);
 
-Full documentation and examples: [https://z-ui.dev](https://z-ui.dev)
+  ngOnInit() {
+    this.themeService.setTheme('violet');
+    this.themeService.toggleDarkMode(true);
+  }
+}
+```
 
 ## 📄 License
 

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);
+}