zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-20 02:47:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2369 from zed-industries/nate/update-ayu-theme

Browse Source 
Update `Ayu` Theme Family
This commit is contained in:
Nate Butler 2023-04-11 13:05:25 -04:00 committed by GitHub
commit 209e9a59c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 292 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
styles/.prettierignore
View File

@ -1,2 +1,3 @@
package-lock.json
package.json
package.json
target

31
styles/package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"@types/chroma-js": "^2.4.0",
"@types/node": "^18.14.1",
"ayu": "^8.0.1",
"bezier-easing": "^2.1.0",
"case-anything": "^2.1.10",
"chroma-js": "^2.4.2",
@ -106,6 +107,16 @@
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"node_modules/ayu": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
"integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
"dependencies": {
"@types/chroma-js": "^2.0.0",
"chroma-js": "^2.1.0",
"nonenumerable": "^1.1.1"
}
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@ -153,6 +164,11 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"node_modules/nonenumerable": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
"integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
},
"node_modules/toml": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
@ -300,6 +316,16 @@
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"ayu": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
"integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
"requires": {
"@types/chroma-js": "^2.0.0",
"chroma-js": "^2.1.0",
"nonenumerable": "^1.1.1"
}
},
"bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@ -335,6 +361,11 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"nonenumerable": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
"integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
},
"toml": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",

1
styles/package.json
View File

@ -12,6 +12,7 @@
"dependencies": {
"@types/chroma-js": "^2.4.0",
"@types/node": "^18.14.1",
"ayu": "^8.0.1",
"bezier-easing": "^2.1.0",
"case-anything": "^2.1.10",
"chroma-js": "^2.4.2",

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: {

17
styles/src/themes/ayu-dark.ts Normal file
View File

@ -0,0 +1,17 @@
import { createColorScheme } from "./common/ramps"
import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
export const meta = {
...themeMeta,
name: `${themeMeta.name} Dark`
}
const variant = ayu.dark
const theme = buildTheme(variant, false)
export const dark = createColorScheme(
meta.name,
false,
theme.ramps,
theme.syntax
)

17
styles/src/themes/ayu-light.ts Normal file
View File

@ -0,0 +1,17 @@
import { createColorScheme } from "./common/ramps"
import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
export const meta = {
...themeMeta,
name: `${themeMeta.name} Light`
}
const variant = ayu.light
const theme = buildTheme(variant, true)
export const light = createColorScheme(
meta.name,
true,
theme.ramps,
theme.syntax
)

17
styles/src/themes/ayu-mirage.ts Normal file
View File

@ -0,0 +1,17 @@
import { createColorScheme } from "./common/ramps"
import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common"
export const meta = {
...themeMeta,
name: `${themeMeta.name} Mirage`
}
const variant = ayu.mirage
const theme = buildTheme(variant, false)
export const dark = createColorScheme(
meta.name,
false,
theme.ramps,
theme.syntax
)

90
styles/src/themes/common/ayu-common.ts Normal file
View File

@ -0,0 +1,90 @@
import { dark, light, mirage } from "ayu"
import { ThemeSyntax } from "./syntax"
import chroma from "chroma-js"
import { colorRamp } from "./ramps"
import { Meta } from "./colorScheme"
export const ayu = {
dark,
light,
mirage,
}
export const buildTheme = (t: typeof dark, light: boolean) => {
const color = {
lightBlue: t.syntax.tag.hex(),
yellow: t.syntax.func.hex(),
blue: t.syntax.entity.hex(),
green: t.syntax.string.hex(),
teal: t.syntax.regexp.hex(),
red: t.syntax.markup.hex(),
orange: t.syntax.keyword.hex(),
lightYellow: t.syntax.special.hex(),
gray: t.syntax.comment.hex(),
purple: t.syntax.constant.hex(),
}
const syntax: ThemeSyntax = {
constant: { color: t.syntax.constant.hex() },
"string.regex": { color: t.syntax.regexp.hex() },
string: { color: t.syntax.string.hex() },
comment: { color: t.syntax.comment.hex() },
keyword: { color: t.syntax.keyword.hex() },
operator: { color: t.syntax.operator.hex() },
number: { color: t.syntax.constant.hex() },
type: { color: color.blue },
boolean: { color: color.purple },
"punctuation.special": { color: color.purple },
"string.special": { color: t.syntax.special.hex() },
function: { color: t.syntax.func.hex() },
}
return {
ramps: {
neutral: chroma.scale([
light ? t.editor.fg.hex() : t.editor.bg.hex(),
light ? t.editor.bg.hex() : t.editor.fg.hex(),
]),
red: colorRamp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)),
magenta: colorRamp(chroma(color.lightBlue)),
},
syntax,
}
}
export const buildSyntax = (t: typeof dark): ThemeSyntax => {
return {
constant: { color: t.syntax.constant.hex() },
"string.regex": { color: t.syntax.regexp.hex() },
string: { color: t.syntax.string.hex() },
comment: { color: t.syntax.comment.hex() },
keyword: { color: t.syntax.keyword.hex() },
operator: { color: t.syntax.operator.hex() },
number: { color: t.syntax.constant.hex() },
type: { color: t.syntax.regexp.hex() },
"punctuation.special": { color: t.syntax.special.hex() },
"string.special": { color: t.syntax.special.hex() },
function: { color: t.syntax.func.hex() },
}
}
export const meta: Meta = {
name: "Ayu",
author: "dempfi",
license: {
SPDX: "MIT",
license_text: {
https_url:
"https://raw.githubusercontent.com/dempfi/ayu/master/LICENSE",
license_checksum:
"e0af0e0d1754c18ca075649d42f5c6d9a60f8bdc03c20dfd97105f2253a94173",
},
},
url: "https://github.com/dempfi/ayu",
}

31
styles/src/themes/staff/ayu-mirage.ts
View File

@ -1,31 +0,0 @@
import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Mirage`, false, {
neutral: chroma.scale([
"#171B24",
"#1F2430",
"#242936",
"#707A8C",
"#8A9199",
"#CCCAC2",
"#D9D7CE",
"#F3F4F5",
]),
red: colorRamp(chroma("#F28779")),
orange: colorRamp(chroma("#FFAD66")),
yellow: colorRamp(chroma("#FFD173")),
green: colorRamp(chroma("#D5FF80")),
cyan: colorRamp(chroma("#95E6CB")),
blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")),
})

52
styles/src/themes/staff/ayu.ts
View File

@ -1,52 +0,0 @@
import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Dark`, false, {
neutral: chroma.scale([
"#0F1419",
"#131721",
"#272D38",
"#3E4B59",
"#BFBDB6",
"#E6E1CF",
"#E6E1CF",
"#F3F4F5",
]),
red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FF8F40")),
yellow: colorRamp(chroma("#FFB454")),
green: colorRamp(chroma("#B8CC52")),
cyan: colorRamp(chroma("#95E6CB")),
blue: colorRamp(chroma("#59C2FF")),
violet: colorRamp(chroma("#D2A6FF")),
magenta: colorRamp(chroma("#E6B673")),
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([
"#1A1F29",
"#242936",
"#5C6773",
"#828C99",
"#ABB0B6",
"#F8F9FA",
"#F3F4F5",
"#FAFAFA",
]),
red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FA8D3E")),
yellow: colorRamp(chroma("#F2AE49")),
green: colorRamp(chroma("#86B300")),
cyan: colorRamp(chroma("#4CBF99")),
blue: colorRamp(chroma("#36A3D9")),
violet: colorRamp(chroma("#A37ACC")),
magenta: colorRamp(chroma("#E6BA7E")),
})