CopilotKit/examples/integrations/agno/src/app/globals.css at main · samuelson-chen/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@import "tailwindcss";

/*
 * Threads panel theme — bespoke match to agno's CopilotKit chat (CopilotSidebar).
 *
 * The CopilotKit v2 chat renders LIGHT regardless of OS dark mode (neutral
 * zinc/gray surfaces on white, ~1rem bubble radius, system-ui sans). To read as
 * native to that chat, the threads panel is FORCED light: we drop agno's old
 * `prefers-color-scheme: dark` override of --background/--foreground so the
 * panel never goes dark while the chat beside it stays light. agno's own demo
 * content sets all of its colors locally (text-white, bg-white/20, the indigo
 * themeColor backdrop), so it is unaffected by this.
 *
 * Tokens are defined at :root (not a wrapper) so the drawer's delete-confirm
 * dialog — which renders through a React portal to <body>, outside the panel —
 * still resolves the same surfaces. This follows threads-drawer/THEME.md, which
 * sanctions defining the contract tokens on :root. The drawer + locked-state are
 * BASE components driven entirely by these tokens — do not edit the drawer files.
 *
 * The indigo accent (#6366f1) is agno's own app accent, tying the panel to the
 * surrounding product; the neutral zinc surfaces/borders/muted text mirror the
 * chat's light chrome.
 */
:root {
  /* Neutral surfaces — match the chat's white/zinc light palette */
  --background: #ffffff;
  --foreground: #18181b; /* zinc-900 */
  --card: #ffffff;
  --card-foreground: #18181b;

  /* Agno's indigo accent for the primary new-thread button + active thread */
  --primary: #6366f1;
  --primary-foreground: #ffffff;

  /* Tints / hovers — zinc scale, matching the chat's neutral chrome */
  --secondary: #f4f4f5; /* zinc-100 */
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a; /* zinc-500 */
  --accent: #eef2ff; /* indigo-50 — selected thread row tint */
  --accent-foreground: #18181b;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;

  --border: #e4e4e7; /* zinc-200 */
  --input: #e4e4e7;
  --ring: #a5b4fc; /* indigo-300 — focus ring keyed to the accent */

  /* Match the chat's rounded-2xl (1rem) corner language */
  --radius: 1rem;

  /* Match the chat's system-ui sans stack */
  --font-body:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

body,
html {
  height: 100%;
}