copilot.ts
1import { ColorScheme } from "../themes/common/colorScheme"
2import { background, border, foreground, svg, text } from "./components"
3
4export default function copilot(colorScheme: ColorScheme) {
5 let layer = colorScheme.middle
6
7 let content_width = 264
8
9 let ctaButton = {
10 // Copied from welcome screen. FIXME: Move this into a ZDS component
11 background: background(layer),
12 border: border(layer, "default"),
13 cornerRadius: 4,
14 margin: {
15 top: 4,
16 bottom: 4,
17 left: 8,
18 right: 8,
19 },
20 padding: {
21 top: 3,
22 bottom: 3,
23 left: 7,
24 right: 7,
25 },
26 ...text(layer, "sans", "default", { size: "sm" }),
27 hover: {
28 ...text(layer, "sans", "default", { size: "sm" }),
29 background: background(layer, "hovered"),
30 border: border(layer, "active"),
31 },
32 }
33
34 return {
35 outLinkIcon: {
36 icon: svg(
37 foreground(layer, "variant"),
38 "icons/link_out_12.svg",
39 12,
40 12
41 ),
42 container: {
43 cornerRadius: 6,
44 padding: { left: 6 },
45 },
46 hover: {
47 icon: svg(
48 foreground(layer, "hovered"),
49 "icons/link_out_12.svg",
50 12,
51 12
52 ),
53 },
54 },
55 modal: {
56 titleText: {
57 ...text(layer, "sans", { size: "xs", weight: "bold" }),
58 },
59 titlebar: {
60 background: background(colorScheme.lowest),
61 border: border(layer, "active"),
62 padding: {
63 top: 4,
64 bottom: 4,
65 left: 8,
66 right: 8,
67 },
68 },
69 container: {
70 background: background(colorScheme.lowest),
71 padding: {
72 top: 0,
73 left: 0,
74 right: 0,
75 bottom: 8,
76 },
77 },
78 closeIcon: {
79 icon: svg(
80 foreground(layer, "variant"),
81 "icons/x_mark_8.svg",
82 8,
83 8
84 ),
85 container: {
86 cornerRadius: 2,
87 padding: {
88 top: 4,
89 bottom: 4,
90 left: 4,
91 right: 4,
92 },
93 margin: {
94 right: 0,
95 },
96 },
97 hover: {
98 icon: svg(
99 foreground(layer, "on"),
100 "icons/x_mark_8.svg",
101 8,
102 8
103 ),
104 },
105 clicked: {
106 icon: svg(
107 foreground(layer, "base"),
108 "icons/x_mark_8.svg",
109 8,
110 8
111 ),
112 },
113 },
114 dimensions: {
115 width: 280,
116 height: 280,
117 },
118 },
119
120 auth: {
121 content_width,
122
123 ctaButton,
124
125 header: {
126 icon: svg(
127 foreground(layer, "default"),
128 "icons/zed_plus_copilot_32.svg",
129 92,
130 32
131 ),
132 container: {
133 margin: {
134 top: 35,
135 bottom: 5,
136 left: 0,
137 right: 0,
138 },
139 },
140 },
141
142 prompting: {
143 subheading: {
144 ...text(layer, "sans", { size: "xs" }),
145 margin: {
146 top: 6,
147 bottom: 12,
148 left: 0,
149 right: 0,
150 },
151 },
152
153 hint: {
154 ...text(layer, "sans", { size: "xs", color: "#838994" }),
155 margin: {
156 top: 6,
157 bottom: 2,
158 },
159 },
160
161 deviceCode: {
162 text: text(layer, "mono", { size: "sm" }),
163 cta: {
164 ...ctaButton,
165 background: background(colorScheme.lowest),
166 border: border(colorScheme.lowest, "inverted"),
167 padding: {
168 top: 0,
169 bottom: 0,
170 left: 16,
171 right: 16,
172 },
173 margin: {
174 left: 16,
175 right: 16,
176 },
177 },
178 left: content_width / 2,
179 leftContainer: {
180 padding: {
181 top: 3,
182 bottom: 3,
183 left: 0,
184 right: 6,
185 },
186 },
187 right: (content_width * 1) / 3,
188 rightContainer: {
189 border: border(colorScheme.lowest, "inverted", {
190 bottom: false,
191 right: false,
192 top: false,
193 left: true,
194 }),
195 padding: {
196 top: 3,
197 bottom: 5,
198 left: 8,
199 right: 0,
200 },
201 hover: {
202 border: border(layer, "active", {
203 bottom: false,
204 right: false,
205 top: false,
206 left: true,
207 }),
208 },
209 },
210 },
211 },
212
213 notAuthorized: {
214 subheading: {
215 ...text(layer, "sans", { size: "xs" }),
216
217 margin: {
218 top: 16,
219 bottom: 16,
220 left: 0,
221 right: 0,
222 },
223 },
224
225 warning: {
226 ...text(layer, "sans", {
227 size: "xs",
228 color: foreground(layer, "warning"),
229 }),
230 border: border(layer, "warning"),
231 background: background(layer, "warning"),
232 cornerRadius: 2,
233 padding: {
234 top: 4,
235 left: 4,
236 bottom: 4,
237 right: 4,
238 },
239 margin: {
240 bottom: 16,
241 left: 8,
242 right: 8,
243 },
244 },
245 },
246
247 authorized: {
248 subheading: {
249 ...text(layer, "sans", { size: "xs" }),
250
251 margin: {
252 top: 16,
253 bottom: 16,
254 },
255 },
256
257 hint: {
258 ...text(layer, "sans", { size: "xs", color: "#838994" }),
259 margin: {
260 top: 24,
261 bottom: 4,
262 },
263 },
264 },
265 },
266 }
267}