Nate Butler created
styles/src/styleTree/components.ts | 10
styles/src/styleTree/copilot.ts | 127 +++++++++++-----
styles/src/styleTree/simpleMessageNotification.ts | 1
styles/src/styleTree/workspace.ts | 39 +++-
styles/src/themes/ayu-dark.ts | 7
styles/src/themes/ayu-light.ts | 7
styles/src/themes/ayu-mirage.ts | 7
styles/src/themes/common/ayu-common.ts | 12
8 files changed, 141 insertions(+), 69 deletions(-)
@@ -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,
- }
+ },
}
}
@@ -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,
+ },
},
-
},
- }
+ },
}
}
@@ -23,7 +23,6 @@ export default function simpleMessageNotification(
right: 7,
},
-
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
...text(layer, "sans", "default", { size: "xs" }),
@@ -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: {
@@ -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
+)
@@ -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
+)
@@ -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
+)
@@ -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,
}
}