styles/.prettierignore 🔗
@@ -1,2 +1,3 @@
package-lock.json
-package.json
+package.json
+target
Merge pull request #2369 from zed-industries/nate/update-ayu-theme
Nate Butler created
Update `Ayu` Theme FamilyChange summary
styles/.prettierignore | 3
styles/package-lock.json | 31 ++++
styles/package.json | 1
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 | 17 ++
styles/src/themes/ayu-light.ts | 17 ++
styles/src/themes/ayu-mirage.ts | 17 ++
styles/src/themes/common/ayu-common.ts | 90 ++++++++++++
styles/src/themes/staff/ayu-mirage.ts | 31 ----
styles/src/themes/staff/ayu.ts | 52 ------
13 files changed, 292 insertions(+), 144 deletions(-)
Detailed changes
styles/package-lock.json 🔗
@@ -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",
styles/package.json 🔗
@@ -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",
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,
- }
+ },
}
}
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,
+ },
},
-
},
- }
+ },
}
}
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" }),
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: {
styles/src/themes/ayu-dark.ts 🔗
@@ -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
+)
styles/src/themes/ayu-light.ts 🔗
@@ -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
+)
styles/src/themes/ayu-mirage.ts 🔗
@@ -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
+)
styles/src/themes/common/ayu-common.ts 🔗
@@ -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",
+}
styles/src/themes/staff/ayu-mirage.ts 🔗
@@ -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")),
-})
styles/src/themes/staff/ayu.ts 🔗
@@ -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")),
-})