From bde0456111686e46288cab652a073184e4baf463 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 1 Mar 2023 10:16:45 -0500 Subject: [PATCH] Init gruvbox theme --- styles/src/themes/gruvbox-common.ts | 209 +++++++++++++++++++ styles/src/themes/gruvbox-dark-hard.ts | 3 + styles/src/themes/gruvbox-dark-soft.ts | 3 + styles/src/themes/gruvbox-dark.ts | 3 + styles/src/themes/gruvbox-light-hard copy.ts | 3 + styles/src/themes/gruvbox-light-soft.ts | 3 + styles/src/themes/gruvbox-light.ts | 3 + styles/src/themes/staff/gruvbox-medium.ts | 138 ------------ 8 files changed, 227 insertions(+), 138 deletions(-) create mode 100644 styles/src/themes/gruvbox-common.ts create mode 100644 styles/src/themes/gruvbox-dark-hard.ts create mode 100644 styles/src/themes/gruvbox-dark-soft.ts create mode 100644 styles/src/themes/gruvbox-dark.ts create mode 100644 styles/src/themes/gruvbox-light-hard copy.ts create mode 100644 styles/src/themes/gruvbox-light-soft.ts create mode 100644 styles/src/themes/gruvbox-light.ts delete mode 100644 styles/src/themes/staff/gruvbox-medium.ts diff --git a/styles/src/themes/gruvbox-common.ts b/styles/src/themes/gruvbox-common.ts new file mode 100644 index 0000000000..9059d0e6ef --- /dev/null +++ b/styles/src/themes/gruvbox-common.ts @@ -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 ", + url: "https://github.com/morhetz/gruvbox", +} diff --git a/styles/src/themes/gruvbox-dark-hard.ts b/styles/src/themes/gruvbox-dark-hard.ts new file mode 100644 index 0000000000..c734555250 --- /dev/null +++ b/styles/src/themes/gruvbox-dark-hard.ts @@ -0,0 +1,3 @@ +import { darkHard as dark, meta } from "./gruvbox-common"; + +export { dark, meta } \ No newline at end of file diff --git a/styles/src/themes/gruvbox-dark-soft.ts b/styles/src/themes/gruvbox-dark-soft.ts new file mode 100644 index 0000000000..6f43c3d69f --- /dev/null +++ b/styles/src/themes/gruvbox-dark-soft.ts @@ -0,0 +1,3 @@ +import { darkSoft as dark, meta } from "./gruvbox-common"; + +export { dark, meta } \ No newline at end of file diff --git a/styles/src/themes/gruvbox-dark.ts b/styles/src/themes/gruvbox-dark.ts new file mode 100644 index 0000000000..ded3381517 --- /dev/null +++ b/styles/src/themes/gruvbox-dark.ts @@ -0,0 +1,3 @@ +import { darkDefault as dark, meta } from "./gruvbox-common"; + +export { dark, meta } \ No newline at end of file diff --git a/styles/src/themes/gruvbox-light-hard copy.ts b/styles/src/themes/gruvbox-light-hard copy.ts new file mode 100644 index 0000000000..4925eb74ee --- /dev/null +++ b/styles/src/themes/gruvbox-light-hard copy.ts @@ -0,0 +1,3 @@ +import { lightHard as light, meta } from "./gruvbox-common"; + +export { light, meta } \ No newline at end of file diff --git a/styles/src/themes/gruvbox-light-soft.ts b/styles/src/themes/gruvbox-light-soft.ts new file mode 100644 index 0000000000..1a38bb78f1 --- /dev/null +++ b/styles/src/themes/gruvbox-light-soft.ts @@ -0,0 +1,3 @@ +import { lightSoft as light, meta } from "./gruvbox-common"; + +export { light, meta } \ No newline at end of file diff --git a/styles/src/themes/gruvbox-light.ts b/styles/src/themes/gruvbox-light.ts new file mode 100644 index 0000000000..acb50a8d31 --- /dev/null +++ b/styles/src/themes/gruvbox-light.ts @@ -0,0 +1,3 @@ +import { lightDefault as light, meta } from "./gruvbox-common"; + +export { light, meta } \ No newline at end of file diff --git a/styles/src/themes/staff/gruvbox-medium.ts b/styles/src/themes/staff/gruvbox-medium.ts deleted file mode 100644 index 9e259bebc6..0000000000 --- a/styles/src/themes/staff/gruvbox-medium.ts +++ /dev/null @@ -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")), -})