CopilotKit/packages/react-ui/src/css/colors.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
77
78
79
80
81
82
/* IMPORTANT NOTE:
THE DARK AND LIGHT COLORS HERE ARE DUPLICATED BECAUSE NO REUSE METHOD POSSIBLE.
WHEN MAKING ANY CHANGE, MAKE SURE TO INCLUDE IT IN ALL DUPLICATIONS.
*/

/* BASE LIGHT THEME */
:root {
  /* Semantic color tokens */
  /* Main brand/action color - used for buttons, interactive elements */
  --copilot-kit-primary-color: rgb(28, 28, 28);
  /* Color that contrasts with primary - used for text on primary elements */
  --copilot-kit-contrast-color: rgb(255, 255, 255);
  /* Main page/container background color */
  --copilot-kit-background-color: rgb(255 255 255);
  /* Input box background color */
  --copilot-kit-input-background-color: #fbfbfb;
  /* Secondary background - used for cards, panels, elevated surfaces */
  --copilot-kit-secondary-color: rgb(255 255 255);
  /* Primary text color for main content */
  --copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
  /* Border color for dividers and containers */
  --copilot-kit-separator-color: rgb(200 200 200);
  /* Muted color for disabled/inactive states */
  --copilot-kit-muted-color: rgb(200 200 200);

  /* Error colors */
  --copilot-kit-error-background: #fef2f2;
  --copilot-kit-error-border: #fecaca;
  --copilot-kit-error-text: #dc2626;

  /* Shadow tokens */
  /* Small shadow for subtle elevation */
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* Medium shadow for cards */
  --copilot-kit-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Large shadow for modals */
  --copilot-kit-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --copilot-kit-dev-console-bg: #f8f8fa;
  --copilot-kit-dev-console-text: black;
}

/* BASE DARK THEME */
.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] {
  /* Main brand/action color - used for buttons, interactive elements */
  --copilot-kit-primary-color: rgb(255, 255, 255);
  /* Color that contrasts with primary - used for text on primary elements */
  --copilot-kit-contrast-color: rgb(28, 28, 28);
  /* Main page/container background color */
  --copilot-kit-background-color: rgb(17, 17, 17);
  /* Input box background color */
  --copilot-kit-input-background-color: #2c2c2c;
  /* Secondary background - used for cards, panels, elevated surfaces */
  --copilot-kit-secondary-color: rgb(28, 28, 28);
  /* Primary text color for main content */
  --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
  /* Border color for dividers and containers */
  --copilot-kit-separator-color: rgb(45, 45, 45);
  /* Muted color for disabled/inactive states */
  --copilot-kit-muted-color: rgb(45, 45, 45);

  /* Error colors */
  --copilot-kit-error-background: #7f1d1d;
  --copilot-kit-error-border: #dc2626;
  --copilot-kit-error-text: #fca5a5;

  /* Small shadow for subtle elevation */
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  /* Medium shadow for cards */
  --copilot-kit-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  /* Large shadow for modals */
  --copilot-kit-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}