mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-27 12:54:42 +00:00
Update existing Atelier themes
This commit is contained in:
Nate Butler
parent
4f4af55329
commit
477453c396
7 changed files with 286 additions and 110 deletions
55
styles/src/themes/atelier-cave-dark.ts
Normal file
55
styles/src/themes/atelier-cave-dark.ts
Normal file
|
|
@ -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
|
||||
55
styles/src/themes/atelier-cave-light.ts
Normal file
55
styles/src/themes/atelier-cave-light.ts
Normal file
|
|
@ -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
|
||||
|
|
@ -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/",
|
||||
}
|
||||
55
styles/src/themes/atelier-sulphurpool-dark.ts
Normal file
55
styles/src/themes/atelier-sulphurpool-dark.ts
Normal file
|
|
@ -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
|
||||
55
styles/src/themes/atelier-sulphurpool-light.ts
Normal file
55
styles/src/themes/atelier-sulphurpool-light.ts
Normal file
|
|
@ -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
|
||||
|
|
@ -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/",
|
||||
}
|
||||
66
styles/src/themes/common/atelier-common.ts
Normal file
66
styles/src/themes/common/atelier-common.ts
Normal file
|
|
@ -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"
|
||||
Loading…
Reference in a new issue