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