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