1import { ColorScheme } from "../themes/common/colorScheme"
2import { background, border, foreground, svg, text } from "./components";
3
4
5export default function copilot(colorScheme: ColorScheme) {
6 let layer = colorScheme.middle;
7
8 let content_width = 264;
9
10 let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
11 background: background(layer),
12 border: border(layer, "default"),
13 cornerRadius: 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(layer, "sans", "default", { size: "sm" }),
27 hover: {
28 ...text(layer, "sans", "default", { size: "sm" }),
29 background: background(layer, "hovered"),
30 border: border(layer, "active"),
31 },
32 };
33
34 return {
35 outLinkIcon: {
36 icon: svg(foreground(layer, "variant"), "icons/link_out_12.svg", 12, 12),
37 container: {
38 cornerRadius: 6,
39 padding: { left: 6 },
40 },
41 hover: {
42 icon: svg(foreground(layer, "hovered"), "icons/link_out_12.svg", 12, 12)
43 },
44 },
45 modal: {
46 titleText: {
47 ...text(layer, "sans", { size: "xs", "weight": "bold" })
48 },
49 titlebar: {
50 background: background(colorScheme.lowest),
51 border: border(layer, "active"),
52 padding: {
53 top: 4,
54 bottom: 4,
55 left: 8,
56 right: 8,
57 }
58 },
59 container: {
60 background: background(colorScheme.lowest),
61 padding: {
62 top: 0,
63 left: 0,
64 right: 0,
65 bottom: 8,
66 }
67 },
68 closeIcon: {
69 icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8),
70 container: {
71 cornerRadius: 2,
72 padding: {
73 top: 4,
74 bottom: 4,
75 left: 4,
76 right: 4,
77 },
78 margin: {
79 right: 0
80 }
81 },
82 hover: {
83 icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8),
84 },
85 clicked: {
86 icon: svg(foreground(layer, "base"), "icons/x_mark_8.svg", 8, 8),
87 }
88 },
89 dimensions: {
90 width: 280,
91 height: 280,
92 },
93 },
94
95 auth: {
96 content_width,
97
98 ctaButton,
99
100 header: {
101 icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32),
102 container: {
103 margin: {
104 top: 35,
105 bottom: 5,
106 left: 0,
107 right: 0
108 }
109 },
110 },
111
112 prompting: {
113 subheading: {
114 ...text(layer, "sans", { size: "xs" }),
115 margin: {
116 top: 6,
117 bottom: 12,
118 left: 0,
119 right: 0
120 }
121 },
122
123 hint: {
124 ...text(layer, "sans", { size: "xs", color: "#838994" }),
125 margin: {
126 top: 6,
127 bottom: 2
128 }
129 },
130
131 deviceCode: {
132 text:
133 text(layer, "mono", { size: "sm" }),
134 cta: {
135 ...ctaButton,
136 background: background(colorScheme.lowest),
137 border: border(colorScheme.lowest, "inverted"),
138 padding: {
139 top: 0,
140 bottom: 0,
141 left: 16,
142 right: 16,
143 },
144 margin: {
145 left: 16,
146 right: 16,
147 }
148 },
149 left: content_width / 2,
150 leftContainer: {
151 padding: {
152 top: 3,
153 bottom: 3,
154 left: 0,
155 right: 6,
156 },
157 },
158 right: content_width * 1 / 3,
159 rightContainer: {
160 border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
161 padding: {
162 top: 3,
163 bottom: 5,
164 left: 8,
165 right: 0,
166 },
167 hover: {
168 border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
169 },
170 }
171 },
172 },
173
174 notAuthorized: {
175 subheading: {
176 ...text(layer, "sans", { size: "xs" }),
177
178 margin: {
179 top: 16,
180 bottom: 16,
181 left: 0,
182 right: 0
183 }
184 },
185
186 warning: {
187 ...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }),
188 border: border(layer, "warning"),
189 background: background(layer, "warning"),
190 cornerRadius: 2,
191 padding: {
192 top: 4,
193 left: 4,
194 bottom: 4,
195 right: 4,
196 },
197 margin: {
198 bottom: 16,
199 left: 8,
200 right: 8
201 }
202 },
203 },
204
205 authorized: {
206 subheading: {
207 ...text(layer, "sans", { size: "xs" }),
208
209 margin: {
210 top: 16,
211 bottom: 16
212 }
213 },
214
215 hint: {
216 ...text(layer, "sans", { size: "xs", color: "#838994" }),
217 margin: {
218 top: 24,
219 bottom: 4
220 }
221 },
222
223 },
224 }
225 }
226}