zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-07 20:39:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Nate Butler 2023-04-11 12:23:21 -04:00
parent 527f0310e2
commit 975f5d5fa8
8 changed files with 141 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/src/styleTree/components.ts
View File

@ -281,14 +281,18 @@ export function border(
}
}
export function svg(color: string, asset: String, width: Number, height: Number) {
export function svg(
color: string,
asset: String,
width: Number,
height: Number
) {
return {
color,
asset,
dimensions: {
width,
height,
}
},
}
}

127
styles/src/styleTree/copilot.ts
View File

@ -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,
},
},
},
}
},
}
}

1
styles/src/styleTree/simpleMessageNotification.ts
View File

@ -23,7 +23,6 @@ export default function simpleMessageNotification(
right: 7,
},
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
...text(layer, "sans", "default", { size: "xs" }),

39
styles/src/styleTree/workspace.ts
View File

@ -1,6 +1,13 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { background, border, borderColor, foreground, svg, text } from "./components"
import {
background,
border,
borderColor,
foreground,
svg,
text,
} from "./components"
import statusBar from "./statusBar"
import tabBar from "./tabBar"
@ -46,14 +53,24 @@ export default function workspace(colorScheme: ColorScheme) {
width: 256,
height: 256,
},
logo: svg(withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), "icons/logo_96.svg", 256, 256),
logo: svg(
withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
"icons/logo_96.svg",
256,
256
),
logoShadow: svg(withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
), "icons/logo_96.svg", 256, 256),
logoShadow: svg(
withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
),
"icons/logo_96.svg",
256,
256
),
keyboardHints: {
margin: {
top: 96,
@ -273,11 +290,7 @@ export default function workspace(colorScheme: ColorScheme) {
},
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(
colorScheme.highest,
"on",
"hovered"
),
background: background(colorScheme.highest, "on", "hovered"),
},
},
disconnectedOverlay: {

7
styles/src/themes/ayu-dark.ts
View File

@ -12,4 +12,9 @@ const license = {
const variant = ayu.dark
const theme = buildTheme(variant, false)
export const dark = createColorScheme(`${name} Dark`, false, theme.ramps, theme.syntax)
export const dark = createColorScheme(
`${name} Dark`,
false,
theme.ramps,
theme.syntax
)

7
styles/src/themes/ayu-light.ts
View File

@ -12,4 +12,9 @@ const license = {
const variant = ayu.light
const theme = buildTheme(variant, true)
export const light = createColorScheme(`${name} Light`, true, theme.ramps, theme.syntax)
export const light = createColorScheme(
`${name} Light`,
true,
theme.ramps,
theme.syntax
)

7
styles/src/themes/ayu-mirage.ts
View File

@ -12,4 +12,9 @@ const license = {
const variant = ayu.mirage
const theme = buildTheme(variant, false)
export const dark = createColorScheme(`${name} Mirage`, false, theme.ramps, theme.syntax)
export const dark = createColorScheme(
`${name} Mirage`,
false,
theme.ramps,
theme.syntax
)

12
styles/src/themes/common/ayu-common.ts
View File

@ -1,12 +1,12 @@
import { dark, light, mirage } from 'ayu'
import { ThemeSyntax } from './syntax'
import chroma from 'chroma-js'
import { colorRamp } from './ramps'
import { dark, light, mirage } from "ayu"
import { ThemeSyntax } from "./syntax"
import chroma from "chroma-js"
import { colorRamp } from "./ramps"
export const ayu = {
dark,
light,
mirage
mirage,
}
export const buildTheme = (t: typeof dark, light: boolean) => {
@ -53,7 +53,7 @@ export const buildTheme = (t: typeof dark, light: boolean) => {
violet: colorRamp(chroma(color.purple)),
magenta: colorRamp(chroma(color.lightBlue)),
},
syntax
syntax,
}
}