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.highest;
7
8 let content_width = 304;
9
10 let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
11 background: background(layer),
12 border: border(layer, "active"),
13 cornerRadius: 4,
14 margin: {
15 top: 4,
16 bottom: 4,
17 },
18 padding: {
19 top: 3,
20 bottom: 3,
21 left: 7,
22 right: 7,
23 },
24 ...text(layer, "sans", "default", { size: "sm" }),
25 hover: {
26 ...text(layer, "sans", "default", { size: "sm" }),
27 background: background(layer, "hovered"),
28 border: border(layer, "active"),
29 },
30 };
31
32 return {
33 outLinkIcon: {
34 icon: svg(foreground(layer, "variant"), "icons/maybe_link_out.svg", 12, 12),
35 container: {
36 cornerRadius: 6,
37 padding: { top: 6, bottom: 6, left: 6, right: 6 },
38 },
39 hover: {
40 icon: svg(foreground(layer, "hovered"), "icons/maybe_link_out.svg", 12, 12)
41 },
42 },
43 modal: {
44 titleText: {
45 ...text(layer, "sans", { size: "md", color: background(layer, "default") }),
46 active: {
47 ...text(layer, "sans", { size: "md" }),
48 }
49 },
50 titlebar: {
51 border: border(layer, "active"),
52 padding: {
53 top: 8,
54 bottom: 8,
55 left: 8,
56 right: 8,
57 },
58 margin: {
59 top: 0,
60 left: 0,
61 right: 0,
62 bottom: 16
63 }
64 },
65 container: {
66 background: background(colorScheme.highest),
67
68 },
69 closeIcon: {
70 icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
71 container: {
72 cornerRadius: 2,
73 padding: {
74 top: 3,
75 bottom: 3,
76 left: 7,
77 right: 0,
78 }
79 },
80 active: {
81 icon: svg(foreground(colorScheme.lowest, "warning"), "icons/x_mark_16.svg", 16, 16),
82 },
83 hoverAndActive: {
84 icon: svg(foreground(layer, "on", "hovered"), "icons/x_mark_16.svg", 16, 16),
85 },
86 clickedAndactive: {
87 icon: svg(foreground(layer, "on", "pressed"), "icons/x_mark_16.svg", 16, 16),
88 }
89 },
90 dimensions: {
91 width: 400,
92 height: 500,
93 },
94 },
95 auth: {
96 content_width,
97
98 headerGroup: {
99 margin: {
100 top: 5,
101 bottom: 5,
102 left: 0,
103 right: 0
104 }
105 },
106 copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 32, 32),
107 plusIcon: {
108 icon: svg(foreground(layer, "default"), "icons/plus_12.svg", 12, 12),
109 container: {
110 padding: {
111 top: 12,
112 bottom: 12,
113 left: 12,
114 right: 12,
115 }
116 }
117 },
118 zedIcon: svg(foreground(layer, "default"), "icons/logo_96.svg", 32, 32),
119 enableText: text(layer, "sans", { size: "md" }),
120 enableGroup: {
121 margin: {
122 top: 5,
123 bottom: 5,
124 left: 0,
125 right: 0
126 }
127 },
128
129 instructionText: text(layer, "sans"),
130
131 deviceCodeGroup: {
132 margin: {
133 top: 20,
134 bottom: 20,
135 left: 0,
136 right: 0
137 }
138 },
139 deviceCode:
140 text(layer, "mono", { size: "md" }),
141 deviceCodeCta: {
142 ...ctaButton,
143 padding: {
144 top: 0,
145 bottom: 0,
146 left: 0,
147 right: 0,
148 },
149 },
150 deviceCodeLeft: content_width * 2 / 3,
151 deviceCodeLeftContainer: {
152 padding: {
153 top: 3,
154 bottom: 3,
155 left: 0,
156 right: 0,
157 },
158 },
159 deviceCodeRight: content_width * 1 / 3,
160 deviceCodeRightContainer: {
161 border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
162 padding: {
163 top: 3,
164 bottom: 5,
165 left: 0,
166 right: 0,
167 },
168 },
169 deviceCodeSeperatorHeight: 0,
170 hint: {
171 ...text(layer, "sans", { size: "xs" }),
172 margin: {
173 top: -5,
174 }
175 },
176 enabledHint: {
177 margin: {
178 top: 10,
179 bottom: 10
180 }
181 },
182 notAuthorizedHint: {
183 margin: {
184 top: 10,
185 bottom: 10
186 }
187 },
188
189 warning: {
190 ...text(layer, "sans", { size: "md", color: foreground(layer, "warning") }),
191 border: border(layer, "warning"),
192 background_color: background(layer, "warning"),
193 cornerRadius: 2,
194 },
195
196 githubGroup: {
197 margin: {
198 top: 3,
199 bottom: 3,
200 left: 0,
201 right: 0
202 }
203 },
204
205 ctaButton
206 }
207 }
208}