From 527f0310e2ba610442f24d4fe03e4bef2711e989 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 11 Apr 2023 12:22:49 -0400 Subject: [PATCH] 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 19741d62b3..c03c27c1e8 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 ad4dfcf561..5f103c5d6c 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 0000000000..2ee558f529 --- /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 0000000000..96304c6ed4 --- /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 0000000000..7c24b9b70f --- /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 0000000000..c77a2f3973 --- /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 5b832699b4..0000000000 --- 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 24fcdb951b..0000000000 --- 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")), -})