227 lines
6.9 KiB
TypeScript
227 lines
6.9 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.middle;
|
|
|
|
let content_width = 264;
|
|
|
|
let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
|
|
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" }),
|
|
hover: {
|
|
...text(layer, "sans", "default", { size: "sm" }),
|
|
background: background(layer, "hovered"),
|
|
border: border(layer, "active"),
|
|
},
|
|
};
|
|
|
|
return {
|
|
outLinkIcon: {
|
|
icon: svg(foreground(layer, "variant"), "icons/link_out_12.svg", 12, 12),
|
|
container: {
|
|
cornerRadius: 6,
|
|
padding: { left: 6 },
|
|
},
|
|
hover: {
|
|
icon: svg(foreground(layer, "hovered"), "icons/link_out_12.svg", 12, 12)
|
|
},
|
|
},
|
|
modal: {
|
|
titleText: {
|
|
...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: {
|
|
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
|
|
}
|
|
},
|
|
hover: {
|
|
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: {
|
|
border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
|
|
padding: {
|
|
top: 3,
|
|
bottom: 5,
|
|
left: 8,
|
|
right: 0,
|
|
},
|
|
hover: {
|
|
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
|
|
}
|
|
},
|
|
|
|
},
|
|
}
|
|
}
|
|
}
|