@yourgpt/copilot-sdk 1.2.10 → 1.3.0

package/dist/react/index.cjs

@@ -1,153 +1,153 @@
 'use strict';
 
-var chunkMHLF2QXY_cjs = require('../chunk-MHLF2QXY.cjs');
+var chunk3427BQ4M_cjs = require('../chunk-3427BQ4M.cjs');
 var chunkMTFU6EHR_cjs = require('../chunk-MTFU6EHR.cjs');
 
 
 
 Object.defineProperty(exports, "AbstractAgentLoop", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.AbstractAgentLoop; }
+  get: function () { return chunk3427BQ4M_cjs.AbstractAgentLoop; }
 });
 Object.defineProperty(exports, "AbstractChat", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.AbstractChat; }
+  get: function () { return chunk3427BQ4M_cjs.AbstractChat; }
 });
 Object.defineProperty(exports, "CopilotProvider", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.CopilotProvider; }
+  get: function () { return chunk3427BQ4M_cjs.CopilotProvider; }
 });
 Object.defineProperty(exports, "ReactChat", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.ReactChat; }
+  get: function () { return chunk3427BQ4M_cjs.ReactChat; }
 });
 Object.defineProperty(exports, "ReactChatState", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.ReactChatState; }
+  get: function () { return chunk3427BQ4M_cjs.ReactChatState; }
 });
 Object.defineProperty(exports, "ReactThreadManager", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.ReactThreadManager; }
+  get: function () { return chunk3427BQ4M_cjs.ReactThreadManager; }
 });
 Object.defineProperty(exports, "ReactThreadManagerState", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.ReactThreadManagerState; }
+  get: function () { return chunk3427BQ4M_cjs.ReactThreadManagerState; }
 });
 Object.defineProperty(exports, "createPermissionStorage", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createPermissionStorage; }
+  get: function () { return chunk3427BQ4M_cjs.createPermissionStorage; }
 });
 Object.defineProperty(exports, "createReactChat", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createReactChat; }
+  get: function () { return chunk3427BQ4M_cjs.createReactChat; }
 });
 Object.defineProperty(exports, "createReactChatState", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createReactChatState; }
+  get: function () { return chunk3427BQ4M_cjs.createReactChatState; }
 });
 Object.defineProperty(exports, "createReactThreadManager", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createReactThreadManager; }
+  get: function () { return chunk3427BQ4M_cjs.createReactThreadManager; }
 });
 Object.defineProperty(exports, "createReactThreadManagerState", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createReactThreadManagerState; }
+  get: function () { return chunk3427BQ4M_cjs.createReactThreadManagerState; }
 });
 Object.defineProperty(exports, "createSessionPermissionCache", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.createSessionPermissionCache; }
+  get: function () { return chunk3427BQ4M_cjs.createSessionPermissionCache; }
 });
 Object.defineProperty(exports, "formatKnowledgeResultsForAI", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.formatKnowledgeResultsForAI; }
+  get: function () { return chunk3427BQ4M_cjs.formatKnowledgeResultsForAI; }
 });
 Object.defineProperty(exports, "initialAgentLoopState", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.initialAgentLoopState; }
+  get: function () { return chunk3427BQ4M_cjs.initialAgentLoopState; }
 });
 Object.defineProperty(exports, "searchKnowledgeBase", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.searchKnowledgeBase; }
+  get: function () { return chunk3427BQ4M_cjs.searchKnowledgeBase; }
 });
 Object.defineProperty(exports, "useAIAction", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAIAction; }
+  get: function () { return chunk3427BQ4M_cjs.useAIAction; }
 });
 Object.defineProperty(exports, "useAIActions", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAIActions; }
+  get: function () { return chunk3427BQ4M_cjs.useAIActions; }
 });
 Object.defineProperty(exports, "useAIContext", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAIContext; }
+  get: function () { return chunk3427BQ4M_cjs.useAIContext; }
 });
 Object.defineProperty(exports, "useAIContexts", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAIContexts; }
