Init gruvbox theme

Nate Butler created

Change summary

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(-)

Detailed changes

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 <morhetz@gmail.com>",
+    url: "https://github.com/morhetz/gruvbox",
+}

styles/src/themes/staff/gruvbox-medium.ts 🔗

@@ -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")),
-})