From 477453c3962ff26f41a7530f462f42e2cf0323eb Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 7 Mar 2023 13:22:07 -0800 Subject: [PATCH] Update existing Atelier themes --- 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 ++++++++++++++++ .../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(-) create mode 100644 styles/src/themes/atelier-cave-dark.ts create mode 100644 styles/src/themes/atelier-cave-light.ts delete mode 100644 styles/src/themes/atelier-cave.ts create mode 100644 styles/src/themes/atelier-sulphurpool-dark.ts create mode 100644 styles/src/themes/atelier-sulphurpool-light.ts delete mode 100644 styles/src/themes/atelier-sulphurpool.ts create mode 100644 styles/src/themes/common/atelier-common.ts diff --git a/styles/src/themes/atelier-cave-dark.ts b/styles/src/themes/atelier-cave-dark.ts new file mode 100644 index 0000000000..6cb8946b7a --- /dev/null +++ b/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 diff --git a/styles/src/themes/atelier-cave-light.ts b/styles/src/themes/atelier-cave-light.ts new file mode 100644 index 0000000000..b05f730f83 --- /dev/null +++ b/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 diff --git a/styles/src/themes/atelier-cave.ts b/styles/src/themes/atelier-cave.ts deleted file mode 100644 index 21b846d708..0000000000 --- a/styles/src/themes/atelier-cave.ts +++ /dev/null @@ -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/", -} diff --git a/styles/src/themes/atelier-sulphurpool-dark.ts b/styles/src/themes/atelier-sulphurpool-dark.ts new file mode 100644 index 0000000000..2d282deaa2 --- /dev/null +++ b/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 diff --git a/styles/src/themes/atelier-sulphurpool-light.ts b/styles/src/themes/atelier-sulphurpool-light.ts new file mode 100644 index 0000000000..943ceedf2b --- /dev/null +++ b/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 diff --git a/styles/src/themes/atelier-sulphurpool.ts b/styles/src/themes/atelier-sulphurpool.ts deleted file mode 100644 index e34bc80238..0000000000 --- a/styles/src/themes/atelier-sulphurpool.ts +++ /dev/null @@ -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/", -} diff --git a/styles/src/themes/common/atelier-common.ts b/styles/src/themes/common/atelier-common.ts new file mode 100644 index 0000000000..25dda87c61 --- /dev/null +++ b/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"