+  get: function () { return chunk3427BQ4M_cjs.useAIContexts; }
 });
 Object.defineProperty(exports, "useAITools", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAITools; }
+  get: function () { return chunk3427BQ4M_cjs.useAITools; }
 });
 Object.defineProperty(exports, "useAgent", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useAgent; }
+  get: function () { return chunk3427BQ4M_cjs.useAgent; }
 });
 Object.defineProperty(exports, "useCapabilities", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useCapabilities; }
+  get: function () { return chunk3427BQ4M_cjs.useCapabilities; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useChat; }
+  get: function () { return chunk3427BQ4M_cjs.useChat; }
 });
 Object.defineProperty(exports, "useCopilot", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useCopilot; }
+  get: function () { return chunk3427BQ4M_cjs.useCopilot; }
 });
 Object.defineProperty(exports, "useDevLogger", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useDevLogger; }
+  get: function () { return chunk3427BQ4M_cjs.useDevLogger; }
 });
 Object.defineProperty(exports, "useFeatureSupport", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useFeatureSupport; }
+  get: function () { return chunk3427BQ4M_cjs.useFeatureSupport; }
 });
 Object.defineProperty(exports, "useKnowledgeBase", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useKnowledgeBase; }
+  get: function () { return chunk3427BQ4M_cjs.useKnowledgeBase; }
 });
 Object.defineProperty(exports, "useSuggestions", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useSuggestions; }
+  get: function () { return chunk3427BQ4M_cjs.useSuggestions; }
 });
 Object.defineProperty(exports, "useSupportedMediaTypes", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useSupportedMediaTypes; }
+  get: function () { return chunk3427BQ4M_cjs.useSupportedMediaTypes; }
 });
 Object.defineProperty(exports, "useThreadManager", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useThreadManager; }
+  get: function () { return chunk3427BQ4M_cjs.useThreadManager; }
 });
 Object.defineProperty(exports, "useTool", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useTool; }
+  get: function () { return chunk3427BQ4M_cjs.useTool; }
 });
 Object.defineProperty(exports, "useToolExecutor", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useToolExecutor; }
+  get: function () { return chunk3427BQ4M_cjs.useToolExecutor; }
 });
 Object.defineProperty(exports, "useToolWithSchema", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useToolWithSchema; }
+  get: function () { return chunk3427BQ4M_cjs.useToolWithSchema; }
 });
 Object.defineProperty(exports, "useTools", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useTools; }
