@cogentic-co/ds 0.4.1

package/dist/workflow.d.ts

@@ -0,0 +1,165 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactFlowProps, ConnectionLineComponent, Controls, EdgeProps, HandleProps, Position, MiniMap, Panel, NodeToolbar } from '@xyflow/react';
+import { ReactNode, ComponentProps, Component, ErrorInfo } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type WorkflowLayout = "vertical" | "horizontal";
+
+type CanvasProps = ReactFlowProps & {
+    children?: ReactNode;
+    className?: string;
+    /** Flow direction — "vertical" (top→bottom) or "horizontal" (left→right). Default: "vertical" */
+    layout?: WorkflowLayout;
+};
+declare function Canvas({ children, className, layout, ...props }: CanvasProps): react_jsx_runtime.JSX.Element;
+
+declare const workflowConnectionVariants: (props?: ({
+    variant?: "default" | "dashed" | "dotted" | "animated" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type WorkflowConnectionVariant = NonNullable<VariantProps<typeof workflowConnectionVariants>["variant"]>;
+declare function createConnectionLine(variant: WorkflowConnectionVariant): ConnectionLineComponent;
+declare const WorkflowConnection: ConnectionLineComponent;
+declare const WorkflowConnectionDotted: ConnectionLineComponent;
+declare const WorkflowConnectionDashed: ConnectionLineComponent;
+declare const WorkflowConnectionAnimated: ConnectionLineComponent;
+
+type WorkflowControlsProps = ComponentProps<typeof Controls>;
+declare function WorkflowControls({ className, ...props }: WorkflowControlsProps): react_jsx_runtime.JSX.Element;
+
+type WorkflowEdgeVariant = "solid" | "dotted" | "animated" | "dashed";
+type WorkflowEdgeProps = EdgeProps & {
+    data?: {
+        variant?: WorkflowEdgeVariant;
+        color?: string;
+        label?: string;
+        /** Show a directional arrow at the target end */
+        arrow?: boolean;
+    };
+};
+declare function SolidEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, style, }: WorkflowEdgeProps): react_jsx_runtime.JSX.Element;
+declare function DottedEdge(props: WorkflowEdgeProps): react_jsx_runtime.JSX.Element;
+declare function DashedEdge(props: WorkflowEdgeProps): react_jsx_runtime.JSX.Element;
+declare function TemporaryEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps): react_jsx_runtime.JSX.Element;
+declare function AnimatedEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, style, data, }: WorkflowEdgeProps): react_jsx_runtime.JSX.Element;
+declare const WorkflowEdge: {
+    Solid: typeof SolidEdge;
+    Dotted: typeof DottedEdge;
+    Dashed: typeof DashedEdge;
+    Animated: typeof AnimatedEdge;
+    Temporary: typeof TemporaryEdge;
+};
+
+declare const workflowGateVariants: (props?: ({
+    type?: "switch" | "end" | "delay" | "if-else" | "merge" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type WorkflowGateProps = ComponentProps<"div"> & VariantProps<typeof workflowGateVariants> & {
+    /** Label shown inside the diamond/circle */
+    label?: ReactNode;
+    /** Icon shown inside the gate shape */
+    icon?: ReactNode;
+    /** Handle configuration */
+    handles?: {
+        top?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+        right?: boolean;
+    };
+    /** Labels for left and right branches (displayed as pills beside the gate) */
+    branches?: {
+        left?: string;
+        right?: string;
+    };
+};
+declare function WorkflowGate({ type, selected, label, icon, handles, branches, className, ...props }: WorkflowGateProps): react_jsx_runtime.JSX.Element;
+
+declare const workflowGroupVariants: (props?: ({
+    variant?: "success" | "warning" | "default" | "primary" | null | undefined;
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type WorkflowGroupProps = ComponentProps<"div"> & VariantProps<typeof workflowGroupVariants> & {
+    /** Title shown at the top of the group */
+    label?: ReactNode;
+    /** Icon shown before the label */
+    icon?: ReactNode;
+};
+declare function WorkflowGroup({ variant, selected, label, icon, className, children, ...props }: WorkflowGroupProps): react_jsx_runtime.JSX.Element;
+
+declare class HandleBoundary extends Component<{
+    children: ReactNode;
+}, {
+    hasError: boolean;
+}> {
+    state: {
+        hasError: boolean;
+    };
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(_: Error, __: ErrorInfo): void;
+    render(): ReactNode;
+}
+type WorkflowHandleProps = Omit<HandleProps, "position"> & {
+    /** Override position. If omitted, auto-detects based on layout context and type (source→bottom/right, target→top/left) */
+    position?: Position;
+    className?: string;
+};
+declare const handleBase = "!size-2.5 !rounded-full !border-[1.5px] !border-card !bg-muted-foreground/60 hover:!bg-primary !transition-colors";
+declare function WorkflowHandle({ type, position, className, ...props }: WorkflowHandleProps): react_jsx_runtime.JSX.Element;
+
+type WorkflowLabelProps = ComponentProps<"div"> & {
+    variant?: "default" | "success" | "warning" | "error" | "muted";
+};
+declare function WorkflowLabel({ variant, className, ...props }: WorkflowLabelProps): react_jsx_runtime.JSX.Element;
+
+type WorkflowMinimapProps = ComponentProps<typeof MiniMap>;
+declare function WorkflowMinimap({ className, ...props }: WorkflowMinimapProps): react_jsx_runtime.JSX.Element;
+
+declare const workflowNodeVariants: (props?: ({
+    state?: "default" | "selected" | "dotted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type WorkflowNodeProps = ComponentProps<"div"> & VariantProps<typeof workflowNodeVariants> & {
+    /** Show the 6-dot drag grip in the header */
+    draggable?: boolean;
+    /** Icon rendered before the title — wrap in a coloured square for the best look */
+    icon?: React.ReactNode;
+    /** Node title text */
+    title?: React.ReactNode;
+    /** Status badge (e.g. "TRIGGER") shown at the trailing edge of the header */
+    status?: React.ReactNode;
+    /** Notification badge count rendered on the icon */
+    badge?: number | string;
+    /** Make the body collapsible with an expand/close footer toggle */
+    collapsible?: boolean;
+    /** Start collapsed when collapsible is true */
+    defaultCollapsed?: boolean;
+    /** Custom footer content (ignored when collapsible is true) */
+    footer?: React.ReactNode;
+    /** Configure source/target handles at the top and bottom edges */
+    handles?: {
+        target?: boolean;
+        source?: boolean;
+    };
+};
+declare function WorkflowNodeHeader({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeTitle({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeDescription({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeAction({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeContent({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeFooter({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeSeparator({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function WorkflowNodeRow({ label, value, icon, className, ...props }: ComponentProps<"div"> & {
+    label: string;
+    value: React.ReactNode;
+    icon?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function WorkflowNode({ state, draggable: showDragHandle, icon, title, status, badge, collapsible, defaultCollapsed, footer, handles, className, children, ...props }: WorkflowNodeProps): react_jsx_runtime.JSX.Element;
+
+type WorkflowPanelProps = ComponentProps<typeof Panel>;
+declare function WorkflowPanel({ className, ...props }: WorkflowPanelProps): react_jsx_runtime.JSX.Element;
+
+type WorkflowToolbarProps = ComponentProps<typeof NodeToolbar>;
+declare function WorkflowToolbar({ className, ...props }: WorkflowToolbarProps): react_jsx_runtime.JSX.Element;
+
+export { AnimatedEdge, Canvas, type CanvasProps, DashedEdge, DottedEdge, HandleBoundary, SolidEdge, TemporaryEdge, WorkflowConnection, WorkflowConnectionAnimated, WorkflowConnectionDashed, WorkflowConnectionDotted, type WorkflowConnectionVariant, WorkflowControls, type WorkflowControlsProps, WorkflowEdge, type WorkflowEdgeProps, type WorkflowEdgeVariant, WorkflowGate, type WorkflowGateProps, WorkflowGroup, type WorkflowGroupProps, WorkflowHandle, type WorkflowHandleProps, WorkflowLabel, type WorkflowLabelProps, WorkflowMinimap, type WorkflowMinimapProps, WorkflowNode, WorkflowNodeAction, WorkflowNodeContent, WorkflowNodeDescription, WorkflowNodeFooter, WorkflowNodeHeader, type WorkflowNodeProps, WorkflowNodeRow, WorkflowNodeSeparator, WorkflowNodeTitle, WorkflowPanel, type WorkflowPanelProps, WorkflowToolbar, type WorkflowToolbarProps, createConnectionLine, handleBase, workflowConnectionVariants, workflowGateVariants, workflowGroupVariants, workflowNodeVariants };

package/dist/workflow.js

@@ -0,0 +1,5 @@
+"use client";
+export { AnimatedEdge, Canvas, DashedEdge, DottedEdge, HandleBoundary, SolidEdge, TemporaryEdge, WorkflowConnection, WorkflowConnectionAnimated, WorkflowConnectionDashed, WorkflowConnectionDotted, WorkflowControls, WorkflowEdge, WorkflowGate, WorkflowGroup, WorkflowHandle, WorkflowLabel, WorkflowMinimap, WorkflowNode, WorkflowNodeAction, WorkflowNodeContent, WorkflowNodeDescription, WorkflowNodeFooter, WorkflowNodeHeader, WorkflowNodeRow, WorkflowNodeSeparator, WorkflowNodeTitle, WorkflowPanel, WorkflowToolbar, createConnectionLine, handleBase, workflowConnectionVariants, workflowGateVariants, workflowGroupVariants, workflowNodeVariants } from './chunk-XFWKI45G.js';
+import './chunk-GZNLQE3I.js';
+//# sourceMappingURL=workflow.js.map
+//# sourceMappingURL=workflow.js.map

package/dist/workflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"workflow.js"}

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "@cogentic-co/ds",
+  "version": "0.4.1",
+  "description": "Cogentic Design System — UI components for building modern compliance applications",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles.css": "./src/styles/globals.css",
+    "./animations/*": {
+      "import": {
+        "types": "./dist/animations/*.d.ts",
+        "default": "./dist/animations/*.js"
+      }
+    },
+    "./blocks/*": {
+      "import": {
+        "types": "./dist/blocks/*.d.ts",
+        "default": "./dist/blocks/*.js"
+      }
+    },
+    "./charts": {
+      "import": {
+        "types": "./dist/charts.d.ts",
+        "default": "./dist/charts.js"
+      }
+    },
+    "./workflow": {
+      "import": {
+        "types": "./dist/workflow.d.ts",
+        "default": "./dist/workflow.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://cogentic.co",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cogentic-co/ds.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cogentic-co/ds/issues"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "tailwindcss",
+    "typescript",
+    "ui",
+    "compliance",
+    "nextjs",
+    "base-ui",
+    "cogentic"
+  ],
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@xyflow/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.2.0",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-form": "^1.28.4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.575.0",
+    "motion": "^12.34.3",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.13.2",
+    "react-resizable-panels": "^4.6.5",
+    "recharts": "3.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.6",
+    "@changesets/cli": "^2.30.0",
+    "@playwright/test": "^1.58.2",
+    "@size-limit/file": "^12.0.1",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jscodeshift": "^17.3.0",
+    "@types/node": "^25.3.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@xyflow/react": "^12.8.2",
+    "jscodeshift": "^17.3.0",
+    "jsdom": "^28.1.0",
+    "next": "16.1.6",
+    "react-docgen-typescript": "^2.4.0",
+    "shadcn": "^3.8.5",
+    "shiki": "^4.0.2",
+    "size-limit": "^12.0.1",
+    "tailwindcss": "^4.2.1",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
+    "vitest-axe": "^0.1.0"
+  },
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "generate:props": "node --import tsx scripts/generate-props.ts",
+    "build:pkg": "tsup",
+    "start": "next start",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
+    "registry:build": "shadcn build",
+    "size": "size-limit",
+    "size:check": "size-limit --json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "changeset": "changeset",
+    "version:bump": "changeset version"
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,211 @@
+@custom-variant dark (&:is(.dark *));
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes marquee-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  --color-cogentic-green: var(--cogentic-green);
+
+  --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-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-border: var(--border);
+  --color-border-light: var(--border-light);
+  --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-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+
+  --color-logo-gray: var(--logo-gray);
+  --color-tagline: var(--tagline);
+  --color-success: var(--success);
+  --color-risk-high: var(--risk-high);
+  --color-cyan: #00d4ff;
+
+  --shadow-soft: var(--shadow-soft);
+  --shadow-light: var(--shadow-light);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --animate-marquee-left: marquee-left linear infinite;
+  --animate-marquee-right: marquee-right linear infinite;
+  --animate-shimmer: shimmer ease-in-out infinite;
+}
+
+:root {
+  --radius: 0.625rem;
+  --cogentic-green: #0e2807;
+  --background: oklch(98.511% 0.00011 271.152);
+  --foreground: oklch(0.172 0.006 286.3);
+  --card: oklch(1 0 89.88);
+  --card-foreground: oklch(0.172 0.006 286.3);
+  --popover: oklch(1 0 89.88);
+  --popover-foreground: oklch(0.172 0.006 286.3);
+  --primary: oklch(0.172 0.006 286.3);
+  --primary-foreground: oklch(1 0 89.88);
+  --secondary: oklch(0.9461 0 89.88);
+  --secondary-foreground: oklch(0.2046 0 89.88);
+  --muted: oklch(0.9702 0 89.88);
+  --muted-foreground: oklch(0.61 0.03 270);
+  --accent: oklch(0.982 0.004 230);
+  --accent-foreground: oklch(0.2046 0 89.88);
+  --destructive: oklch(0.6368 0.2078 25.33);
+  --destructive-foreground: oklch(1 0 89.88);
+  --warning: oklch(0.78 0.16 70);
+  --warning-foreground: oklch(0.32 0.07 55);
+  --border: oklch(0.924 0.003 255.9);
+  --border-light: oklch(0.956 0.004 248.7);
+  --input: oklch(0.9219 0 89.88);
+  --ring: oklch(0.172 0.006 286.3);
+  --chart-1: oklch(0.6486 0.1771 32.95);
+  --chart-2: oklch(0.6304 0.1013 183.03);
+  --chart-3: oklch(0.3753 0.0438 226.2);
+  --chart-4: oklch(0.8342 0.117 87.43);
+  --chart-5: oklch(0.7806 0.1269 57.86);
+  --logo-gray: oklch(0.66 0.027 268.5);
+  --tagline: rgb(42, 48, 51);
+  --success: oklch(0.79 0.12 179.5);
+  --risk-high: oklch(0.65 0.18 50);
+  --shadow-soft: 0 2px 4px 0 rgba(13, 13, 18, 0.15);
+  --shadow-light: 0 2px 4px 0 rgba(13, 13, 18, 0.04);
+  --sidebar: oklch(0.9702 0 89.88);
+  --sidebar-foreground: oklch(0.172 0.006 286.3);
+  --sidebar-primary: oklch(0.172 0.006 286.3);
+  --sidebar-primary-foreground: oklch(1 0 89.88);
+  --sidebar-accent: oklch(0.982 0.004 230);
+  --sidebar-accent-foreground: oklch(0.2046 0 89.88);
+  --sidebar-border: oklch(0.924 0.003 255.9);
+  --sidebar-ring: oklch(0.172 0.006 286.3);
+}
+
+.dark {
+  --cogentic-green: oklch(94.675% 0.16548 122.442);
+  --background: oklch(0.23 0.02 265);
+  --foreground: oklch(0.98 0.01 255);
+  --card: oklch(0.26 0.02 265);
+  --card-foreground: oklch(0.98 0.01 255);
+  --popover: oklch(0.26 0.02 265);
+  --popover-foreground: oklch(0.98 0.01 255);
+  --primary: oklch(0.98 0.01 255);
+  --primary-foreground: oklch(0.23 0.02 265);
+  --secondary: oklch(0.29 0.02 265);
+  --secondary-foreground: oklch(0.98 0.01 255);
+  --muted: oklch(0.28 0.015 265);
+  --muted-foreground: oklch(0.75 0.02 260);
+  --accent: oklch(0.29 0.02 265);
+  --accent-foreground: oklch(0.98 0.01 255);
+  --destructive: oklch(0.62 0.21 25.3);
+  --destructive-foreground: oklch(0.98 0.005 255);
+  --warning: oklch(0.75 0.15 70);
+  --warning-foreground: oklch(0.92 0.04 85);
+  --border: oklch(0.36 0.01 265);
+  --border-light: oklch(0.42 0.01 265);
+  --input: oklch(0.29 0.02 265);
+  --ring: oklch(0.92 0.02 255);
+  --chart-1: oklch(0.72 0.19 33);
+  --chart-2: oklch(0.7 0.1 183);
+  --chart-3: oklch(0.58 0.05 226);
+  --chart-4: oklch(0.78 0.11 87);
+  --chart-5: oklch(0.74 0.12 58);
+  --logo-gray: oklch(0.77 0.02 268.5);
+  --tagline: oklch(0.57 0.223 275.64);
+  --success: oklch(0.74 0.12 179.5);
+  --risk-high: oklch(0.65 0.18 50);
+  --shadow-soft: 0 2px 4px 0 rgba(0, 0, 0, 0.35);
+  --shadow-light: 0 2px 8px -1px rgba(0, 0, 0, 0.3);
+  --sidebar: oklch(0.26 0.02 265);
+  --sidebar-foreground: oklch(0.98 0.01 255);
+  --sidebar-primary: oklch(0.98 0.01 255);
+  --sidebar-primary-foreground: oklch(0.23 0.02 265);
+  --sidebar-accent: oklch(0.29 0.02 265);
+  --sidebar-accent-foreground: oklch(0.98 0.01 255);
+  --sidebar-border: oklch(0.36 0.01 265);
+  --sidebar-ring: oklch(0.92 0.02 255);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}