mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-15 06:40:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Add Gruvbox syntax overrides

Browse source
This commit is contained in:
Nate Butler 2023-03-01 11:49:13 -05:00
parent bde0456111
commit f67c3f1f1d
1 changed files with 122 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
styles/src/themes/gruvbox-common.ts
View file

@ -5,69 +5,76 @@ import { colorRamp, createColorScheme } from "./common/ramps"
const name = "Gruvbox" const name = "Gruvbox"
const color = { const color = {
dark0_hard: '#1d2021', dark0_hard: "#1d2021",
dark0: '#282828', dark0: "#282828",
dark0_soft: '#32302f', dark0_soft: "#32302f",
dark1: '#3c3836', dark1: "#3c3836",
dark2: '#504945', dark2: "#504945",
dark3: '#665c54', dark3: "#665c54",
dark4: '#7c6f64', dark4: "#7c6f64",
dark4_256: '#7c6f64', dark4_256: "#7c6f64",
gray_245: '#928374', gray_245: "#928374",
gray_244: '#928374', gray_244: "#928374",
light0_hard: '#f9f5d7', light0_hard: "#f9f5d7",
light0: '#fbf1c7', light0: "#fbf1c7",
light0_soft: '#f2e5bc', light0_soft: "#f2e5bc",
light1: '#ebdbb2', light1: "#ebdbb2",
light2: '#d5c4a1', light2: "#d5c4a1",
light3: '#bdae93', light3: "#bdae93",
light4: '#a89984', light4: "#a89984",
light4_256: '#a89984', light4_256: "#a89984",
bright_red: '#fb4934', bright_red: "#fb4934",
bright_green: '#b8bb26', bright_green: "#b8bb26",
bright_yellow: '#fabd2f', bright_yellow: "#fabd2f",
bright_blue: '#83a598', bright_blue: "#83a598",
bright_purple: '#d3869b', bright_purple: "#d3869b",
bright_aqua: '#8ec07c', bright_aqua: "#8ec07c",
bright_orange: '#fe8019', bright_orange: "#fe8019",
neutral_red: '#cc241d', neutral_red: "#cc241d",
neutral_green: '#98971a', neutral_green: "#98971a",
neutral_yellow: '#d79921', neutral_yellow: "#d79921",
neutral_blue: '#458588', neutral_blue: "#458588",
neutral_purple: '#b16286', neutral_purple: "#b16286",
neutral_aqua: '#689d6a', neutral_aqua: "#689d6a",
neutral_orange: '#d65d0e', neutral_orange: "#d65d0e",
faded_red: '#9d0006', faded_red: "#9d0006",
faded_green: '#79740e', faded_green: "#79740e",
faded_yellow: '#b57614', faded_yellow: "#b57614",
faded_blue: '#076678', faded_blue: "#076678",
faded_purple: '#8f3f71', faded_purple: "#8f3f71",
faded_aqua: '#427b58', faded_aqua: "#427b58",
faded_orange: '#af3a03' faded_orange: "#af3a03",
} }
interface ThemeColors { interface ThemeColors {
neutral: string[]; red: string
red: string; green: string
green: string; yellow: string
yellow: string; blue: string
blue: string; purple: string
purple: string; aqua: string
aqua: string; orange: string
orange: string; gray: string
gray: string;
} }
const darkNeutrals = [
color.dark1,
color.dark2,
color.dark3,
color.dark4,
color.light4,
color.light3,
color.light2,
color.light1,
color.light0,
]
const dark: ThemeColors = { const dark: ThemeColors = {
neutral: [
color.dark1, color.dark2, color.dark3, color.dark4,
color.light4, color.light3, color.light2, color.light1, color.light0
],
red: color.bright_red, red: color.bright_red,
green: color.bright_green, green: color.bright_green,
yellow: color.bright_yellow, yellow: color.bright_yellow,
@ -75,14 +82,22 @@ const dark: ThemeColors = {
purple: color.bright_purple, purple: color.bright_purple,
aqua: color.bright_aqua, aqua: color.bright_aqua,
orange: color.bright_orange, orange: color.bright_orange,
gray: color.light4 gray: color.light4,
} }
const lightNeutrals = [
color.light1,
color.light2,
color.light3,
color.light4,
color.dark4,
color.dark3,
color.dark2,
color.dark1,
color.dark0,
]
const light: ThemeColors = { const light: ThemeColors = {
neutral: [
color.dark0, color.dark1, color.dark2, color.dark3, color.dark4,
color.light4, color.light3, color.light2, color.light1
],
red: color.faded_red, red: color.faded_red,
green: color.faded_green, green: color.faded_green,
yellow: color.faded_yellow, yellow: color.faded_yellow,
@ -90,11 +105,19 @@ const light: ThemeColors = {
purple: color.faded_purple, purple: color.faded_purple,
aqua: color.faded_aqua, aqua: color.faded_aqua,
orange: color.faded_orange, orange: color.faded_orange,
gray: color.dark4 gray: color.dark4,
} }
const darkHardNeutral = [color.dark0_hard, ...darkNeutrals]
const darkNeutral = [color.dark0, ...darkNeutrals]
const darkSoftNeutral = [color.dark0_soft, ...darkNeutrals]
const lightHardNeutral = [color.light0_hard, ...lightNeutrals]
const lightNeutral = [color.light0, ...lightNeutrals]
const lightSoftNeutral = [color.light0_soft, ...lightNeutrals]
interface Variant { interface Variant {
name: string, name: string
appearance: "light" | "dark" appearance: "light" | "dark"
colors: ThemeColors colors: ThemeColors
} }
@ -133,47 +156,44 @@ const variant: Variant[] = [
}, },
] ]
const lightSyntax: ThemeSyntax = {
// ...
}
const darkSyntax: ThemeSyntax = {
// ...
}
const buildVariant = (variant: Variant) => { const buildVariant = (variant: Variant) => {
const { colors } = variant
const name = `Gruvbox ${variant.name}` const name = `Gruvbox ${variant.name}`
const isLight = variant.appearance === "light" const isLight = variant.appearance === "light"
let neutral: string[] = []
switch (variant.name) { switch (variant.name) {
case "Dark Hard": { case "Dark Hard": {
variant.colors.neutral.unshift(color.dark0_hard) neutral = darkHardNeutral
break break
} }
case "Dark": { case "Dark": {
variant.colors.neutral.unshift(color.dark0) neutral = darkNeutral
break break
} }
case "Dark Soft": { case "Dark Soft": {
variant.colors.neutral.unshift(color.dark0_soft) neutral = darkSoftNeutral
break break
} }
case "Light Hard": { case "Light Hard": {
variant.colors.neutral.push(color.light0_hard) neutral = lightHardNeutral
break break
} }
case "Light": { case "Light": {
variant.colors.neutral.push(color.light0) neutral = lightNeutral
break break
} }
case "Light Soft": { case "Light Soft": {
variant.colors.neutral.push(color.light0_soft) neutral = lightSoftNeutral
break break
} }
} }
const ramps = { const ramps = {
neutral: chroma.scale(variant.colors.neutral), neutral: chroma.scale(isLight ? neutral.reverse() : neutral),
red: colorRamp(chroma(variant.colors.red)), red: colorRamp(chroma(variant.colors.red)),
orange: colorRamp(chroma(variant.colors.orange)), orange: colorRamp(chroma(variant.colors.orange)),
yellow: colorRamp(chroma(variant.colors.yellow)), yellow: colorRamp(chroma(variant.colors.yellow)),
@ -184,7 +204,34 @@ const buildVariant = (variant: Variant) => {
magenta: colorRamp(chroma(variant.colors.gray)), magenta: colorRamp(chroma(variant.colors.gray)),
} }
const syntax = isLight ? lightSyntax : darkSyntax const syntax: ThemeSyntax = {
primary: { color: neutral[isLight ? 0 : 8] },
"text.literal": { color: colors.blue },
comment: { color: colors.gray },
punctuation: { color: neutral[isLight ? 1 : 7] },
"punctuation.bracket": { color: neutral[isLight ? 3 : 5] },
"punctuation.list_marker": { color: neutral[isLight ? 0 : 8] },
operator: { color: colors.aqua },
boolean: { color: colors.purple },
number: { color: colors.purple },
string: { color: colors.green },
"string.special": { color: colors.purple },
"string.special.symbol": { color: colors.aqua },
"string.regex": { color: colors.orange },
type: { color: colors.yellow },
enum: { color: colors.orange },
tag: { color: colors.aqua },
constant: { color: colors.yellow },
keyword: { color: colors.red },
function: { color: colors.green },
"function.builtin": { color: colors.red },
variable: { color: colors.blue },
property: { color: neutral[isLight ? 0 : 8] },
embedded: { color: colors.aqua },
linkText: { color: colors.aqua },
linkUri: { color: colors.purple },
title: { color: colors.green },
}
return createColorScheme(name, isLight, ramps, syntax) return createColorScheme(name, isLight, ramps, syntax)
} }
@ -202,7 +249,7 @@ export const meta: Meta = {
license: { license: {
SPDX: "MIT", // "MIT/X11" SPDX: "MIT", // "MIT/X11"
https_url: "", https_url: "",
license_checksum: "" license_checksum: "",
}, },
author: "morhetz <morhetz@gmail.com>", author: "morhetz <morhetz@gmail.com>",
url: "https://github.com/morhetz/gruvbox", url: "https://github.com/morhetz/gruvbox",