+  get: function () { return chunk3427BQ4M_cjs.useTools; }
 });
 Object.defineProperty(exports, "useToolsWithSchema", {
   enumerable: true,
-  get: function () { return chunkMHLF2QXY_cjs.useToolsWithSchema; }
+  get: function () { return chunk3427BQ4M_cjs.useToolsWithSchema; }
 });
 Object.defineProperty(exports, "createLocalStorageAdapter", {
   enumerable: true,

package/dist/react/index.d.cts

@@ -587,6 +587,11 @@ declare class AbstractChat<T extends UIMessage = UIMessage> {
      * Set dynamic context (appended to system prompt)
      */
     setContext(context: string): void;
+    /**
+     * Set system prompt dynamically
+     * This allows updating the system prompt after initialization
+     */
+    setSystemPrompt(prompt: string): void;
     /**
      * Build the request payload
      */
@@ -816,6 +821,7 @@ interface CopilotContextValue {
     registeredActions: ActionDefinition[];
     addContext: (context: string, parentId?: string) => string;
     removeContext: (id: string) => void;
+    setSystemPrompt: (prompt: string) => void;
     threadId?: string;
     runtimeUrl: string;
     toolsConfig?: ToolsConfig;

package/dist/react/index.d.ts

@@ -587,6 +587,11 @@ declare class AbstractChat<T extends UIMessage = UIMessage> {
      * Set dynamic context (appended to system prompt)
      */
     setContext(context: string): void;
+    /**
+     * Set system prompt dynamically
+     * This allows updating the system prompt after initialization
+     */
+    setSystemPrompt(prompt: string): void;
     /**
      * Build the request payload
      */
@@ -816,6 +821,7 @@ interface CopilotContextValue {
     registeredActions: ActionDefinition[];
     addContext: (context: string, parentId?: string) => string;
     removeContext: (id: string) => void;
+    setSystemPrompt: (prompt: string) => void;
     threadId?: string;
     runtimeUrl: string;
     toolsConfig?: ToolsConfig;

package/dist/react/index.js

@@ -1,4 +1,4 @@
-export { AbstractAgentLoop, AbstractChat, CopilotProvider, ReactChat, ReactChatState, ReactThreadManager, ReactThreadManagerState, createPermissionStorage, createReactChat, createReactChatState, createReactThreadManager, createReactThreadManagerState, createSessionPermissionCache, formatKnowledgeResultsForAI, initialAgentLoopState, searchKnowledgeBase, useAIAction, useAIActions, useAIContext, useAIContexts, useAITools, useAgent, useCapabilities, useChat, useCopilot, useDevLogger, useFeatureSupport, useKnowledgeBase, useSuggestions, useSupportedMediaTypes, useThreadManager, useTool, useToolExecutor, useToolWithSchema, useTools, useToolsWithSchema } from '../chunk-EYNSW3NR.js';
+export { AbstractAgentLoop, AbstractChat, CopilotProvider, ReactChat, ReactChatState, ReactThreadManager, ReactThreadManagerState, createPermissionStorage, createReactChat, createReactChatState, createReactThreadManager, createReactThreadManagerState, createSessionPermissionCache, formatKnowledgeResultsForAI, initialAgentLoopState, searchKnowledgeBase, useAIAction, useAIActions, useAIContext, useAIContexts, useAITools, useAgent, useCapabilities, useChat, useCopilot, useDevLogger, useFeatureSupport, useKnowledgeBase, useSuggestions, useSupportedMediaTypes, useThreadManager, useTool, useToolExecutor, useToolWithSchema, useTools, useToolsWithSchema } from '../chunk-N2SMQKRK.js';
 export { createLocalStorageAdapter, createMemoryAdapter, createServerAdapter, generateSuggestionReason } from '../chunk-CVD3X4MN.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -1,48 +1,64 @@
-/* YourGPT Copilot UI Styles */
-/* Add Tailwind v4 configuration here */
+/* YourGPT Copilot SDK - Base Styles */
+/* Default neutral theme */
 
-/* shadcn/ui CSS Variables */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(240 10% 3.9%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+
+  --primary: hsl(240 5.9% 10%);
+  --primary-foreground: hsl(0 0% 98%);
+
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --ring: hsl(240 5.9% 10%);
+
   --radius: 0.5rem;
 }
 
 .dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --background: hsl(240 10% 3.9%);
+  --foreground: hsl(0 0% 98%);
+
+  --card: hsl(240 10% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+
+  --popover: hsl(240 10% 3.9%);
+  --popover-foreground: hsl(0 0% 98%);
+
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(240 5.9% 10%);
+
+  --secondary: hsl(240 3.7% 15.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+
+  --muted: hsl(240 3.7% 15.9%);
+  --muted-foreground: hsl(240 5% 64.9%);
+
+  --accent: hsl(240 3.7% 15.9%);
+  --accent-foreground: hsl(0 0% 98%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(0 0% 98%);
+
+  --border: hsl(240 3.7% 15.9%);
+  --input: hsl(240 3.7% 15.9%);
+  --ring: hsl(240 4.9% 83.9%);
 }

package/dist/themes/catppuccin.css

@@ -0,0 +1,69 @@
+/* Catppuccin Theme - Popular community theme, pastel colors */
+
+.csdk-theme-catppuccin,
+[data-csdk-theme="catppuccin"] {
+  /* Latte (Light) */
+  --background: hsl(220 23% 95%);
+  --foreground: hsl(234 16% 35%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(234 16% 35%);
+
+  --popover: hsl(223 16% 83%);
+  --popover-foreground: hsl(234 16% 35%);
+
+  --primary: hsl(267 84% 58%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(223 16% 83%);
+  --secondary-foreground: hsl(234 16% 35%);
+
+  --muted: hsl(220 17% 88%);
+  --muted-foreground: hsl(233 10% 47%);
+
+  --accent: hsl(189 71% 46%);
+  --accent-foreground: hsl(0 0% 100%);
+
+  --destructive: hsl(347 87% 44%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(225 14% 77%);
+  --input: hsl(223 16% 83%);
+  --ring: hsl(267 84% 58%);
+
+  --radius: 0.35rem;
+}
+
+/* Dark mode - Mocha */
+.dark.csdk-theme-catppuccin,
+.dark .csdk-theme-catppuccin,
+.dark[data-csdk-theme="catppuccin"],
+.dark [data-csdk-theme="catppuccin"] {
+  --background: hsl(240 21% 12%);
+  --foreground: hsl(227 70% 87%);
+
+  --card: hsl(240 21% 15%);
+  --card-foreground: hsl(227 70% 87%);
+
+  --popover: hsl(233 14% 31%);
+  --popover-foreground: hsl(227 70% 87%);
+
+  --primary: hsl(267 83% 80%);
+  --primary-foreground: hsl(240 21% 15%);
+
+  --secondary: hsl(234 13% 39%);
+  --secondary-foreground: hsl(227 70% 87%);
+
+  --muted: hsl(235 20% 21%);
+  --muted-foreground: hsl(228 24% 72%);
+
+  --accent: hsl(189 71% 73%);
+  --accent-foreground: hsl(240 21% 15%);
+
+  --destructive: hsl(351 74% 73%);
+  --destructive-foreground: hsl(240 21% 15%);
+
+  --border: hsl(237 16% 23%);
+  --input: hsl(237 16% 23%);
+  --ring: hsl(267 83% 80%);
+}

package/dist/themes/claude.css

@@ -0,0 +1,68 @@
+/* Claude Theme - Warm, earthy, AI-focused */
+
+.csdk-theme-claude,
+[data-csdk-theme="claude"] {
+  --background: hsl(45 33% 97%);
+  --foreground: hsl(47 20% 20%);
+
+  --card: hsl(45 33% 97%);
+  --card-foreground: hsl(60 5% 8%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(50 22% 13%);
+
+  --primary: hsl(16 56% 52%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(43 20% 89%);
+  --secondary-foreground: hsl(48 7% 31%);
+
+  --muted: hsl(44 24% 90%);
+  --muted-foreground: hsl(60 1% 50%);
+
+  --accent: hsl(43 20% 89%);
+  --accent-foreground: hsl(53 22% 13%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(45 8% 84%);
+  --input: hsl(47 6% 69%);
+  --ring: hsl(16 56% 52%);
+
+  --radius: 0.5rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-claude,
+.dark .csdk-theme-claude,
+.dark[data-csdk-theme="claude"],
+.dark [data-csdk-theme="claude"] {
+  --background: hsl(60 3% 15%);
+  --foreground: hsl(44 8% 74%);
+
+  --card: hsl(60 3% 15%);
+  --card-foreground: hsl(45 33% 97%);
+
+  --popover: hsl(60 3% 18%);
+  --popover-foreground: hsl(60 3% 90%);
+
+  --primary: hsl(14 62% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(45 33% 97%);
+  --secondary-foreground: hsl(60 2% 18%);
+
+  --muted: hsl(60 5% 10%);
+  --muted-foreground: hsl(46 7% 69%);
+
+  --accent: hsl(52 10% 9%);
+  --accent-foreground: hsl(50 20% 95%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(55 5% 23%);
+  --input: hsl(52 5% 31%);
+  --ring: hsl(14 62% 60%);
+}

package/dist/themes/linear.css

@@ -0,0 +1,68 @@
+/* Linear Theme - Refined purple, sophisticated */
+
+.csdk-theme-linear,
+[data-csdk-theme="linear"] {
+  --background: hsl(260 20% 99%);
+  --foreground: hsl(260 25% 12%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(260 25% 12%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(260 25% 12%);
+
+  --primary: hsl(260 75% 50%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(260 15% 95%);
+  --secondary-foreground: hsl(260 25% 12%);
+
+  --muted: hsl(260 12% 94%);
+  --muted-foreground: hsl(260 10% 45%);
+
+  --accent: hsl(195 70% 55%);
+  --accent-foreground: hsl(260 25% 12%);
+
+  --destructive: hsl(0 75% 55%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(260 12% 90%);
+  --input: hsl(260 12% 90%);
+  --ring: hsl(260 75% 50%);
+
+  --radius: 0.5rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-linear,
+.dark .csdk-theme-linear,
+.dark[data-csdk-theme="linear"],
+.dark [data-csdk-theme="linear"] {
+  --background: hsl(260 30% 7%);
+  --foreground: hsl(260 10% 95%);
+
+  --card: hsl(260 28% 10%);
+  --card-foreground: hsl(260 10% 95%);
+
+  --popover: hsl(260 28% 10%);
+  --popover-foreground: hsl(260 10% 95%);
+
+  --primary: hsl(260 65% 58%);
+  --primary-foreground: hsl(260 30% 7%);
+
+  --secondary: hsl(260 22% 15%);
+  --secondary-foreground: hsl(260 10% 95%);
+
+  --muted: hsl(260 20% 15%);
+  --muted-foreground: hsl(260 10% 55%);
+
+  --accent: hsl(195 55% 55%);
+  --accent-foreground: hsl(260 30% 7%);
+
+  --destructive: hsl(0 62% 35%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(260 22% 18%);
+  --input: hsl(260 22% 18%);
+  --ring: hsl(260 65% 58%);
+}

package/dist/themes/modern-minimal.css

@@ -0,0 +1,68 @@
+/* Modern Minimal Theme - Clean, sharp, tech-focused */
+
+.csdk-theme-modern,
+[data-csdk-theme="modern"] {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 20%);
+
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 20%);
+
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 20%);
+
+  --primary: hsl(217 91% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(220 9% 46%);
+
+  --muted: hsl(210 20% 98%);
+  --muted-foreground: hsl(220 9% 46%);
+
+  --accent: hsl(201 94% 94%);
+  --accent-foreground: hsl(224 64% 33%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(220 13% 91%);
+  --input: hsl(220 13% 91%);
+  --ring: hsl(217 91% 60%);
+
+  --radius: 0.375rem;
+}
+
+/* Dark mode */
+.dark.csdk-theme-modern,
+.dark .csdk-theme-modern,
+.dark[data-csdk-theme="modern"],
+.dark [data-csdk-theme="modern"] {
+  --background: hsl(0 0% 9%);
+  --foreground: hsl(0 0% 90%);
+
+  --card: hsl(0 0% 15%);
+  --card-foreground: hsl(0 0% 90%);
+
+  --popover: hsl(0 0% 15%);
+  --popover-foreground: hsl(0 0% 90%);
+
+  --primary: hsl(217 91% 60%);
+  --primary-foreground: hsl(0 0% 100%);
+
+  --secondary: hsl(0 0% 15%);
+  --secondary-foreground: hsl(0 0% 90%);
+
+  --muted: hsl(0 0% 12%);
+  --muted-foreground: hsl(0 0% 64%);
+
+  --accent: hsl(224 64% 33%);
+  --accent-foreground: hsl(213 97% 87%);
+
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 100%);
+
+  --border: hsl(0 0% 25%);
+  --input: hsl(0 0% 25%);
+  --ring: hsl(217 91% 60%);
+}