diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts index 6b21eec405a8f76caf3ee6f952e0937a0fd20b50..efd4a956727c7d7cad42078292346dda32b55165 100644 --- a/styles/src/styleTree/components.ts +++ b/styles/src/styleTree/components.ts @@ -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, - } + }, } } diff --git a/styles/src/styleTree/copilot.ts b/styles/src/styleTree/copilot.ts index c2df2e5d405917606831b93b649d72ccec3ab2af..9fa86cd741234a421eade8f02161729e8ab502f0 100644 --- a/styles/src/styleTree/copilot.ts +++ b/styles/src/styleTree/copilot.ts @@ -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, + }, }, - }, - } + }, } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index dde689e9bd0563145f0b91ac4109a55eb5911d6c..2e057ed783140e60a15d61d2f4f35bb010a30e48 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -23,7 +23,6 @@ export default function simpleMessageNotification( right: 7, }, - margin: { left: headerPadding, top: 6, bottom: 6 }, hover: { ...text(layer, "sans", "default", { size: "xs" }), diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index f0dbaad54ae70ad4a041c044aeee009165eacb00..9b53ecc5d2fd8702bbf7ade760160cfdbe83067b 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -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: { diff --git a/styles/src/themes/ayu-dark.ts b/styles/src/themes/ayu-dark.ts index 2ee558f52954833057da4b848a61f06faf6c6ac8..7774885208a90180714bca3cd8c89a9d1d532414 100644 --- a/styles/src/themes/ayu-dark.ts +++ b/styles/src/themes/ayu-dark.ts @@ -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 +) diff --git a/styles/src/themes/ayu-light.ts b/styles/src/themes/ayu-light.ts index 96304c6ed4fb8850dd7913a44f07c1991ed26756..868c9b9fe86633724d183e50f0610c3733849e99 100644 --- a/styles/src/themes/ayu-light.ts +++ b/styles/src/themes/ayu-light.ts @@ -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 +) diff --git a/styles/src/themes/ayu-mirage.ts b/styles/src/themes/ayu-mirage.ts index 7c24b9b70ff06d45e877c658b1b2a831cc64e5ab..724eb030af0dccf3b9acddd9c58c7ad8c59b13b1 100644 --- a/styles/src/themes/ayu-mirage.ts +++ b/styles/src/themes/ayu-mirage.ts @@ -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 +) diff --git a/styles/src/themes/common/ayu-common.ts b/styles/src/themes/common/ayu-common.ts index c77a2f39733cd4c8cd684247558228302ba4092d..7ae48f38560ba42637c31f68c4b6e5998f965f44 100644 --- a/styles/src/themes/common/ayu-common.ts +++ b/styles/src/themes/common/ayu-common.ts @@ -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, } }