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: text(layer, "sans", { size: "md" }),
35 titlebar: {
36 border: border(layer, "active"),
37 padding: {
38 top: 4,
39 bottom: 4,
40 left: 8,
41 right: 8,
42 },
43 margin: {
44 top: 0,
45 left: 0,
46 right: 0,
47 bottom: 8
48 }
49 },
50 container: {
51 background: background(colorScheme.highest),
52
53 },
54 closeIcon: {
55 icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
56 container: {
57 padding: {
58 top: 3,
59 bottom: 3,
60 left: 7,
61 right: 0,
62 }
63 },
64 hover: {
65 icon: svg(foreground(layer, "on"), "icons/x_mark_16.svg", 16, 16),
66 }
67 },
68 dimensions: {
69 width: 400,
70 height: 500,
71 },
72 },
73 auth: {
74 content_width,
75
76 headerGroup: {
77 margin: {
78 top: 5,
79 bottom: 5,
80 left: 0,
81 right: 0
82 }
83 },
84 headerText: text(layer, "sans", { size: "lg" }),
85 copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 36, 36),
86 plusIcon: svg(foreground(layer, "default"), "icons/plus_16.svg", 36, 36),
87 zedIcon: svg(foreground(layer, "default"), "icons/logo_96.svg", 36, 36),
88
89 instructionText: text(layer, "sans"),
90
91 deviceCodeGroup: {
92 margin: {
93 top: 5,
94 bottom: 5,
95 left: 0,
96 right: 0
97 }
98 },
99 deviceCode:
100 text(layer, "mono", { size: "md" }),
101 deviceCodeCta: {
102 ...ctaButton,
103 padding: {
104 top: 0,
105 bottom: 0,
106 left: 0,
107 right: 0,
108 },
109 },
110 deviceCodeLeft: content_width * 2 / 3,
111 deviceCodeLeftContainer: {
112 padding: {
113 top: 3,
114 bottom: 3,
115 left: 0,
116 right: 0,
117 },
118 },
119 deviceCodeRight: content_width * 1 / 3,
120 deviceCodeRightContainer: {
121 border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
122 padding: {
123 top: 3,
124 bottom: 5,
125 left: 0,
126 right: 0,
127 },
128 },
129 deviceCodeSeperatorHeight: 0,
130
131 githubGroup: {
132 margin: {
133 top: 3,
134 bottom: 3,
135 left: 0,
136 right: 0
137 }
138 },
139
140 ctaButton
141 }
142 }
143}