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