@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/toggle-group.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, CSSProperties, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import { createContextScope } from "@radix-ui/react-context";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
+
+import { toggleVariants } from "#/variants/toggle";
+import type { VariantProps } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Context: ToggleGroup
+ * -------------------------------------------------------------------------- */
+
+const TOGGLE_GROUP_NAME = "ToggleGroup";
+
+type ScopedProps<P> = P & { __scopeToggleGroup?: Scope };
+
+const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
+
+const useToggleGroupScope = createToggleGroupScope();
+
+const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }
+>(TOGGLE_GROUP_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: ToggleGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  };
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ToggleGroup({
+  __scopeToggleGroup,
+  children,
+  className,
+  size,
+  spacing = 0,
+  variant,
+  ...props
+}: ScopedProps<ToggleGroupProps>): JSX.Element {
+  const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+
+  return (
+    <ToggleGroupProvider scope={__scopeToggleGroup} size={size} spacing={spacing} variant={variant}>
+      <ToggleGroupPrimitive.Root
+        className={cn(
+          "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]",
+          "rounded-lg",
+          "data-[spacing=default]:data-[variant=outline]:shadow-xs",
+          className,
+        )}
+        data-size={size}
+        data-slot="toggle-group"
+        data-spacing={spacing}
+        data-variant={variant}
+        style={{ "--gap": spacing } as CSSProperties}
+        {...toggleGroupScope}
+        {...props}
+      >
+        {children}
+      </ToggleGroupPrimitive.Root>
+    </ToggleGroupProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ToggleGroupItem
+ * -------------------------------------------------------------------------- */
+
+const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroupPrimitive.Item>>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ToggleGroupItem({
+  __scopeToggleGroup,
+  children,
+  className,
+  ...props
+}: ToggleGroupItemProps): JSX.Element {
+  const { size, spacing, variant } = useToggleGroupContext(
+    TOGGLE_GROUP_ITEM_NAME,
+    __scopeToggleGroup,
+  );
+  const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      className={cn(
+        "w-auto min-w-0 shrink-0 px-3",
+        "focus:z-10",
+        "focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none",
+        "data-[spacing=0]:first:rounded-l-lg",
+        "data-[spacing=0]:last:rounded-r-lg",
+        "data-[spacing=0]:data-[variant=outline]:border-l-0",
+        "data-[spacing=0]:data-[variant=outline]:first:border-l",
+        toggleVariants({
+          className,
+          size,
+          variant,
+        }),
+      )}
+      data-size={size}
+      data-slot="toggle-group-item"
+      data-spacing={spacing}
+      data-variant={variant}
+      {...toggleGroupScope}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };

package/src/components/toggle.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { ToggleVariants } from "#/variants/toggle";
+import type { ComponentProps, JSX } from "react";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+
+import { toggleVariants } from "#/variants/toggle";
+
+/* -----------------------------------------------------------------------------
+ * Component: Toggle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Toggle({ children, className, size, variant, ...props }: ToggleProps): JSX.Element {
+  return (
+    <TogglePrimitive.Root
+      className={toggleVariants({ className, size, variant })}
+      data-slot="toggle"
+      {...props}
+    >
+      {children}
+    </TogglePrimitive.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/tooltip.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipProvider
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipProvider({ ...props }: TooltipProviderProps): JSX.Element {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: Tooltip
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Tooltip({ ...props }: TooltipProps): JSX.Element {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipTrigger({ ...props }: TooltipTriggerProps): JSX.Element {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipContent({
+  children,
+  className,
+  sideOffset = 4,
+  ...props
+}: TooltipContentProps): JSX.Element {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        className={cn(
+          "z-50",
+          "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5",
+          "rounded-md",
+          "bg-primary text-xs text-balance text-primary-foreground",
+          "ease-snappy data-[state=delayed-open]:animate-in data-[state=delayed-open]:duration-150 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+          "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2",
+          "data-[state=delayed-open]:data-side-right:slide-in-from-left-2",
+          "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2",
+          "data-[state=delayed-open]:data-side-left:slide-in-from-right-2",
+          "data-closed:animate-out data-closed:duration-100 data-closed:fade-out-0 data-closed:zoom-out-95",
+          "data-closed:data-side-top:slide-out-to-bottom-2",
+          "data-closed:data-side-right:slide-out-to-left-2",
+          "data-closed:data-side-bottom:slide-out-to-top-2",
+          "data-closed:data-side-left:slide-out-to-right-2",
+          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
+          "origin-(--radix-tooltip-content-transform-origin)",
+          className,
+        )}
+        collisionPadding={8}
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        {...props}
+      >
+        {children}
+        <TooltipArrow />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: TooltipArrow
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element {
+  return (
+    <TooltipPrimitive.Arrow
+      className={cn("fill-primary", className)}
+      data-slot="tooltip-arrow"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export type {
+  TooltipArrowProps,
+  TooltipContentProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+};

package/src/css/amber.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.84 0.16 84); /* --color-amber-400 */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.84 0.16 84); /* --color-amber-400 */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.67 0.16 58); /* --color-amber-600 */
   --sidebar-primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.84 0.16 84); /* --color-amber-400 */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.41 0.11 46); /* --color-amber-900 */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.41 0.11 46); /* --color-amber-900 */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.77 0.16 70); /* --color-amber-500 */
   --sidebar-primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.41 0.11 46); /* --color-amber-900 */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.56 0.15 49); /* --color-amber-700 */
   --chart-5: oklch(0.47 0.12 46); /* --color-amber-800 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.77 0.16 70); /* --color-amber-500 */
