Format
This commit is contained in:
Nate Butler
@@ -1,13 +1,13 @@
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import { background, border, foreground, svg, text } from "./components";
|
||||
|
||||
import { background, border, foreground, svg, text } from "./components"
|
||||
|
||||
export default function copilot(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.middle;
|
||||
let layer = colorScheme.middle
|
||||
|
||||
let content_width = 264;
|
||||
let content_width = 264
|
||||
|
||||
let ctaButton = { // Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
let ctaButton = {
|
||||
// Copied from welcome screen. FIXME: Move this into a ZDS component
|
||||
background: background(layer),
|
||||
border: border(layer, "default"),
|
||||
cornerRadius: 4,
|
||||
@@ -15,7 +15,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8
|
||||
right: 8,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
@@ -29,22 +29,32 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
outLinkIcon: {
|
||||
icon: svg(foreground(layer, "variant"), "icons/link_out_12.svg", 12, 12),
|
||||
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)
|
||||
icon: svg(
|
||||
foreground(layer, "hovered"),
|
||||
"icons/link_out_12.svg",
|
||||
12,
|
||||
12
|
||||
),
|
||||
},
|
||||
},
|
||||
modal: {
|
||||
titleText: {
|
||||
...text(layer, "sans", { size: "xs", "weight": "bold" })
|
||||
...text(layer, "sans", { size: "xs", weight: "bold" }),
|
||||
},
|
||||
titlebar: {
|
||||
background: background(colorScheme.lowest),
|
||||
@@ -54,7 +64,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
bottom: 4,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
},
|
||||
container: {
|
||||
background: background(colorScheme.lowest),
|
||||
@@ -63,10 +73,15 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 8,
|
||||
}
|
||||
},
|
||||
},
|
||||
closeIcon: {
|
||||
icon: svg(foreground(layer, "variant"), "icons/x_mark_8.svg", 8, 8),
|
||||
icon: svg(
|
||||
foreground(layer, "variant"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
container: {
|
||||
cornerRadius: 2,
|
||||
padding: {
|
||||
@@ -76,15 +91,25 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
right: 4,
|
||||
},
|
||||
margin: {
|
||||
right: 0
|
||||
}
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
hover: {
|
||||
icon: svg(foreground(layer, "on"), "icons/x_mark_8.svg", 8, 8),
|
||||
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),
|
||||
}
|
||||
icon: svg(
|
||||
foreground(layer, "base"),
|
||||
"icons/x_mark_8.svg",
|
||||
8,
|
||||
8
|
||||
),
|
||||
},
|
||||
},
|
||||
dimensions: {
|
||||
width: 280,
|
||||
@@ -98,14 +123,19 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
ctaButton,
|
||||
|
||||
header: {
|
||||
icon: svg(foreground(layer, "default"), "icons/zed_plus_copilot_32.svg", 92, 32),
|
||||
icon: svg(
|
||||
foreground(layer, "default"),
|
||||
"icons/zed_plus_copilot_32.svg",
|
||||
92,
|
||||
32
|
||||
),
|
||||
container: {
|
||||
margin: {
|
||||
top: 35,
|
||||
bottom: 5,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -116,21 +146,20 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
top: 6,
|
||||
bottom: 12,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 6,
|
||||
bottom: 2
|
||||
}
|
||||
bottom: 2,
|
||||
},
|
||||
},
|
||||
|
||||
deviceCode: {
|
||||
text:
|
||||
text(layer, "mono", { size: "sm" }),
|
||||
text: text(layer, "mono", { size: "sm" }),
|
||||
cta: {
|
||||
...ctaButton,
|
||||
background: background(colorScheme.lowest),
|
||||
@@ -144,7 +173,7 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
margin: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
}
|
||||
},
|
||||
},
|
||||
left: content_width / 2,
|
||||
leftContainer: {
|
||||
@@ -155,9 +184,14 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
right: content_width * 1 / 3,
|
||||
right: (content_width * 1) / 3,
|
||||
rightContainer: {
|
||||
border: border(colorScheme.lowest, "inverted", { bottom: false, right: false, top: false, left: true }),
|
||||
border: border(colorScheme.lowest, "inverted", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 5,
|
||||
@@ -165,9 +199,14 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
right: 0,
|
||||
},
|
||||
hover: {
|
||||
border: border(layer, "active", { bottom: false, right: false, top: false, left: true }),
|
||||
border: border(layer, "active", {
|
||||
bottom: false,
|
||||
right: false,
|
||||
top: false,
|
||||
left: true,
|
||||
}),
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -179,12 +218,15 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
top: 16,
|
||||
bottom: 16,
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
right: 0,
|
||||
},
|
||||
},
|
||||
|
||||
warning: {
|
||||
...text(layer, "sans", { size: "xs", color: foreground(layer, "warning") }),
|
||||
...text(layer, "sans", {
|
||||
size: "xs",
|
||||
color: foreground(layer, "warning"),
|
||||
}),
|
||||
border: border(layer, "warning"),
|
||||
background: background(layer, "warning"),
|
||||
cornerRadius: 2,
|
||||
@@ -197,8 +239,8 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
margin: {
|
||||
bottom: 16,
|
||||
left: 8,
|
||||
right: 8
|
||||
}
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -208,19 +250,18 @@ export default function copilot(colorScheme: ColorScheme) {
|
||||
|
||||
margin: {
|
||||
top: 16,
|
||||
bottom: 16
|
||||
}
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
|
||||
hint: {
|
||||
...text(layer, "sans", { size: "xs", color: "#838994" }),
|
||||
margin: {
|
||||
top: 24,
|
||||
bottom: 4
|
||||
}
|
||||
bottom: 4,
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user