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