mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-26 20:22:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Init gruvbox theme

Browse source
This commit is contained in:
Nate Butler 2023-03-01 10:16:45 -05:00
parent 2e1adb0724
commit bde0456111
8 changed files with 227 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

209
styles/src/themes/gruvbox-common.ts Normal file
View file

@ -0,0 +1,209 @@
import chroma from "chroma-js"
import { Meta, ThemeSyntax } from "./common/colorScheme"
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'
}
interface ThemeColors {
neutral: string[];
red: string;
green: string;
yellow: string;
blue: string;
purple: string;
aqua: string;
orange: string;
gray: string;
}
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,
blue: color.bright_blue,
purple: color.bright_purple,
aqua: color.bright_aqua,
orange: color.bright_orange,
gray: color.light4
}
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,
blue: color.faded_blue,
purple: color.faded_purple,
aqua: color.faded_aqua,
orange: color.faded_orange,
gray: color.dark4
}
interface Variant {
name: string,
appearance: "light" | "dark"
colors: ThemeColors
}
const variant: Variant[] = [
{
name: "Dark Hard",
appearance: "dark",
colors: dark,
},
{
name: "Dark",
appearance: "dark",
colors: dark,
},
{
name: "Dark Soft",
appearance: "dark",
colors: dark,
},
{
name: "Light Hard",
appearance: "light",
colors: light,
},
{
name: "Light",
appearance: "light",
colors: light,
},
{
name: "Light Soft",
appearance: "light",
colors: light,
},
]
const lightSyntax: ThemeSyntax = {
// ...
}
const darkSyntax: ThemeSyntax = {
// ...
}
const buildVariant = (variant: Variant) => {
const name = `Gruvbox ${variant.name}`
const isLight = variant.appearance === "light"
switch (variant.name) {
case "Dark Hard": {
variant.colors.neutral.unshift(color.dark0_hard)
break
}
case "Dark": {
variant.colors.neutral.unshift(color.dark0)
break
}
case "Dark Soft": {
variant.colors.neutral.unshift(color.dark0_soft)
break
}
case "Light Hard": {
variant.colors.neutral.push(color.light0_hard)
break
}
case "Light": {
variant.colors.neutral.push(color.light0)
break
}
case "Light Soft": {
variant.colors.neutral.push(color.light0_soft)
break
}
}
const ramps = {
neutral: chroma.scale(variant.colors.neutral),
red: colorRamp(chroma(variant.colors.red)),
orange: colorRamp(chroma(variant.colors.orange)),
yellow: colorRamp(chroma(variant.colors.yellow)),
green: colorRamp(chroma(variant.colors.green)),
cyan: colorRamp(chroma(variant.colors.aqua)),
blue: colorRamp(chroma(variant.colors.blue)),
violet: colorRamp(chroma(variant.colors.purple)),
magenta: colorRamp(chroma(variant.colors.gray)),
}
const syntax = isLight ? lightSyntax : darkSyntax
return createColorScheme(name, isLight, ramps, syntax)
}
// Variants
export const darkHard = buildVariant(variant[0])
export const darkDefault = buildVariant(variant[1])
export const darkSoft = buildVariant(variant[2])
export const lightHard = buildVariant(variant[3])
export const lightDefault = buildVariant(variant[4])
export const lightSoft = buildVariant(variant[5])
export const meta: Meta = {
name,
license: {
SPDX: "MIT", // "MIT/X11"
https_url: "",
license_checksum: ""
},
author: "morhetz <morhetz@gmail.com>",
url: "https://github.com/morhetz/gruvbox",
}

3
styles/src/themes/gruvbox-dark-hard.ts Normal file
View file

@ -0,0 +1,3 @@
import { darkHard as dark, meta } from "./gruvbox-common";
export { dark, meta }

3
styles/src/themes/gruvbox-dark-soft.ts Normal file
View file

@ -0,0 +1,3 @@
import { darkSoft as dark, meta } from "./gruvbox-common";
export { dark, meta }

