144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
import { ColorScheme } from "../themes/common/colorScheme"
|
|
import { background, border, foreground, svg, text } from "./components";
|
|
|
|
|
|
export default function copilot(colorScheme: ColorScheme) {
|
|
let layer = colorScheme.highest;
|
|
|
|
let content_width = 304;
|
|
|
|
let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
|
|
background: background(layer),
|
|
border: border(layer, "active"),
|
|
cornerRadius: 4,
|
|
margin: {
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 7,
|
|
right: 7,
|
|
},
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
hover: {
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
};
|
|
|
|
return {
|
|
modal: {
|
|
titleText: text(layer, "sans", { size: "md" }),
|
|
titlebar: {
|
|
border: border(layer, "active"),
|
|
padding: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
margin: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 8
|
|
}
|
|
},
|
|
container: {
|
|
background: background(colorScheme.highest),
|
|
|
|
},
|
|
closeIcon: {
|
|
icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
|
|
container: {
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 7,
|
|
right: 0,
|
|
}
|
|
},
|
|
hover: {
|
|
icon: svg(foreground(layer, "on"), "icons/x_mark_16.svg", 16, 16),
|
|
}
|
|
},
|
|
dimensions: {
|
|
width: 400,
|
|
height: 500,
|
|
},
|
|
},
|
|
auth: {
|
|
content_width,
|
|
|
|
headerGroup: {
|
|
margin: {
|
|
top: 5,
|
|
bottom: 5,
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
},
|
|
headerText: text(layer, "sans", { size: "lg" }),
|
|
copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 36, 36),
|
|
plusIcon: svg(foreground(layer, "default"), "icons/plus_16.svg", 36, 36),
|
|
zedIcon: svg(foreground(layer, "default"), "icons/logo_96.svg", 36, 36),
|
|
|
|
instructionText: text(layer, "sans"),
|
|
|
|
deviceCodeGroup: {
|
|
margin: {
|
|
top: 5,
|
|
bottom: 5,
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
},
|
|
deviceCode:
|
|
text(layer, "mono", { size: "md" }),
|
|
deviceCodeCta: {
|
|
...ctaButton,
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
deviceCodeLeft: content_width * 2 / 3,
|
|
deviceCodeLeftContainer: {
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
deviceCodeRight: content_width * 1 / 3,
|
|
deviceCodeRightContainer: {
|
|
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
|
|
padding: {
|
|
top: 3,
|
|
bottom: 5,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
deviceCodeSeperatorHeight: 0,
|
|
|
|
githubGroup: {
|
|
margin: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
},
|
|
|
|
ctaButton
|
|
}
|
|
}
|
|
}
|