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/link_out_12.svg", 12, 12),
35 container: {
36 cornerRadius: 6,
37 padding: { left: 6 },
38 },
39 hover: {
40 icon: svg(foreground(layer, "hovered"), "icons/link_out_12.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 copilotPlusZedIcon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 32, 92),
107 enableText: text(layer, "sans", { size: "md" }),
108 enableGroup: {
109 margin: {
110 top: 5,
111 bottom: 5,
112 left: 0,
113 right: 0
114 }
115 },
116
117 instructionText: text(layer, "sans"),
118
119 deviceCodeGroup: {
120 margin: {
121 top: 20,
122 bottom: 20,
123 left: 0,
124 right: 0
125 }
126 },
127 deviceCode:
128 text(layer, "mono", { size: "md" }),
129 deviceCodeCta: {
130 ...ctaButton,
131 padding: {
132 top: 0,
133 bottom: 0,
134 left: 0,
135 right: 0,
136 },
137 },
138 deviceCodeLeft: content_width * 2 / 3,
139 deviceCodeLeftContainer: {
140 padding: {
141 top: 3,
142 bottom: 3,
143 left: 0,
144 right: 0,
145 },
146 },
147 deviceCodeRight: content_width * 1 / 3,
148 deviceCodeRightContainer: {
149 border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
150 padding: {
151 top: 3,
152 bottom: 5,
153 left: 0,
154 right: 0,
155 },
156 },
157 deviceCodeSeperatorHeight: 0,
158 hint: {
159 ...text(layer, "sans", { size: "xs" }),
160 margin: {
161 top: -5,
162 }
163 },
164 enabledHint: {
165 margin: {
166 top: 10,
167 bottom: 10
168 }
169 },
170 notAuthorizedHint: {
171 margin: {
172 top: 10,
173 bottom: 10
174 }
175 },
176
177 warning: {
178 ...text(layer, "sans", { size: "md", color: foreground(layer, "warning") }),
179 border: border(layer, "warning"),
180 background_color: background(layer, "warning"),
181 cornerRadius: 2,
182 },
183
184 githubGroup: {
185 margin: {
186 top: 3,
187 bottom: 3,
188 left: 0,
189 right: 0
190 }
191 },
192
193 ctaButton
194 }
195 }
196}