3
styles/src/themes/gruvbox-dark.ts Normal file
View file

@ -0,0 +1,3 @@
import { darkDefault as dark, meta } from "./gruvbox-common";
export { dark, meta }

3
styles/src/themes/gruvbox-light-hard copy.ts Normal file
View file

@ -0,0 +1,3 @@
import { lightHard as light, meta } from "./gruvbox-common";
export { light, meta }

3
styles/src/themes/gruvbox-light-soft.ts Normal file
View file

@ -0,0 +1,3 @@
import { lightSoft as light, meta } from "./gruvbox-common";
export { light, meta }

3
styles/src/themes/gruvbox-light.ts Normal file
View file

@ -0,0 +1,3 @@
import { lightDefault as light, meta } from "./gruvbox-common";
export { light, meta }

138
styles/src/themes/staff/gruvbox-medium.ts
View file

@ -1,138 +0,0 @@
import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Gruvbox"
const author = "Dawid Kurek (dawikur@gmail.com)"
const url = "https://github.com/morhetz/gruvbox"
const license = {
type: "MIT/X11",
url: "https://en.wikipedia.org/wiki/MIT_License",
}
export const dark = createColorScheme(`${name} Dark Medium`, false, {
neutral: chroma.scale([
"#282828",
"#3c3836",
"#504945",
"#665c54",
"#7C6F64",
"#928374",
"#A89984",
"#BDAE93",
"#D5C4A1",
"#EBDBB2",
"#FBF1C7",
]),
red: chroma.scale([
"#4D150F",
"#7D241A",
"#A31C17",
"#CC241D",
"#C83A29",
"#FB4934",
"#F06D61",
"#E6928E",
"#FFFFFF",
]),
orange: chroma.scale([
"#462307",
"#7F400C",
"#AB4A0B",
"#D65D0E",
"#CB6614",
"#FE8019",
"#F49750",
"#EBAE87",
"#FFFFFF",
]),
yellow: chroma.scale([
"#3D2C05",
"#7D5E17",
"#AC7A1A",
"#D79921",
"#E8AB28",
"#FABD2F",
"#F2C45F",
"#EBCC90",
"#FFFFFF",
]),
green: chroma.scale([
"#32330A",
"#5C5D13",
"#797814",
"#98971A",
"#93951E",
"#B8BB26",
"#C2C359",
"#CCCB8D",
"#FFFFFF",
]),
cyan: chroma.scale([
"#283D20",
"#47603E",
"#537D54",
"#689D6A",
"#719963",
"#8EC07C",
"#A1C798",
"#B4CEB5",
"#FFFFFF",
]),
blue: chroma.scale([
"#103738",
"#214C4D",
"#376A6C",
"#458588",
"#688479",
"#83A598",
"#92B3AE",
"#A2C2C4",
"#FFFFFF",
]),
violet: chroma.scale([
"#392228",
"#69434D",
"#8D4E6B",
"#B16286",
"#A86B7C",
"#D3869B",
"#D59BAF",
"#D8B1C3",
"#FFFFFF",
]),
magenta: chroma.scale([
"#48402C",
"#756D59",
"#867A69",
"#A89984",
"#BCAF8E",
"#EBDBB2",
"#DFD3BA",
"#D4CCC2",
"#FFFFFF",
]),
})
export const light = createColorScheme(`${name} Light Medium`, true, {
neutral: chroma.scale([
"#282828",
"#3c3836",
"#504945",
"#665c54",
"#7C6F64",
"#928374",
"#A89984",
"#BDAE93",
"#D5C4A1",
"#EBDBB2",
"#FBF1C7",
]),
red: colorRamp(chroma("#9d0006")),
orange: colorRamp(chroma("#af3a03")),
yellow: colorRamp(chroma("#b57614")),
green: colorRamp(chroma("#79740e")),
cyan: colorRamp(chroma("#427b58")),
blue: colorRamp(chroma("#076678")),
violet: colorRamp(chroma("#8f3f71")),
magenta: colorRamp(chroma("#d65d0e")),
})