Update existing Atelier themes

Nate Butler created 2 years ago

Change summary

styles/src/themes/atelier-cave-dark.ts         | 55 ++++++++++++++++
styles/src/themes/atelier-cave-light.ts        | 55 ++++++++++++++++
styles/src/themes/atelier-cave.ts              | 65 -------------------
styles/src/themes/atelier-sulphurpool-dark.ts  | 55 ++++++++++++++++
styles/src/themes/atelier-sulphurpool-light.ts | 55 ++++++++++++++++
styles/src/themes/atelier-sulphurpool.ts       | 45 -------------
styles/src/themes/common/atelier-common.ts     | 66 ++++++++++++++++++++
7 files changed, 286 insertions(+), 110 deletions(-)

Detailed changes

styles/src/themes/atelier-cave-dark.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Cave Dark`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
+    },
+    colors: {
+        base00: "#19171c",
+        base01: "#26232a",
+        base02: "#585260",
+        base03: "#655f6d",
+        base04: "#7e7887",
+        base05: "#8b8792",
+        base06: "#e2dfe7",
+        base07: "#efecf4",
+        base08: "#be4678",
+        base09: "#aa573c",
+        base0A: "#a06e3b",
+        base0B: "#2a9292",
+        base0C: "#398bc6",
+        base0D: "#576ddb",
+        base0E: "#955ae7",
+        base0F: "#bf40bf"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, false, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ]),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-cave-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Cave Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
+    },
+    colors: {
+        base00: "#efecf4",
+        base01: "#e2dfe7",
+        base02: "#8b8792",
+        base03: "#7e7887",
+        base04: "#655f6d",
+        base05: "#585260",
+        base06: "#26232a",
+        base07: "#19171c",
+        base08: "#be4678",
+        base09: "#aa573c",
+        base0A: "#a06e3b",
+        base0B: "#2a9292",
+        base0C: "#398bc6",
+        base0D: "#576ddb",
+        base0E: "#955ae7",
+        base0F: "#bf40bf"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-cave.ts

@@ -1,65 +0,0 @@
-import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
-import { colorRamp, createColorScheme } from "./common/ramps"
-
-const name = "Atelier Cave"
-
-export const dark = createColorScheme(`${name} Dark`, false, {
-    neutral: chroma
-        .scale([
-            "#19171c",
-            "#26232a",
-            "#585260",
-            "#655f6d",
-            "#7e7887",
-            "#8b8792",
-            "#e2dfe7",
-            "#efecf4",
-        ])
-        .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
-    red: colorRamp(chroma("#be4678")),
-    orange: colorRamp(chroma("#aa573c")),
-    yellow: colorRamp(chroma("#a06e3b")),
-    green: colorRamp(chroma("#2a9292")),
-    cyan: colorRamp(chroma("#398bc6")),
-    blue: colorRamp(chroma("#576ddb")),
-    violet: colorRamp(chroma("#955ae7")),
-    magenta: colorRamp(chroma("#bf40bf")),
-})
-
-export const light = createColorScheme(`${name} Light`, true, {
-    neutral: chroma
-        .scale([
-            "#19171c",
-            "#26232a",
-            "#585260",
-            "#655f6d",
-            "#7e7887",
-            "#8b8792",
-            "#e2dfe7",
-            "#efecf4",
-        ])
-        .correctLightness(),
-    red: colorRamp(chroma("#be4678")),
-    orange: colorRamp(chroma("#aa573c")),
-    yellow: colorRamp(chroma("#a06e3b")),
-    green: colorRamp(chroma("#2a9292")),
-    cyan: colorRamp(chroma("#398bc6")),
-    blue: colorRamp(chroma("#576ddb")),
-    violet: colorRamp(chroma("#955ae7")),
-    magenta: colorRamp(chroma("#bf40bf")),
-})
-
-export const meta: Meta = {
-    name,
-    author: "atelierbram",
-    license: {
-        SPDX: "MIT",
-        license_text: {
-            https_url: "https://atelierbram.mit-license.org/license.txt",
-            license_checksum:
-                "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
-        }
-    },
-    url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave/",
-}

styles/src/themes/atelier-sulphurpool-dark.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Sulphurpool Dark`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
+    },
+    colors: {
+        base00: "#202746",
+        base01: "#293256",
+        base02: "#5e6687",
+        base03: "#6b7394",
+        base04: "#898ea4",
+        base05: "#979db4",
+        base06: "#dfe2f1",
+        base07: "#f5f7ff",
+        base08: "#c94922",
+        base09: "#c76b29",
+        base0A: "#c08b30",
+        base0B: "#ac9739",
+        base0C: "#22a2c9",
+        base0D: "#3d8fd1",
+        base0E: "#6679cc",
+        base0F: "#9c637a"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, false, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ]),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-sulphurpool-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Sulphurpool Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
+    },
+    colors: {
+        base00: "#f5f7ff",
+        base01: "#dfe2f1",
+        base02: "#979db4",
+        base03: "#898ea4",
+        base04: "#6b7394",
+        base05: "#5e6687",
+        base06: "#293256",
+        base07: "#202746",
+        base08: "#c94922",
+        base09: "#c76b29",
+        base0A: "#c08b30",
+        base0B: "#ac9739",
+        base0C: "#22a2c9",
+        base0D: "#3d8fd1",
+        base0E: "#6679cc",
+        base0F: "#9c637a"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-sulphurpool.ts

@@ -1,45 +0,0 @@
-import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
-import { colorRamp, createColorScheme } from "./common/ramps"
-
-const name = "Atelier Sulphurpool"
-
-const ramps = {
-    neutral: chroma
-        .scale([
-            "#202746",
-            "#293256",
-            "#5e6687",
-            "#6b7394",
-            "#898ea4",
-            "#979db4",
-            "#dfe2f1",
-            "#f5f7ff",
-        ])
-        .domain([0, 0.2, 0.38, 0.45, 0.65, 0.7, 0.85, 1]),
-    red: colorRamp(chroma("#c94922")),
-    orange: colorRamp(chroma("#c76b29")),
-    yellow: colorRamp(chroma("#c08b30")),
-    green: colorRamp(chroma("#ac9739")),
-    cyan: colorRamp(chroma("#22a2c9")),
-    blue: colorRamp(chroma("#3d8fd1")),
-    violet: colorRamp(chroma("#6679cc")),
-    magenta: colorRamp(chroma("#9c637a")),
-}
-
-export const dark = createColorScheme(`${name} Dark`, false, ramps)
-export const light = createColorScheme(`${name} Light`, true, ramps)
-
-export const meta: Meta = {
-    name,
-    author: "atelierbram",
-    license: {
-        SPDX: "MIT",
-        license_text: {
-            https_url: "https://atelierbram.mit-license.org/license.txt",
-            license_checksum:
-                "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
-        }
-    },
-    url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool/",
-}

styles/src/themes/common/atelier-common.ts

@@ -0,0 +1,66 @@
+import { License, Meta, ThemeSyntax } from "./colorScheme"
+
+export interface Variant {
+    meta: Meta
+    colors: {
+        base00: string
+        base01: string
+        base02: string
+        base03: string
+        base04: string
+        base05: string
+        base06: string
+        base07: string
+        base08: string
+        base09: string
+        base0A: string
+        base0B: string
+        base0C: string
+        base0D: string
+        base0E: string
+        base0F: string
+    }
+}
+
+export const metaCommon: {
+    author: string
+    license: License
+} = {
+    author: "Bram de Haan (http://atelierbramdehaan.nl)",
+    license: {
+        SPDX: "MIT",
+        license_text: {
+            https_url: "https://atelierbram.mit-license.org/license.txt",
+            license_checksum:
+                "f95ce526ef4e7eecf7a832bba0e3451cc1000f9ce63eb01ed6f64f8109f5d0a5",
+        }
+    },
+}
+
+export const buildSyntax = (variant: Variant): ThemeSyntax => {
+    const { colors } = variant
+    return {
+        primary: { color: colors.base06 },
+        comment: { color: colors.base03 },
+        "punctuation.delimiter": { color: colors.base05 },
+        "punctuation.bracket": { color: colors.base05 },
+        "punctuation.special": { color: colors.base0F },
+        "string.special.symbol": { color: colors.base0B },
+        operator: { color: colors.base05 },
+        function: { color: colors.base0D },
+        "function.method": { color: colors.base0D },
+        "function.special.definition": { color: colors.base0A },
+        string: { color: colors.base0B },
+        "string.special": { color: colors.base0F },
+        "string.regex": { color: colors.base0C },
+        type: { color: colors.base0A },
+        number: { color: colors.base09 },
+        property: { color: colors.base08 },
+        variable: { color: colors.base06 },
+        "variable.special": { color: colors.base0E },
+        variant: { color: colors.base0A },
+        keyword: { color: colors.base0E },
+    }
+}
+
+export const name = "Atelier"