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