Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP convert to snake_case

Browse source
This commit is contained in:
Nate Butler 2023-06-28 18:20:43 -04:00
parent bfdd0824e2
commit 2e162f8af7
49 changed files with 221 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

284
styles/src/style_tree/copilot.ts Normal file
View file

@ -0,0 +1,284 @@
import { ColorScheme } from "../theme/color_scheme"
import { background, border, foreground, svg, text } from "./components"
import { interactive } from "../element"
export default function copilot(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
const content_width = 264
const 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,
},
},
},
},
}
}