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