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