@tk-kit/design-system 0.1.16

package/dist/styles/globals.css

@@ -0,0 +1,306 @@
+@import '@fontsource-variable/golos-text';
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@import './_variables.css';
+@import './_typography.css';
+@import './_utilities.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: 'Golos Text Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', monospace;
+
+  --color-sky-10: var(--palette-sky-10);
+  --color-sky-20: var(--palette-sky-20);
+  --color-sky-30: var(--palette-sky-30);
+  --color-sky-40: var(--palette-sky-40);
+  --color-sky-50: var(--palette-sky-50);
+  --color-sky-60: var(--palette-sky-60);
+  --color-sky-70: var(--palette-sky-70);
+  --color-sky-80: var(--palette-sky-80);
+  --color-sky-90: var(--palette-sky-90);
+  --color-sky-100: var(--palette-sky-100);
+
+  --color-green-10: var(--palette-green-10);
+  --color-green-20: var(--palette-green-20);
+  --color-green-30: var(--palette-green-30);
+  --color-green-40: var(--palette-green-40);
+  --color-green-50: var(--palette-green-50);
+  --color-green-60: var(--palette-green-60);
+  --color-green-70: var(--palette-green-70);
+  --color-green-80: var(--palette-green-80);
+  --color-green-90: var(--palette-green-90);
+  --color-green-100: var(--palette-green-100);
+
+  --color-gray-10: var(--palette-gray-10);
+  --color-gray-20: var(--palette-gray-20);
+  --color-gray-30: var(--palette-gray-30);
+  --color-gray-40: var(--palette-gray-40);
+  --color-gray-50: var(--palette-gray-50);
+  --color-gray-60: var(--palette-gray-60);
+  --color-gray-70: var(--palette-gray-70);
+  --color-gray-80: var(--palette-gray-80);
+  --color-gray-90: var(--palette-gray-90);
+  --color-gray-100: var(--palette-gray-100);
+
+  --color-neutral-10: var(--palette-neutral-10);
+  --color-neutral-100: var(--palette-neutral-100);
+
+  --color-red-10: var(--palette-red-10);
+  --color-red-20: var(--palette-red-20);
+  --color-red-30: var(--palette-red-30);
+  --color-red-40: var(--palette-red-40);
+  --color-red-50: var(--palette-red-50);
+  --color-red-60: var(--palette-red-60);
+  --color-red-70: var(--palette-red-70);
+  --color-red-80: var(--palette-red-80);
+  --color-red-90: var(--palette-red-90);
+  --color-red-100: var(--palette-red-100);
+
+  --color-orange-10: var(--palette-orange-10);
+  --color-orange-20: var(--palette-orange-20);
+  --color-orange-30: var(--palette-orange-30);
+  --color-orange-40: var(--palette-orange-40);
+  --color-orange-50: var(--palette-orange-50);
+  --color-orange-60: var(--palette-orange-60);
+  --color-orange-70: var(--palette-orange-70);
+  --color-orange-80: var(--palette-orange-80);
+  --color-orange-90: var(--palette-orange-90);
+  --color-orange-100: var(--palette-orange-100);
+
+  --color-yellow-10: var(--palette-yellow-10);
+  --color-yellow-20: var(--palette-yellow-20);
+  --color-yellow-30: var(--palette-yellow-30);
+  --color-yellow-40: var(--palette-yellow-40);
+  --color-yellow-50: var(--palette-yellow-50);
+  --color-yellow-60: var(--palette-yellow-60);
+  --color-yellow-70: var(--palette-yellow-70);
+  --color-yellow-80: var(--palette-yellow-80);
+  --color-yellow-90: var(--palette-yellow-90);
+  --color-yellow-100: var(--palette-yellow-100);
+
+  --color-lime-10: var(--palette-lime-10);
+  --color-lime-20: var(--palette-lime-20);
+  --color-lime-30: var(--palette-lime-30);
+  --color-lime-40: var(--palette-lime-40);
+  --color-lime-50: var(--palette-lime-50);
+  --color-lime-60: var(--palette-lime-60);
+  --color-lime-70: var(--palette-lime-70);
+  --color-lime-80: var(--palette-lime-80);
+  --color-lime-90: var(--palette-lime-90);
+  --color-lime-100: var(--palette-lime-100);
+
+  --color-blue-10: var(--palette-blue-10);
+  --color-blue-20: var(--palette-blue-20);
+  --color-blue-30: var(--palette-blue-30);
+  --color-blue-40: var(--palette-blue-40);
+  --color-blue-50: var(--palette-blue-50);
+  --color-blue-60: var(--palette-blue-60);
+  --color-blue-70: var(--palette-blue-70);
+  --color-blue-80: var(--palette-blue-80);
+  --color-blue-90: var(--palette-blue-90);
+  --color-blue-100: var(--palette-blue-100);
+
+  --color-violet-10: var(--palette-violet-10);
+  --color-violet-20: var(--palette-violet-20);
+  --color-violet-30: var(--palette-violet-30);
+  --color-violet-40: var(--palette-violet-40);
+  --color-violet-50: var(--palette-violet-50);
+  --color-violet-60: var(--palette-violet-60);
+  --color-violet-70: var(--palette-violet-70);
+  --color-violet-80: var(--palette-violet-80);
+  --color-violet-90: var(--palette-violet-90);
+  --color-violet-100: var(--palette-violet-100);
+
+  --color-rose-10: var(--palette-rose-10);
+  --color-rose-20: var(--palette-rose-20);
+  --color-rose-30: var(--palette-rose-30);
+  --color-rose-40: var(--palette-rose-40);
+  --color-rose-50: var(--palette-rose-50);
+  --color-rose-60: var(--palette-rose-60);
+  --color-rose-70: var(--palette-rose-70);
+  --color-rose-80: var(--palette-rose-80);
+  --color-rose-90: var(--palette-rose-90);
+  --color-rose-100: var(--palette-rose-100);
+
+  --color-slate-10: var(--palette-slate-10);
+  --color-slate-20: var(--palette-slate-20);
+  --color-slate-30: var(--palette-slate-30);
+  --color-slate-40: var(--palette-slate-40);
+  --color-slate-50: var(--palette-slate-50);
+  --color-slate-60: var(--palette-slate-60);
+  --color-slate-70: var(--palette-slate-70);
+  --color-slate-80: var(--palette-slate-80);
+  --color-slate-90: var(--palette-slate-90);
+  --color-slate-100: var(--palette-slate-100);
+
+  --spacing-0: var(--spacing-spacing-0);
+  --spacing-2: var(--spacing-spacing-2);
+  --spacing-4: var(--spacing-spacing-4);
+  --spacing-6: var(--spacing-spacing-6);
+  --spacing-8: var(--spacing-spacing-8);
+  --spacing-12: var(--spacing-spacing-12);
+  --spacing-16: var(--spacing-spacing-16);
+  --spacing-24: var(--spacing-spacing-24);
+  --spacing-32: var(--spacing-spacing-32);
+  --spacing-40: var(--spacing-spacing-40);
+  --spacing-48: var(--spacing-spacing-48);
+  --spacing-56: var(--spacing-spacing-56);
+  --spacing-64: var(--spacing-spacing-64);
+  --spacing-72: var(--spacing-spacing-72);
+  --spacing-80: var(--spacing-spacing-80);
+  --spacing-88: var(--spacing-spacing-88);
+  --spacing-96: var(--spacing-spacing-96);
+  --spacing-104: var(--spacing-spacing-104);
+  --spacing-120: var(--spacing-spacing-120);
+  --spacing-128: var(--spacing-spacing-128);
+
+  --radius-4: var(--spacing-spacing-4);
+  --radius-8: var(--spacing-spacing-8);
+  --radius-12: var(--spacing-spacing-12);
+  --radius-16: var(--spacing-spacing-16);
+  --radius-24: var(--spacing-spacing-24);
+
+  /*--radius-sm: calc(var(--radius) - 4px);*/
+  /*--radius-md: calc(var(--radius) - 2px);*/
+  /*--radius-lg: var(--radius);*/
+  /*--radius-xl: calc(var(--radius) + 4px);*/
+  /*--radius-2xl: calc(var(--radius) + 8px);*/
+  /*--radius-3xl: calc(var(--radius) + 12px);*/
+  /*--radius-4xl: calc(var(--radius) + 16px);*/
+
+  --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-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);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --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.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --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.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-background-neutral-hover-tertiary) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-background-neutral-hover-tertiary);
+  border-radius: 100%;
+}
+
+.custom-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  scrollbar-width: none;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,303 @@
+@import '@fontsource-variable/golos-text';
+@import './_variables.css';
+@import './_typography.css';
+@import './_utilities.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: 'Golos Text Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', monospace;
+
+  --color-sky-10: var(--palette-sky-10);
+  --color-sky-20: var(--palette-sky-20);
+  --color-sky-30: var(--palette-sky-30);
+  --color-sky-40: var(--palette-sky-40);
+  --color-sky-50: var(--palette-sky-50);
+  --color-sky-60: var(--palette-sky-60);
+  --color-sky-70: var(--palette-sky-70);
+  --color-sky-80: var(--palette-sky-80);
+  --color-sky-90: var(--palette-sky-90);
+  --color-sky-100: var(--palette-sky-100);
+
+  --color-green-10: var(--palette-green-10);
+  --color-green-20: var(--palette-green-20);
+  --color-green-30: var(--palette-green-30);
+  --color-green-40: var(--palette-green-40);
+  --color-green-50: var(--palette-green-50);
+  --color-green-60: var(--palette-green-60);
+  --color-green-70: var(--palette-green-70);
+  --color-green-80: var(--palette-green-80);
+  --color-green-90: var(--palette-green-90);
+  --color-green-100: var(--palette-green-100);
+
+  --color-gray-10: var(--palette-gray-10);
+  --color-gray-20: var(--palette-gray-20);
+  --color-gray-30: var(--palette-gray-30);
+  --color-gray-40: var(--palette-gray-40);
+  --color-gray-50: var(--palette-gray-50);
+  --color-gray-60: var(--palette-gray-60);
+  --color-gray-70: var(--palette-gray-70);
+  --color-gray-80: var(--palette-gray-80);
+  --color-gray-90: var(--palette-gray-90);
+  --color-gray-100: var(--palette-gray-100);
+
+  --color-neutral-10: var(--palette-neutral-10);
+  --color-neutral-100: var(--palette-neutral-100);
+
+  --color-red-10: var(--palette-red-10);
+  --color-red-20: var(--palette-red-20);
+  --color-red-30: var(--palette-red-30);
+  --color-red-40: var(--palette-red-40);
+  --color-red-50: var(--palette-red-50);
+  --color-red-60: var(--palette-red-60);
+  --color-red-70: var(--palette-red-70);
+  --color-red-80: var(--palette-red-80);
+  --color-red-90: var(--palette-red-90);
+  --color-red-100: var(--palette-red-100);
+
+  --color-orange-10: var(--palette-orange-10);
+  --color-orange-20: var(--palette-orange-20);
+  --color-orange-30: var(--palette-orange-30);
+  --color-orange-40: var(--palette-orange-40);
+  --color-orange-50: var(--palette-orange-50);
+  --color-orange-60: var(--palette-orange-60);
+  --color-orange-70: var(--palette-orange-70);
+  --color-orange-80: var(--palette-orange-80);
+  --color-orange-90: var(--palette-orange-90);
+  --color-orange-100: var(--palette-orange-100);
+
+  --color-yellow-10: var(--palette-yellow-10);
+  --color-yellow-20: var(--palette-yellow-20);
+  --color-yellow-30: var(--palette-yellow-30);
+  --color-yellow-40: var(--palette-yellow-40);
+  --color-yellow-50: var(--palette-yellow-50);
+  --color-yellow-60: var(--palette-yellow-60);
+  --color-yellow-70: var(--palette-yellow-70);
+  --color-yellow-80: var(--palette-yellow-80);
+  --color-yellow-90: var(--palette-yellow-90);
+  --color-yellow-100: var(--palette-yellow-100);
+
+  --color-lime-10: var(--palette-lime-10);
+  --color-lime-20: var(--palette-lime-20);
+  --color-lime-30: var(--palette-lime-30);
+  --color-lime-40: var(--palette-lime-40);
+  --color-lime-50: var(--palette-lime-50);
+  --color-lime-60: var(--palette-lime-60);
+  --color-lime-70: var(--palette-lime-70);
+  --color-lime-80: var(--palette-lime-80);
+  --color-lime-90: var(--palette-lime-90);
+  --color-lime-100: var(--palette-lime-100);
+
+  --color-blue-10: var(--palette-blue-10);
+  --color-blue-20: var(--palette-blue-20);
+  --color-blue-30: var(--palette-blue-30);
+  --color-blue-40: var(--palette-blue-40);
+  --color-blue-50: var(--palette-blue-50);
+  --color-blue-60: var(--palette-blue-60);
+  --color-blue-70: var(--palette-blue-70);
+  --color-blue-80: var(--palette-blue-80);
+  --color-blue-90: var(--palette-blue-90);
+  --color-blue-100: var(--palette-blue-100);
+
+  --color-violet-10: var(--palette-violet-10);
+  --color-violet-20: var(--palette-violet-20);
+  --color-violet-30: var(--palette-violet-30);
+  --color-violet-40: var(--palette-violet-40);
+  --color-violet-50: var(--palette-violet-50);
+  --color-violet-60: var(--palette-violet-60);
+  --color-violet-70: var(--palette-violet-70);
+  --color-violet-80: var(--palette-violet-80);
+  --color-violet-90: var(--palette-violet-90);
+  --color-violet-100: var(--palette-violet-100);
+
+  --color-rose-10: var(--palette-rose-10);
+  --color-rose-20: var(--palette-rose-20);
+  --color-rose-30: var(--palette-rose-30);
+  --color-rose-40: var(--palette-rose-40);
+  --color-rose-50: var(--palette-rose-50);
+  --color-rose-60: var(--palette-rose-60);
+  --color-rose-70: var(--palette-rose-70);
+  --color-rose-80: var(--palette-rose-80);
+  --color-rose-90: var(--palette-rose-90);
+  --color-rose-100: var(--palette-rose-100);
+
+  --color-slate-10: var(--palette-slate-10);
+  --color-slate-20: var(--palette-slate-20);
+  --color-slate-30: var(--palette-slate-30);
+  --color-slate-40: var(--palette-slate-40);
+  --color-slate-50: var(--palette-slate-50);
+  --color-slate-60: var(--palette-slate-60);
+  --color-slate-70: var(--palette-slate-70);
+  --color-slate-80: var(--palette-slate-80);
+  --color-slate-90: var(--palette-slate-90);
+  --color-slate-100: var(--palette-slate-100);
+
+  --spacing-0: var(--spacing-spacing-0);
+  --spacing-2: var(--spacing-spacing-2);
+  --spacing-4: var(--spacing-spacing-4);
+  --spacing-6: var(--spacing-spacing-6);
+  --spacing-8: var(--spacing-spacing-8);
+  --spacing-12: var(--spacing-spacing-12);
+  --spacing-16: var(--spacing-spacing-16);
+  --spacing-24: var(--spacing-spacing-24);
+  --spacing-32: var(--spacing-spacing-32);
+  --spacing-40: var(--spacing-spacing-40);
+  --spacing-48: var(--spacing-spacing-48);
+  --spacing-56: var(--spacing-spacing-56);
+  --spacing-64: var(--spacing-spacing-64);
+  --spacing-72: var(--spacing-spacing-72);
+  --spacing-80: var(--spacing-spacing-80);
+  --spacing-88: var(--spacing-spacing-88);
+  --spacing-96: var(--spacing-spacing-96);
+  --spacing-104: var(--spacing-spacing-104);
+  --spacing-120: var(--spacing-spacing-120);
+  --spacing-128: var(--spacing-spacing-128);
+
+  --radius-4: var(--spacing-spacing-4);
+  --radius-8: var(--spacing-spacing-8);
+  --radius-12: var(--spacing-spacing-12);
+  --radius-16: var(--spacing-spacing-16);
+  --radius-24: var(--spacing-spacing-24);
+
+  /*--radius-sm: calc(var(--radius) - 4px);*/
+  /*--radius-md: calc(var(--radius) - 2px);*/
+  /*--radius-lg: var(--radius);*/
+  /*--radius-xl: calc(var(--radius) + 4px);*/
+  /*--radius-2xl: calc(var(--radius) + 8px);*/
+  /*--radius-3xl: calc(var(--radius) + 12px);*/
+  /*--radius-4xl: calc(var(--radius) + 16px);*/
+
+  --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-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);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --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.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --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.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-background-neutral-hover-tertiary) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-background-neutral-hover-tertiary);
+  border-radius: 100%;
+}
+
+.custom-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  scrollbar-width: none;
+}