From 527f0310e2ba610442f24d4fe03e4bef2711e989 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:22:49 -0400 Subject: [PATCH 1/6] Update + publish the Ayu theme --- styles/package-lock.json | 31 +++++++++++ styles/package.json | 1 + styles/src/themes/ayu-dark.ts | 15 ++++++ styles/src/themes/ayu-light.ts | 15 ++++++ styles/src/themes/ayu-mirage.ts | 15 ++++++ styles/src/themes/common/ayu-common.ts | 74 ++++++++++++++++++++++++++ styles/src/themes/staff/ayu-mirage.ts | 31 ----------- styles/src/themes/staff/ayu.ts | 52 ------------------ 8 files changed, 151 insertions(+), 83 deletions(-) create mode 100644 styles/src/themes/ayu-dark.ts create mode 100644 styles/src/themes/ayu-light.ts create mode 100644 styles/src/themes/ayu-mirage.ts create mode 100644 styles/src/themes/common/ayu-common.ts delete mode 100644 styles/src/themes/staff/ayu-mirage.ts delete mode 100644 styles/src/themes/staff/ayu.ts diff --git a/styles/package-lock.json b/styles/package-lock.json index 19741d62b38c98305ddebd3f5aa9f0f8182493db..c03c27c1e89e4290dd36beb98eef570da4b44f4d 100644 --- a/styles/package-lock.json +++ b/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", diff --git a/styles/package.json b/styles/package.json index ad4dfcf561ed3b1d47bd513c207c25a0c2c1b90c..5f103c5d6c8eb091031f05ab3789625c56b97d84 100644 --- a/styles/package.json +++ b/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", diff --git a/styles/src/themes/ayu-dark.ts b/styles/src/themes/ayu-dark.ts new file mode 100644 index 0000000000000000000000000000000000000000..2ee558f52954833057da4b848a61f06faf6c6ac8 --- /dev/null +++ b/styles/src/themes/ayu-dark.ts @@ -0,0 +1,15 @@ +import { createColorScheme } from "../common/ramps" +import { ayu, buildTheme } from "../common/ayu-common" + +const name = "Ayu" +const author = "Konstantin Pschera " +const url = "https://github.com/ayu-theme/ayu-colors" +const license = { + type: "MIT", + url: "https://github.com/ayu-theme/ayu-colors/blob/master/license", +} + +const variant = ayu.dark +const theme = buildTheme(variant, false) + +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 new file mode 100644 index 0000000000000000000000000000000000000000..96304c6ed4fb8850dd7913a44f07c1991ed26756 --- /dev/null +++ b/styles/src/themes/ayu-light.ts @@ -0,0 +1,15 @@ +import { createColorScheme } from "../common/ramps" +import { ayu, buildTheme } from "../common/ayu-common" + +const name = "Ayu" +const author = "Konstantin Pschera " +const url = "https://github.com/ayu-theme/ayu-colors" +const license = { + type: "MIT", + url: "https://github.com/ayu-theme/ayu-colors/blob/master/license", +} + +const variant = ayu.light +const theme = buildTheme(variant, true) + +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 new file mode 100644 index 0000000000000000000000000000000000000000..7c24b9b70ff06d45e877c658b1b2a831cc64e5ab --- /dev/null +++ b/styles/src/themes/ayu-mirage.ts @@ -0,0 +1,15 @@ +import { createColorScheme } from "../common/ramps" +import { ayu, buildTheme } from "../common/ayu-common" + +const name = "Ayu" +const author = "Konstantin Pschera " +const url = "https://github.com/ayu-theme/ayu-colors" +const license = { + type: "MIT", + url: "https://github.com/ayu-theme/ayu-colors/blob/master/license", +} + +const variant = ayu.mirage +const theme = buildTheme(variant, false) + +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 new file mode 100644 index 0000000000000000000000000000000000000000..c77a2f39733cd4c8cd684247558228302ba4092d --- /dev/null +++ b/styles/src/themes/common/ayu-common.ts @@ -0,0 +1,74 @@ +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 +} + +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() }, + } +} diff --git a/styles/src/themes/staff/ayu-mirage.ts b/styles/src/themes/staff/ayu-mirage.ts deleted file mode 100644 index 5b832699b46b984d9fd0fdaff223073613095aed..0000000000000000000000000000000000000000 --- a/styles/src/themes/staff/ayu-mirage.ts +++ /dev/null @@ -1,31 +0,0 @@ -import chroma from "chroma-js" -import { colorRamp, createColorScheme } from "../common/ramps" - -const name = "Ayu" -const author = "Konstantin Pschera " -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")), -}) diff --git a/styles/src/themes/staff/ayu.ts b/styles/src/themes/staff/ayu.ts deleted file mode 100644 index 24fcdb951b07aa3e7346c28566b26a549e388928..0000000000000000000000000000000000000000 --- a/styles/src/themes/staff/ayu.ts +++ /dev/null @@ -1,52 +0,0 @@ -import chroma from "chroma-js" -import { colorRamp, createColorScheme } from "../common/ramps" - -const name = "Ayu" -const author = "Konstantin Pschera " -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")), -}) From 975f5d5fa89ebe470c3446420b21ab9ea4f138b2 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:23:21 -0400 Subject: [PATCH 2/6] Format --- styles/src/styleTree/components.ts | 10 +- styles/src/styleTree/copilot.ts | 127 ++++++++++++------ .../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(-) 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, } } From de60657d533bf60ac164b6eca2a835516ee83c72 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:23:54 -0400 Subject: [PATCH 3/6] Ignore the target folder --- styles/.prettierignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/styles/.prettierignore b/styles/.prettierignore index 04fe05da753a6c05c6d84733a26892bced1ba6a4..98aa9da7e02d2685d8a3b2033bde7db87432275b 100644 --- a/styles/.prettierignore +++ b/styles/.prettierignore @@ -1,2 +1,3 @@ package-lock.json -package.json \ No newline at end of file +package.json +target From 65c2fb1cc6e8c6490cd395935e2e212274bcba46 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:25:02 -0400 Subject: [PATCH 4/6] Fix paths after publishing --- styles/src/themes/ayu-dark.ts | 4 ++-- styles/src/themes/ayu-light.ts | 4 ++-- styles/src/themes/ayu-mirage.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/styles/src/themes/ayu-dark.ts b/styles/src/themes/ayu-dark.ts index 7774885208a90180714bca3cd8c89a9d1d532414..790e0d117378e39bdd71e678e25b03e30470b9d8 100644 --- a/styles/src/themes/ayu-dark.ts +++ b/styles/src/themes/ayu-dark.ts @@ -1,5 +1,5 @@ -import { createColorScheme } from "../common/ramps" -import { ayu, buildTheme } from "../common/ayu-common" +import { createColorScheme } from "./common/ramps" +import { ayu, buildTheme } from "./common/ayu-common" const name = "Ayu" const author = "Konstantin Pschera " diff --git a/styles/src/themes/ayu-light.ts b/styles/src/themes/ayu-light.ts index 868c9b9fe86633724d183e50f0610c3733849e99..cc4e121cc6e485a186f31b13705e1311dbaabde4 100644 --- a/styles/src/themes/ayu-light.ts +++ b/styles/src/themes/ayu-light.ts @@ -1,5 +1,5 @@ -import { createColorScheme } from "../common/ramps" -import { ayu, buildTheme } from "../common/ayu-common" +import { createColorScheme } from "./common/ramps" +import { ayu, buildTheme } from "./common/ayu-common" const name = "Ayu" const author = "Konstantin Pschera " diff --git a/styles/src/themes/ayu-mirage.ts b/styles/src/themes/ayu-mirage.ts index 724eb030af0dccf3b9acddd9c58c7ad8c59b13b1..c5550ec2780a8c2d8f8c46993fdca714119be9ff 100644 --- a/styles/src/themes/ayu-mirage.ts +++ b/styles/src/themes/ayu-mirage.ts @@ -1,5 +1,5 @@ -import { createColorScheme } from "../common/ramps" -import { ayu, buildTheme } from "../common/ayu-common" +import { createColorScheme } from "./common/ramps" +import { ayu, buildTheme } from "./common/ayu-common" const name = "Ayu" const author = "Konstantin Pschera " From 20ec9f6daf34e57201c1d671f43f4521570e0ec0 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:37:20 -0400 Subject: [PATCH 5/6] Add meta fields to `ayu` --- styles/src/themes/ayu-dark.ts | 13 +++++-------- styles/src/themes/ayu-light.ts | 13 +++++-------- styles/src/themes/ayu-mirage.ts | 13 +++++-------- 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/styles/src/themes/ayu-dark.ts b/styles/src/themes/ayu-dark.ts index 790e0d117378e39bdd71e678e25b03e30470b9d8..c7e86994feec6a78879b383e5bf71941084c0b9e 100644 --- a/styles/src/themes/ayu-dark.ts +++ b/styles/src/themes/ayu-dark.ts @@ -1,19 +1,16 @@ import { createColorScheme } from "./common/ramps" -import { ayu, buildTheme } from "./common/ayu-common" +import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common" -const name = "Ayu" -const author = "Konstantin Pschera " -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 meta = { + ...themeMeta, + name: `${themeMeta.name} Dark` } const variant = ayu.dark const theme = buildTheme(variant, false) export const dark = createColorScheme( - `${name} Dark`, + meta.name, false, theme.ramps, theme.syntax diff --git a/styles/src/themes/ayu-light.ts b/styles/src/themes/ayu-light.ts index cc4e121cc6e485a186f31b13705e1311dbaabde4..9acabf6a3957a20aca2e3fa0181cf675840ddae4 100644 --- a/styles/src/themes/ayu-light.ts +++ b/styles/src/themes/ayu-light.ts @@ -1,19 +1,16 @@ import { createColorScheme } from "./common/ramps" -import { ayu, buildTheme } from "./common/ayu-common" +import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common" -const name = "Ayu" -const author = "Konstantin Pschera " -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 meta = { + ...themeMeta, + name: `${themeMeta.name} Light` } const variant = ayu.light const theme = buildTheme(variant, true) export const light = createColorScheme( - `${name} Light`, + meta.name, true, theme.ramps, theme.syntax diff --git a/styles/src/themes/ayu-mirage.ts b/styles/src/themes/ayu-mirage.ts index c5550ec2780a8c2d8f8c46993fdca714119be9ff..2a01512673b73d104ead5fc20edf353b813c16bb 100644 --- a/styles/src/themes/ayu-mirage.ts +++ b/styles/src/themes/ayu-mirage.ts @@ -1,19 +1,16 @@ import { createColorScheme } from "./common/ramps" -import { ayu, buildTheme } from "./common/ayu-common" +import { ayu, meta as themeMeta, buildTheme } from "./common/ayu-common" -const name = "Ayu" -const author = "Konstantin Pschera " -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 meta = { + ...themeMeta, + name: `${themeMeta.name} Mirage` } const variant = ayu.mirage const theme = buildTheme(variant, false) export const dark = createColorScheme( - `${name} Mirage`, + meta.name, false, theme.ramps, theme.syntax From 7ba094e10e64024927dad79446923ac62eaf948c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:56:18 -0400 Subject: [PATCH 6/6] add license_checksum --- styles/src/themes/common/ayu-common.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/styles/src/themes/common/ayu-common.ts b/styles/src/themes/common/ayu-common.ts index 7ae48f38560ba42637c31f68c4b6e5998f965f44..f08817ef492e7c56fac0e593ffd0d74d1e4d735b 100644 --- a/styles/src/themes/common/ayu-common.ts +++ b/styles/src/themes/common/ayu-common.ts @@ -2,6 +2,7 @@ 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, @@ -72,3 +73,18 @@ export const buildSyntax = (t: typeof dark): ThemeSyntax => { 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", +}