284 lines
8.7 KiB
TypeScript
284 lines
8.7 KiB
TypeScript
import { ColorScheme } from "../theme/colorScheme"
|
|
import { background, border, foreground, svg, text } from "./components"
|
|
import { interactive } from "../element"
|
|
export default function copilot(colorScheme: ColorScheme) {
|
|
let layer = colorScheme.middle
|
|
|
|
let content_width = 264
|
|
|
|
let ctaButton =
|
|
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
|
interactive({
|
|
base: {
|
|
background: background(layer),
|
|
border: border(layer, "default"),
|
|
cornerRadius: 4,
|
|
margin: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 7,
|
|
right: 7,
|
|
},
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
},
|
|
})
|
|
|
|
return {
|
|
outLinkIcon: interactive({
|
|
base: {
|
|
icon: svg(
|
|
foreground(layer, "variant"),
|
|
"icons/link_out_12.svg",
|
|
12,
|
|
12
|
|
),
|
|
container: {
|
|
cornerRadius: 6,
|
|
padding: { left: 6 },
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
icon: {
|
|
color: foreground(layer, "hovered"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
|
|
modal: {
|
|
titleText: {
|
|
default: {
|
|
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
|
},
|
|
},
|
|
titlebar: {
|
|
background: background(colorScheme.lowest),
|
|
border: border(layer, "active"),
|
|
padding: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
},
|
|
container: {
|
|
background: background(colorScheme.lowest),
|
|
padding: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 8,
|
|
},
|
|
},
|
|
closeIcon: interactive({
|
|
base: {
|
|
icon: svg(
|
|
foreground(layer, "variant"),
|
|
"icons/x_mark_8.svg",
|
|
8,
|
|
8
|
|
),
|
|
container: {
|
|
cornerRadius: 2,
|
|
padding: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 4,
|
|
right: 4,
|
|
},
|
|
margin: {
|
|
right: 0,
|
|
},
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
icon: svg(
|
|
foreground(layer, "on"),
|
|
"icons/x_mark_8.svg",
|
|
8,
|
|
8
|
|
),
|
|
},
|
|
clicked: {
|
|
icon: svg(
|
|
foreground(layer, "base"),
|
|
"icons/x_mark_8.svg",
|
|
8,
|
|
8
|
|
),
|
|
},
|
|
},
|
|
}),
|
|
dimensions: {
|
|
width: 280,
|
|
height: 280,
|
|
},
|
|
},
|
|
|
|
auth: {
|
|
content_width,
|
|
|
|
ctaButton,
|
|
|
|
header: {
|
|
icon: svg(
|
|
foreground(layer, "default"),
|
|
"icons/zed_plus_copilot_32.svg",
|
|
92,
|
|
32
|
|
),
|
|
container: {
|
|
margin: {
|
|
top: 35,
|
|
bottom: 5,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
},
|
|
|
|
prompting: {
|
|
subheading: {
|
|
...text(layer, "sans", { size: "xs" }),
|
|
margin: {
|
|
top: 6,
|
|
bottom: 12,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
|
|
hint: {
|
|
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
|
margin: {
|
|
top: 6,
|
|
bottom: 2,
|
|
},
|
|
},
|
|
|
|
deviceCode: {
|
|
text: text(layer, "mono", { size: "sm" }),
|
|
cta: {
|
|
...ctaButton,
|
|
background: background(colorScheme.lowest),
|
|
border: border(colorScheme.lowest, "inverted"),
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 16,
|
|
right: 16,
|
|
},
|
|
margin: {
|
|
left: 16,
|
|
right: 16,
|
|
},
|
|
},
|
|
left: content_width / 2,
|
|
leftContainer: {
|
|
padding: {
|
|
top: 3,
|
|
bottom: 3,
|
|
left: 0,
|
|
right: 6,
|
|
},
|
|
},
|
|
right: (content_width * 1) / 3,
|
|
rightContainer: interactive({
|
|
base: {
|
|
border: border(colorScheme.lowest, "inverted", {
|
|
bottom: false,
|
|
right: false,
|
|
top: false,
|
|
left: true,
|
|
}),
|
|
padding: {
|
|
top: 3,
|
|
bottom: 5,
|
|
left: 8,
|
|
right: 0,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
border: border(layer, "active", {
|
|
bottom: false,
|
|
right: false,
|
|
top: false,
|
|
left: true,
|
|
}),
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
|
|
notAuthorized: {
|
|
subheading: {
|
|
...text(layer, "sans", { size: "xs" }),
|
|
|
|
margin: {
|
|
top: 16,
|
|
bottom: 16,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
},
|
|
|
|
warning: {
|
|
...text(layer, "sans", {
|
|
size: "xs",
|
|
color: foreground(layer, "warning"),
|
|
}),
|
|
border: border(layer, "warning"),
|
|
background: background(layer, "warning"),
|
|
cornerRadius: 2,
|
|
padding: {
|
|
top: 4,
|
|
left: 4,
|
|
bottom: 4,
|
|
right: 4,
|
|
},
|
|
margin: {
|
|
bottom: 16,
|
|
left: 8,
|
|
right: 8,
|
|
},
|
|
},
|
|
},
|
|
|
|
authorized: {
|
|
subheading: {
|
|
...text(layer, "sans", { size: "xs" }),
|
|
|
|
margin: {
|
|
top: 16,
|
|
bottom: 16,
|
|
},
|
|
},
|
|
|
|
hint: {
|
|
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
|
margin: {
|
|
top: 24,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}
|
|
}
|