Update + publish the Ayu theme

Nate Butler created

Change summary

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(-)

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/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 <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",
+}
+
+const variant = ayu.dark
+const theme = buildTheme(variant, false)
+
+export const dark = createColorScheme(`${name} Dark`, false, theme.ramps, theme.syntax)

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 <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",
+}
+
+const variant = ayu.light
+const theme = buildTheme(variant, true)
+
+export const light = createColorScheme(`${name} Light`, true, theme.ramps, theme.syntax)

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 <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",
+}
+
+const variant = ayu.mirage
+const theme = buildTheme(variant, false)
+
+export const dark = createColorScheme(`${name} Mirage`, false, theme.ramps, theme.syntax)

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() },
+    }
+}

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")),
-})