CopilotKit/examples/integrations/ms-agent-framework-python/src/app/globals.css at main · codingwatching/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
68
69
70
71
72
73
74
75
76
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;

  /* Threads-panel theme-map — values pulled verbatim from CopilotKit's V2
     design system (the same one this example's CopilotSidebar renders with;
     see @copilotkit/react-core/src/v2/styles/globals.css). The drawer is a
     left-side companion to that LIGHT sidebar, so it inherits the sidebar's
     exact neutral-gray palette, charcoal "primary" (NOT a brand accent — the
     sidebar's primary buttons are near-black), and 0.625rem radius scale.
     This keeps the threads panel reading as one product with the chat.
     See ../components/threads-drawer/THEME.md for the full token contract. */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Match the V2 sidebar's radius scale exactly (--radius: 0.625rem there). */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* This example loads no custom web font — its body uses the system Arial
     stack — so the drawer follows the same stack (and a system monospace for
     the locked-state command well). */
  --font-body: Arial, Helvetica, sans-serif;
  --font-code: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/* This example's CopilotSidebar (CopilotKit's V2 chat) stays LIGHT regardless
   of the OS color scheme, so the threads panel is held light too — otherwise it
   would clash with the sidebar it sits beside. The panel reads --foreground for
   its titles/body text, which the dark-mode block above flips. The demo content
   (CopilotSidebar + ProverbsCard) uses its own colors, not these tokens, so
   re-pinning a stable light foreground/background on the threads layout wrapper
   keeps the panel readable without affecting anything else. The confirm dialog
   renders in a portal on <body>, so re-pin there as well. Values mirror the V2
   light theme (oklch(0.145 0 0) / oklch(1 0 0)). */
.threadsLayout,
body > [role="presentation"] {
  --foreground: oklch(0.145 0 0);
  --background: oklch(1 0 0);
}

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

body,
html {
  height: 100%;
}