+    --primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.41 0.11 46); /* --color-amber-900 */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.77 0.16 70); /* --color-amber-500 */
+    --sidebar-primary-foreground: oklch(0.99 0.02 95); /* --color-amber-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.41 0.11 46); /* --color-amber-900 */
+
+    --chart-1: oklch(0.88 0.15 92); /* --color-amber-300 */
+    --chart-2: oklch(0.77 0.16 70); /* --color-amber-500 */
+    --chart-3: oklch(0.67 0.16 58); /* --color-amber-600 */
+    --chart-4: oklch(0.56 0.15 49); /* --color-amber-700 */
+    --chart-5: oklch(0.47 0.12 46); /* --color-amber-800 */
+  }
+}

package/src/css/blue.css

@@ -1,9 +1,4 @@
 :root {
-  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
-
-  --ring: oklch(0.708 0 0); /* default ring */
-
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -15,27 +10,28 @@
 
   --destructive: oklch(0.577 0.245 27.325); /* --color-red-600 */
 
-  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
-  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */
 
+  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+
   --popover: oklch(1 0 0); /* --color-zinc-50 */
   --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
+  --ring: oklch(0.708 0 0); /* default ring */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
-
   --sidebar-primary: oklch(0.546 0.245 262.881); /* --color-blue-600 */
   --sidebar-primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
-
   --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
-
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.708 0 0); /* default sidebar ring */
 
@@ -47,11 +43,6 @@
 }
 
 .dark {
-  --input: oklch(1 0 0 / 15%); /* --color-white */
-  --border: oklch(1 0 0 / 10%); /* --color-white */
-
-  --ring: oklch(0.556 0 0); /* default ring (dark) */
-
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -63,27 +54,28 @@
 
   --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
 
-  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
-  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
   --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
   --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
+  --border: oklch(1 0 0 / 10%); /* --color-white */
+  --input: oklch(1 0 0 / 15%); /* --color-white */
+  --ring: oklch(0.556 0 0); /* default ring (dark) */
+
   --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
   --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-primary: oklch(0.623 0.214 259.815); /* --color-blue-500 */
   --sidebar-primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
-
   --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
   --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
-
   --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
   --sidebar-ring: oklch(0.439 0 0); /* default sidebar ring (dark) */
 
@@ -93,3 +85,48 @@
   --chart-4: oklch(0.488 0.243 264.376); /* --color-blue-700 */
   --chart-5: oklch(0.424 0.199 265.638); /* --color-blue-800 */
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
+    --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
+
+    --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --destructive: oklch(0.704 0.191 22.216); /* --color-red-400 */
+
+    --muted: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --muted-foreground: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
+
+    --accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --popover: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --card: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+
+    --border: oklch(1 0 0 / 10%); /* --color-white */
+    --input: oklch(1 0 0 / 15%); /* --color-white */
+    --ring: oklch(0.556 0 0); /* default ring (dark) */
+
+    --sidebar: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
+    --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-primary: oklch(0.623 0.214 259.815); /* --color-blue-500 */
+    --sidebar-primary-foreground: oklch(0.97 0.014 254.604); /* --color-blue-50 */
+    --sidebar-accent: oklch(0.274 0.006 286.033); /* --color-zinc-800 */
+    --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */
+    --sidebar-border: oklch(1 0 0 / 10%); /* --color-white */
+    --sidebar-ring: oklch(0.439 0 0); /* default sidebar ring (dark) */
+
+    --chart-1: oklch(0.809 0.105 251.813); /* --color-blue-300 */
+    --chart-2: oklch(0.623 0.214 259.815); /* --color-blue-500 */
+    --chart-3: oklch(0.546 0.245 262.881); /* --color-blue-600 */
+    --chart-4: oklch(0.488 0.243 264.376); /* --color-blue-700 */
+    --chart-5: oklch(0.424 0.199 265.638); /* --color-blue-800 */
+  }
+}