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